はじめに (対象読者・この記事でわかること)

この記事は、Spring BootでWebアプリケーションを開発しているが「Controllerで生成した文字列やJSONを、HTML上の特定のタグに直接埋め込みたい」と考えている中級者向けです。
ThymeleafやAJAXを使わずに、<span>や<div>などのタグから直接Controllerを呼び出してその結果を表示する方法を解説します。記事を読むことで、RESTエンドポイントをHTML側から非同期で呼び出し、画面に即座に反映する実装方法が身につきます。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。 - Javaの基本的な文法 - Spring Bootのプロジェクト構成（Controller / Service / Repository） - HTML・JavaScriptの基礎

そもそも「タグから直接呼び出す」とは？

Spring MVCのControllerはデフォルトでHTTPリクエストに対してレスポンスを返すため、ブラウザが再読み込みする従来の同期通信では画面全体の再描画が必要でした。
しかし、近年のWebアプリケーションでは「部分的な更新」が求められます。例えば、時計や株価のように「特定の

だけを1秒ごとに更新」したいケースです。
このような要望を満たすには、Controllerを「タグから直接呼び出す」=非同期（AJAX）でアクセスし、返ってきた文字列・JSONをDOMに差し込む手法が最適です。本記事ではその実装方法を解説します。

fetch APIを使った最速実装

ここが記事のメインパートです。具体的な手順とコードを交えて解説します。

ステップ1：Controllerに文字列・JSONを返すエンドポイントを用意

まず、Spring Boot側に/api/messageというGETエンドポイントを用意します。文字列とJSONの2パターンを返せるようにします。

Java

@RestController
@RequestMapping("/api")
public class SimpleController {

    // 文字列を返す
    @GetMapping("/message")
    public String message() {
        return "Hello from Spring!";
    }

    // JSONを返す
    @GetMapping("/json")
    public Map<String, String> json() {
        return Map.of("time", LocalTime.now().toString());
    }
}

ステップ2：HTML側でタグを用意し、fetchで呼び出す

次に、HTML側で表示したいタグを用意し、JavaScriptのfetch APIでControllerを呼び出します。

Html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Direct Call</title>
</head>
<body>
    <!-- 文字列を表示するタグ -->
    <p id="msg">ここにControllerの文字列が入ります</p>
    <!-- JSONを表示するタグ -->
    <p id="json">ここにJSONのtime値が入ります</p>

    <script>
      // 文字列取得
      fetch('/api/message')
        .then(res => res.text())
        .then(text => document.getElementById('msg').textContent = text);

      // JSON取得
      fetch('/api/json')
        .then(res => res.json())
        .then(data => document.getElementById('json').textContent = data.time);
    </script>
</body>
</html>

ハマった点：CORSエラーとCSRFトークン

POSTやPUTを使う場合、Spring Securityが有効だとCSRFトークン不足で403エラーが返ります。また、別オリジンから呼ぶ場合はCORS設定も必要です。

解決策：Security設定を最小限に抑える

開発環境では一旦CSRFを無効化し、CORSも許可しておきます。

Java

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable()
            .cors().and()
            .authorizeRequests()
            .anyRequest().permitAll();
    }
}

まとめ

本記事では、Spring BootのControllerをHTMLタグから直接呼び出して文字列・JSONを表示する方法を解説しました。

  • fetch APIを使えば数行で非同期取得が可能
  • Controllerは@RestControllerで文字列/JSONを返すだけ
  • Security設定に注意すれば即座に動作

この手法を使えば、ページ遷移なしでリアルタイム情報を表示できるため、ダッシュボードや生産管理画面などで重宝します。次回は、WebSocketを使ってサーバー側から能動的にプッシュする方法を紹介します。

参考資料