Vue.js
Vue.jsとは
Vue.js は、Webの画面(UI)を作るための [[JavaScript]] フレームワークです。HTMLに近いテンプレート記法で画面を書き、データが変わると表示が自動で更新されるリアクティブな仕組みが特徴です。[[React]] と並んで、[[SPAとMPA]] でいう SPA 開発の定番の選択肢です。
<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>
<template>
<button @click="count++">クリック数: {{ count }}</button>
</template>
count を書き換えるだけで、画面の表示が自動的に更新されます。この「データと画面の自動同期」をデータバインディングと呼びます。
Reactとの比較
| Vue.js | React | |
|---|---|---|
| 画面の書き方 | テンプレート(HTML拡張) | JSX(JS内にHTML風の記法) |
| 学習コスト | 低め(HTML/CSSの知識を活かしやすい) | JSの理解が前提 |
| データ更新 | リアクティブシステムが自動追跡 | setState 系の関数で明示的に更新 |
| 状態管理 | Pinia が公式推奨 | 外部ライブラリから選択 |
| 開発元 | コミュニティ主導(Evan You 氏が創始) | Meta |
どちらも仮想DOMで効率よく画面を更新する点は共通です。「HTMLベースで直感的に書きたいならVue、JSに寄せた柔軟さを求めるならReact」とよく言われます。
単一ファイルコンポーネント
Vue では .vue という拡張子のファイルに、テンプレート・スクリプト・スタイルの3つを1ファイルにまとめて書きます(単一ファイルコンポーネント、SFC)。部品ごとに見た目とロジックが1か所に揃うため、見通しよく開発できます。ビルドには [[Vite]] を使うのが標準で、Vite 自体が Vue の作者によって開発されたツールです。
初学者向けポイント
- 公式ドキュメントの日本語訳が充実しており、初学者が最初に触るフレームワークとして人気があります
- まずは
refによるリアクティブなデータと、v-if/v-forなどのディレクティブ(テンプレート内の制御記法)を押さえましょう - 規模が大きくなってきたら、[[状態管理]] ライブラリの Pinia でコンポーネント間のデータ共有を整理します
関連技術とのつながり
- [[JavaScript]] — Vue の土台となる言語
- [[React]] — 比較されることが多いもう一つの定番ライブラリ
- [[SPAとMPA]] — Vue が主に活躍する SPA という構成
- [[状態管理]] — Pinia による画面をまたぐデータの管理
- [[Vite]] — Vue 開発の標準ビルドツール
Q: Vue.jsの特徴として正しいのはどれ?
- [x] HTMLに近いテンプレート記法とリアクティブなデータバインディング
- [ ] サーバーサイド専用でブラウザでは動かない
- [ ] CSSを記述できない
解説: Vueはテンプレートベースで画面を書き、データの変更が自動で表示に反映されるリアクティブな仕組みを持ちます。
Q: Vueの単一ファイルコンポーネント(SFC)に含まれるものはどれ?
- [ ] データベースのスキーマ定義
- [x] テンプレート・スクリプト・スタイルの3つ
- [ ] サーバーのルーティング設定
解説: .vue ファイルにはテンプレート・スクリプト・スタイルを1ファイルにまとめて書きます。
Q: Vueで公式に推奨されている状態管理ライブラリはどれ?
- [ ] Redux
- [ ] jQuery
- [x] Pinia
解説: Vueでは Pinia が公式推奨の状態管理ライブラリです。