【初心者向け】Spring BootでJavaからJavaScriptにデータを渡す3つの方法
山崎講師
こんにちは。ゆうせいです。
今回は「Spring BootでJavaからJavaScriptにどうやってデータを渡せばいいの？」という疑問に答えていきます。
プログラミング初心者やSpring Bootをはじめて使う方でもわかるように、専門用語はていねいに解説しながら進めます。途中で「これどういう意味だろう？」と感じたら、そのまま読み進めてください。たとえ話や図を交えて、しっかり理解できるようにお手伝いします！
はじめに：JavaとJavaScriptは別モノ！
まず最初に大切なことを一つ。
JavaとJavaScriptは全く別の言語です。名前が似ているので勘違いしやすいですが、関係ありません。例えるなら「ハンバーグ」と「ハンバーガー」みたいなもの。材料がちょっと似ていても、全然違う食べ物ですよね。
では、そんな別々の世界にいるJavaとJavaScriptが、どうやってデータをやりとりするのでしょうか？
Java → JavaScript のデータ受け渡し方法
大きく分けて、以下の3つの方法があります。
| 方法名 | 特徴 | 難易度 |
|---|---|---|
| ① Thymeleafを使う | HTMLテンプレート内にデータを埋め込む | ★☆☆☆☆ |
| ② JavaScriptの変数に埋め込む | <script>タグ内に直接埋め込む | ★★☆☆☆ |
| ③ API＋Ajax通信で受け取る | JSON形式で非同期に通信し受け取る | ★★★★☆ |
① ThymeleafでデータをHTMLに埋め込む
Spring Bootでは**Thymeleaf（タイムリーフ）**というテンプレートエンジンを使うことで、Javaの変数をそのままHTMLに表示できます。
● どうやるの？
Java側のコード：
model.addAttribute("userName", "ゆうせい");
HTML側（Thymeleaf）：
<p th:text="'こんにちは、' + ${userName} + 'さん！'"></p>
● 何が起きているの？
model.addAttribute()は「HTMLに渡す変数」を指定しています。
たとえば「お弁当におかずを詰める」イメージです。userNameというおかずをmodelというお弁当箱に入れて、ThymeleafがHTMLでそれを展開します。
● メリットとデメリット
| メリット | デメリット |
|---|---|
| 記述が簡単、学習コストが低い | JavaScriptでは直接操作できない |
| データがそのままHTMLに埋まる | 動的処理（クリックなど）に弱い |
② JavaScriptの変数にJavaから渡した値を埋め込む
Thymeleafを少し応用して、HTMLの中にJavaScriptコードを直接書く方法です。
<script>
const userName = /*[[${userName}]]*/ 'default';
console.log("こんにちは、" + userName + "さん！");
</script>
これはJavaScriptの中でJavaの値を変数として扱うテクニックです。
Thymeleafが/*[[${userName}]]*/の部分を置き換えてくれます。
● 注意点
この方法では、JavaScript側で変数として値を使えるようになります。ただし、値が数値や文字列かどうかを意識して書く必要があります。
たとえば：
const age = /*[[${age}]]*/ 0; // 数値型
const name = '[[${name}]]'; // 文字列型（クォートが必要）
③ Ajax＋REST APIでデータを取得する
これが最も柔軟で実用的な方法です。
Java側では**REST API（レスト・エーピーアイ）**という「Webで使えるJavaの出入り口」を用意します。そしてJavaScriptはそこにデータを取りに行く、という流れです。
● REST APIとは？
REST（レスト）はWebでのやりとりのルールのこと。API（エーピーアイ）は「アプリ同士の橋渡し」の仕組みです。
つまりREST APIは「WebアプリとJavaアプリが仲良くなるための窓口」なんです。
● コード例
Java側（Controller）：
@RestController
public class UserController {
@GetMapping("/api/user")
public Map<String, String> getUser() {
Map<String, String> data = new HashMap<>();
data.put("name", "ゆうせい");
return data;
}
}
JavaScript側：
<script>
fetch('/api/user')
.then(response => response.json())
.then(data => {
console.log("ユーザー名は " + data.name);
});
</script>
● メリット・デメリット
| メリット | デメリット |
|---|---|
| フロントエンドとバックエンドが分離 | 実装がやや複雑になる |
| 動的なデータ更新が可能 | データ取得のタイミングに注意が必要 |
図で理解する：Java → JavaScript の3パターン
それぞれの方法を図で整理しましょう。
1. Thymeleaf（HTMLに直接）
[Java Controller] → (Model) → [HTML (Thymeleaf)] → 表示
2. JavaScriptに埋め込む
[Java Controller] → (Model) → [HTML with <script>] → JavaScript変数に代入
3. Ajax通信
[Java REST API] ← fetch() ← [JavaScript] → 表示
まとめ：どれを使うべき？
| 要件 | おすすめの方法 |
|---|---|
| 表示だけできればOK | Thymeleaf（①） |
| JavaScriptで処理したい | スクリプト埋め込み（②） |
| データを非同期に取得したい | Ajax＋API（③） |
今後の学習の指針
今後さらにステップアップするために、以下の内容を学ぶと良いですよ！
- Thymeleafの構文を深掘りする
- REST APIの設計（リクエストとレスポンスの設計）
- JSONの仕組みと使い方を理解する
- Vue.jsやReactなどのモダンなJavaScriptフレームワークにも触れてみる
何か実際に作ってみるのが一番の近道です！ぜひ、簡単な「プロフィール表示アプリ」などを作りながら、JavaとJavaScriptの連携を練習してみてくださいね。
他にも知りたい技術テーマがあれば、気軽に聞いてください！
セイ・コンサルティング・グループの新人エンジニア研修のメニューへのリンク
投稿者プロフィール
