Progressiveの全体像

振り返り

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

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

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

これが"Progressive Framework"

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

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

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

各ステップは前のステップの上に積み重ねるだけです．
何かを捨てる必要はありません．
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を壊さないこと」