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

新人

「先輩、Ajax通信ってよく聞くんですが、どんな仕組みなんでしょうか？」

先輩

「いい質問だね。Ajax通信は、ページを更新せずにサーバーとデータのやり取りをする仕組みなんだ。」

新人

「なるほど。ThymeleafとJavaScriptを使って、どうやってAjax通信を実現できるんですか？」

先輩

「それじゃあ、具体的にどんな方法で実現するのか、詳しく見ていこう。」

1. Ajax通信とは？

Ajax通信とは、ページ全体を再読み込みすることなく、サーバーとデータをやり取りする技術のことです。Asynchronous JavaScript and XMLの略で、非同期での通信を可能にします。通常、Webページはサーバーにリクエストを送るとページ全体が再読み込みされますが、Ajaxを使うと一部のデータだけを更新できます。

たとえば、ユーザーがボタンを押したときに、サーバーからデータを取得して画面に反映するといった操作が可能になります。これにより、ページの表示速度が向上し、より快適なユーザー体験を提供できます。

この仕組みは、JavaScriptのXMLHttpRequestオブジェクトやfetchAPIを使って実現します。最近では、fetchを使うことが増えています。

2. Ajax通信をThymeleafとJavaScriptで実現する方法の概要

Thymeleafは、HTMLテンプレートエンジンとしてSpring Frameworkでよく使われています。Javaのサーバーサイドレンダリングに適しており、HTMLの中に変数や条件分岐を埋め込むことができます。

ThymeleafとJavaScriptを組み合わせてAjax通信を行うときの基本的な流れは以下の通りです。

HTMLテンプレート（Thymeleaf）にボタンやフォームを作成する
JavaScriptでボタン押下などのイベントを検知する
JavaScriptでfetchを使ってサーバーにリクエストを送る
サーバーの@Controllerでリクエストを受け取る
サーバーから返ってきたデータをJavaScriptで受け取り、画面を更新する

この一連の流れを理解することで、ThymeleafとJavaScriptを組み合わせた実用的なアプリケーションを作ることができます。

3. 開発環境と前提事項（Pleiades、Gradle、@Controllerの使用）

今回の解説では、次のような開発環境と前提条件で進めていきます。

Pleiades：Eclipseを日本語化し、便利なプラグインが揃った統合開発環境です。
Gradle：依存関係管理ツールとしてGradleを使用し、Pleiadesのプロジェクト作成時に依存関係を追加します。
@Controller：SpringのWebアプリケーションを作成する際に使うアノテーションで、HTMLを返すときに使用します。@RestControllerは使わず、あくまでThymeleafの画面遷移で@Controllerを使います。
Thymeleafのみ使用：Bootstrapや他のフレームワークは使わず、SpringとThymeleafのみで解説します。

具体的なサンプルコードを紹介する際には、この前提を踏まえて解説を進めていきます。

まずは、これらの開発環境が整っているか確認し、プロジェクトをPleiadesで作成します。Pleiadesの画面から新規Springプロジェクトを作成し、Gradleの設定を選択して、必要な依存関係（Spring Webなど）を追加するだけで、簡単に準備ができます。

次のステップでは、具体的にJavaScriptでAjax通信を行う方法を見ていきます。初心者の方でも安心して学べるように、コード例を交えながら解説していきます。

4. Ajax通信に必要なJavaScriptコードの基本構成

ここからは、実際にThymeleafと組み合わせて使うJavaScriptの基本的な構成を紹介します。Ajax通信では、ボタンなどのイベントが発生したときにJavaScriptがサーバーにリクエストを送る役割を果たします。最近では、JavaScriptのfetchAPIを使うことで、簡単にAjax通信ができます。

ここでの基本構成は次の通りです。

イベントを監視する（例：ボタンのクリックイベント）
fetchでサーバーにリクエストを送る
サーバーからのレスポンスを受け取る
受け取ったデータを画面に反映する

例えば、次のようなサンプルコードでAjax通信を実装できます。


<script>
document.getElementById('sendButton').addEventListener('click', function() {
    fetch('/sample', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ message: 'こんにちは、サーバー！' })
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('result').textContent = data.responseMessage;
    })
    .catch(error => console.error('エラー:', error));
});
</script>

この例では、sendButtonというボタンがクリックされたときに/sampleというエンドポイントへPOSTリクエストを送ります。サーバーから受け取ったレスポンスはJSON形式で処理し、画面に表示されます。

5. @Controllerを使ったSpring側の受け口（コントローラの作成）

次に、Java側でfetchから送られてくるリクエストを受け取る部分を作ります。Thymeleafと一緒に使うときは@Controllerを使い、通常の画面遷移やHTMLレンダリングも同時に行う形にします。

以下は、基本的なコントローラのサンプルです。ここでは、Ajax通信で受け取ったデータを加工して、JSON形式で返す例を紹介します。


@Controller
public class SampleController {

    @PostMapping("/sample")
    @ResponseBody
    public Map<String, String> sample(@RequestBody Map<String, String> request) {
        String clientMessage = request.get("message");
        Map<String, String> response = new HashMap<>();
        response.put("responseMessage", "サーバーからの返答: " + clientMessage);
        return response;
    }
}

@Controllerを使う場合でも、Ajax通信の部分だけは@ResponseBodyを付けて返すようにします。これにより、画面遷移ではなくJSONデータを直接返すことができます。

@RequestBodyで受け取ったJSONデータをJavaのMap型に変換し、レスポンスも同様にMapで返します。サーバーからの返答を、先ほどのJavaScriptコードで受け取り、画面の一部を更新する仕組みです。

6. Ajax通信の流れをThymeleafからの呼び出し例で解説

ここまでで、JavaScript側のコードと、Springのコントローラ側の受け口について解説しました。では、実際にThymeleafの画面からどのように呼び出すのか、具体的な例を見てみましょう。

ThymeleafのHTMLテンプレートで、次のようにボタンを配置します。ここでは、ボタンをクリックしたときにAjax通信が発動する仕組みを作ります。


<button id="sendButton" type="button">サーバーに送信</button>
<div id="result"></div>

このボタンをクリックすると、先ほど紹介したJavaScriptのfetchが動作し、/sampleエンドポイントへリクエストを送ります。サーバー側では@Controllerが受け取り、加工したデータを返して、JavaScriptがそのデータを画面に表示します。

さらに、ThymeleafではHTML内に動的な値を埋め込むことも可能です。例えば、初期表示時にサーバーから渡されたメッセージを表示することもできます。以下のように書くことができます。


<div th:text="'初期メッセージ: ' + ${initMessage}"></div>

このようにして、Thymeleafで画面を作りながら、JavaScriptで非同期通信を行うことで、ページ遷移を伴わない便利な機能を実現できます。

まとめると、今回のAjax通信の流れは次のようになります。

Thymeleafでボタンや画面を作成する
JavaScriptのfetchでサーバーへリクエスト
サーバーの@Controllerでリクエストを受け取る
サーバーからのレスポンスを受け取って画面に表示する

この仕組みをしっかり理解することで、より動的で便利なWebアプリケーションを作れるようになります。次は、さらに実践的なサンプルコードやエラー対処などを紹介していきます。

7. Ajax通信の実装例（Thymeleafのボタン押下で呼び出し、結果を表示する例）

ここでは、実際にThymeleafとJavaScriptを使ったAjax通信のサンプルをまとめて紹介します。これまでの解説を踏まえて、どのように動くのか、全体の流れをイメージしてみてください。

まず、ThymeleafのHTMLテンプレートでは、次のようにボタンと結果表示用の要素を作ります。


<button id="sendButton" type="button">データ送信</button>
<div id="result">ここに結果が表示されます</div>

JavaScriptは次のようになります。クリックイベントを監視して、サーバーにリクエストを送信します。


<script>
document.getElementById('sendButton').addEventListener('click', function() {
    fetch('/sample', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ message: 'こんにちは、サーバー！' })
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('result').textContent = data.responseMessage;
    })
    .catch(error => {
        document.getElementById('result').textContent = '通信エラーが発生しました';
        console.error('エラー:', error);
    });
});
</script>

そして、サーバー側のコントローラでは、次のように受け取って応答を返します。


@Controller
public class SampleController {

    @PostMapping("/sample")
    @ResponseBody
    public Map<String, String> handleSample(@RequestBody Map<String, String> request) {
        String clientMessage = request.get("message");
        Map<String, String> response = new HashMap<>();
        response.put("responseMessage", "サーバーで受け取ったメッセージ: " + clientMessage);
        return response;
    }
}

これにより、画面上のボタンを押すと非同期でサーバーにデータが送信され、その返答が画面に表示されるようになります。実際のアプリケーションでも同様の仕組みを応用することで、動的な機能を実現できます。

8. よくあるエラーや注意点

Ajax通信を実装する際には、いくつかのポイントに注意する必要があります。初心者の方にありがちなミスやエラーも紹介しておきます。

URLの間違い：fetchのURLが間違っていると、サーバーにリクエストが届きません。/sampleのように正しいパスを指定しているか確認しましょう。
Content-Typeの設定漏れ：fetchのheadersにContent-Typeを忘れると、サーバーがJSONを正しく受け取れません。必ず'Content-Type': 'application/json'を入れましょう。
サーバー側のレスポンス形式：サーバー側で返すデータがJSON形式でないと、response.json()でエラーになります。@ResponseBodyやMapで返す形式を確認しましょう。
ブラウザのキャッシュ：ブラウザのキャッシュが影響して古いデータが表示されることがあります。キャッシュを無効化する工夫も役立ちます。
JavaScriptの文法ミス：特に初心者のうちは、;の付け忘れや}の閉じ忘れなどのケアレスミスに気をつけましょう。

これらのポイントを意識しておくと、スムーズにAjax通信を実装できるようになります。もし動作しない場合は、まずブラウザの開発者ツール（F12キー）を使ってエラーメッセージを確認しましょう。エラーメッセージにはヒントが書かれていることが多いです。

9. 初心者向けの学習アドバイスやポイントまとめ

最後に、Ajax通信を学ぶときのポイントや、さらにスキルを伸ばすためのアドバイスをまとめます。まず大切なのは、JavaScriptとThymeleafの役割をしっかり理解することです。JavaScriptは非同期通信を行う役割を持ち、Thymeleafはサーバー側でHTMLを動的に生成します。

次に、小さなサンプルから練習することをおすすめします。いきなり大きなアプリケーションを作ると混乱しやすいので、まずは小さいサンプルでボタンを押したらサーバーにメッセージを送って返答を表示する、といったシンプルな例から始めてください。

また、サーバー側のコントローラは、@Controllerを使いながら、必要に応じて@ResponseBodyを付けるというルールを意識しましょう。@RestControllerは画面遷移の仕組みとは別の用途になるため、今回の記事では使わない前提です。

さらに、JavaScriptの書き方を丁寧に確認するクセをつけると良いです。console.log()を活用して、通信がうまくいっているか確認するのもおすすめです。わからない点があれば、公式ドキュメントや、Springのチュートリアルを読んでみるのも良い学習法です。

最後に、開発環境としてはPleiadesを使うことで、依存関係の管理やプロジェクト作成がスムーズになります。Spring Bootを使わない場合でも、Pleiadesなら初心者にやさしいGUIで操作できるので安心です。

今回の解説をもとに、ぜひ自分の手を動かしてサンプルを試してみてください。小さな成功体験を積み重ねることで、より高度なAjax通信の活用ができるようになります。

この記事を読んだ人からの質問

Thymeleaf JavaScriptでAjax通信を行う方法を解説！初心者向け完全ガイド