Welcome to Aaron Blog! en and jp version is now updating! 🎉

なぜ Template が必要なのか？

Vue の Template が誕生した背景を解き明かし、ソースコードを探索

Aaron Shih
@eepson123tw
Loading comments...

Vue の読書会をきっかけに、Component 内の Template とは何か？Template は何を解決してくれるのか？改めて探求します。

現代フロントエンドの複雑なアプリケーション

Vue Templateのようなツールがなければ、ウェブページのテキストや画像をどのように更新するでしょうか？従来のフロントエンド開発では、次のようにする必要があるかもしれません。

JavaScriptを使ってそのウェブ要素を見つける（例：document.getElementById('myText')）。

そして、手動でその内容を変更する（例：element.innerHTML = '新しいテキスト'）。

Vue TemplateとReact JSXは何をしているのか？

上記の問題を解決するため、VueやReactのような現代のフロントエンドフレームワークは、より高度なUI構築方法を導入しました。Vue Template（およびReactのJSX）の核心的な目標は、より**「宣言的」**な方法で開発できるようにすることです。

  • データ駆動型UI: データが変更されると、画面が自動的に更新されます。これは、フレームワークの強力な**「リアクティブシステム」**によって実現されます。手動で画面を更新する必要がなくなり、時間と労力を節約できます！
  • より簡潔で分かりやすいコード: Vue TemplateはHTMLに基づいています。これは、すべてのVueテンプレートがそれ自体で有効なHTMLであることを意味します。通常のHTMLを書くようにVueテンプレートを書くことができ、ブラウザもそれを正しく解析できます。これにより、非常に習得しやすく、強化されたHTMLのように見え、非常に直感的です。
  • コンポーネント指向開発: 現代のフレームワークは、ウェブページを再利用可能な**「コンポーネント」**に分解することを推奨しています。テンプレート構文は、コンポーネント内で構造と内容を定義する役割を果たし、コンポーネント指向開発をより容易にします。
  • 高パフォーマンス: フレームワークは舞台裏で多くの最適化を行っています。例えば、「仮想DOM」や「コンパイル時最適化」により、複雑なアプリケーションでも画面更新が高効率に保たれるようにしています。

AST（抽象構文木）

私たちが書いたHTMLのようなVueテンプレートを、Vueはどのようにして実際のウェブページに変換しているのか、不思議に思うかもしれません。最初のステップは、テンプレートを**「抽象構文木」（Abstract Syntax Tree, AST）**に解析することです。

ASTとは何か：

  1. まず、Vueのコンパイラは、あなたが書いたテンプレート文字列（<template>タグ内に書いたものすべて）を読み込みます。
  2. 次に、それは細心の注意を払う国語の先生のように、このテキストをHTMLタグ、テキストコンテンツ、Vueの特殊なディレクティブなど、意味のある**「語彙」や「トークン」**に分解します。
  3. その後、Vueはこれらのトークンに基づいて、ツリー状のJavaScriptオブジェクト構造を構築します。これがASTです。ASTをテンプレートの**「骨格の設計図」や「構造図」**と考えることができます。それはあなたのテンプレートがどのような形をしているか、どこにタグがあり、どこにテキストがあり、どこにデータがバインディングされているか、要素間の階層関係などを正確に記述しています。

例えば、<div id="app"><p>{{ message }}</p></div>というテンプレートの場合、ASTは、id属性がappであるdiv要素があり、その中に子要素pがあり、p要素の内部にはテキスト補間があり、その内容はmessage変数である、というように記述されるでしょう。

なぜ重要なのか：ASTは、その後の最適化とコード生成の基盤となります。ASTがなければ、コンパイラはテンプレートの構造と意図を理解できません。VueのコンパイラはこのASTを走査し、どの部分が静的で、どの部分が動的であるかを分析し、その後の最適化とレンダー関数生成の準備をします。

// AST 構造例：<div id="app"><p>{{ message }}</p></div>
const ast = {
  type: 'Element',
  tag: 'div',
  props: [
    {
      type: 'Attribute',
      name: 'id',
      value: {
        type: 'Literal',
        value: 'app'
      }
    }
  ],
  children: [
    {
      type: 'Element',
      tag: 'p',
      props: [],
      children: [
        {
          type: 'Interpolation',
          content: {
            type: 'SimpleExpression',
            content: 'message',
            isStatic: false
          }
        }
      ]
    }
  ]
}

コンパイラ

ASTという構造化されたテンプレート表現ができた後、Vueの**「コンパイラ」**が次の作業を引き継ぎます。

コンパイルプロセスは、Vueの高性能を実現する鍵の一つであり、元のテンプレート文字列から最終的なレンダー関数を生成するまでの変換プロセス全体を指します。

コンパイラの主な責務は以下の通りです：

  • 解析 (Parsing)：これが最初のステップで、テンプレート文字列をASTに変換します（前述のセクションで説明済み）。
  • 最適化 (Optimization)：ASTを取得した後、コンパイラは**「最適化」を開始します。ASTを走査し、どの部分が「静的」であるか（つまり、レンダリングプロセス中に内容が絶対に変わらない部分）、どの部分が「動的」**であるか（内容がデータに基づいて変化する部分）を分析して見つけ出します。
    • 静的ノードの巻き上げ: 完全に静的な部分については、Vueはそれらをマークし、さらには直接**巻き上げ（hoist）**ます。これにより、その後の画面更新時に、これらの静的な部分を完全にスキップでき、変化があるかどうかを比較する時間を無駄にすることなく、パフォーマンスが大幅に向上します。
    • パッチフラグ (Patch Flags)：動的な部分（v-if、v-for、またはバインディング式を持つ要素など）についても、コンパイラはいくつかの**「フラグ」**を付けます。これらの「パッチフラグ」は、この動的ノードが将来どのような種類の更新を必要とする可能性があるか（例えば、テキストの内容だけが変わったのか？それともクラスが変わったのか？子要素の順序が変わったのか？）を記録します。これにより、実行時に仮想DOMの比較（Diffing）を行う際に、Vueは必要な更新のみを非常に正確に行うことができ、何もかも盲目的に比較するのを避けることができます。
    • ツリーの平坦化 (Tree Flattening)：コンパイラはテンプレート内の「ブロック」を識別します。これらのブロックは安定した内部構造を持っています。各ブロックについて、コンパイラはその内部の動的な子孫ノードを抽出し、平坦な配列を形成します。コンポーネントが再レンダリングされるとき、この平坦な動的ノードリストを走査するだけで済み、静的な部分を効果的にスキップし、調整が必要なノードの数を大幅に削減します。
  • コード生成 (Code Generation)：最適化が完了した後、コンパイラは最適化されたASTに基づいてJavaScriptコードを生成します。このコードは通常、**「レンダー関数」**です。

コンパイルの最終生成物は、高度に最適化されたレンダー関数です。このプロセス全体の大部分は**「ビルド時」**（例えば、npm run buildでプロジェクトをバンドルする時）に完了します（AOT, Ahead-of-Time compilation）。そのため、アプリケーションがブラウザで実行される際のパフォーマンスは非常に良好です。

// コンパイル過程の例：<div id="app"><p>{{ message }}</p></div>
function compile(template) {
  // Step 1: テンプレートをASTに解析
  const ast = parse(template)
  
  // Step 2: ASTの変換と最適化
  const optimizedAst = transform(ast, {
    // 静的ノードをマーク
    hoistStatic: true,
    // 動的コンテンツのパッチフラグを生成
    patchFlag: true
  })
  
  // Step 3: レンダー関数のコードを生成
  const renderFunctionCode = generate(optimizedAst)
  
  return renderFunctionCode
}

// 生成されたレンダー関数（簡易版）
function render(_ctx, _cache) {
  return (_openBlock(), _createElementBlock("div", {
    id: "app"
  }, [
    _createElementVNode("p", null, 
      _toDisplayString(_ctx.message), // 動的コンテンツ、パッチフラグ付き
      1 /* TEXT */ // パッチフラグ、テキスト内容の変化を示す
    )
  ]))
}

// 最適化分析：
// - div 要素と id="app" は静的（変更されない）
// - p 要素の構造は静的
// - {{ message }} のみ動的で、リアクティブな追跡が必要

レンダラー

コンパイラによって生成される**「レンダー関数」**は、Vueのリアクティブシステムと仮想DOMメカニズムの核心です。

レンダー関数とは何か：それはJavaScript関数です。この関数が実行されると、現在の画面がどのように見えるべきかを記述した**「仮想DOMツリー」**を返します。仮想DOMは、実際のDOM構造をJavaScriptオブジェクトで表現する概念であり、実際のDOMを直接操作するよりも効率的です。

レンダラーの動作（レンダリングとリアクティブ更新）：

  1. 仮想DOMの生成：アプリケーションが起動したり、コンポーネントのデータが変更されたりすると、Vueは対応するコンポーネントのレンダー関数を実行し、新しい仮想DOMツリーを取得します。
  2. 差分の比較（Diffing）：Vueのレンダラーは、新しい仮想DOMツリーと前回のレンダリング時の古い仮想DOMツリーとの差分を比較します。この比較プロセス（Diffingアルゴリズム）は非常に効率的で、本当に変更が必要な部分を迅速に見つけ出すことができます。
  3. パッチの適用（Patching）：その後、Vueは**「実際に変更があった」部分だけを実際のウェブページのDOMに更新します。このプロセスは「パッチ適用」**と呼ばれます。

したがって、全体の流れは次のようにまとめられます。

この流れを理解すれば、Vueがなぜフレンドリーなテンプレート構文を提供しつつ、優れた実行パフォーマンスを維持できるのかがわかるでしょう。開発者は、レンダリングロジックを究極的にプログラミングで制御する必要があるシナリオでは、手動でレンダー関数を書くこともできます（通常、JSXまたはh()ヘルパー関数を使用）。ただし、テンプレート構文にはコンパイラによる静的解析と最適化の恩恵があるため、通常はこちらの方が推奨される選択肢です。

Vueテンプレートのシンタックスシュガー

Vueのテンプレート構文は、非常に便利な**「シンタックスシュガー」**を提供しています。これらは、より少ないコードでより多くのことを実現し、コードをより簡潔で読みやすくします。ここでは、いくつかよく使われるものをご紹介します。

v-bind の省略記法

HTML要素の属性にデータをバインドしたい場合、v-bindディレクティブを使用します。

<img v-bind:src="imageUrl">

<img :src="imageUrl">

だいぶすっきりしましたね？ほとんどすべてのv-bindの場面でコロンの省略記法を使用できます。

v-on の省略記法 @

DOMイベント（クリック、入力など）をリッスンし、特定のJavaScriptコードを実行したい場合、v-onディレクティブを使用します。

<button v-on:click="sayHello">Click me</button>

<button @click="sayHello">Click me</button>

これも非常に便利です！

v-if, v-else-if, v-else: 条件付きレンダリング

この一連のディレクティブは、条件に基づいて要素またはテンプレートの一部をレンダリングするかどうかを決定することを可能にします。

  • v-if="condition"：conditionが真である場合にのみ、要素がレンダリングされます。
  • v-else-if="anotherCondition"：前のv-ifまたはv-else-ifが偽であり、かつanotherConditionが真である場合にのみ、要素がレンダリングされます。
  • v-else：前のすべてのv-ifおよびv-else-ifが偽である場合に、この要素がレンダリングされます。
<div v-if="type === 'A'">
  タイプAのコンテンツ
</div>
<div v-else-if="type === 'B'">
  タイプBのコンテンツ
</div>
<div v-else>
  その他のタイプのコンテンツ
</div>

注意：v-elseとv-else-ifは、v-ifまたはv-else-if要素の直後に配置する必要があります。

v-showとの違い：v-ifは**「真の」**条件付きレンダリングであり、条件が偽の場合、要素とその子コンポーネントは破棄され、DOMから削除されます。一方、v-showは単に要素のCSS displayプロパティを切り替えるだけで、要素は常にDOMに保持されます。表示状態を頻繁に切り替える場合、v-showの方がパフォーマンスが良好です。条件がめったに変わらない場合、v-ifの方が初期レンダリングのオーバーヘッドが少ない可能性があります。

v-for: リストレンダリング

配列やオブジェクトに基づいてリストをレンダリングする必要がある場合、v-forが役立ちます。

配列のイテレーション: v-for="item in items" または v-for="(item, index) in items"

<li v-for="(item, index) in items" :key="item.id">
  {{ index }} - {{ item.name }}
</li>

itemsはあなたのデータ配列、itemは配列内の各要素、index（オプション）は要素のインデックスです。

オブジェクトのイテレーション: v-for="value in object" または v-for="(value, key) in object" または v-for="(value, key, index) in object"

<li v-for="(value, key) in object" :key="key">
  {{ key }}: {{ value }}
</li>

objectはあなたのデータオブジェクト、valueはプロパティの値、key（オプション）はプロパティのキー名、index（オプション）はインデックスです。

keyの重要性：v-forを使用する際は、イテレーションされる各要素に一意のkey属性（例：:key="item.id"）をバインドすることを強く推奨します。これにより、Vueが要素をより効率的に識別および再配置できるようになり、特にリストの順序が変更されたり、追加・削除操作があったりする場合に有効です。

v-model: 双方向データバインディング

v-modelは通常、フォーム要素（<input>, <textarea>, <select>など）で使用され、フォーム入力の値とVueインスタンスのデータの双方向同期を簡単に実現します。

入力欄に文字を入力すると、対応するデータが自動的に更新されます。逆に、データが変更されると、入力欄の内容も自動的に更新されます。

<input v-model="message" placeholder="メッセージを入力">
<p>メッセージは: {{ message }}</p>

v-modelは、実際にはv-bind:valueとv-on:input（またはフォーム要素のタイプに応じた他のイベント）のシンタックスシュガーです。

v-html: 生のHTMLを出力する

二重の波括弧 {{ }} はデータを純粋なテキストとして出力します。もしデータの一部をHTMLとしてレンダリングしたい場合は、v-htmlを使用する必要があります。

<div v-html="rawHtmlContent"></div>

セキュリティ警告：任意のHTMLを動的にレンダリングすることは非常に危険であり、XSS（クロスサイトスクリプティング）攻撃につながる可能性が非常に高いため、**「信頼できるコンテンツ」**にのみv-htmlを使用するようにしてください。ユーザーが送信したコンテンツのレンダリングには絶対に使用しないでください。

v-once: 一度だけレンダリングする

もしあるコンテンツ部分が初回レンダリング後に更新する必要がなくなった場合、v-onceディレクティブを使用できます。

これはVueに対し、この要素とそのすべての子要素を一度だけレンダリングするように指示します。データが変化しても、この部分は再レンダリングされないため、パフォーマンス最適化の手段として利用できます。

<span v-once>このテキストは一度だけレンダリングされます：{{ initialMessage }}</span>

これらのシンタックスシュガーは、私たちの開発作業を大幅に簡素化し、より少ないコードでより多くのことを実現できるようにしてくれます。

ソースコード

Vue Templateがどのように動作するかを理解することは、そのソースコード設計の核心的な思想を探求することに他なりません。Vueの完全なソースコードを直接深く読み込むことは、初心者にとって少し難しいかもしれませんが、その主要モジュールの機能から垣間見ることができます。

  • @vue/compiler-core: これはVueコンパイラの核であり、テンプレート文字列をASTに解析し、様々な静的解析と最適化を行い、最終的にレンダー関数のコードを生成します。プラットフォームに依存しないコンパイラです。
  • @vue/compiler-dom: このパッケージは、@vue/compiler-coreをベースに、ブラウザのDOM環境に特化した処理ロジックを追加しています。例えば、HTML特有のタグや属性の扱い方を知っています。
  • @vue/runtime-core: Vueのランタイムの核となるロジックを含んでおり、仮想DOMの作成、Diffアルゴリズム、コンポーネントのライフサイクル管理、リアクティブシステムの実現などが含まれます。レンダラー（Renderer）の核となるロジックもここにあります。
  • @vue/runtime-dom: このパッケージは、ブラウザ環境向けのランタイムサポートを提供しており、実際のDOMを操作するAPIやDOMイベントの処理などが含まれます。
@vue/compiler-core
@vue/compiler-dom
@vue/runtime-core
@vue/runtime-dom
// コアコンパイラ - テンプレートをASTに解析
import { parse, transform, generate } from '@vue/compiler-core'

const template = '<div>{{ message }}</div>'

// テンプレートをASTに解析
const ast = parse(template)
console.log('AST:', ast)

// ASTを変換し最適化
const transformedAst = transform(ast, {
  nodeTransforms: [/* さまざまな変換器 */],
  directiveTransforms: {/* ディレクティブ変換器 */}
})

// レンダー関数のコードを生成
const { code } = generate(transformedAst)
console.log('Generated code:', code)
Loading comments...
Watch と Computed
Watch と Computed の違いを探り、ソースコードを深掘り
深淵 DOM 的底層
DOM 到底是什麼呢?