Spring Bootでの@GetMappingと@PostMappingの基本を完全解説!初心者でも理解できる使い方
新人
「Spring BootでWebページを作りたいんですが、@GetMappingや@PostMappingって何に使うんですか?」
先輩
「@GetMappingはWebページを表示するときに、@PostMappingはフォームから送信されたデータを受け取るときに使うんだ。どちらもWebアプリ開発ではよく使うから、覚えておくと便利だよ!」
新人
「なるほど!具体的な使い方を教えてください!」
先輩
「それじゃあ、順番に説明していこう!」
1. @GetMappingとは?
@GetMappingは、Webページを表示するときに使用するSpring Bootのアノテーションです。ブラウザからのアクセスが「GETリクエスト」と呼ばれるもので、ページの読み込みやリンクのクリック時に自動的に使われます。たとえば、http://localhost:8080/helloにアクセスすると、指定したメソッドが実行されてHTMLページを表示します。
このアノテーションを使うと、URLと処理を簡単に関連付けることができるため、初心者でも理解しやすく、Webアプリケーションの作成がスムーズに進みます。
■ @GetMappingの基本的な使用例
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class HelloController {
@GetMapping("/hello")
public String hello() {
return "hello"; // resources/templates/hello.html を表示
}
}
コードのポイント
@Controller:このクラスがWebページを表示する役割を持つことを示します。@GetMapping("/hello"):/helloというURLにアクセスするとhello()メソッドが実行されます。return "hello";:resources/templates/hello.htmlファイルをブラウザに表示します。
上記のコードを実行後、ブラウザでhttp://localhost:8080/helloにアクセスすると、hello.htmlが表示されます。これが基本的な@GetMappingの使い方です。
戻り値は、ファイル名のhelloを指定しますが、拡張子の.htmlは省略します。
2. @PostMappingとは?
@PostMappingは、ユーザーがフォームに入力した情報をサーバーに送信するときに使用されます。この送信は「POSTリクエスト」と呼ばれ、データの登録や更新などに使われます。特に、ユーザーがログインフォームや検索フォームを送信したときに、そのデータを受け取って処理する際に便利です。
■ @PostMappingの基本的な使用例
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.ui.Model;
@Controller
public class FormController {
@PostMapping("/submit")
public String submit(@RequestParam("name") String name, Model model) {
model.addAttribute("userName", name);
return "result"; // resources/templates/result.html を表示
}
}
コードのポイント
@PostMapping("/submit"):/submitへのPOSTリクエストを受け付けます。@RequestParam("name"):フォームから送信されたnameパラメータを受け取ります。model.addAttribute("userName", name);:受け取った名前をHTMLに渡して表示させます。return "result";:resources/templates/result.htmlが表示されます。
■ フォームのHTML例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>名前入力フォーム</title>
</head>
<body>
<h1>名前を入力してください</h1>
<form action="/submit" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name" required>
<button type="submit">送信</button>
</form>
</body>
</html>
このフォームから名前を送信すると、/submitエンドポイントが呼び出され、入力された名前が次のように表示されます。
■ 実行結果
こんにちは、山田さん!
■ Pleiadesでの開発手順
Pleiadesを使えば、簡単にSpring Bootプロジェクトを作成できます。ここでは、@GetMappingと@PostMappingを使った基本的なWebアプリの作り方を説明します。
1. プロジェクト作成
- Pleiadesを起動して「新規プロジェクト作成」を選択します。
- 「Spring Starter Project」をクリックします。
- プロジェクト名やパッケージ名を入力します。
- 依存関係の選択画面で以下にチェックを入れます:
- Spring Web(Web開発に必要)
- Thymeleaf(HTMLテンプレートエンジン)
- 「完了」をクリックしてプロジェクトを作成します。
2. アプリケーションの実行
- プロジェクト内の
DemoApplication.javaを右クリックします。 - 「Spring Boot アプリケーションの実行」を選択します。
- ブラウザで
http://localhost:8080/helloにアクセスして確認します。
これで、簡単なWebページ表示とフォーム送信の基本が学べました!
3. @GetMappingを使った基本的なルーティング方法
@GetMappingは、特定のURLにアクセスした際に処理を実行し、HTMLページを返すときに使います。URLと処理を結びつけるこの仕組みをルーティングと呼びます。Spring Bootでは、簡単にルーティングが設定できるので初心者でも理解しやすいです。
ルーティングはWebアプリケーション開発において、どのページを表示するかを決める重要な機能です。正しいURL設定をすることで、ユーザーは目的のページにスムーズにアクセスできます。
■ @GetMappingのルーティング例
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class PageController {
@GetMapping("/")
public String home() {
return "home"; // resources/templates/home.html を表示
}
@GetMapping("/about")
public String about() {
return "about"; // resources/templates/about.html を表示
}
@GetMapping("/contact")
public String contact() {
return "contact"; // resources/templates/contact.html を表示
}
}
コードのポイント
@GetMapping("/"):トップページにアクセスするとhome.htmlを表示します。@GetMapping("/about"):/aboutにアクセスするとabout.htmlを表示します。@GetMapping("/contact"):/contactにアクセスするとcontact.htmlを表示します。
例えば、ブラウザでhttp://localhost:8080/contactにアクセスすると、contact.htmlが表示されます。このように、URLとHTMLを簡単に結びつけることができます。
4. @PostMappingを使った基本的なルーティング方法
@PostMappingは、フォームデータを受け取って処理を行うときに使います。ユーザーがフォームに入力し、「送信」ボタンをクリックすると、そのデータがサーバーに送信され、@PostMappingで受け取ります。
データ登録や検索機能を実装する際に欠かせないアノテーションです。初心者でも、この基本を押さえることで実用的なアプリケーションが作れるようになります。
■ @PostMappingのルーティング例
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.ui.Model;
@Controller
public class UserController {
@PostMapping("/login")
public String login(@RequestParam("username") String username,
@RequestParam("password") String password,
Model model) {
if ("admin".equals(username) && "password".equals(password)) {
model.addAttribute("message", "ログイン成功!");
} else {
model.addAttribute("message", "ユーザー名またはパスワードが間違っています。");
}
return "loginResult"; // resources/templates/loginResult.html を表示
}
}
コードのポイント
@PostMapping("/login"):/loginへのPOSTリクエストを処理します。@RequestParam:フォームから送信されたusernameとpasswordを受け取ります。model.addAttribute("message", ...):ログイン結果メッセージをHTMLに表示します。
このコードは、ログインフォームから送信されたユーザー名とパスワードをチェックし、結果を表示します。
5. 実際のコード例とその解説
ここでは、@GetMappingで表示したフォームと@PostMappingで処理する、実際のコード例を紹介します。初心者でもすぐに動かせる内容になっています。
■ フォーム画面のHTMLコード(form.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ログインフォーム</title>
</head>
<body>
<h1>ログインしてください</h1>
<form action="/login" method="post">
<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" required>
<br><br>
<label for="password">パスワード:</label>
<input type="password" id="password" name="password" required>
<br><br>
<button type="submit">ログイン</button>
</form>
</body>
</html>
■ 結果表示画面のHTMLコード(loginResult.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ログイン結果</title>
</head>
<body>
<h1>結果</h1>
<p th:text="${message}"></p>
<a href="/loginForm">戻る</a>
</body>
</html>
■ コントローラーコード
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.ui.Model;
@Controller
public class LoginController {
@GetMapping("/loginForm")
public String showForm() {
return "form"; // フォーム画面を表示
}
@PostMapping("/login")
public String login(@RequestParam("username") String username,
@RequestParam("password") String password,
Model model) {
if ("user".equals(username) && "1234".equals(password)) {
model.addAttribute("message", "ログインに成功しました!");
} else {
model.addAttribute("message", "ユーザー名またはパスワードが間違っています。");
}
return "loginResult"; // 結果画面を表示
}
}
コードの説明
@GetMapping("/loginForm"):フォーム画面を表示します。@PostMapping("/login"):フォームの入力を受け取り、ログイン処理を行います。model.addAttribute("message", ...):結果メッセージを画面に表示します。
■ 実行手順(Pleiades使用)
- Pleiadesでプロジェクトを右クリックし、「Spring Boot アプリケーションの実行」を選択。
- ブラウザで
http://localhost:8080/loginFormにアクセス。 - フォームに「user」「1234」を入力し、「ログイン」ボタンをクリック。
- 成功時は「ログインに成功しました!」、失敗時はエラーメッセージが表示されます。
■ 実行結果(成功時)
ログインに成功しました!
■ 実行結果(失敗時)
ユーザー名またはパスワードが間違っています。
このように、@GetMappingでフォームを表示し、@PostMappingで入力データを処理する流れを理解することで、実用的なWebアプリケーションが作れるようになります。初心者の方も、実際にコードを書きながら動かすことで理解が深まるでしょう。
6. 実践!簡単なWebアプリケーションの作成手順
ここからは、Pleiadesを使用して実際に簡単なWebアプリケーションを作成する手順を詳しく解説します。このアプリケーションでは、ユーザーが名前を入力して送信すると、入力内容を表示するシンプルな機能を実装します。
■ 開発環境の準備
- Pleiadesのインストール:
- Pleiades公式サイトから最新版をダウンロードしてインストールします。
- Pleiades All in Oneパッケージを選ぶと、Eclipseと一緒に必要なツールが含まれているため便利です。
- Pleiadesの起動:
- Pleiadesを起動し、ワークスペースの場所を指定します。
- 初回起動時は日本語化が適用され、操作がわかりやすくなります。
■ プロジェクトの作成
- Pleiadesで「ファイル > 新規 > Spring スタータープロジェクト」を選択します。
- プロジェクト名を入力(例:
simple-web-app)。 - 依存関係で以下にチェック:
- Spring Web:Webアプリケーション開発に必要。
- Thymeleaf:HTMLテンプレートを使用するため。
- 「完了」をクリックし、プロジェクトが自動生成されるのを待ちます。
■ コントローラクラスの作成
package com.example.simplewebapp.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class GreetingController {
@GetMapping("/form")
public String showForm() {
return "form"; // resources/templates/form.html を表示
}
@PostMapping("/greet")
public String greet(@RequestParam("name") String name, Model model) {
model.addAttribute("message", name + "さん、こんにちは!");
return "result"; // resources/templates/result.html を表示
}
}
■ HTMLファイルの作成
form.html(入力フォーム)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>名前入力フォーム</title>
</head>
<body>
<h1>あなたの名前を入力してください</h1>
<form action="/greet" method="post">
<label for="name">名前:</label>
<input type="text" id="name" name="name" required>
<button type="submit">送信</button>
</form>
</body>
</html>
result.html(結果表示画面)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>挨拶結果</title>
</head>
<body>
<h1>挨拶メッセージ</h1>
<p th:text="${message}"></p>
<a href="/form">戻る</a>
</body>
</html>
■ アプリケーションの実行
- Pleiadesで
SimpleWebAppApplication.javaを右クリックし、「Spring Boot アプリケーションの実行」を選択します。 - ブラウザで
http://localhost:8080/formにアクセスします。 - 名前を入力して送信すると、挨拶メッセージが表示されます。
■ 実行結果
田中さん、こんにちは!
7. よくあるエラーとその解決方法
初心者がSpring Bootで開発する際に直面しやすいエラーとその解決方法を解説します。エラーが発生したときは、焦らずに原因を一つずつ確認しましょう。
■ エラー1:Whitelabel Error Pageが表示される
原因: コントローラーで指定したHTMLファイルが存在しない場合に発生します。
解決方法:
resources/templatesフォルダ内にHTMLファイルが正しく作成されているか確認します。- ファイル名と
returnで指定した名前が一致しているか確認します。
■ エラー2:HTTP 404 Not Found
原因: URLが間違っているか、ルーティングが正しく設定されていない場合に発生します。
解決方法:
@GetMappingや@PostMappingのURLが正しいか確認します。- ブラウザのURLにタイプミスがないか確認します。
■ エラー3:Thymeleafの変数が表示されない
原因: Modelにデータが正しく追加されていない場合に発生します。
解決方法:
model.addAttribute()が正しく呼ばれているか確認します。- HTML側で
th:textが正しく設定されているか確認します。
8. 次のステップと今後の学習ポイント
今回の記事で@GetMappingと@PostMappingの基本的な使い方を学びました。これらはSpring BootのWebアプリケーション開発で非常に重要な役割を持ちます。次のステップとして、以下の内容に取り組むことで、さらにスキルを向上させることができます。
■ おすすめの学習ポイント
- バリデーションの導入: フォーム入力時のエラーチェックを学びましょう。
- セッション管理: ユーザー情報の保持やログイン状態の管理方法を学びます。
- データベース接続: Spring Data JPAを使ってデータの保存と取得を試してみましょう。
- エラーハンドリング: 予期せぬエラーへの対応方法を学び、堅牢なアプリケーションを作成しましょう。
■ 学習の進め方
- まずは今回のコードを繰り返し書いて動作を確認し、理解を深めましょう。
- 次に、入力フォームを拡張して複数の入力欄を追加してみましょう。
- 最後に、データベースに情報を保存して検索する簡単な機能に挑戦してみてください。
今後も小さなアプリケーションを作りながら、段階的にスキルアップしていきましょう。Spring Bootを活用すれば、実用的なWebアプリケーションが短時間で作成できます。継続して学習することが成功への近道です!
まとめ
今回の内容を振り返ると、Spring Bootの@Web開発で中心となる@GetMappingと@PostMappingは、どちらも入口の違うリクエスト処理として、とても大事な役割を担っていることがわかります。特に@GetMappingは「ページを表示するための土台」として、Webサイトの構造を支える存在です。アクセスされたURLに応じて適切なHTMLを返すしくみは、Webアプリケーションの最初の理解に最適であり、初心者でも扱いやすい点が大きな魅力です。一方@PostMappingはフォーム送信やデータ処理を行うための重要なアノテーションで、Webアプリケーションに動きを与える中心的な機能です。ユーザーが入力した内容を受け取り、サーバー側で処理して結果を返すという流れは、会員登録、ログイン処理、検索処理、投稿機能など、さまざまな場面で利用されます。
また、記事内で紹介したフォーム送信の流れや、URLに対応するルーティング設定など、Webアプリケーション開発の基本となる構成も合わせて確認できました。この基本を理解しておくことで、今後さらに複雑な処理や外部APIとの連携、データベースを扱う本格的なアプリケーションの開発へと自然にステップアップすることができます。Spring Bootは「シンプルな記述で、わかりやすく、効率的に」開発できることが強みであり、今回学んだ@GetMappingと@PostMappingだけでも、実際の現場で広く使われる重要な基本要素がしっかり詰まっていました。
■ まとめとしてのサンプルコード
復習として、ページ表示とフォーム送信の流れを一度に確認できるシンプルなコントローラーを掲載しておきます。学んだことを整理しながら、コードの動きを追ってみましょう。
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
@Controller
public class SummaryController {
@GetMapping("/sampleForm")
public String showForm() {
return "sampleForm";
}
@PostMapping("/sendSample")
public String receiveForm(@RequestParam("text") String text, Model model) {
model.addAttribute("response", text + " を受け取りました!");
return "sampleResult";
}
}
このコードでは、/sampleForm にアクセスした際にフォーム画面を表示し、送信された内容を /sendSample の@PostMappingで受け取っています。ページ表示とデータ処理の基本の流れをしっかり押さえることで、Spring Bootによる開発の理解がより深まります。また、このような仕組みを実際に動かすと、URLとHTMLテンプレート、Javaコードの関係がつながり、Webアプリケーションとしての動作がより明確に把握できます。
■ 簡単なHTMLサンプル
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>サンプルフォーム</title>
</head>
<body>
<h1>入力してください</h1>
<form action="/sendSample" method="post">
<input type="text" name="text" required>
<button type="submit">送信</button>
</form>
</body>
</html>
Spring BootでのWebページ表示とフォームの送信処理は、このようにとてもシンプルに書くことができます。ルーティングの設定を理解し、フォーム入力の受け取りを正しく行えるようになると、多くのWebアプリケーションで必要とされる基本がしっかりと身につきます。今回のまとめでは、これまで学んだ内容を総合的に整理しながら、より実践的な視点で理解を深められるよう構成しました。
生徒:「@GetMapping と @PostMapping の違いがようやく理解できました!ページ表示とフォーム送信、それぞれ役割がはっきりしているんですね。」
先生:「その通りだよ。特に@PostMappingはユーザーが入力した情報を処理するための基本だから、Webアプリ開発には欠かせないんだ。」
生徒:「コードも見やすくて、どのURLでどんな処理が動くのかイメージしやすかったです。自分でも書けそうです!」
先生:「実際に動かしてみるのが一番だね。次はバリデーションを追加したり、複数の入力項目を扱ったりする練習も大切だよ。」
生徒:「それならすぐ挑戦してみたいです。今回学んだ@GetMappingと@PostMappingの使い方がしっかり理解できたので、もっと応用できそうです!」
先生:「いいね。その調子で一歩ずつ進めば、より高度なWebアプリケーションも作れるようになるよ。」