👏

# 5.1 Vue 3 による SPA 化と AI活用のポイント

に公開
Vue.js
tech

バックエンド編では Django REST Framework を使った API 設計についてまとめた。
ここからはフロントエンド側、Vue 3 による SPA 化（Single Page Application） の取り組みを紹介する。
あわせて、実際に AI をコーディング補助に使う際の注意点も整理する。

1. なぜ SPA 化したのか

従来のサーバーレンダリング方式では、画面遷移のたびにページ全体がリロードされる。
その結果、以下の課題があった。

  • ページ遷移の待ち時間が長い
  • 一覧 → 詳細 → 一覧の繰り返し操作が重い
  • 同時に複数の情報を見比べられない

SPA 化することで、これらの課題を解消できる。
必要なデータだけ API で取得し、画面を部分的に更新 するため、ユーザー操作が軽快になる。

2. Vue 3 を採用した理由

React や Angular もあるが、内製開発では 学習コストと直感性 を重視し Vue 3 を採用した。

  • シンプルな構文
    → <template> / <script> / <style> が明確に分かれており、既存メンバーもすぐ慣れる
  • Composition API
    → 業務画面特有の「複雑な状態管理」を整理しやすい
  • コンポーネント設計が自然
    → フォーム、一覧、モーダルを部品化して再利用可能
  • 豊富なUIライブラリ
    → Vuetify / Tailwind / ECharts などと相性が良い

3. SPA 化で得られた効果

  • 操作感の向上
    一日中操作してもストレスが少ない
  • モバイル対応
    タブレットでの利用もスムーズ
  • 複合画面構成が可能
    一覧 + カレンダー + グラフ + チャットを同一画面にまとめられる
  • バックエンドとUIの責務分離
    Django は「堅牢なAPI」、Vue は「柔軟なUI」という分担が明確化

4. 改善例

検索画面

従来:

  • 「検索」ボタン押下 → ページ全体リロード
  • 再入力や再スクロールが必要

SPA 化後:

  • 入力と同時に API 呼び出し
  • 一覧部分だけが更新され、スクロール位置も保持

一覧＋詳細

従来:

  • 一覧と詳細が別画面

SPA 化後:

  • 一覧の横に詳細モーダルを表示
  • 遷移せずに複数レコードを連続確認できる

5. UI/UX 改善の工夫

  • レスポンシブ対応
    PC では一覧、モバイルではカード表示に自動切替
  • UI の統一感
    Vuetify / Tailwind でフォームやボタンを標準化
  • 業務導線の設計
    頻出操作を「左上」「右上」に配置し直感的に

6. 💡 AI活用のポイント

SPA 化と Vue 開発において、AI をコーディング補助に使うと便利だが注意点も多い。

  • フォルダパスのずれに注意
    AI が生成する import のパスはしょっちゅう間違っている。
    → 実際の src/components/... 構成と突き合わせて必ず修正が必要。

  • 親子コンポーネントの依存関係
    親 → 子 → 孫とコンポーネントを分割したとき、AIは前回のやりとりの状態を覚えていないことが多い。
    → 古い props や emit の設計でコードを返してくるため、そのまま使うとバグる。

  • props/emit の受け渡しは要確認
    AI は props の受け取りや emit の発火をよく間違える。
    → 「この子コンポーネントは親から何を受け取るか」「親にどのイベントを返すか」を毎回明示して伝える必要がある。

  • コンポーネント分割のジレンマ

    • 細かく分割すれば保守性は上がるが、AIは全体を覚えられず不整合が出やすい
    • 分割しないとコードが長大になり、AIが途中で省略したり精度が落ちる
      → 開発者自身が「どこまでを1コンポーネントにするか」の感覚を養うことが重要。

  • トレーニング感覚で付き合う
    Vue のリアクティブ挙動やイベント発火順序は AI が単純化して考える傾向がある。
    → 実際には「watch が先に走る」「mounted が遅れる」などの違いで、AI提示コードがそのままでは動かないケースが多い。
    開発者自身が「AIコードを土台にしつつ、自分で補正する」スキルを磨くことが前提になる。

まとめ

Vue 3 による SPA 化は業務システムの UI/UX を大きく改善する。
ただし、AI を活用する際は フォルダ構成・props/emit・コンポーネント分割粒度 などで必ずズレが出る。

👉 AIは雛形作成の相棒 として割り切り、最終的な正確さや一貫性は人間が担保する。
そうすることで、スピードと品質の両立が可能になる。

今後の記事では、より具体的に以下のテーマを掘り下げていく予定。

  • Vue 3 + axios による API 呼び出し
  • 状態管理（Pinia / Vuex）の設計パターン
  • UI コンポーネント設計と再利用性
  • 実際の業務画面（検索・一覧・詳細）の作り方

Discussion