Vue のようなフロントエンドフレームワークには、共通の考え方 (哲学) があります。
コンポーネント指向 (Component-Based)
コードの再利用性を高め、開発効率を良くしてくれます。
- Web ページを「再利用可能な小さな部品」の集まりとして考えます。この部品一つ一つを「コンポーネント」と呼びます。
- 例えば、ボタン / ナビゲーションバー / カード型表示など、それぞれを独立したコンポーネントとして作成し、それらを組み合わせてページをつくります。
リアクティブシステム (リアクティビティ)
開発者は UI とデータを宣言的に関連付けることができ、開発効率を高めることができます。手動での DOM (Document Object Model) 操作の場面が少なくなっています。
- JavaScript のデータ (状態) の変更を自動的に検知し、それに従って HTML (UI) の表示を効率的かつ自動で更新する仕組みです。
- データバインディング (Data Binding):
- JavaScript のデータが変更されると、自動的に HTML の表示も更新されます。逆に、ユーザーが HTML 上のフォームに入力すると、 JavaScript のデータも自動的に更新される、という双方向の連携も可能です。(後述: データバインディングの種類)
データバインディングの種類
| 種類 | 説明 |
|---|---|
片方向 ---> |
JavaScript によるデータ変更で、画面表示が自動で更新される。 |
双方向 <--> |
JavaScript のデータと UI (画面) 入力が、相互に同期。JavaScript 処理結果が画面に反映されるだけで無く、画面入力内容が JavaScript 処理データに反映される。 |
宣言的 UI (Declarative UI)
複雑な UI でもコードがシンプルになり、開発しやすくしてくれます。
- 宣言的 UI では 最終的な状態だけを宣言します。フレームワークが、その状態になるように自動で要素を更新してくれます。(例: 「このボタンが『クリック済み』の状態になったら、色が赤でテキストは『クリック済み』になる」)
- 一方、命令的 UI というものでは一つ一つの操作を命令します。詳細に記述でき個別最適化に向きますが、コードベースの複雑化または肥大化に注意が必要です。(例: 「このボタンをクリックしたら、この要素の色を赤に変えて、テキストを『クリック済み』にする」)
これらの哲学を理解することは、 Vue だけでなく他のフレームワーク (Svelte, React, Angular 等) の学習にもきっと役立つでしょう。