いよいよ、 Web アプリの「見た目」と「動き」を作る主役、Vue (ヴュー) について深掘りしていきます。 Vue は、学習コストが低く、直感的に使えるため、初心者にも非常におすすめのフレームワークです。
Vue の特徴
- 直感的で学びやすい: Vue は、API 群がシンプルでわかりやすい設計で構築されており、Web 開発の基礎知識があれば始められます。公式ドキュメントも非常に充実しています。
- 軽量で高速: パフォーマンスが高く、動作が軽いため、ユーザー体験の良いアプリケーションを構築できます。
- フレームワーク である: 標準的かつ汎用的で優れた開発環境をすぐに構築でき、早い段階から開発に集中できます。個別のライブラリ選定や複雑な設定に時間を費やす必要はありません。
- プログレッシブ 指向: Vue は、小さな機能から大規模なアプリに至るまで、段階的に且つ柔軟に適用できます。
- 後方互換性 と マイグレーション への配慮: Vue では、長期にわたってプロジェクトを保守・拡張できる安定性が重視されています。実際、新機能設計時の後方互換性考慮や、マイグレーションガイドの提供等が行われて来ました。
- 活発なコミュニティと豊富なエコシステム: 世界中で多くの開発者に利用されており、情報交換や支援ツール開発も活発です。
Vue の基本構成
Vue のプロジェクトを作成すると、いくつかのファイルが生成されます。先ほど npm create vite@latest で作成したフォルダの中を見てみてください。
中でも特に重要なのが src フォルダの中にある .vue という拡張子のファイル群です。src/App.vue や src/components/HelloWorld.vue などがありますね。
.vue ファイルには、一つのコンポーネントの構成に必要な HTML / JavaScript / CSS が集約されています。
<template>
<div>
<h1>{{ message }}</h1>
<button @click="changeMessage">メッセージ変更</button>
</div>
</template>
<script setup>
// ここに JavaScript のロジックを書きます
import { ref } from 'vue'
const message = ref('Vue 開発の世界へようこそ !')
const changeMessage = () => {
message.value = 'メッセージが変わりました !'
}
</script>
<style scoped>
/* ここにこのコンポーネント専用の CSS を書きます */
h1 {
color: blue;
}
</style>
<template>タグ: コンポーネントの構造 (HTML) を記述します。<script setup>タグ: コンポーネントのロジック (JavaScript) を記述します。Vue 3 で推奨される Composition API を使うための構文です。<style scoped>タグ: コンポーネントのスタイル (CSS) を記述します。Vue 独自の機能ですが、scopedをつけるとスタイルの適用がそのコンポーネント内だけに限定されます。
Vue の基本構成を図示したもの
+-----------------------------------+
| MyComponent.vue (SFC) |
+-----------------------------------+
| <template> |
| <div> |
| <h1>...</h1> | <-- HTML (構造)
| </div> |
| </template> |
|-----------------------------------|
| <script setup> |
| import { ref } from 'vue' | <-- JavaScript (ロジック)
| const message = ref('...') |
| </script> |
|-----------------------------------|
| <style scoped> |
| h1 { color: blue; } | <-- CSS (スタイル)
| </style> |
+-----------------------------------+
まずは、このような 単一ファイルコンポーネント (SFC) 構造のイメージを持ちましょう。