Vue3ガイド | はじめに
Vueとは？
What is Vue?
Vueは、ユーザーインターフェース(UI)を構築のためのJavaScriptベースのフロントエンドフレームワークです。
コンポーネントベースの宣言的なプログラミングモデルを提供し、Vueテンプレート言語を使って、これに対するデータとロジックをJavaScriptとして実装してWebアプリケーションを作成できます。
// src/main.js import { createApp } from "vue"; import App from "./App.vue"; createApp(App).mount("#app");
// index.html <div id="app"></div>
// src/App.vue <script setup> import { ref } from "vue"; const count = ref(0); </script> <template> <button @click="count++">Count is: {{ count }}</button> </template>
上のコードは、Vueが備える次の2つのコア機能を示すものです。
宣言的レンダリングとリアクティビティーです。
宣言的レンダリング
宣言的プログラミングモデルは、プログラムが何をすべきかを宣言的に記述することで、より簡潔で直感的なコードを作成するプログラミングパラダイムを意味します。
ReactやVueのようなフレームワークでの宣言的レンダリングは、このような宣言的プログラミングモデルを活用してHTMLテンプレートを拡張し、ジャバスクリプト状態に基づいてUIをアップデートします。
このプロセスでは、開発者は明示的にDOM要素を操作する必要はありません。
例えば、バニラジャバスクリプトを使用する際、
Element.querySelector()などで該当ボタンを探して、そのボタンにaddEventListener()を作成するのではなく、ボタンの横にclickを宣言しただけで作動することを宣言的プログラミングモデルといいます。この出力は、ジャバスクリプトのステータスに基づいています。
ジャバスクリプトステータス基盤とは、Reactではステータスを管理するために
useStateフックを使用し、Vueではrefを通じてステータスを管理します。このような状態に基づいて、宣言的レンダリング方式は状態(state)の値が変更されるたびにUIを自動的にアップデートします。
したがって、状態の値が変わるたびに画面が再レンダリングされるので、すべての状態を作成すると性能問題が発生する可能性があるため、必要な状態だけを作成する必要があり、不要な状態は除去して性能を向上させることをお勧めします。
不要なレンダリングを防止するために、Reactでは
useMemoをvueではcomputedやwatchなどの最適化技術を使用するのも良い方法です。
リアクティビティー
Vueはjavascriptの状態の変化を自動的に追跡し、変化が起きると効率的にDOMをアップデートします。
上のコードから見ると、ボタンを押すとcountが更新されることを言います。
プログレッシブフレームワーク
The Progressive Framework
Vueの創始者であるEvan Youが2017年Vue.jsカンファレンスで発表した内容の中にあるイメージです。
Vueコアライブラリは、画面端データ表現に関する機能を重点的にサポートし、フレームワークの機能であるルータ、状態管理、テストなどを簡単に結合できる形で提供されます。
そのため、VueもReactのようにプロジェクトに部分適用が可能で、Vueを使用しなかったプロジェクトに漸進的に導入できるという意味でプログレッシブフレームワークと呼び、実際に漸進的に導入したレビューも多く見られます。
単一ファイルコンポーネント
Single-File Components
Vueを使用するとき、
*.vueというファイルに通常、以下のコードのようにHTMLに似たファイル形式で作成しますが、これをSFCという単一ファイルコンポーネントといいます。Vue の SFC は、その名前が示す通り、コンポーネントのロジック (JavaScript)、テンプレート (HTML)、およびスタイル (CSS) を単一のファイルに収めたものです。
// src/App.vue <script setup> import { ref } from "vue"; const count = ref(0); </script> <template> <button @click="count++">Count is: {{ count }}</button> </template> <style scoped> button { font-weight: bold; } </style>
2 つの API スタイル
Options API
Options APIはコンポーネントをオブジェクト形態で宣言し、propsの定義(props)、状態変数(data)、メソッド(methods)、ライフサイクル(mounted,updated,before Unmount,など)、計算された値(computed)、特定値のアップデート探知(watch)などの機能をオブジェクトの属性とメソッドを使用して宣言します。
このようなオプションで定義されたプロパティは、コンポーネントインスタンスを指す機能を使用してメソッド内で次のようにthisにアクセスできます。
<script> export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } }, mounted() { console.log(`The initial count is ${this.count}.`) } } </script> <template> <button @click="increment">Count is: {{ count }}</button> </template>
Composition API
Composition APIはVue.jsで使用されるOptions APIに代わる方法で、より直感的で柔軟な方法でVueコンポーネントを作成できるようにします。
React Hooksからインスピレーションを受けて作られ、オブジェクト指向プログラミング方式でも作成できますが、Vueはjavascript基盤で作られたフレームワークなので、Vue公式文書でも関数型プログラミング方式が推奨されています。
Composition APIでは、setup関数を使用してコンポーネントインスタンスが生成される前に実行されるコードを作成できます。
setup関数を使用してrefを使用して反応型変数を宣言し、一般的なJavaスクリプト関数にmethodsを置き換えることができます。
ライフサイクルメソッドは、onMounted、onUpdateなどのライフサイクルフック関数に置き換えられます。 ウォッチ関数を使用して反応型変数の変更点を感知し、computed関数を使用して計算された値を得ることができます。
既存にコンポーネント オブジェクトのプロパティで分離されていた機能のほとんどが、setup関数内で使用できます。
ただし、setup関数ではコンポーネントオブジェクトのデータ、コンポーネント、およびメソッドにアクセスすることができないため、以前にthisを使用してアクセスした機能は使用できません。 また、Composition APIではcreatedメソッドに対応するライフサイクルフックがないため、この部分はOptions APIとの違いがあります。
