【初心者向け】Vue.js の始め方：入門チュートリアル

By /

はい、承知いたしました。Vue.js 初心者向けの入門チュートリアル記事を、約5000語の詳細な説明を含めて記述します。

【初心者向け】Vue.js の始め方：詳細な入門チュートリアル

Web開発の世界に足を踏み入れたばかりの方、あるいはJavaScriptのフレームワークに興味はあるけれど、どこから手を付けて良いか分からない方へ。この詳細な入門チュートリアル記事は、現代的なフロントエンド開発で広く使われている人気フレームワークの一つ、Vue.js をゼロから学び始めるためのものです。

約5000語に及ぶこのチュートリアルでは、Vue.js の基本的な概念から、実際に簡単なアプリケーションを構築するためのステップまでを、初心者にも分かりやすいように徹底的に解説します。読むだけでなく、実際に手を動かしながら進めることで、Vue.js の魅力と実力を肌で感じられるでしょう。

はじめに：Vue.js とは何か、なぜ学ぶ価値があるのか

Vue.js とは？

Vue.js（発音は /vjuː/、ビュー・ドット・ジェイエス）は、ユーザーインターフェース（UI）構築のためのプログレッシブフレームワークです。Evan You氏によって作成され、現在では世界中の開発者に愛用されています。

「プログレッシブフレームワーク」とは、必要に応じて少しずつ導入できる柔軟性を持っていることを意味します。例えば、既存のプロジェクトの一部に小さなインタラクティブな要素を追加したい場合、Vue.js を部分的に使うことができます。一方、ゼロから大規模なシングルページアプリケーション（SPA）を構築したい場合にも、強力なツールとして機能します。

Vue.js の主な特徴は以下の通りです。

  • 学習コストの低さ: HTML、CSS、基本的なJavaScriptの知識があれば、比較的容易に学び始めることができます。直感的で分かりやすいAPI設計が採用されています。
  • リアクティビティ: データ（JavaScriptのオブジェクトや配列）とDOM（ウェブページの表示内容）が自動的に同期します。データが変更されると、Vue.js がそれを検知し、関連するDOMを効率的に更新してくれます。これにより、手動でのDOM操作の記述を大幅に減らすことができます。
  • コンポーネント指向: UIを独立した再利用可能な部品（コンポーネント）に分割して開発するスタイルを推奨しています。これにより、コードの管理がしやすくなり、大規模なアプリケーション開発に適しています。
  • 高いパフォーマンス: 仮想DOM（Virtual DOM）という技術を利用して、効率的にDOMを更新します。これにより、高速なレンダリングが可能です。
  • 豊富なエコシステム: 公式ライブラリとして、ルーティング（Vue Router）や状態管理（Vuex / Pinia）などがあり、SPA開発に必要な機能が揃っています。また、活発なコミュニティによって多くのサードパーティライブラリやツールが開発されています。

なぜ今、Vue.js を学ぶのか？

Vue.js は、現代のWebアプリケーション開発において非常に人気があり、多くの企業で採用されています。学ぶことには、以下のようなメリットがあります。

  • 需要の高さ: Vue.js のスキルを持つ開発者は市場で求められています。学習はキャリアアップに繋がる可能性があります。
  • 開発効率: リアクティビティシステムやコンポーネント指向により、効率的に複雑なUIを開発できます。
  • メンテナンス性: コンポーネントに分割することで、コードの見通しが良くなり、修正や機能追加が容易になります。
  • コミュニティのサポート: 活発なコミュニティが存在するため、困ったときに助けを求めたり、情報を得たりしやすい環境です。

もしあなたが、インタラクティブでリッチなウェブサイトやウェブアプリケーションを効率的に開発したいと考えているなら、Vue.js は学ぶ価値のあるフレームワークです。

この記事で学ぶこと

このチュートリアルでは、以下の内容を順番に学びます。

  1. Vue.js 開発のための環境準備
  2. CDNを使った最もシンプルなVue.js アプリケーションの作成
  3. 現代的な開発のためのVue CLIを使ったプロジェクト構築
  4. Vueインスタンス（Vue 3ではAppインスタンス）の基本的な使い方（データ、メソッド、算出プロパティなど）
  5. テンプレート構文（データの表示、条件分岐、繰り返し、イベント処理、フォーム入力バインディング）
  6. コンポーネントの概念と使い方（Props, Events, Slot）
  7. さらにVue.js を深く学ぶための次のステップ

さあ、Vue.js の世界へ飛び込みましょう！

開発環境の準備

Vue.js の学習を始めるにあたり、いくつかのツールが必要になります。基本的なWeb開発のツールに加え、現代的なJavaScript開発で一般的に使用される環境を整えます。

必要なもの

  • モダンなWebブラウザ: Chrome, Firefox, Safari, Edgeなど。開発者ツールを頻繁に使用します。特にChromeのVue.js devtools拡張機能は学習に非常に役立ちます。
  • テキストエディタまたはIDE: コードを書くためのエディタが必要です。VS Code, Sublime Text, Atomなどが人気です。Vue.js のシンタックスハイライトや補完機能があるものが便利です。VS Codeには公式のVolar拡張機能があります。
  • Node.js と npm (または Yarn, pnpm): Vue CLI を使ったプロジェクト構築や、JavaScriptのパッケージ管理に必要です。

Node.js と npm のインストール

Node.js は、JavaScriptをサーバーサイドで実行するための環境です。npm（Node Package Manager）は、Node.js のパッケージ管理ツールで、世界中の開発者が公開している便利なライブラリ（パッケージ）をインストールしたり、自分のプロジェクトで利用したりするために使います。Vue CLI もnpmを使ってインストールします。

  1. Node.js 公式サイトにアクセス: https://nodejs.org/
  2. 推奨版 (LTS版) をダウンロードしてインストール: ほとんどの場合、安定していて多くの環境で推奨されているLTS (Long-Term Support) 版を選びます。ダウンロードしたインストーラーを実行し、画面の指示に従ってインストールを完了させます。特に設定を変更する必要はありません。

  3. インストール確認: インストール後、ターミナル（macOS/Linux）またはコマンドプロンプト/PowerShell（Windows）を開き、以下のコマンドを入力して、バージョン情報が表示されるか確認します。

    bash
    node -v
    npm -v

    バージョン番号が表示されれば、インストールは成功です。npm は Node.js に同梱されていますので、Node.js をインストールすれば自動的に利用可能になります。

    補足: npm の代替として Yarn や pnpm といったパッケージマネージャーもありますが、入門段階では npm で十分です。この記事では主に npm を使用します。

Vue CLI とは？ (概要とインストールの準備)

現代的なVue.js アプリケーション開発では、単一ファイルコンポーネント（.vue ファイル）という形式を使用することが一般的です。これは、HTML、JavaScript、CSS を一つのファイルにまとめて記述できる便利な仕組みですが、ブラウザはそのままでは理解できません。そのため、これらのファイルをブラウザが理解できる形（通常のHTML, CSS, JavaScript）に変換するビルドプロセスが必要になります。

Vue CLI (Command Line Interface) は、この複雑なビルド環境の構築を簡単に行ってくれる公式ツールです。プロジェクトの作成、開発サーバーの起動、本番用のビルドなど、様々なタスクをコマンド一つで実行できます。WebpackやViteといったビルドツールの上に構築されており、設定なしで最適な開発環境を提供してくれます。

この記事の後半では、この Vue CLI を使ったプロジェクト構築方法を学びます。Vue CLI を使うためには、npm を使ってグローバルにインストールする必要がありますが、これはプロジェクト作成の直前に行います。まずは、最も簡単なVue.js の始め方から見ていきましょう。

最初のVue.js プロジェクト：CDN を使った簡単なアプリ

JavaScriptフレームワークに初めて触れる方にとって、開発環境の構築は少しハードルが高く感じられるかもしれません。Vue.js は非常にプログレッシブであるため、複雑なビルドツールを使わずに、既存のHTMLファイルにJavaScriptライブラリとして読み込むだけでも利用を開始できます。この方法は、手軽にVue.js を試したり、小さなインタラクティブ要素を既存サイトに追加したりする場合に便利です。

ここでは、CDN (Content Delivery Network) 経由でVue.js ライブラリを読み込み、ごく簡単な「Hello Vue!」アプリケーションを作成してみましょう。

HTMLファイルの作成

まず、作業用のフォルダを作成し、その中に index.html という名前のファイルを作成します。テキストエディタでこのファイルを開き、以下の内容を記述します。

“`html






はじめてのVue.js アプリ (CDN)

{{ message }}





“`

コードの解説:

  1. <div id="app">: これは、Vue.js アプリケーションが「マウント」される、つまりVue.js が制御する範囲を定めたHTML要素です。id="app" というセレクタを使って、後のJavaScriptコードからこの要素を指定します。
  2. {{ message }}: これはVue.js の「テキスト展開」または「Mustache構文」と呼ばれるものです。JavaScriptコードで定義した message という名前のデータを、この位置に表示するように指示しています。Vue.js が #app 要素を制御する際に、この {{ message }} を実際のデータ値に置き換えてくれます。
  3. <script src="...">: ここでVue.js ライブラリ自体をインターネット上のCDNから読み込んでいます。https://unpkg.com/vue@2 はVue.js 2系の最新版を読み込むためのURLです。学習目的であれば2系でも問題ありませんが、現在主流はVue 3です。Vue 3を使いたい場合は、コメントアウトされているVue 3のCDNリンクを使用してください（Vue 2とVue 3ではインスタンスの作成方法が少し異なります）。
  4. <script> ブロック: ここに、このページ固有のJavaScriptコード、具体的にはVue.js アプリケーションを初期化するためのコードを記述します。
  5. new Vue({...}) (Vue 2) / Vue.createApp({...}) (Vue 3):
    • Vue 2: new Vue({}) コンストラクタを使って、新しいVueインスタンスを作成します。このインスタンスが、アプリケーションの核となります。
    • Vue 3: Vue.createApp({}) 関数を使って、アプリケーションインスタンスを作成します。Vue 3では、VueインスタンスではなくAppインスタンスという呼び方をします。よりモダンで管理しやすい設計になっています。
    • どちらのバージョンでも、 {} の中にインスタンス（またはアプリ）のオプションオブジェクトを渡します。
  6. el: '#app': el オプションは、このVueインスタンスが制御するDOM要素を指定します。CSSセレクタと同じ形式で指定します。ここでは、IDが app の要素を指定しています。
  7. data: { message: 'Hello Vue!' }: data オプションは、アプリケーションで使用するデータオブジェクトを指定します。ここに定義されたプロパティ（ここでは message）は、Vue.js のリアクティブシステムによって監視され、値が変更されると自動的に関連するDOMが更新されます。

アプリケーションの実行

index.html ファイルを保存し、ブラウザで開いてみてください。

ブラウザには「Hello Vue!」と表示されているはずです。HTMLファイルに直接 Hello Vue! と書いたわけではなく、JavaScriptの data オプションで定義した message の値が、{{ message }} という記述を通してHTMLに表示されています。これがVue.js の基本的なデータのバインディングです。

少し変更を加えてみる:

開発者ツールを開いて、コンソールから app.message = 'Goodbye Vue!' と入力してEnterキーを押してみてください (Vue 3の場合は app.message = 'Goodbye Vue!')。

ブラウザに表示されているテキストが「Goodbye Vue!」に瞬時に変わるはずです。これは、app インスタンスの data に含まれる message プロパティの値をJavaScriptから変更した際に、Vue.js がその変更を検知し、自動的にDOM（{{ message }} の部分）を更新したためです。これがVue.js の強力なリアクティビティです。手動で document.getElementById('app').innerText = 'Goodbye Vue!' のようにDOM操作を行う必要はありません。

CDN方式の利点と欠点

利点:

  • 最も簡単にVue.js を試すことができる。
  • 既存の静的HTMLページに部分的にインタラクティブ機能を追加するのに便利。
  • ビルドツールなどの複雑な環境構築が不要。

欠点:

  • コンポーネントを効率的に管理できない（.vue ファイルが使えない）。
  • コードが巨大になると、単一のHTML/JSファイルで管理するのが困難になる。
  • ES Modules や最新のJavaScript構文（import/exportなど）をそのままでは使えない。
  • ビルド時の最適化（コード分割、ミニファイなど）が行われない。
  • 大規模なアプリケーション開発には不向き。

本格的にVue.js でアプリケーションを開発する場合は、次のセクションで解説する Vue CLI を使用した方法が一般的です。

現代的な開発：Vue CLI を使ったプロジェクト作成

より構造化された、大規模なアプリケーション開発に適した方法が、Vue CLI を使う方法です。Vue CLI は、開発サーバー、ホットリロード（コード変更時にブラウザ表示が自動更新される機能）、コードのトランスパイル（最新JS構文を古いブラウザでも動くように変換）、CSSのプリプロセッサ対応、コードのリント（静的解析による品質チェック）など、現代的なフロントエンド開発に必要な多くの機能を設定済みの状態で提供してくれます。

Vue CLI のインストール

Node.js と npm がインストールされていることを確認してください。次に、ターミナルを開き、以下のコマンドを実行して Vue CLI をグローバルにインストールします。

bash
npm install -g @vue/cli

npm install はパッケージをインストールするコマンド、-g はグローバルにインストールすることを意味します @vue/cli はインストールしたいパッケージ名です。

インストールが完了したら、以下のコマンドでバージョンを確認できます。

bash
vue --version

バージョン番号が表示されれば成功です。

注意: Vue 3 の新しい推奨プロジェクト作成ツールは Vite です。Vue CLI も引き続き利用可能で、既存プロジェクトでは広く使われています。初心者向けの学習としては Vue CLI も良い出発点ですが、将来的にViteについても学ぶことをお勧めします。ここでは引き続き Vue CLI を使って進めます。

新しいプロジェクトの作成

プロジェクトを作成したいディレクトリにターミナルで移動し、以下のコマンドを実行します。

bash
vue create my-vue-app

my-vue-app は作成するプロジェクトのフォルダ名です。任意の名前を付けてください。

コマンドを実行すると、設定のプリセットを選択するプロンプトが表示されます。

“`
Vue CLI vX.Y.Z
? Please pick a preset: (Use arrow keys)

Default (Vue 3) ([~ Babel], [~ ESLint])
Default (Vue 2) ([~ Babel], [~ ESLint])
Manually select features
“`

  • Default (Vue 3): Vue 3 を使用し、基本的な Babel (JavaScript変換) と ESLint (コード整形・チェック) が含まれる推奨設定です。
  • Default (Vue 2): Vue 2 を使用する設定です。既存のVue 2 プロジェクトに関わる場合以外は、Vue 3 を選択するのが良いでしょう。
  • Manually select features: 自分で必要な機能（TypeScript, Router, Vuex, CSS Pre-processors, Linter/Formatter, Unit Testing, E2E Testing）を選択できます。

初心者の方は、Default (Vue 3) を選択するのが最も簡単でおすすめです。Enterキーを押して選択します。

しばらく待つと、プロジェクトの作成と必要なパッケージのインストールが自動的に行われます。

プロジェクト構成の確認

プロジェクトの作成が完了すると、my-vue-app というフォルダが作成されています。フォルダの中身は以下のようになっています（一部抜粋）。

my-vue-app/
├── node_modules/ <- プロジェクトが依存するライブラリ（npm installでインストールされる）
├── public/
│ ├── favicon.ico
│ └── index.html <- アプリケーションのエントリーポイントとなるHTMLファイル
├── src/ <- アプリケーションの主要なコード
│ ├── assets/ <- 画像などの静的ファイル
│ ├── components/ <- 再利用可能なコンポーネントを置く場所
│ │ └── HelloWorld.vue
│ ├── App.vue <- アプリケーションのルートコンポーネント
│ └── main.js <- アプリケーションの初期化コード
├── .gitignore <- Gitの管理対象から除外するファイル/フォルダを指定
├── babel.config.js <- Babelの設定ファイル
├── package.json <- プロジェクト情報、依存関係、スクリプトなどが定義されるファイル
├── README.md <- プロジェクトの説明
└── yarn.lock / package-lock.json <- インストールされたパッケージの正確なバージョン情報

重要なファイル/ディレクトリは以下の通りです。

  • public/index.html: アプリケーションが読み込まれるHTMLファイルです。CDN方式で作ったファイルと似ていますが、{{ }} のようなVueの構文は直接書かれていません。これは、Vue CLI がビルド時に src 以下のコードを処理し、結果をこのHTMLファイルに自動的に組み込むためです。Vue アプリケーションは、このファイル内の特定の要素（デフォルトでは <div id="app"></div>）にマウントされます。
  • src/main.js: アプリケーションのエントリーポイントとなるJavaScriptファイルです。ここでVue アプリケーションインスタンスが作成され、ルートコンポーネント（通常は App.vue）をマウントする処理が行われます。
  • src/App.vue: アプリケーションのルートコンポーネントです。全てのコンポーネントツリーの頂点となります。単一ファイルコンポーネント形式（.vue）で記述されています。
  • src/components/: 小さな再利用可能なコンポーネントを配置するためのディレクトリです。最初から HelloWorld.vue というサンプルコンポーネントが含まれています。
  • package.json: プロジェクトの設定ファイルです。プロジェクト名、バージョン、依存しているライブラリ（dependencies）、開発時に必要なライブラリ（devDependencies）、そしてよく使うコマンド（scripts）などが定義されています。

開発サーバーの起動

プロジェクトフォルダ (my-vue-app) にターミナルで移動し、以下のコマンドを実行します。

bash
npm run serve

このコマンドは、package.json の scripts フィールドに定義されている serve スクリプトを実行します。これは Vue CLI が提供する開発サーバーを起動し、アプリケーションをビルドして、ブラウザで確認できるようにします。

コマンドを実行すると、以下のような出力が表示されます。

“`
DONE Compiled successfully in Xms

App running at:
– Local: http://localhost:8080/
– Network: http://YOUR_IP_ADDRESS:8080/

Note: the development build is not suitable for production.
Open production build with npm run build.
“`

Local: http://localhost:8080/ に表示されているURLをブラウザで開いてください。初期状態のVueアプリケーションが表示されます。「Welcome to Your Vue.js App」というタイトルと、Vueロゴ、そしていくつかのリンクが表示されているはずです。

この開発サーバーは、コードを変更するたびに自動的にアプリケーションを再ビルドし、ブラウザの表示を更新してくれます（ホットリロード）。コードを編集したら保存するだけで、すぐにブラウザで結果を確認できます。

開発サーバーを停止するには、ターミナルで Ctrl + C を押します。

これで、現代的なVue.js 開発のための環境が整いました。以降は、主にこの Vue CLI で作成したプロジェクトを使って、Vue.js の各機能を学んでいきます。

Vue アプリケーションインスタンスの基本 (Vue 3)

Vue 3 では、new Vue() ではなく createApp() を使ってアプリケーションインスタンスを作成します。このインスタンスが、アプリケーション全体のコンテキスト（設定、グローバルアセット、ルートコンポーネントなど）を管理します。

src/main.js ファイルを開いてみましょう。初期状態では以下のようになっているはずです。

“`javascript
import { createApp } from ‘vue’
import App from ‘./App.vue’

createApp(App).mount(‘#app’)
“`

コードの解説:

  1. import { createApp } from 'vue': vue ライブラリから createApp 関数をインポートしています。
  2. import App from './App.vue': ルートコンポーネントである App.vue ファイルをインポートしています。.vue ファイルは、ビルドプロセスによって適切なJavaScriptモジュールに変換されます。
  3. createApp(App): createApp 関数を呼び出して、新しいアプリケーションインスタンスを作成します。引数には、アプリケーションのルートコンポーネント（ここでは App）を指定します。
  4. .mount('#app'): 作成したアプリケーションインスタンスを、指定したセレクタ（ここでは public/index.html にある <div id="app"></div>）を持つDOM要素にマウントします。これにより、Vue アプリケーションがその要素以下のDOMを制御するようになります。

ルートコンポーネント (App.vue) を見てみる

src/App.vue を開いてみましょう。これは単一ファイルコンポーネント（SFC: Single File Component）の例です。

“`vue

“`

SFCは、以下の3つのブロックで構成されています。

  1. <template>: このコンポーネントのHTML構造を記述します。ここでは、img タグと <HelloWorld> というカスタムタグ（これが後述のコンポーネントです）が記述されています。テンプレート内では、Vue.js のテンプレート構文（{{ }} や v- ディレクティブなど）を使用できます。
  2. <script>: このコンポーネントのJavaScriptロジックを記述します。デフォルトでは Options API の形式でエクスポートされています。ここでデータ、メソッド、算出プロパティ、ライフサイクルフック、他のコンポーネントのインポートと登録などを行います。
  3. <style>: このコンポーネントに適用するCSSスタイルを記述します。scoped 属性を付けると、このスタイルは現在のコンポーネントにのみ適用され、他のコンポーネントに影響を与えません。

Options API の基本オプション

src/App.vue の <script> ブロックや、CDN方式の new Vue({...}) で見たように、Vueインスタンス/アプリケーションインスタンスを作成する際に、オプションオブジェクトを渡します。Options API では、このオブジェクトに特定のプロパティ（オプション）を記述することで、コンポーネントの振る舞いを定義します。

主要なオプションをいくつか見ていきましょう。

data オプション：リアクティブな状態

data オプションは、コンポーネントのローカルな状態（データ）を定義するために使用します。これは関数として定義し、必ずオブジェクトを返さなければなりません。このオブジェクトのプロパティは、Vue.js のリアクティブシステムによって監視され、テンプレート内で使用できます。

“`javascript
//

```

{{ }} の中には、JavaScriptの有効な式を書くことができますが、テンプレートの複雑化を防ぐため、単純な式に限るべきです。複雑な計算やロジックは computed プロパティに移すのが良いプラクティスです。

ディレクティブ (v- プレフィックス)

ディレクティブは、v- プレフィックスを持つ特別な属性です。Vue.js に要素に特別な動作を適用するように指示します。

v-bind：属性バインディング (: 短縮形)

HTML要素の属性に、動的な値をバインドするために使用します。例えば、<img> タグの src 属性や、リンクの href 属性、ボタンの disabled 属性などに、data や computed の値を設定できます。

```html

```

v-bind:属性名="値" の形式で記述します。値 の部分はJavaScriptの式になります。v-bind: は : と短縮できます（例: :src="imageUrl"）。

クラスやスタイルにバインドすることも非常に便利です。

  • クラスバインディング: オブジェクト構文 { active: isActive, 'text-danger': hasError } または配列構文 [activeClass, errorClass] を使います。
  • スタイルバインディング: オブジェクト構文 { color: activeColor, fontSize: headerFontSize + 'px' } または配列構文を使います。

```html

```

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

条件に基づいて要素をレンダリングするかどうかを制御します。v-if ディレクティブは、指定した式が真と評価された場合に要素をレンダリングします。

```html

```

v-if は要素そのものをDOMに追加したり削除したりします。複数の要素をまとめて条件付きレンダリングしたい場合は、<template> タグに v-if を使うことができます。<template> タグ自身はレンダリングされません。

v-show：要素の表示/非表示

v-show も条件に基づいて要素の表示/非表示を切り替えますが、v-if とはメカニズムが異なります。v-show は常に要素をレンダリングし、CSSの display スタイルを使って表示・非表示を切り替えます。

```html

```

v-if と v-show の使い分け:

  • v-if: 条件が頻繁に変わらない場合や、レンダリングコストが高い要素に適しています。要素の生成・破棄にコストがかかりますが、非表示の間はDOMツリーに存在しません。
  • v-show: 条件が頻繁に変わる場合（例: タブの切り替えなど）に適しています。初期レンダリングコストはかかりますが、切り替えのコストは低いです。

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

配列やオブジェクトに基づいて、要素のリストをレンダリングします。

```html

```

v-for="項目 in 配列またはオブジェクト" の形式で記述します。配列の場合は (項目, インデックス) in 配列、オブジェクトの場合は (値, キー) in オブジェクト または (値, キー, インデックス) in オブジェクト の形式も可能です。

key 属性の重要性:

v-for を使用する際は、必ず :key 属性を指定することが強く推奨されます。key 属性には、リスト内の各要素を一意に識別できる値を指定します（多くの場合、データのID）。Vue.js は key を使って、リストのアイテムがどのように追加、削除、更新されたかを追跡し、DOMの再利用や並び替えを効率的に行います。key がないと、Vue.js はリスト内の要素の順序変更や要素の削除/追加を適切に検出できず、予期しない動作やパフォーマンスの低下を招く可能性があります。特にリストの要素が変更される可能性がある場合は必須です。インデックスを key に使うのは避けるべきです（要素の並び替えなどで問題が発生するため）。

v-on：イベントリスニング (@ 短縮形)

DOMイベント（クリック、入力、ホバーなど）をリッスンし、イベントが発生したときにJavaScriptコード（通常は methods で定義した関数）を実行します。

```html

```

v-on:イベント名="JavaScriptコード" の形式で記述します。JavaScriptコード の部分には、メソッド名の呼び出し（引数あり・なし）、または単純なJavaScript式を書けます。v-on: は @ と短縮できます（例: @click="incrementCount"）。

イベントハンドラには、$event という特別な変数を使ってネイティブDOMイベントオブジェクトを渡すことができます。

イベント修飾子:

v-on ディレクティブには、. で繋げて様々なイベント修飾子を指定できます。これにより、イベントオブジェクトを操作せずにネイティブなイベントの動作を制御できます。

  • .stop: event.stopPropagation() を呼び出します。イベントの伝播を止めます。
  • .prevent: event.preventDefault() を呼び出します。デフォルトの動作（リンク遷移、フォーム送信など）を阻止します。
  • .capture: キャプチャフェーズでイベントハンドラを追加します。
  • .self: イベントが発生した要素自身でイベントハンドラが実行される場合にのみトリガーします（バブリングによって子要素から伝わってきた場合は無視）。
  • .once: イベントハンドラを一度だけトリガーします。
  • .passive: スクロールイベントでパフォーマンスを向上させます（特にモバイル）。event.preventDefault() が無効になります。

キーボードイベント修飾子（例: @keyup.enter）、マウスボタン修飾子（例: @click.right）なども存在します。

v-model：フォーム入力バインディング (双方向バインディング)

フォーム要素（<input>, <select>, <textarea>）とコンポーネントの data プロパティとの間で、双方向バインディングを作成します。ユーザーがフォームの値を変更すると、data の値も自動的に更新され、data の値が変更されると、フォームの表示も自動的に更新されます。

```html

```

v-model="propertyName" の形式で記述します。<input type="checkbox"> や <select multiple> のように複数の値を選択できる要素に使う場合は、v-model にバインドする data プロパティは配列である必要があります。

v-model は内部的には、入力要素の種類に応じて v-bind と v-on を組み合わせて実装されています。例えば、<input type="text"> の場合、v-model="textValue" はほぼ <input :value="textValue" @input="textValue = $event.target.value"> と同じ意味になります。

v-model 修飾子:

  • .lazy: デフォルトでは input イベントで同期されますが、.lazy を付けると change イベントで同期されるようになります。
  • .number: 入力を数値型に変換します（ユーザーの入力が数値として解釈できない場合はNaNになります）。
  • .trim: 入力値の両端の空白を自動的にトリムします。

```html

```

これらのディレクティブを組み合わせることで、データの表示、条件に応じた要素の切り替え、リストの表示、ユーザーとのインタラクション（イベント処理やフォーム入力）といった、アプリケーションの基本的なUI操作を宣言的に記述できます。

コンポーネント指向：再利用可能な部品を作ろう

Vue.js の強力な特徴の一つがコンポーネントシステムです。アプリケーションのUIを、独立した、再利用可能な小さな部品（コンポーネント）に分割して構築する考え方です。これにより、コードの見通しが良くなり、開発効率やメンテナンス性が向上します。

先ほど見た App.vue や components/HelloWorld.vue もコンポーネントです。App.vue はアプリケーション全体のルートコンポーネントであり、その中に HelloWorld コンポーネントを配置しています。

コンポーネントとは？

コンポーネントは、独自のHTMLテンプレート、JavaScriptロジック、CSSスタイルを持つ、自己完結型のUIブロックです。例えば、ウェブサイトのヘッダー、フッター、サイドバー、ボタン、モーダルダイアログ、記事一覧のアイテムなど、UIを構成する様々な要素をコンポーネントとして定義できます。

コンポーネントを使うことの利点：

  • 再利用性: 同じコンポーネントをアプリケーション内の複数の場所で使い回せます。
  • 管理のしやすさ: アプリケーションが巨大になっても、UIを小さな単位で分割することで、コードの見通しが良くなり、バグの特定や修正が容易になります。
  • 協調開発: 複数の開発者がそれぞれ異なるコンポーネントを並行して開発できます。
  • テストのしやすさ: 各コンポーネントを独立してテストしやすくなります。

単一ファイルコンポーネント (.vue ファイル)

Vue CLI でプロジェクトを作成した場合、コンポーネントは .vue という拡張子の単一ファイルコンポーネント（SFC）として作成されます。これは、<template>, <script>, <style> の3つのブロックを一つのファイルにまとめて記述する形式で、Vue.js 開発の標準的な方法です。ビルドツール（Vue CLI / Vite）によって、ブラウザが理解できるHTML, JavaScript, CSS に変換されます。

src/components/HelloWorld.vue を見てみましょう。

```vue

```

<template> ブロックでコンポーネントの構造を、<script> ブロックでロジック（Options API 形式でエクスポートされるオブジェクト）、<style> ブロックでスタイルを記述しています。scoped 属性が付いたスタイルは、そのコンポーネントにだけ適用されます。

コンポーネントの登録

コンポーネントを使用するには、まずVue.js にそのコンポーネントの存在を知らせる（登録する）必要があります。登録方法には「グローバル登録」と「ローカル登録」があります。

  • グローバル登録: アプリケーションのどこからでも使えるように登録する方法です。通常、main.js で行います。
    ```javascript
    // main.js
    import { createApp } from 'vue'
    import App from './App.vue'
    import MyButton from './components/MyButton.vue' // 登録したいコンポーネントをインポート

    const app = createApp(App);
    app.component('MyButton', MyButton); // グローバル登録
    app.mount('#app');
    ``
    グローバル登録されたコンポーネント（例:    ) は、他のどのコンポーネントのテンプレート内でもまたは` のようにタグとして使用できます。ただし、グローバル登録は推奨されません。使わないコンポーネントも常にバンドルに含まれてしまい、ファイルサイズが大きくなるためです。

  • ローカル登録: 特定のコンポーネント内でのみ使用できるように登録する方法です。通常、親コンポーネントの <script> ブロック内の components オプションで行います。

    ```vue


    ```

    ローカル登録されたコンポーネント（例: MyChild, MyButton）は、そのコンポーネント（上記例では親コンポーネント）のテンプレート内でのみタグとして使用できます。他のコンポーネントで使用したい場合は、そのコンポーネントでも改めてローカル登録する必要があります。

Vue CLI で作成されたプロジェクトでは、src/main.js でルートコンポーネントである App.vue をマウントし、App.vue 内で他のコンポーネント（例: HelloWorld.vue）をローカル登録するというパターンが一般的です。

コンポーネント間のデータ連携

コンポーネントは独立していますが、互いに連携して機能する必要があります。主なデータ連携方法は以下の2つです。

  1. Props (親から子へ): 親コンポーネントから子コンポーネントへデータを渡すための仕組みです。Propsは子コンポーネントでは読み取り専用（一方通行）です。
  2. Events (子から親へ): 子コンポーネントから親コンポーネントへ、何らかの出来事（イベント）が発生したことを通知するための仕組みです。子コンポーネントは $emit メソッドを使ってイベントを発行し、親コンポーネントはそのイベントをリスンします。

Props の使い方 (親から子へ)

子コンポーネントの <script> ブロックで props オプションを定義し、受け取りたいプロパティ名を指定します。

```vue

```

親コンポーネントのテンプレートで子コンポーネントを使用する際に、v-bind（または :) を使ってPropsを渡します。

```vue

```

親コンポーネントの parentMessage や parentCount の値が変更されると、Propsを通して MyChild コンポーネントにも自動的に新しい値が渡され、表示が更新されます。

Props は読み取り専用！ 子コンポーネント内で受け取ったPropsの値を直接変更してはいけません (this.message = '変更')。これは、Vue のデータフロー原則に反し、アプリケーションの状態を追跡しにくくするためです。もし子コンポーネントでPropsの値を変更したい場合は、親にイベントを発行して変更を依頼するか、Propsの値を元に子コンポーネント内で新しい data プロパティを作成し、それを操作します。

Events の使い方 (子から親へ)

子コンポーネントは、this.$emit('イベント名', 引数1, 引数2, ...) メソッドを使ってカスタムイベントを発行します。

```vue

```

親コンポーネントは、子コンポーネントのタグに v-on（または @）ディレクティブを使って、発行されたカスタムイベントをリスンします。

```vue

```

親コンポーネントは、子コンポーネントから発行されたイベント名（例: child-clicked, data-sent）に対応するメソッドを v-on ディレクティブで指定します。イベントハンドラメソッド（例: handleDataSent）は、$emit の第2引数以降として渡されたデータを受け取ることができます。

これにより、子コンポーネントは自身の内部状態を親に直接変更させることなく、親に変更を依頼したり、親に必要な情報を伝えたりすることができます。

スロット (Slot)

スロットは、親コンポーネントが子コンポーネントの指定された位置に、独自のコンテンツ（HTML要素や他のコンポーネント）を挿入するための仕組みです。コンポーネントをより柔軟で再利用可能にするために使用されます。例えば、汎用的なボタンコンポーネントの中に、親コンポーネントが自由にボタンテキストやアイコンを挿入したい場合などに使います。

子コンポーネントのテンプレートで <slot></slot> タグを記述します。

```vue

```

親コンポーネントのテンプレートで子コンポーネントを使用する際に、子コンポーネントのタグの間に挿入したいコンテンツを記述します。

```vue

```

  • 名前なしスロット (デフォルトスロット): <slot></slot> と記述されたスロットです。親コンポーネントの子タグの間に直接記述されたコンテンツがここに挿入されます。
  • 名前付きスロット: <slot name="スロット名"></slot> と記述されたスロットです。親コンポーネントでは、<template v-slot:スロット名> または <template #スロット名> タグを使って、そのスロットに挿入したいコンテンツを指定します。

スロットを使うことで、コンポーネントの内部構造は固定しつつ、中身のコンテンツを親コンポーネントから柔軟に変更できるようになります。

コンポーネントシステムを理解し、Props、Events、Slot を使いこなせるようになれば、Vue.js で保守性の高い、構造化されたアプリケーションを効率的に開発できるようになります。

さらに学習するために

このチュートリアルで、Vue.js の基本的な使い方と開発環境の構築、テンプレート構文、コンポーネントの概念を学びました。しかし、Vue.js の機能はこれだけではありません。さらに本格的なアプリケーション開発を行うためには、以下のトピックについて学ぶことが推奨されます。

Vue Router：シングルページアプリケーションのルーティング

シングルページアプリケーション（SPA）では、ページの遷移時にブラウザのリロードが発生しません。Vue Router は、URLとVueコンポーネントをマッピングし、SPAにおけるナビゲーションを実現するための公式ライブラリです。異なるURLパスに対して異なるコンポーネントを表示したり、パラメータ付きのURLを扱ったりするために使用します。

Vuex / Pinia：状態管理パターン

大規模なアプリケーションでは、複数のコンポーネメント間で共有される複雑な状態（ユーザー情報、カートの中身など）を管理する必要が出てきます。PropsやEventsだけでは管理が煩雑になる場合があります。Vuex (Vue 2) や Pinia (Vue 3 の推奨状態管理ライブラリ) は、アプリケーション全体の状態を一元管理するためのパターンおよびライブラリです。予測可能な方法で状態の変更を行うことができます。

Composition API (Vue 3の新機能)

Options API（data, methods, computed, watch などのオプションオブジェクトを使う形式）は初心者にとって分かりやすいですが、コンポーネントが大きくなると関連するロジックが複数のオプションに分散してしまい、コードの見通しが悪くなるという課題がありました。

Composition API は Vue 3 で導入された新しいAPIスタイルです。setup() 関数の中でリアクティブな状態や関数を定義し、それを返すことでテンプレートで使用できるようにします。これにより、関連するロジックをまとめて記述しやすくなり、大規模なコンポーネントやロジックの再利用性が向上します。Options API に代わるものではなく、両方を組み合わせて使うことも可能です。Vue 3 を本格的に使う場合は、Composition API も学ぶことをお勧めします。

TypeScript との連携

TypeScript は JavaScript に静的型付け機能を追加した言語です。大規模なアプリケーション開発において、コードの安全性や保守性を高めるのに役立ちます。Vue 3 は TypeScript との親和性が非常に高く、Vue CLI や Vite を使うと容易に TypeScript 環境を構築できます。

テスト

開発したアプリケーションが意図した通りに動作するかを確認するために、テストを書くことは重要です。Vue.js アプリケーションのテストには、コンポーネントの単体テストや、E2E（End-to-End）テストなどがあります。公式ライブラリとして Vue Test Utils が提供されています。

公式ドキュメントの活用

Vue.js の公式ドキュメント (https://vuejs.org/ - 日本語版もあります) は非常に充実しており、正確で最新の情報源です。困ったときやさらに深く学びたいときは、公式ドキュメントを参照するのが最も良い方法です。

コミュニティの活用

Vue.js には活発なコミュニティがあります。Stack Overflow、GitHub Discussions、Discord、Qiita、Zenn など、様々なプラットフォームで情報を得たり、質問したりすることができます。

まとめ

この長いチュートリアルを通して、あなたは Vue.js の基礎をしっかりと学びました。

  • Vue.js がプログレッシブなUIフレームワークであること、そしてリアクティビティとコンポーネント指向という特徴を理解しました。
  • CDNを使った簡単なVueアプリの作成方法で、Vue.js の最もシンプルな使い方を体験しました。
  • Vue CLI を使った現代的な開発環境の構築方法を学び、.vue 単一ファイルコンポーネントとプロジェクト構成を理解しました。
  • Vueアプリケーションインスタンス（Vue 3 の App インスタンス）の基本的なオプション（data, methods, computed, watch, ライフサイクルフック）の使い方を学びました。
  • Vue.js のテンプレート構文（{{ }}, v-bind, v-if, v-show, v-for, v-on, v-model）を詳細に理解し、宣言的なUI構築の方法を習得しました。
  • コンポーネントの概念、.vue ファイルの構造、コンポーネントの登録方法、そして Props, Events, Slot を使ったコンポーネント間のデータ連携とコンテンツ挿入の方法を学びました。

これらは Vue.js の基礎の基礎ですが、これらの知識があれば、簡単なウェブサイトにインタラクティブな機能を追加したり、小規模なSPAを構築したりする出発点に立つことができます。

約5000語の詳細な説明は、時には圧倒される量だったかもしれません。しかし、各概念や構文の背景にある理由や、具体的なコード例とその解説を丁寧に追うことで、表面的な使い方だけでなく、Vue.js がどのように動いているのか、なぜそのような書き方をするのか、といった深い理解に繋がったことを願っています。

Web開発の世界は常に進化しています。Vue.js もまた、Vue 3 で Composition API が導入されるなど、進化を続けています。学びに終わりはありません。

このチュートリアルで得た知識を足がかりに、実際に小さなアプリケーションを自分で作ってみたり、公式ドキュメントでさらに情報を深掘りしたり、Vue Router や Pinia といったエコシステムのライブラリに挑戦したりしてみてください。手を動かすことが最も効果的な学習方法です。

もし途中で詰まったり、分からないことが出てきたりしても落ち込む必要はありません。それは成長している証拠です。公式ドキュメントやコミュニティの力を借りながら、一歩ずつ着実に進んでいきましょう。

あなたの Vue.js 学習の旅が素晴らしいものになるよう、心から応援しています！

コメントする

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

上部へスクロール