フロントエンドフレームワーク 共通の考え方

Vue のようなフロントエンドフレームワークには、共通の考え方 (哲学) があります。

コンポーネント指向 (Component-Based)

コードの再利用性を高め、開発効率を良くしてくれます。

• Web ページを「再利用可能な小さな部品」の集まりとして考えます。この部品一つ一つを「コンポーネント」と呼びます。
• 例えば、ボタン / ナビゲーションバー / カード型表示など、それぞれを独立したコンポーネントとして作成し、それらを組み合わせてページをつくります。

リアクティブシステム (リアクティビティ)

開発者は UI とデータを宣言的に関連付けることができ、開発効率を高めることができます。手動での DOM (Document Object Model) 操作の場面が少なくなっています。

• JavaScript のデータ (状態) の変更を自動的に検知し、それに従って HTML (UI) の表示を効率的かつ自動で更新する仕組みです。
• データバインディング (Data Binding):
  • JavaScript のデータが変更されると、自動的に HTML の表示も更新されます。逆に、ユーザーが HTML 上のフォームに入力すると、 JavaScript のデータも自動的に更新される、という双方向の連携も可能です。(後述: データバインディングの種類)

データバインディングの種類

宣言的 UI (Declarative UI)

複雑な UI でもコードがシンプルになり、開発しやすくしてくれます。

• 宣言的 UI では 最終的な状態だけを宣言します。フレームワークが、その状態になるように自動で要素を更新してくれます。(例: 「このボタンが『クリック済み』の状態になったら、色が赤でテキストは『クリック済み』になる」)
  • 一方、命令的 UI というものでは一つ一つの操作を命令します。詳細に記述でき個別最適化に向きますが、コードベースの複雑化または肥大化に注意が必要です。(例: 「このボタンをクリックしたら、この要素の色を赤に変えて、テキストを『クリック済み』にする」)

これらの哲学を理解することは、 Vue だけでなく他のフレームワーク (Svelte, React, Angular 等) の学習にもきっと役立つでしょう。