Vue.js

外観

目次

用語集 ​

この用語集は、Vue について話すときによく使われる専門用語の意味についてのガイダンスを提供することを目的としています。用語が一般的にどのように使用されているかを説明するものであり、どのように使用しなければならないかを規定するものではありません。一部の用語は、周囲の文脈によって微妙に異なる意味やニュアンスを持つ場合があります。

非同期コンポーネント（async component） ​

非同期コンポーネントは、別のコンポーネントのラッパーで、ラップされたコンポーネントを遅延ロードできるようにします。これは通常、ビルドされた .js ファイルのサイズを小さくする方法として使用され、必要なときだけロードされる小さなチャンクに分割できます。

Vue Router にも ルートコンポーネントの遅延読み込み という同様の機能がありますが、こちらは Vue の非同期コンポーネント機能を使用しません。

詳しくはこちらをご覧ください:

コンパイラーマクロ（compiler macro） ​

コンパイラーマクロとは、コンパイラーで処理されて別のものに変換される特別なコードです。これは、文字列置換の巧妙な形式です。

Vue の SFC コンパイラーは、defineProps(), defineEmits(), defineExpose() といった様々なマクロをサポートしています。これらのマクロは、JavaScript / TypeScript と同じパーサーや型推論ツールを利用できるように、意図的に通常の JavaScript 関数のように見えるよう設計されています。しかし、これらはブラウザーで実行される実際の関数ではありません。これらはコンパイラーが検出し、実際に実行される JavaScript コードに置き換える特別な文字列です。

マクロには、通常の JavaScript のコードには適用されない使用上の制限があります。例えば、const dp = defineProps とすると defineProps のエイリアスを作成できると考えるかもしれませんが、実際にはエラーになります。また、「引数」は実行時ではなく、コンパイラーで処理される必要があるため、defineProps() に渡すことができる値にも制限があります。

詳しくはこちらをご覧ください:

コンポーネント（component） ​

コンポーネントという用語は、Vue 特有のものではありません。多くの UI フレームワークに共通するものです。ボタンやチェックボックスのような UI の塊を表現しています。コンポーネントを組み合わせてより大きなコンポーネントを形成することもできます。

コンポーネントは、保守性の向上とコードの再利用を可能にするため、UI を小さな断片に分割するために Vue が提供する主要なメカニズムです。

Vue コンポーネントはオブジェクトです。すべてのプロパティは省略可能ですが、コンポーネントをレンダリングするには、テンプレートまたはレンダー関数のいずれかが必要です。例えば、次のようなオブジェクトは有効なコンポーネントとなります:

js
const HelloWorldComponent = {
  render() {
    return 'Hello world!'
  }
}

実際には、ほとんどの Vue アプリケーションは、単一ファイルコンポーネント（.vue ファイル）を使用して作成されます。これらのコンポーネントは一見するとオブジェクトではないように見えますが、SFC コンパイラーによってオブジェクトに変換され、そのファイルのデフォルトエクスポートとして使用されます。外部から見ると、.vue ファイルはコンポーネントオブジェクトをエクスポートする ES モジュールに過ぎません。

コンポーネントオブジェクトのプロパティは、通常、オプションと呼ばれます。これが Options API の名前の由来です。

コンポーネントのオプションは、そのコンポーネントのインスタンスがどのように作成されるかを定義します。コンポーネントは概念的にはクラスに似ていますが、Vue では実際の JavaScript のクラスを使って定義しているわけではありません。

また、コンポーネントという用語は、より広義にコンポーネントのインスタンスを指すために使用されることもあります。

詳しくはこちらをご覧ください:

また、「コンポーネント」という言葉は、他にもいくつかの用語で使用されます:

コンポーザブル（composable） ​

コンポーザブルという用語は、Vue の一般的な使用パターンを説明するものです。これは Vue の独立した機能ではなく、フレームワークの Composition API を使用する方法にすぎません。

  • コンポーザブルは関数です。
  • コンポーザブルはステートフルなロジックをカプセル化し再利用するために使用されます。
  • 関数名は通常 use で始まり、他の開発者にそれがコンポーザブルであることを認識できるようにします。
  • この関数は一般的に、コンポーネントの setup() 関数の同期実行中（あるいは <script setup> ブロックの実行中）に呼び出されることを想定しています。これは、例えば provide(), inject(), onMounted() の呼び出しによって、コンポーザブルの呼び出しを現在のコンポーネントコンテキストに関連付けます。
  • コンポーザブルは通常、リアクティブオブジェクトではなく、プレーンオブジェクトを返します。このオブジェクトは通常、ref や関数を含んでおり、呼び出し元のコード内で分割代入されることを想定しています。

多くのパターンと同様に、特定のコードがこのラベルに該当するかどうかについては、意見が分かれることがあります。JavaScript のユーティリティー関数がすべてコンポーザブルであるわけではありません。もし関数が Composition API を使用していないのであれば、それはおそらくコンポーザブルではありません。もしその関数が setup() の同期実行中に呼び出されることを想定していないのであれば、それはおそらくコンポーザブルではありません。コンポーザブルはステートフルなロジックをカプセル化するために特別に使われるもので、単なる関数の命名規則ではありません。

コンポーザブルの作成の詳細については、ガイド - コンポーザブルを参照してください。

Composition API ​

Composition APIは、Vue でコンポーネントやコンポーザブルを記述するために使用される関数のコレクションです。

この用語は、コンポーネントを記述するために使用される 2 つの主要なスタイルのうちの 1 つを表すためにも使用され、もう 1 つは Options API です。Composition API を使って書かれたコンポーネントは、<script setup> または明示的な setup() 関数を使用します。

詳細については、Composition API に関するよくある質問を参照してください。

カスタム要素（custom element） ​

カスタム要素とは、最近のウェブブラウザーに実装されている Web コンポーネント 規格の機能の 1 つです。HTML マークアップでカスタム HTML 要素を使用し、ページ内のその位置に Web コンポーネントを含める機能のことを指します。

Vue にはカスタム要素をレンダリングするためのサポートが組み込まれており、Vue コンポーネントのテンプレートで直接使用できます。

カスタム要素を、Vue コンポーネントを他の Vue コンポーネントのテンプレート内のタグとして含める機能と混同しないでください。カスタム要素は、Vue コンポーネントではなく、Web コンポーネントを作成するために使用されます。

詳しくはこちらをご覧ください:

ディレクティブ（directive） ​

ディレクティブという用語は、接頭辞 v- で始まるテンプレート属性、または同等のショートハンドを指します。

ビルトインのディレクティブには、 v-if, v-for, v-bind, v-on, v-slot があります。

Vue はカスタムディレクティブの作成もサポートしていますが、一般的にカスタムディレクティブは DOM ノードを直接操作するための「緊急避難口」としてのみ使用されます。ビルトインのディレクティブの機能は通常、カスタムディレクティブを使って再現できません。

詳しくはこちらをご覧ください:

動的コンポーネント（dynamic component） ​

動的コンポーネントという用語は、どの子コンポーネントをレンダリングするかを動的に選択する必要がある場合を説明するために使用されます。通常、これは <component :is="type"> を用いて実現されます。

動的コンポーネントは、特別なタイプのコンポーネントではありません。どのようなコンポーネントでも動的コンポーネントとして使用できます。動的なのはコンポーネントの選択であり、コンポーネントそのものではありません。

詳しくはこちらをご覧ください:

エフェクト/作用（effect） ​

リアクティブエフェクトと副作用を参照してください。

イベント（event） ​

プログラムの異なる部分間の通信にイベントを使用することは、プログラミングのさまざまな分野で一般的です。Vue では、この用語はネイティブ HTML 要素のイベントと Vue コンポーネントのイベントの両方に共通で適用されます。テンプレートでは v-on ディレクティブを使用して、両方の種類のイベントを購読できます。

詳しくはこちらをご覧ください:

フラグメント（fragment） ​

フラグメントという用語は、他の VNode の親として使用されますが、それ自身は要素をレンダリングしない特別なタイプの VNode を指します。

この名前は、ネイティブ DOM API における DocumentFragment と同様の概念に由来しています。

フラグメントは、複数のルートノードを持つコンポーネントをサポートするために使用されます。このようなコンポーネントは複数のルートを持っているように見えますが、裏ではフラグメントノードを 1 つのルートとして使用し、「ルート」ノードの親として使用します。

フラグメントは、テンプレートコンパイラーが複数のダイナミックノード（例えば v-for や v-if で作成されたノード）をラップする方法としても使用されます。これにより、VDOM のパッチアルゴリズムに追加のヒントを渡すことができます。この多くは内部で処理されますが、直接的に遭遇する可能性があるのは、 v-for で <template> タグに key を使用する場合です。このシナリオでは、key はフラグメントの VNode に props として追加されます。

フラグメントノードは現在、空のテキストノードとして DOM にレンダリングされますが、これは実装の詳細です。$el を使用したり、組み込みのブラウザー API で DOM を走査しようとすると、これらのテキストノードに遭遇することがあります。

関数型コンポーネント（functional component） ​

コンポーネント定義は通常、オプションを含むオブジェクトです。<script setup> を使用している場合はそのように見えないかもしれませんが、.vue ファイルからエクスポートされるコンポーネントはオブジェクトであることに変わりはありません。

関数型コンポーネントは、代わりに関数を使用して宣言されるコンポーネントの代替形式です。この関数は、コンポーネントのレンダー関数として機能します。

関数型コンポーネントは、それ自身の状態を持つことはできません。また、通常のコンポーネントのライフサイクルを経ないため、ライフサイクルフックを使用することもできません。このため、通常のステートフルなコンポーネントよりも若干軽量になります。

詳しくはこちらをご覧ください:

ホイスティング/巻き上げ（hoisting） ​

ホイスティング/巻き上げという用語は、コードのセクションに到達する前に、他のコードよりも先に実行することを表すために使用されます。実行は早い時点に「引き上げ」られるのです。

JavaScript は、var、import、関数宣言など、いくつかの構成要素でホイスティングを使用します。

Vue の文脈的には、テンプレートコンパイラーがパフォーマンスを向上させるために静的ホイスティングを適用します。テンプレートをレンダー関数に変換する際、静的コンテンツに対応する VNode を一度作成し、その後再利用できます。このような静的な VNode は、レンダー関数が実行される前に、レンダー関数の外で作成されるため、巻き上げられていると表現されます。テンプレートコンパイラーが生成する静的なオブジェクトや配列にも、同じような形でホイスティングが適用されます。

詳しくはこちらをご覧ください:

DOM 内テンプレート（in-DOM template） ​

コンポーネントのテンプレートを指定するには、さまざまな方法があります。ほとんどの場合、テンプレートは文字列として提供されます。

DOM 内テンプレートという用語は、テンプレートが文字列ではなく、DOM ノードの形式で提供されるシナリオを指します。Vue は、innerHTML を用いて DOM ノードをテンプレート文字列に変換します。

一般的に、DOM 内テンプレートは、ページの HTML に直接書かれた HTML マークアップとして始まります。ブラウザーはこれを DOM ノードに解析し、Vue はこれを用いて innerHTML を読み取ります。

詳しくはこちらをご覧ください:

inject ​

provide / inject を参照してください。

ライフサイクルフック（lifecycle hooks） ​

Vue コンポーネントのインスタンスにはライフサイクルがあります。例えば、作成、マウント、更新、アンマウントなどです。

ライフサイクルフックは、これらのライフサイクルイベントを購読するための方法です。

Options API では、各フックは mounted のような個別のオプションとして提供されます。Composition API では、代わりに onMounted() のような関数が使用されます。

詳しくはこちらをご覧ください:

マクロ（macro） ​

コンパイラーマクロを参照してください。

名前付きスロット（named slot） ​

コンポーネントは、名前によって区別された複数のスロットを持つことができます。デフォルトのスロット以外のスロットは、名前付きスロットと呼ばれます。

詳しくはこちらをご覧ください:

Options API ​

Vue コンポーネントは、オブジェクトを使って定義されます。このコンポーネントオブジェクトのプロパティは、オプションと呼ばれます。

コンポーネントは 2 つのスタイルで記述できます。1 つは Composition API と setup（setup() オプションまたは <script setup>）を組み合わせて使用するスタイルです。もう 1 つのスタイルは、Composition API をほとんど直接使用せず、代わりにさまざまなコンポーネントオプションを使用して同様の結果を実現します。この方法で使用されるコンポーネントオプションは、Options API と呼ばれます。

Options API には、data()、computed、methods、created() といったオプションが含まれます。

また、props、emits、inheritAttrs などのオプションは、どちらの API でもコンポーネントを作成するときに使用できます。これらはコンポーネントのオプションであるため、Options API の一部とみなすことができます。しかし、これらのオプションは setup() と共に使用されるため、通常は 2 つのコンポーネントスタイル間で共有されると考えた方が便利です。

setup() 関数自体はコンポーネントオプションなので、Options API の一部としてみなすこともできます。しかし、これは「Options API」という用語が通常使用される方法とは異なります。代わりに、setup() 関数は Composition API の一部であると考えられています。

プラグイン（plugin） ​

プラグインという言葉は様々な文脈で使われますが、Vue ではアプリケーションに機能を追加する方法として、プラグインという特定の概念があります。

プラグインは、app.use(plugin) を呼び出すことでアプリケーションに追加されます。プラグイン自体は関数もしくは、install 関数を備えたオブジェクトです。この関数はアプリケーションのインスタンスを渡され、必要なことを何でも行うことができます。

詳しくはこちらをご覧ください:

props ​

Vue では、props という用語の一般的な使い方が 3 つあります:

  • コンポーネントの props
  • VNode の props
  • スロットの props

コンポーネントの props は、ほとんどの人が props として考えているものです。これらは、コンポーネントが defineProps() または props オプションを使用して明示的に定義します。

VNode の props という用語は、h() の第 2 引数として渡されたオブジェクトのプロパティを指します。これにはコンポーネント props が含まれますが、コンポーネントイベント、DOM イベント、DOM 属性、DOM プロパティも含まれます。通常、VNode の props に出会うのは、レンダー関数を使って VNode を直接操作する場合だけでしょう。

スロットの props は、スコープ付きスロットに渡されるプロパティのことです。

すべての場合において、props は他の場所から渡されるプロパティです。

props の語源は properties ですが、Vue の文脈では props という用語はより具体的な意味を持っています。properties の略語として使用することは避けてください。

詳しくはこちらをご覧ください:

provide / inject ​

provide と inject はコンポーネント間通信の一形態です。

あるコンポーネントが値を provide したとき、そのコンポーネントのすべての子孫は inject を使ってその値を取得できます。props とは異なり、提供するコンポーネントはどのコンポーネントが値を受け取るかを正確に知ることはできません。

provide と inject は、props のバケツリレーを避けるために使用されることがあります。また、コンポーネントがそのスロットの内容と通信するための暗黙の方法として使用することもできます。

また、provide はアプリケーションレベルでも使用でき、アプリケーション内のすべてのコンポーネントが値を利用できるようになります。

詳しくはこちらをご覧ください:

リアクティブエフェクト（reactive effect） ​

リアクティブエフェクトは、Vue のリアクティビティーシステムの一部です。これは、関数の依存関係を追跡し、その依存関係の値が変化したときにその関数を再実行するプロセスのことを指します。

watchEffect() は、エフェクトを作成するための最も直接的な方法です。Vue の他の様々な部分が内部的にエフェクトを使用しています。例えば、コンポーネントのレンダリング更新、computed()、watch() などです。

Vue は、リアクティブエフェクトの中でしかリアクティブな依存関係を追跡できません。もしプロパティの値がリアクティブエフェクトの外で読み込まれた場合、その後そのプロパティが変更された場合に Vue が何をすべきか分からなくなるという意味で、リアクティビティーを「失う」ことになります。

この用語は、「副作用（side effect）」に由来しています。プロパティの値が変更された副作用として、エフェクト関数が呼び出されます。

詳しくはこちらをご覧ください:

リアクティビティー（reactivity） ​

一般に、リアクティビティーとは、データの変化に応じて自動的にアクションを実行する機能のことを指します。例えば、データの値が変化したときに DOM を更新したり、ネットワークリクエストを行ったりすることです。

Vue の文脈的には、リアクティビティは機能のコレクションを説明するために使用されます。これらの機能を組み合わせてリアクティビティーシステムを形成し、リアクティビティー API を介して公開されます。

リアクティビティーシステムを実装する方法にはさまざまなものがあります。例えば、コードを静的に解析して依存関係を特定する方法があります。しかし、Vue はそのような形式のリアクティビティーシステムを採用していません。

その代わりに、Vue のリアクティビティーシステムは、実行時にプロパティへのアクセスを追跡します。これは、Proxy ラッパーとプロパティの getter/setter 関数の両方を使用して行われます。

詳しくはこちらをご覧ください:

リアクティビティー API（Reactivity API） ​

リアクティビティー APIは、リアクティビティーに関連する Vue のコア関数のコレクションです。これらはコンポーネントから独立して使用できます。ref()、reactive()、computed()、watch()、watchEffect() などの関数が含まれます。

リアクティビティー API は Composition API のサブセットです。

詳しくはこちらをご覧ください:

ref ​

これは、リアクティビティーの ref の使用についての項目です。テンプレートで使用される ref 属性については、代わりにテンプレート参照（template refs） を参照してください。

ref は、Vue のリアクティビティーシステムの一部です。これは、value と呼ばれる単一のリアクティブプロパティを持つオブジェクトです。

ref には様々な種類があります。例えば、ref()、shallowRef()、computed()、customRef() を使って ref を作成できます。isRef() 関数はオブジェクトが ref であるかどうかを調べることができ、 isReadonly() は ref がその値の直接の再代入を許すかどうかを調べることができます。

詳しくはこちらをご覧ください:

レンダー関数（render function） ​

レンダー関数はコンポーネントの一部で、レンダリング時に使用する VNode を生成します。テンプレートはレンダー関数にコンパイルされます。

詳しくはこちらをご覧ください:

スケジューラー（scheduler） ​

スケジューラーは、リアクティブエフェクトが実行されるタイミングを制御する Vue の内部構造の一部です。

リアクティブな状態が変化しても、Vue はすぐにレンダリングの更新をトリガーしません。その代わりに、キューを使用してそれらをまとめてバッチ処理します。これにより、基礎となるデータに複数の変更が加えられた場合でも、コンポーネントの再レンダリングは一度だけであることが保証されます。

ウォッチャーもスケジューラーキューを使用してバッチ処理されます。flush: 'pre'（デフォルト）のウォッチャーはコンポーネントレンダリングの前に実行され、flush: 'post' のウォッチャーはコンポーネントレンダリングの後に実行されます。

スケジューラー内のジョブは、いくつかのライフサイクルフックのトリガーやテンプレート参照の更新など、他の様々な内部タスクの実行にも使用されます。

スコープ付きスロット（scoped slot） ​

スコープ付きスロットという用語は、props を受け取るスロットを指すのに使われます。

歴史的に、Vue はスコープ付きスロットとスコープなしスロットを大きく区別してきました。ある程度は、共通のテンプレート構文で統一された、2 つの別々の機能とみなすことができました。

Vue 3 では、スロット API が簡素化され、すべてのスロットがスコープ付きスロットのように動作するようになりました。しかし、スコープ付きスロットとスコープなしスロットのユースケースはしばしば異なるため、この用語は props を持つスロットを指す方法としてまだ有用です。

スロットに渡される props は、スロットの内容を定義する親テンプレートの特定の領域内でのみ使用できます。テンプレートのこの領域は、props の変数スコープとして動作するため、「スコープ付きスロット」と呼ばれるようになりました。

詳しくはこちらをご覧ください:

SFC ​

単一ファイルコンポーネント を参照してください。

副作用（side effect） ​

副作用という用語は、Vue 特有のものではありません。これは、ローカルスコープを超えて何かを行う操作や関数を説明するために使用されます。

例えば、user.name = null のようなプロパティを設定する場合、user.name の値を変更することが予想されます。もし、Vue のリアクティビティーシステムを起動させるなど、他のことも行うのであれば、これは副作用と表現されるでしょう。これが Vue のリアクティブエフェクトという用語の由来です。

関数が副作用を持つと表現される場合、単に値を返すだけでなく、関数の外側で観察できる何らかのアクションを実行することを意味します。これは、状態の値を更新したり、ネットワークリクエストをトリガーしたりすることを意味するかもしれません。

この用語は、レンダリングや算出プロパティを説明するときによく使われます。レンダリングには副作用がないことがベストプラクティスとされています。同様に、算出プロパティの getter 関数には副作用がないことが望ましいです。

単一ファイルコンポーネント（Single-File Component） ​

単一ファイルコンポーネント（SFC）という用語は、Vue コンポーネントによく使われる .vue ファイル形式を指します。

参照:

スロット（slot） ​

スロットは、子コンポーネントにコンテンツを渡すために使用されます。props がデータ値を渡すのに使われるのに対し、スロットは HTML 要素や他の Vue コンポーネントからなるリッチなコンテンツを渡すのに使われます。

詳しくはこちらをご覧ください:

テンプレート参照（template ref） ​

テンプレート参照という用語は、テンプレート内のタグに ref 属性を使用することを指します。コンポーネントがレンダリングされた後、この属性を使用して、テンプレート内のタグに対応する HTML 要素またはコンポーネントインスタンスを、対応するプロパティに入力します。

Options API を使用している場合、テンプレート参照は $refs オブジェクトのプロパティを通じて公開されます。

Composition API を使用する場合、テンプレート参照は同じ名前のリアクティブ ref に入力されます。

テンプレート参照（template ref）と、Vue のリアクティビティーシステムのリアクティブ ref を混同しないでください。

詳しくはこちらをご覧ください:

VDOM ​

仮想 DOM を参照してください。

仮想 DOM（virtual DOM） ​

仮想 DOM（VDOM）という用語は、Vue 特有のものではありません。これは、UI の更新を管理するために、いくつかの Web フレームワークで使用されている一般的なアプローチです。

ブラウザーは、ノードのツリーを使用して、ページの現在の状態を表現します。このツリーと、ツリーとのやりとりに使用される JavaScript API は、ドキュメントオブジェクトモデル、または DOM と呼ばれます。

DOM を操作することは、パフォーマンスの大きなボトルネックとなります。仮想 DOM は、それを管理するための 1 つの戦略を提供します。

Vue コンポーネントは DOM ノードを直接作成するのではなく、どのような DOM ノードが必要かを記述したものを生成します。この記述子は、プレーンな JavaScript オブジェクトで、VNode（仮想 DOM ノード）として知られています。VNode の作成は比較的安価です。

コンポーネントが再レンダリングするたびに、新しい VNode のツリーと以前の VNode のツリーが比較され、違いがあれば実際の DOM に適用されます。何も変わっていなければ、DOM に触れる必要はありません。

Vue では、コンパイラー情報に基づく仮想 DOM と呼ばれるハイブリッドアプローチを採用しています。Vue のテンプレートコンパイラーは、テンプレートの静的解析に基づいてパフォーマンスの最適化を適用できます。Vue は、実行時にコンポーネントの新旧 VNode ツリーの完全な比較をするのではなく、コンパイラーが抽出した情報を使用して、実際に変更される可能性のあるツリーの部分だけに比較を減らすことができます。

詳しくはこちらをご覧ください:

VNode ​

VNode は仮想 DOM ノードです。h() 関数を使用して作成できます。

詳細については、仮想 DOM を参照してください

Web コンポーネント（Web Component） ​

Web コンポーネント規格は、モダン Web ブラウザーに実装されている機能のコレクションです。

Vue コンポーネントは Web コンポーネントではありませんが、defineCustomElement() を使用することで、Vue コンポーネントからカスタム要素を作成できます。また、Vue は Vue コンポーネント内部でのカスタム要素の使用もサポートしています。

詳しくはこちらをご覧ください:

このページを GitHub で編集