Progressive の全体像

振り返り

この本では，ペライチの HTML ファイルから出発しました．

章	やったこと	ファイル構成
1	静的な HTML を書いた	`index.html`
2	CDN + ESM で Vue を読み込んだ	`index.html` + CDN
3	テンプレート構文でデータを表示した	`index.html` + CDN
4	リアクティビティで動的にした	`index.html` + CDN
5	コンポーネントで分割した	`index.html` + CDN

5 章を経て，検索・フィルタ機能を持つ動的なアプリケーションが完成しました．
そして，ファイルは最初から最後まで index.html 一枚だけ です．

Node.js は使っていません．
ビルドツールは使っていません．
ターミナルは開いていません．

これが "Progressive Framework"

Vue.js が "Progressive Framework" と呼ばれる理由がここにあります．

必要な分だけ，段階的に導入できる．

まず HTML がある
Import Map + <script type="module"> で Vue を追加する
テンプレートにディレクティブを足す（HTML のまま）
ref() と computed() で動的にする
コンポーネントで構造化する

各ステップは前のステップの上に積み重ねるだけです．
何かを捨てる必要はありません．
HTML は HTML のまま．テンプレートは HTML のまま．

ここから先の道

ここまでの知識で，十分に実用的なアプリケーションが作れます．
しかし，アプリが大きくなると次の課題が見えてきます．

Single File Component (SFC)

コンポーネントの template を JavaScript の文字列で書くのは，規模が大きくなると辛くなります．
Vue は Single File Component (.vue ファイル) という形式を提供しています．

<!-- BookCard.vue -->
<template>
  <div class="card">
    <h2>{{ book.title }}</h2>
    <p>{{ book.description }}</p>
    <span class="tag" v-for="tag in book.tags">
      {{ tag }}
    </span>
  </div>
</template>

<script setup>
defineProps(['book'])
</script>

<style scoped>
.card {
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}
</style>

<template>, <script setup>, <style> — HTML, JavaScript, CSS がそれぞれのセクションに収まっています．
テンプレートは変わらず HTML です．JavaScript の文字列に押し込められることなく，シンタックスハイライトもエディタの補完も効きます．

<script setup> は，この本で使ってきた setup() 関数をさらに簡潔にした構文です．
return が不要になり，トップレベルで宣言した変数や関数がそのままテンプレートから使えます．

SFC を使うためにはビルドツール (Vite) が必要になりますが，この段階で初めて Node.js が登場します．

Vue Router / Pinia

Vue Router: ページ遷移を管理する（SPA のルーティング）
Pinia: アプリケーション全体の状態管理

これらもすべて段階的に導入できます．
必要になったときに，必要な分だけ足す．

Nuxt

さらに大きなアプリケーションでは，Nuxt というメタフレームワークが選択肢に入ります．
サーバーサイドレンダリング，ファイルベースルーティング，自動インポートなど，フルスタックの機能を提供します．

Progressive の階段

ペライチの HTML
    ↓ Import Map + ESM
CDN で Vue を導入
    ↓ ディレクティブを足すだけ
テンプレート構文
    ↓ ref() / computed() を定義するだけ
リアクティビティ
    ↓ template を切り出すだけ
コンポーネント
    ↓ ここで初めてビルドツール
SFC (.vue ファイル) + <script setup>
    ↓ 必要に応じて
Vue Router / Pinia
    ↓ さらに必要に応じて
Nuxt

各段階で「捨てるもの」はありません．
HTML は HTML のまま．テンプレートは HTML のまま．
ただ「足していく」だけです．

これが Progressive の意味です．

テンプレートは HTML であるということ

この本を通して繰り返してきた最も重要なメッセージです．

Vue のテンプレートは HTML です．
v-for, v-if, v-bind, v-on, v-model — これらはすべて HTML の属性 として書きます．
{{ }} — これは HTML のテキストコンテンツの位置に書きます．

テンプレートを読むのに，JavaScript の深い知識は要りません．
HTML を書ける人なら，Vue のテンプレートを読めます．

これは意図的な設計です．
Vue は，Web の基盤である HTML を尊重し，その上に構築されたフレームワークです．

まとめ

Vue は ペライチの HTML から フルスタックのアプリケーション まで段階的にスケールする
各段階で何かを捨てる必要はない — 常に足していくだけ
テンプレートは最初から最後まで HTML のまま
setup() と Composition API (ref, computed) で this のないシンプルなコードが書ける
ビルドツールは SFC を使う段階で初めて必要になる
Vue Router, Pinia, Nuxt — 必要になったら足すだけ
Progressive とは「段階的に導入できる」こと，そして「HTML を壊さないこと」