【入門】Vue.jsの基本を分かりやすく解説

``
この例では、ボタンのクリック、マウスオーバー、入力フィールドへの入力といったイベントが発生した際に、対応するmethods`内のメソッドが実行されます。イベントハンドラには、ネイティブのイベントオブジェクトが引数として渡されます。

v-onには、イベントハンドリングの挙動を変更するための様々な修飾子があります。

• .stop: イベントの伝播を停止します（event.stopPropagation()と同じ）。
  例: @click.stop="doSomething"
• .prevent: イベントのデフォルトの動作を防ぎます（event.preventDefault()と同じ）。フォーム送信やリンク遷移の阻止などに使われます。
  例: @click.prevent="doSomething"
• .capture: キャプチャフェーズでイベントをリッスンします。
• .self: イベントが要素自身で発生した場合のみトリガーされます。
• .once: イベントハンドラが最大1回だけ実行されます。
• .passive: スクロールイベントなどのパフォーマンスを改善します。モバイルでの利用が多いです。

キーイベントには、さらにキー修飾子があります（例: .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right）。

例: Enterキーで実行
html
<input type="text" @keyup.enter="submitForm">

4.8 v-model ディレクティブ

• 役割: フォーム入力要素（<input>, <select>, <textarea>など）とVueのデータを双方向バインディングします。フォーム要素の入力値が変更されるとデータも更新され、データが変更されるとフォーム要素の表示も更新されます。
• 記述方法: v-model="データ名"

例:
“`html

``v-modelは、フォーム要素のタイプに応じて自動的に適切な方法でデータと連携します（input要素ならvalue属性とinputイベント、checkbox/radioならchecked属性とchangeイベント、selectならvalue属性とchange`イベント）。

v-modelにも修飾子があります。

• .lazy: デフォルトではinputイベントでデータが更新されますが、.lazyを付けるとchangeイベントで更新されるようになります（入力確定時など）。
  例: v-model.lazy="message"
• .number: 入力値を自動的に数値に変換します。
  例: v-model.number="age"
• .trim: 入力値の前後にある空白を自動的にトリムします。
  例: v-model.trim="message"

5. 算出プロパティ (Computed Properties)

Vue.jsで扱うデータは、dataオプションで直接定義するものだけではありません。既存のdataプロパティの値に基づいて、動的に計算されるプロパティが必要になることがあります。このような場合に「算出プロパティ」を使用します。

• 役割: 既存のデータ（dataや他のcomputedプロパティ）から新しいデータを計算し、その結果をプロパティとして利用可能にします。
• 記述方法: Vueインスタンスのcomputedオプションに関数として定義します。関数は、計算結果となる値を返す必要があります。
• 特徴:
  • 算出プロパティは依存関係を追跡します。算出プロパティの計算に使用されているデータ（依存データ）が変更されると、その算出プロパティは自動的に再計算されます。
  • 算出結果はキャッシュされます。依存データが変更されていない限り、算出プロパティが複数回参照されても、計算は一度しか行われません。これにより、パフォーマンスが向上します。

例:
“`html

``
この例では、reversedMessageはmessageデータが変更されたときにのみ再計算され、priceWithTaxはpriceまたはtaxRateが変更されたときにのみ再計算されます。これらの算出プロパティは、テンプレート内ではdataプロパティと同じように、プロパティ名でアクセスできます（例:{{ reversedMessage }}`）。

算出プロパティ vs メソッド:

計算ロジックをメソッド（methodsオプションで定義した関数）として定義し、テンプレート内で呼び出すことも可能ですが、ほとんどのケースでは算出プロパティを使用する方が望ましいです。その理由は、キャッシュの仕組みにあります。

• 算出プロパティ: 依存データが変更されない限り、結果がキャッシュされ、呼び出しごとに再計算されません。
• メソッド: 呼び出されるたびに必ず実行されます。

例えば、上記のreversedMessageをメソッドとして定義した場合：
javascript
methods: {
getReversedMessage() {
console.log('getReversedMessage が実行されました'); // 実行されたか確認用
return this.message.split('').reverse().join('');
}
}
テンプレートでは {{ getReversedMessage() }} と呼び出します。もしこのメソッドがテンプレート内の複数箇所で呼び出されている場合、または同じコンポーネントが何度も再レンダリングされる場合、依存データが変更されていなくてもメソッドは毎回実行されてしまいます。一方、算出プロパティなら依存データが変わらなければ計算は一度きりです。

そのため、データの計算や加工によって新しい値を導き出し、それをテンプレートで表示したい場合は、算出プロパティを使用するのが一般的でパフォーマンス的にも有利です。イベント発生時の処理や、DOM操作など、特定の「動作」を実行したい場合はメソッドを使用します。

6. ウォッチャー (Watchers)

ウォッチャーは、特定のデータや算出プロパティの値の変化を監視し、変化があったときに非同期の処理やコストのかかる処理を実行したい場合に使用します。

• 役割: 特定のデータソース（dataプロパティ、computedプロパティ、propsなど）の変化を監視し、変化発生時に副作用を伴う処理（APIコール、DOM操作など）を実行します。
• 記述方法: Vueインスタンスのwatchオプションに、監視したいプロパティ名をキーとして、コールバック関数またはオプション付きのオブジェクトを定義します。
• 特徴:
  • データ変化時の副作用を伴う処理に適しています。
  • 算出プロパティとは異なり、キャッシュはされません。変化が発生するたびに定義した処理が実行されます。
  • コールバック関数は、新しい値と古い値の2つの引数を受け取ります。

例:
“`html

``
この例では、questionというdataプロパティの値が変更されるたびに、watchオプションで定義した関数が実行されます。関数内で、新しい値（newQuestion）をチェックし、必要に応じてgetAnswerメソッドを呼び出しています。これは、非同期処理（setTimeout`でシミュレーションしているAPIコールなど）を行う典型的な例です。

ウォッチャーと算出プロパティの使い分け:

• 算出プロパティ: 既存のデータから新しいデータを計算して表示したい場合。結果はキャッシュされ、依存データの変更に応じて自動更新される。
• ウォッチャー: 特定のデータ変化をトリガーとして、副作用を伴う処理を実行したい場合（非同期処理、DOM操作、ログ出力など）。キャッシュはされず、変化発生時に指定した処理が実行される。

ほとんどの場合、算出プロパティでデータの加工や表示を扱い、ウォッチャーは最後の手段として、算出プロパティでは実現できない複雑な副作用（非同期処理など）が必要な場合に使用すると考えてください。

7. クラスとスタイルのバインディング

HTML要素のclass属性やstyle属性を、Vueのデータに基づいて動的に変更したい場合がよくあります。これもv-bindディレクティブを使って実現できますが、特にクラスとスタイルのバインディングには便利な機能が提供されています。

7.1 クラスのバインディング (:class)

• 役割: 要素のCSSクラスを、データに基づいて動的に切り替えます。
• 記述方法: :class="... の形式で指定します。値には、オブジェクトまたは配列を渡すことができます。

オブジェクト記法: キーがクラス名、値が真偽値となります。値がtrueであればそのクラスが適用され、falseであれば適用されません。
“`html

“`

配列記法: 配列の要素としてクラス名（文字列）またはオブジェクトを記述します。
“`html

“`

これらの記法を組み合わせることも可能です。また、:classは通常のclass属性と共存でき、両方のクラスが要素に適用されます。

7.2 スタイルのバインディング (:style)

• 役割: 要素のCSSスタイルを、データに基づいて動的に設定します。
• 記述方法: :style="... の形式で指定します。値には、オブジェクトまたは配列を渡すことができます。

オブジェクト記法: CSSプロパティ名をキャメルケース（例: fontSize）またはケバブケース（例: 'font-size'）でキーとして、値を文字列で記述します。
“`html

“`

配列記法: 複数のスタイルオブジェクトを配列として指定します。
“`html

``:styleも通常のstyle`属性と共存できます。Vueが生成するスタイルは、既存のスタイルにマージされます。

8. イベントハンドリングの詳細 (v-on)

先ほどv-onディレクティブで基本的なイベント処理を見ましたが、もう少し詳しくイベントオブジェクトやメソッドについて見ていきましょう。

8.1 インラインハンドラとメソッドハンドラ

v-onの値には、簡単なJavaScriptの式を直接記述する「インラインハンドラ」と、methodsオプションで定義したメソッドを呼び出す「メソッドハンドラ」があります。

• メソッドハンドラ: v-on:click="methodName"
  イベントオブジェクトは自動的にメソッドの第一引数として渡されます。
• インラインハンドラ: v-on:click="someExpression"
  式の中でネイティブイベントオブジェクトを使用したい場合は、特別な変数$eventを使用します。

例:
“`html

“`
複雑なロジックや再利用したい処理はメソッドハンドラとして定義するのが一般的です。簡単な処理や、特定の引数をメソッドに渡したい場合はインラインハンドラも便利です。

8.2 イベント修飾子 (再掲)

前のセクションでも触れましたが、よく使うイベント修飾子を再度確認しておきましょう。

• .stop: イベント伝播停止
• .prevent: デフォルト動作阻止
• .capture: キャプチャフェーズでハンドリング
• .self: 要素自身でのイベントのみ
• .once: 一回だけ実行
• .passive: スクロールパフォーマンス改善

複数の修飾子を連結することも可能です。
例: @click.stop.prevent="doSomething" (伝播を停止し、デフォルト動作も阻止)

キーイベント修飾子:
* .enter, .tab, .delete, .esc, .space, .up, .down, .left, .right
* .ctrl, .alt, .shift, .meta (Ctrl, Alt, Shift, Metaキーと同時押しのイベントをリッスン)

例: @keyup.enter="submit" (Enterキーが離されたときにsubmitメソッドを実行)

これらの修飾子を使うことで、イベント処理のロジックをシンプルに保つことができます。

9. コンポーネント入門

Vue.jsの最も強力な機能の一つがコンポーネントシステムです。コンポーネントを使うことで、UIを独立した再利用可能な小さな部品に分割して構築できます。これは、大規模なアプリケーションを開発する上で不可欠な考え方です。

9.1 コンポーネントとは？ なぜ使うのか？

• コンポーネント: UIの一部とそのロジック、スタイルをカプセル化した自己完結型のブロックです。HTML、JavaScript、CSSのセットと考えることができます。
• 例: ボタン、入力フォーム、ヘッダー、フッター、商品リスト、モーダルウィンドウなど、Webページの様々な要素をコンポーネントとして定義できます。
• メリット:
  • 再利用性: 一度作成したコンポーネントは、アプリケーション内の様々な場所で何度でも再利用できます。
  • 保守性: コンポーネントごとにコードが分割されるため、変更や修正が必要な場合に影響範囲が限定され、保守が容易になります。
  • 可読性: UIの構造がコンポーネントの組み合わせとして表現されるため、コードの可読性が向上します。
  • 開発効率: チーム開発において、メンバーそれぞれが異なるコンポーネントを並行して開発できます。

9.2 基本的なコンポーネントの作成と登録（CDN版）

CDN版のVue.jsでは、Vue.createAppインスタンスのcomponentメソッドを使ってコンポーネントをグローバルに登録したり、親コンポーネントのオプション内でローカルに登録したりできます。

グローバル登録の例:
“`html

``
この例では、app.component()を使ってmy-componentという名前でコンポーネントをグローバルに登録しています。グローバル登録されたコンポーネントは、Vueアプリケーションがマウントされた要素（ここでは#app）内のどこからでも、カスタムタグ`として使用できます。

ポイント：
* コンポーネントの定義は、基本的にVueインスタンスのオプション（data, methods, computedなど）と同じ構造を持つオブジェクトです。
* dataオプションは、コンポーネントの場合も必ず関数である必要があります。これにより、コンポーネントが複数回使用されたときに、それぞれのインスタンスが独立したデータを持つことができます。
* コンポーネントのテンプレートは、単一のルート要素を持つ必要があります（Vue 3ではフラグメントも可能になりましたが、最初は単一ルートが良いでしょう）。
* HTMLは大文字小文字を区別しないため、テンプレート内でコンポーネントを使用する際は、ケバブケース（my-component）が推奨されます。JavaScriptの定義名（MyComponentなどのパスカルケースも可）とは書き方が異なることがある点に注意してください。

ローカル登録の例:
特定の親コンポーネント内でのみ使用するコンポーネントは、ローカル登録するのが一般的です。

“`html

``
ローカル登録されたコンポーネント（ChildComponent）は、それをcomponentsオプションで登録した親コンポーネント（ParentComponent`）のテンプレート内でのみ使用できます。他のコンポーネントやルートインスタンスのテンプレートでは直接使用できません。大規模なアプリケーションでは、依存関係を明確にするため、ローカル登録がより一般的です。

9.3 Single File Components (SFC) とビルドツール (補足)

実際の開発現場では、CDNでVue.jsを読み込む方法は小規模な実験やプロトタイピングに限られます。多くの場合は、Single File Components (SFC) と呼ばれる.vueファイル形式を使用します。

.vueファイルは、<template>, <script>, <style>のブロックを一つのファイルにまとめて記述でき、それぞれのブロックがそのコンポーネント固有のものとなります。

例 (MyComponent.vue):
“`html

``
この.vue`ファイルは、ブラウザが直接理解できる形式ではありません。そのため、ViteやVue CLIといったビルドツールを使用して、ブラウザが読み込めるHTML、JavaScript、CSSファイルに変換（コンパイル）する必要があります。

ビルドツールを使用することで、SFCの利用だけでなく、モジュールのバンドル、JavaScriptのトランスパイル（新しい構文を古いブラウザ向けに変換）、CSSのプリプロセッサ利用、ホットリロード（コード変更を即座にブラウザに反映）など、多くのメリットが得られます。

本格的な開発に進む際は、Viteなどを使った環境構築から始めることになりますが、まずはCDN版で基本的な概念を理解することから始めましょう。

10. コンポーネント間のデータ連携 (Props と Custom Events)

アプリケーションがコンポーネントの木構造で構成されるようになると、コンポーネント間でデータをやり取りする必要が出てきます。Vue.jsでは、コンポーネント間の主なデータ連携方法として以下の2つを提供しています。

1. Props (プロパティ): 親コンポーネントから子コンポーネントへデータを渡す（下方伝達）。
2. Custom Events (カスタムイベント): 子コンポーネントから親コンポーネントへメッセージを送る（上方伝達）。

この「Props down, Events up」という単方向データフローは、アプリケーションの状態管理を見通し良く保つためのVue.jsの設計思想です。

10.1 Props: 親から子へデータを渡す

• 役割: 親コンポーネントが持つデータを、その子コンポーネントに渡します。
• 子コンポーネント側: propsオプションで、親から受け取るプロパティ名を定義します。定義されたプロパティは、子コンポーネントのインスタンス上でthis.propertyNameとしてアクセスできるようになり、テンプレート内でも直接使用できます。
• 親コンポーネント側: 子コンポーネントを使用する際に、カスタムタグにv-bindディレクティブを使ってデータを渡します。

例:
“`html

``
親コンポーネントのparentDataとparentCountの値が、v-bindを使って子コンポーネントのmessageとcountというpropsに渡されています。子コンポーネントは、受け取ったpropsを自身のテンプレート内で表示しています。親コンポーネントのparentCount`をボタンで変更すると、その変更がprops経由で子に伝わり、子の表示も更新されます。

Propsのバリデーション:
受け取るpropsには、データ型や必須かどうかなどのバリデーションルールを定義できます。これにより、コンポーネントの堅牢性が向上します。propsオプションを配列ではなくオブジェクトとして定義し、各プロパティにルールを記述します。

javascript
props: {
message: String, // string型であることを期待
count: {
type: Number, // number型であることを期待
required: true, // 必須
default: 0, // デフォルト値 (requiredとdefaultは一緒に使えない場合が多い)
validator: function (value) { // カスタムバリデータ
return value >= 0
}
},
items: Array, // array型であることを期待
user: Object // object型であることを期待
}
バリデーションに失敗すると、開発モードではコンソールに警告が表示されます。

Propsの単方向データフロー:
重要: Propsは親から子への一方通行のデータフローです。子コンポーネント内で受け取ったpropsの値を直接変更してはいけません。これはVue.jsのルールであり、親子の依存関係を明確に保ち、アプリケーションの状態管理を予測可能にするために非常に重要です。

もし子コンポーネント内でpropsの値を変更したい場合は、その変更を親コンポーネントに通知し、親コンポーネントでデータ自体を更新する必要があります。この「子から親への通知」に使うのがカスタムイベントです。

10.2 Custom Events: 子から親へメッセージを送る

• 役割: 子コンポーネント内で発生した出来事やデータ変更を、親コンポーネントに通知します。
• 子コンポーネント側: this.$emit('イベント名', [渡したいデータ]) というメソッドを呼び出して、カスタムイベントを発行（emit）します。
• 親コンポーネント側: 子コンポーネントを使用するカスタムタグに、v-on（または@）ディレクティブを使って、そのイベント名に対応するリスナーを登録します。

例:
“`html

``
この例では、子コンポーネントのボタンがクリックされると、子のcurrentCountがインクリメントされ、同時にupdate-countというカスタムイベントが発行されます。このイベントには、更新されたcurrentCountの値がデータとして添付されています。親コンポーネントは、子コンポーネントを使用している箇所で@update-count=”handleChildUpdate”とリスナーを登録しており、イベント発生時に親のhandleChildUpdateメソッドが呼び出されます。このメソッドは子から渡された新しい値を受け取り、親のtotalCount`データを更新しています。

このように、データはPropsで親から子へ、子から親への「操作」や「通知」はカスタムイベントで行う、というルールを守ることで、コンポーネント間の依存関係が明確になり、デバッグや理解が容易になります。

v-model on Components:
Propsとカスタムイベントを組み合わせることで、フォーム入力要素のv-modelのような双方向バインディングの挙動を、カスタムコンポーネントに対して実現できます。Vue 3では、v-modelをコンポーネントに適用すると、デフォルトではmodelValueという名前のpropsを子に渡し、子がupdate:modelValueという名前のイベントを発行するという規約になっています。

“`html

コンポーネント表示/非表示