初めに
不動産検索サイトを作成中、
Spring Boot + Thymeleaf で都道府県や路線情報の選択肢表示する機能を作っている中で、
AI（Codex）に実装を任せた結果、想定より JS が増えすぎて混乱したという経験をしました。
後から冷静に見直すと、
• なぜ AI はブラウザ描画（JS主体）を選んだのか
• 自分の想定していた「サーバー描画」と何が違ったのか
• 結局どちらがいいのか
が整理できたので、学習メモとして投稿させていただきます。
そもそも「サーバー描画」と「ブラウザ描画」って何？
サーバー描画（SSR）
HTMLをサーバー側で完成させてからブラウザに返す方式。
例（Spring + Thymeleaf）：
1. ブラウザがURLにアクセス
2. サーバーがDB/APIから都道府県一覧を取得
3. サーバーが を含むHTMLを生成
4. 完成したHTMLをブラウザに返す
5. ブラウザは「表示するだけ」
<select>
<option value="13">東京都</option>
<option value="27">大阪府</option>
</select>
ポイント
• 初期表示が確定している
• HTMLを見るだけで状態が分かる
• 編集画面やバリデーション戻りと相性が良い
ブラウザ描画（CSR / JS描画）
HTMLは枠だけ返し、JSがAPIを叩いてHTMLを組み立てる方式。
1. ブラウザがページを開く
2. 空の が表示される
3. JS が /api/prefectures を fetch
4. JSON を受け取る
5. JS が を生成して挿入
<select id="prefecture"></select>
fetch('/api/prefectures')
.then(res => res.json())
.then(data => {
select.innerHTML = data.map(p =>
`<option value="${p.id}">${p.name}</option>`
).join('');
});
ポイント
• API再利用しやすい
• 画面遷移なしで更新できる
• JSの責務が増えやすい
なぜ AI（Codex）はブラウザ描画を選んだのか？
codex曰く、AIの評価軸と、人間（特に管理画面）の評価軸が違ったという理由だそうです（真偽は未確認）
AIが暗黙に優先しがちなもの
• API中心設計
• 再利用性
• 将来拡張
• フロントエンド主導
• 「全部JSで制御した方が汎用的」
今回の状況には、
• 既に API が存在していた
• user側画面でJS検索を使っていた
• 管理画面でも動的な候補が必要だった
という前提があり、AIは
「このプロジェクトはJSで組み立てる思想だ」と判断しました。
その結果、
• 初期候補もJSで取得
• 編集画面の既存値復元もJS
• hydrate / fetch / setOptions のような補助関数が大量発生
という構成になりました。
レビュー中にもう一度AIと設計相談すると、「サーバー描画がいい」と答えたのはなぜか？
これは チャットでの会話の流れから質問の前提が変わったからとのこと。
チャットでの会話からcodexは下記の前提条件を読み取ったようです
• 可読性
• 管理画面としての分かりやすさ
• Thymeleafとの相性
• RPG（バリデーションエラー戻り）の安定性
この評価軸を含めると、
管理画面ではサーバー描画の方が圧倒的に楽という結論になります。
何を重要視するか、前提は何かを指示していなかった私の運用ミスですね。
結論：今回はハイブリッドに着地
今回の実装を振り返って、いちばんしっくりきた方針はこれでした。
サーバー描画に向いているもの（初期状態）
• 都道府県
• 路線
• 編集画面の既存選択値
• バリデーションNG時の再表示
→ Controller + Model + Thymeleaf で完結
JSに任せるべきもの（ユーザー操作で変わる）
• 市区町村（都道府県変更時）
• 駅（路線変更時）
• 数が多く、依存関係があるもの
→ JS + API で動的取得
この分け方が「壊れにくい」理由
• 初期表示が空にならない
• 編集画面の復元ロジックが激減する
• JSが「依存項目の更新」に集中できる
• HTMLを見れば状態が分かる
• デバッグが圧倒的に楽
教訓：AIに設計を任せるときに気をつけること
• APIがある = JS描画が正解、ではない
• エンジニア視点での「分かりやすさ」 を考慮するよう指示
• AIは汎用性を取りに行く
• 人間は保守性と理解コストを取る
まとめ
• サーバー描画とブラウザ描画に「絶対の正解」はない
• JSは「必要なところだけ」に絞るとjsファイルがごちゃつかずスッキリ
• AIの提案は「評価軸」を明示しないとズレやすい
同じように「JS増えすぎ問題」で悩んでいる人の参考になれば幸いです。