【初心者向け】Spring BootでJavaScriptからJavaにデータを渡す方法3選！
山崎講師
こんにちは。ゆうせいです。
今回は、「Web画面（JavaScript）からサーバー側（Spring BootのJava）にデータを渡したい！」という方向けに、その方法を基礎から解説していきます。
たとえば、
- 入力フォームの内容をサーバーに送信したい
- ボタンをクリックしたときの情報をJavaで処理したい
- ページを更新せずに、非同期でデータを送信したい
こんなときに使う技術です。
JavaScript → Java のデータ送信、どうやるの？
Spring Bootでは、JavaScriptからJavaにデータを送るには「HTTPリクエストを送る」という考え方が基本になります。
では、具体的にどんな方法があるのでしょうか？
データ送信方法の全体像
| 方法 | 特徴 | 難易度 |
|---|---|---|
| ① HTMLフォームを使う | ページリロードあり、シンプル | ★☆☆☆☆ |
② fetch()でPOSTリクエスト | 非同期処理、柔軟性が高い | ★★☆☆☆ |
| ③ Axiosライブラリで通信 | fetchの高機能版、モダンな開発向き | ★★★☆☆ |
① HTMLフォームを使ってデータ送信
まずは一番基本的な方法。フォーム送信です。
● HTML側：
<form action="/submit" method="post">
<input type="text" name="username">
<input type="submit" value="送信">
</form>
● Java側（コントローラー）：
@PostMapping("/submit")
public String submit(@RequestParam String username) {
System.out.println("受け取った名前：" + username);
return "result"; // 遷移先HTML名
}
● 特徴
- ページがリロードされる
- JavaScript不要
- 学習コストが低く、確認しやすい
● デメリット
- 見た目の動きが古臭くなる
- フロントエンドの柔軟な制御がしづらい
② fetch()を使って非同期POST送信
次に紹介するのはJavaScriptのfetch()関数を使った方法です。
これを使うと、ページをリロードせずに、サーバーとデータをやりとりできます。つまり「非同期通信（Ajax）」です。
● HTML＋JS側：
<input type="text" id="username">
<button onclick="sendData()">送信</button>
<script>
function sendData() {
const username = document.getElementById("username").value;
fetch("/api/submit", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({ name: username })
})
.then(response => response.text())
.then(data => console.log("レスポンス:", data));
}
</script>
● Java側（RestController）：
@RestController
public class ApiController {
@PostMapping("/api/submit")
public String receiveData(@RequestBody Map<String, String> body) {
String name = body.get("name");
System.out.println("名前を受け取りました: " + name);
return "受け取り完了";
}
}
● 解説
@RequestBodyは、JSON形式のデータをJavaで受け取るためのアノテーション。fetch()は、サーバーにPOSTリクエストを送るJavaScriptの標準関数。
③ Axiosライブラリを使う方法
もしReactやVue.jsなどを使っているなら、JavaScriptの通信ライブラリであるAxios（アクシオス）を使うのが便利です。
● HTML＋JS：
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<input type="text" id="username">
<button onclick="sendData()">送信</button>
<script>
function sendData() {
const username = document.getElementById("username").value;
axios.post('/api/submit', {
name: username
})
.then(response => {
console.log("サーバーからの返答:", response.data);
});
}
</script>
● Java側はfetch()と同じでOK
図で整理：データ送信の流れ
[HTML/JS画面]
↓ 入力
[JavaScriptでfetch()またはフォーム送信]
↓ HTTP POST
[Spring BootのControllerが受け取る]
↓ 処理
[レスポンス返す]
よく使うアノテーション一覧
| アノテーション | 説明 |
|---|---|
@PostMapping("/url") | POSTリクエストの受け口 |
@RequestParam | フォームのname=に対応 |
@RequestBody | JSONで渡されたデータをまるごとMapなどで受け取る |
@RestController | @Controller + @ResponseBodyのセット |
数式で考えるなら
フォーム送信型：
HTMLフォーム → HTTPリクエスト → Java Controller
（記号式：F → HTTP → J）
fetch型（非同期）：
JavaScript(fetch) → JSONデータ → Java(RestController)
（記号式：JS → JSON → J）
まとめ：どの方法を使う？
| 要件 | おすすめの方法 |
|---|---|
| とにかく簡単に試したい | フォーム送信（①） |
| ページを更新せずに送りたい | fetch（②） |
| モダンなJSフレームワークと連携 | Axios（③） |
今後の学習の指針
次に学ぶべき内容としては、以下がオススメです。
@RequestBodyで受け取るクラスを作って、型安全な方法を身につける- JSON構造やオブジェクト構造を深掘りする
- バリデーション（入力チェック）やエラーハンドリングの実装方法
- フロントエンドとバックエンドのAPI設計のベストプラクティス
データのやりとりができるようになると、アプリの幅が一気に広がります！ぜひ、簡単なチャットアプリや投稿アプリを作って試してみてください。
また疑問があれば、いつでも聞いてくださいね！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
