新人と先輩の会話形式で理解しよう

新人

「Spring MVCって何ですか？どうやって簡単にWebページを作成できるんでしょうか？」

先輩

「Spring MVCは、JavaでWebアプリケーションを作るための便利なフレームワークだよ。初心者でも簡単にWebページを作成できる仕組みが整っているんだ。」

新人

「へえ！それは便利そうですね。まずは何から始めればいいですか？」

先輩

「まずは開発環境を準備しよう。Pleiadesをインストールして、Gradleを使ったプロジェクトを作成するところから始めるといいよ！」

1. Spring MVCとは？

Spring MVCは、JavaでWebアプリケーションを簡単に作成できるフレームワークです。Model-View-Controller（MVC）という設計パターンに基づいており、コードを整理しやすく、保守性の高いアプリケーションを作れます。

MVCパターンの簡単な説明:

Model（モデル）: データを扱う部分（データベースとの連携など）
View（ビュー）: ユーザーに表示する画面（HTMLファイルなど）
Controller（コントローラ）: ユーザーの操作を受け取り、処理を行う部分

例えば、ユーザーがWebページで「表示」ボタンをクリックすると、コントローラがそのリクエストを受け取り、必要なデータをモデルから取得し、ビューに結果を表示させます。

Spring MVCを使うことで、これらの処理が簡単にでき、初心者でも短時間でWebページ作成が可能です。

2. 開発環境の準備（Pleiadesのインストール方法とセットアップ）

Spring MVCアプリを作成するために、まずは開発環境を整えましょう。ここでは、Pleiadesという日本語対応の開発ツールを使用します。Pleiadesは初心者でも扱いやすく、インストールも簡単です。

2.1 Pleiadesとは？

Pleiadesは、Eclipseに日本語化パックや便利なプラグインを追加した統合開発環境(IDE)です。JavaやSpring MVCの開発に必要な機能が揃っているため、初心者にとって使いやすいのが特徴です。

2.2 インストール手順

Pleiadesの公式サイトにアクセスします。
「Pleiades All in One」のダウンロードページで、「Java」バージョンを選びます。
ダウンロード後、ZIPファイルを解凍し、任意の場所に保存します。
フォルダ内のeclipse.exeをダブルクリックして起動します。

2.3 環境設定

Pleiadesを初めて起動した際に以下の設定を行いましょう。

ワークスペース選択: プロジェクトを保存するフォルダを選択
Javaのバージョン確認: 推奨はJava 17
テーマやフォントの変更: 作業しやすい表示設定を選べます（任意）

3. プロジェクト作成（PleiadesでGradleを使ったプロジェクト作成と依存関係の追加）

開発環境の準備が完了したら、次はSpring MVCアプリケーション用のプロジェクトを作成します。ここでは、ビルドツールとしてGradleを使用します。Pleiadesでは、GUI操作で簡単にプロジェクトを作成し、依存関係を追加できます。

3.1 プロジェクト作成手順

Pleiadesを開き、上部メニューから「ファイル」→「新規」→「Gradleプロジェクト」を選択します。
プロジェクト名にspring-mvc-sampleと入力し、次へ進みます。
Gradleのバージョンは自動選択されるため、そのまま「完了」をクリックします。
プロジェクトが作成されると、以下のような構成になります。


spring-mvc-sample/
├─ build.gradle
├─ settings.gradle
├─ src/
│  ├─ main/
│  │  ├─ java/
│  │  │  └─ com/example/controller/
│  │  │      └─ HomeController.java
│  │  ├─ resources/
│  │  │  └─ application.properties
│  │  └─ webapp/
│  │      └─ WEB-INF/
│  │          └─ views/
│  │              └─ home.html
│  └─ test/

3.2 依存関係の追加

Spring MVCを使用するには、必要なライブラリをGradleに追加する必要があります。Pleiadesでは次の手順で簡単に設定できます。

プロジェクトを右クリックし、「Gradle」→「依存関係の管理」を選択します。
表示される画面で「Spring Web MVC」を検索して選択します。
必要な依存関係にチェックを入れて「追加」をクリックします。

3.3 build.gradleの内容確認

依存関係を追加すると、build.gradleファイルが自動的に更新されます。以下のような内容になっているか確認してください。


plugins {
    id 'java'
    id 'war'
}

repositories {
    mavenCentral()
}

dependencies {
    implementation 'org.springframework:spring-webmvc:5.3.30'
    providedCompile 'javax.servlet:javax.servlet-api:4.0.1'
}

この設定により、Spring MVCのライブラリがプロジェクトに追加され、簡単なWebページ作成ができるようになります。

4. コントローラの作成（@Controllerを使った基本的な書き方）

プロジェクトの作成と依存関係の追加が完了したら、次はSpring MVCアプリケーションで最も重要な部分であるコントローラを作成します。コントローラは、ユーザーからのリクエストを受け取り、どのビューを表示するかを決める役割を持っています。

ここでは、@Controllerアノテーションを使用し、簡単なWebページを表示する方法を学びます。なお、@RestControllerは今回使用しません。

4.1 コントローラクラスの作成手順

src/main/java/com/example/controller/ディレクトリにHomeController.javaファイルを作成します。
以下のコードをコピーしてHomeController.javaに貼り付けます。


package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String home() {
        return "home";
    }
}

上記のコードの解説:

@Controller: このクラスがSpring MVCのコントローラであることを示します。
@GetMapping("/"): ルートURL（/）へのGETリクエストを処理します。
home()メソッド: "home"という名前のビュー（後ほど作成するHTMLファイル）を返します。

この設定により、ユーザーがブラウザでhttp://localhost:8080/にアクセスすると、home.htmlビューが表示されます。

5. ビューの作成（HTMLとThymeleafで簡単なWebページ作成）

コントローラが用意できたら、次はユーザーに表示される画面（ビュー）を作成します。Spring MVCでは、ビューとしてHTMLファイルを使用し、テンプレートエンジンとしてThymeleaf（タイムリーフ）を利用します。

5.1 ビューファイルの作成手順

src/main/webapp/WEB-INF/views/ディレクトリを作成します（まだ存在しない場合）。
その中にhome.htmlというファイルを作成します。
以下のHTMLコードをhome.htmlに貼り付けて保存します。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Spring MVC ホームページ</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body class="container mt-5">
    <h1 class="text-primary">ようこそ！Spring MVCアプリへ</h1>
    <p>これは、<strong>Spring MVC</strong>と<strong>@Controller</strong>を使って表示されたWebページです。</p>
    <a href="/about" class="btn btn-success mt-3">別のページへ移動</a>
</body>
</html>

このHTMLファイルのポイント:

DOCTYPE宣言でHTML5を使用。
Bootstrap 5を読み込んでデザインを整えています。
タイトルにはSpring MVC ホームページと記載し、SEOを意識。
ようこそ！Spring MVCアプリへというメッセージで初心者にも親しみやすく。
aboutページへのリンクボタンを設置（後で作成します）。

6. コントローラとビューの連携（URLマッピングの設定と動作確認）

ここまでで、コントローラとビューの作成が完了しました。次は、それらが正しく連携しているか確認します。Spring MVCでは、URLマッピングにより、コントローラのメソッドとビューを結びつけます。

6.1 コントローラに新しいマッピングを追加

HomeController.javaに、もう一つのメソッドを追加して、/aboutページを表示できるようにしましょう。


@GetMapping("/about")
public String about() {
    return "about";
}

このメソッドにより、ブラウザで/aboutにアクセスするとabout.htmlが表示されます。

6.2 about.htmlの作成

WEB-INF/views/ディレクトリにabout.htmlを作成します。
以下のHTMLコードを貼り付けてください。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>このサイトについて - Spring MVCアプリ</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
</head>
<body class="container mt-5">
    <h1 class="text-secondary">このサイトについて</h1>
    <p>このページは、Spring MVCとThymeleafを使って作成されました。</p>
    <a href="/" class="btn btn-primary mt-3">ホームへ戻る</a>
</body>
</html>

6.3 アプリケーションの実行

Pleiadesでプロジェクトを右クリックし、「実行」→「サーバーで実行」を選択します。
ブラウザで以下のURLにアクセスして確認してください。


http://localhost:8080/

表示される結果:


ようこそ！Spring MVCアプリへ
これは、Spring MVCと@Controllerを使って表示されたWebページです。

さらに、リンクボタンをクリックすると以下のURLに移動します。


http://localhost:8080/about

表示される結果:


このサイトについて
このページは、Spring MVCとThymeleafを使って作成されました。

6.4 よくあるエラーと対処法

404エラー（ページが見つかりません）
原因: コントローラのURLマッピングが正しく設定されていないか、ビュー名が間違っている。

解決策: @GetMappingのURLとHTMLファイル名が一致しているか確認してください。
Whitelabel Error Page
原因: ビューファイルが存在しない場合に発生。

解決策: WEB-INF/views/内にHTMLファイルが正しく配置されているか確認してください。

7. アプリケーションの実行と結果確認（Pleiadesでの実行手順とブラウザでの表示確認）

ここまでで、Spring MVCアプリケーションの基本的な構成が整いました。それでは実際にアプリケーションを実行して、正しく動作するか確認しましょう。

7.1 Pleiadesでアプリケーションを実行する手順

Pleiadesのプロジェクトエクスプローラーで、作成したプロジェクトを右クリックします。
メニューから「実行」→「サーバーで実行」を選択します。
初めて実行する場合は、サーバー選択画面が表示されるので、Tomcatを選びます。
Tomcatのパスを設定していない場合は、公式サイトからTomcatをダウンロードし、Pleiadesに設定してください。
設定後、「完了」をクリックすると、コンソールにアプリケーションの起動ログが表示されます。

7.2 ブラウザでの表示確認

アプリケーションが正常に起動したら、以下のURLをブラウザで開いて動作を確認してください。


http://localhost:8080/

表示される結果:


ようこそ！Spring MVCアプリへ
これは、Spring MVCと@Controllerを使って表示されたWebページです。

次に、ページ内の「別のページへ移動」ボタンをクリックすると、以下のURLに遷移します。


http://localhost:8080/about

表示される結果:


このサイトについて
このページは、Spring MVCとThymeleafを使って作成されました。

このように、正しくコントローラとビューが連携していることを確認できます。

8. よくあるエラーとその対処法（初心者がつまずきやすいポイントの解説）

アプリケーションを実行していると、初心者がよく遭遇するエラーがあります。ここでは、代表的なエラーとその対処法を解説します。

8.1 404エラー（ページが見つかりません）

原因: URLが間違っているか、コントローラのマッピングが正しく設定されていない場合に発生します。

解決策:

@GetMappingのURLとブラウザで入力したURLが一致しているか確認してください。
ビュー名（HTMLファイル名）が正しく、WEB-INF/views/ディレクトリ内に存在するか確認してください。
ファイル名の大文字・小文字に注意してください。

8.2 Whitelabel Error Page

原因: Spring MVCがビューを見つけられない場合に表示されます。

解決策:

コントローラで返しているビュー名とHTMLファイル名が一致しているか確認してください。
application.propertiesで以下の設定を追加し、正しいテンプレートパスを指定します。


spring.mvc.view.prefix=/WEB-INF/views/
spring.mvc.view.suffix=.html

8.3 サーバー起動エラー（ポート競合）

原因: ポート番号8080が他のアプリケーションで使用されている場合に発生します。

解決策: application.propertiesに以下を追加してポートを変更します。


server.port=8081

8.4 依存関係に関するエラー

原因: Gradleの依存関係が正しくインストールされていない場合に発生します。

解決策:

ターミナルでgradle buildを実行して依存関係を再インストールしてください。
PleiadesのGradleメニューから「プロジェクトのリフレッシュ」を実行します。

9. 次に学ぶべき内容（Spring MVCの応用編やフォームの処理方法などの提案）

今回の記事では、基本的なSpring MVCアプリケーションの作成方法を学びました。しかし、実際のWebアプリケーションでは、さらに多くの機能が必要になります。次に学ぶべき内容をいくつか紹介します。

9.1 フォーム入力とデータ送信

ユーザーから情報を入力してもらい、サーバー側で処理する方法を学ぶことが重要です。Spring MVCでは@PostMappingを使用して、フォームから送信されたデータを受け取れます。

9.2 モデルデータの受け渡し

Modelオブジェクトを使って、コントローラからビューへデータを渡す方法を学びましょう。これにより、動的なWebページを作成できるようになります。

9.3 バリデーションの実装

フォームに入力された値を検証する方法を学ぶと、ユーザーからの不正なデータ入力を防げます。

9.4 セッション管理と認証

ユーザーのログイン状態を保持する方法や、アクセス制御を導入する方法も実用的です。

9.5 データベースとの連携

Spring Data JPAを使って、データベースとの接続やデータ保存方法を学ぶと、より実用的なアプリケーションを開発できます。

このように、Spring MVCは多機能で拡張性が高いため、段階的に学んでいくことが大切です。次回は、フォーム処理とバリデーションの実装方法について詳しく解説していきます。

まとめ

Spring MVCで最初のWebアプリを作って理解できたこと

この記事では、Spring MVCを使った最初のWebアプリケーション作成について、開発環境の準備から実行確認までを一通り学びました。 Spring MVCは、JavaでWebアプリケーションを開発するうえで非常に定番となっているフレームワークであり、MVCモデルに基づいた構造を自然に身につけられる点が大きな特徴です。コントローラ、ビュー、URLマッピングという基本要素を理解することで、Webアプリの仕組みが明確になり、画面表示の流れを整理して考えられるようになります。

特に今回の内容では、@Controllerアノテーションを使った基本的なコントローラの作成方法、@GetMappingによるURLと処理の結び付け、そしてHTMLファイルをビューとして表示するまでの一連の流れを確認しました。 Spring MVCでは、コントローラが返す文字列とHTMLファイル名が対応している点を理解することが重要であり、この仕組みを押さえることで、なぜ画面が表示されるのか、なぜエラーが発生するのかを論理的に考えられるようになります。

プロジェクト構成とGradle設定の理解

Pleiadesを使ったGradleプロジェクトの作成では、Spring MVCアプリの基本構成も確認しました。 src/main/javaにはコントローラなどのJavaクラスを配置し、src/main/webapp/WEB-INF/viewsにはHTMLファイルを配置するという構造は、 Spring MVCにおける基本形となります。このディレクトリ構成を理解しておくことで、ファイルの置き場所に迷うことが少なくなり、後から機能を追加する際にもスムーズに作業できます。

また、build.gradleに依存関係を追加することで、Spring MVCが利用できるようになる点も重要な学習ポイントでした。 Gradleは依存関係管理を自動化してくれるため、ライブラリの追加や更新が簡単に行えます。 Spring Web MVCやServlet APIといった基本的な依存関係がどのような役割を持つのかを意識しながら設定を見ることで、フレームワークの裏側への理解も深まります。

コントローラとビュー連携のサンプル確認

以下は、この記事で扱ったSpring MVCの基本的なコントローラ例です。 URLに応じて異なるHTMLページを表示する仕組みは、Webアプリ開発の基礎となる部分です。


package com.example.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HomeController {

    @GetMapping("/")
    public String home() {
        return "home";
    }

    @GetMapping("/about")
    public String about() {
        return "about";
    }
}

このように、URLとメソッドを紐付けるだけで画面遷移が実現できる点は、Spring MVCの大きな魅力です。コントローラの役割を明確にし、画面表示の責務をHTML側に任せることで、コードの見通しが良くなります。

エラー対応を通して理解が深まる

404エラーやWhitelabel Error Pageといったエラーは、初心者が必ず一度は遭遇します。しかし、これらのエラーはSpring MVCの仕組みを理解するための良いきっかけでもあります。 URLマッピング、ビュー名、ファイル配置場所を一つずつ確認することで、問題の原因を切り分ける力が身につきます。エラーを恐れず、なぜ起きたのかを考えることが、Webアプリ開発ではとても大切です。

先生と生徒の振り返り会話

生徒「Spring MVCって難しそうだと思っていましたが、実際に作ってみると流れが分かりやすかったです。」

先生「最初はコントローラとビューの関係を理解することが大切ですね。URLから画面が表示されるまでの流れを説明できますか？」

生徒「はい。ブラウザからリクエストが来ると、@GetMappingで指定したメソッドが呼ばれて、戻り値の文字列に対応するHTMLが表示されます。」

先生「その通りです。そこが分かれば、Spring MVCの基本はしっかり押さえられています。」

生徒「エラーが出たときも、URLやHTMLの場所を確認するようになりました。」

先生「とても良い成長ですね。次はフォーム処理やデータの受け渡しを学ぶと、より実践的なWebアプリが作れるようになりますよ。」

今回学んだSpring MVCの基礎は、今後のJava Web開発の土台になります。一つ一つの仕組みを丁寧に理解しながら、少しずつ機能を追加していくことで、実務でも通用するWebアプリケーション開発スキルが身についていきます。

最初のSpring MVCアプリ（簡単なWebページの作成）

1. Spring MVCとは？

2. 開発環境の準備（Pleiadesのインストール方法とセットアップ）

2.1 Pleiadesとは？

2.2 インストール手順

2.3 環境設定

3. プロジェクト作成（PleiadesでGradleを使ったプロジェクト作成と依存関係の追加）

3.1 プロジェクト作成手順

3.2 依存関係の追加

3.3 build.gradleの内容確認

4. コントローラの作成（@Controllerを使った基本的な書き方）

4.1 コントローラクラスの作成手順

5. ビューの作成（HTMLとThymeleafで簡単なWebページ作成）

5.1 ビューファイルの作成手順

6. コントローラとビューの連携（URLマッピングの設定と動作確認）

6.1 コントローラに新しいマッピングを追加

6.2 about.htmlの作成

6.3 アプリケーションの実行

6.4 よくあるエラーと対処法

7. アプリケーションの実行と結果確認（Pleiadesでの実行手順とブラウザでの表示確認）

7.1 Pleiadesでアプリケーションを実行する手順

7.2 ブラウザでの表示確認

8. よくあるエラーとその対処法（初心者がつまずきやすいポイントの解説）

8.1 404エラー（ページが見つかりません）

8.2 Whitelabel Error Page

8.3 サーバー起動エラー（ポート競合）

8.4 依存関係に関するエラー

9. 次に学ぶべき内容（Spring MVCの応用編やフォームの処理方法などの提案）

9.1 フォーム入力とデータ送信

9.2 モデルデータの受け渡し

9.3 バリデーションの実装

9.4 セッション管理と認証

9.5 データベースとの連携

まとめ

Spring MVCで最初のWebアプリを作って理解できたこと

プロジェクト構成とGradle設定の理解

コントローラとビュー連携のサンプル確認

エラー対応を通して理解が深まる

関連記事: