🟢 Vue.js基礎文法完全ガイド【図解×コード】
📌 はじめに
この記事では、Vue.jsの基本文法を図解とコードで分かりやすく解説します。モダンなWebフロントエンド開発を始めたい方におすすめの内容です。
※本記事は Vue 3 を使用していますが、JavaやPHPなどのクラスベース言語から移行しやすい 「Options API」 の記述方法で解説しています。
🖥️ Vue.jsってどんなフレームワーク？
Vue.jsは以下のような場面でよく使われます：
- SPA（Single Page Application）
- 管理画面・ダッシュボード
- ECサイトのフロントエンド
- リアルタイムチャットアプリ
🌍 Vue.jsの特徴（図解）
🧰 1. 開発環境の準備
🔧 Node.jsをインストールする
Node.js 18以上が推奨です。
バージョン確認
node -v
npm -v
Vue.jsプロジェクトの作成
npm create vue@latest
対話形式で以下を選択：
- Project name: my-app
- TypeScript: No（初心者はNoでOK）
- JSX Support: No
- Vue Router: Yes
- Pinia: Yes（状態管理）
- Vitest: No
- ESLint: Yes
cd my-app
npm install
npm run dev
ブラウザでhttp://localhost:5173にアクセス。
🚀 2. 「Hello, World!」を動かしてみる
CDN版（HTMLファイル1つで動かす）
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">{{ message }}</div>
<script>
const { createApp } = Vue;
createApp({
data() {
return {
message: 'Hello, World!'
}
}
}).mount('#app');
</script>
</body>
</html>
📘 3. データバインディング
Vue.jsの最大の特徴はリアクティブなデータバインディングです。
テンプレート構文
<template>
<div>
<p>{{ message }}</p>
<p>{{ count * 2 }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: "Hello Vue!",
count: 5
}
}
}
</script>
主なデータ型
| 型 | 説明 | 例 |
|---|---|---|
| String | 文字列 | "Hello" |
| Number | 数値 | 10, 3.14 |
| Boolean | 真偽値 | true / false |
| Array | 配列 | [1, 2, 3] |
| Object | オブジェクト | { name: "Taro" } |
🔁 4. 条件分岐（v-if / v-show）
v-if（DOM自体を削除）
<template>
<div>
<p v-if="score >= 90">Excellent!</p>
<p v-else-if="score >= 70">Good!</p>
<p v-else>Try again</p>
</div>
</template>
<script>
export default {
data() {
return {
score: 80
}
}
}
</script>
v-show（CSSで表示切り替え）
<template>
<button @click="isVisible = !isVisible">Toggle</button>
<p v-show="isVisible">表示されます</p>
</template>
<script>
export default {
data() {
return {
isVisible: true
}
}
}
</script>
🔄 5. 繰り返し（v-for）
配列のループ
<template>
<ul>
<li v-for="(item, index) in items" :key="index">
{{ index }}: {{ item }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: ['Apple', 'Banana', 'Orange']
}
}
}
</script>
オブジェクト配列のループ
<template>
<div v-for="user in users" :key="user.id">
<p>{{ user.name }} ({{ user.age }})</p>
</div>
</template>
<script>
export default {
data() {
return {
users: [
{ id: 1, name: 'Taro', age: 25 },
{ id: 2, name: 'Hanako', age: 22 }
]
}
}
}
</script>
📦 6. イベント処理（v-on / @）
クリックイベント
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++;
},
decrement() {
this.count--;
}
}
}
</script>
入力イベント（v-model）
<template>
<div>
<input v-model="text" type="text">
<p>入力内容: {{ text }}</p>
</div>
</template>
<script>
export default {
data() {
return {
text: ''
}
}
}
</script>
🧱 7. 算出プロパティ（computed）
計算結果をキャッシュして効率的に処理します。
<template>
<div>
<p>{{ fullName }}</p>
</div>
</template>
<script>
export default {
data() {
return {
firstName: 'Taro',
lastName: 'Yamada'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName;
}
}
}
</script>
🧑🏫 8. コンポーネント（図解付き）
親コンポーネント
<template>
<div>
<ChildComponent :message="parentMessage" @update="handleUpdate" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from Parent'
}
},
methods: {
handleUpdate(value) {
console.log('子から受信:', value);
}
}
}
</script>
子コンポーネント
<template>
<div>
<p>{{ message }}</p>
<button @click="sendToParent">親に送信</button>
</div>
</template>
<script>
export default {
props: {
message: String
},
methods: {
sendToParent() {
this.$emit('update', 'Hello from Child');
}
}
}
</script>
⚠️ 9. ライフサイクルフック
<script>
export default {
data() {
return {
items: []
}
},
mounted() {
// コンポーネントがマウントされた時
console.log('コンポーネントが表示されました');
this.fetchData();
},
methods: {
async fetchData() {
// API呼び出しなど
const response = await fetch('/api/items');
this.items = await response.json();
}
}
}
</script>
📝 10. 実践課題
👉 課題
「TODOリストアプリを作成せよ」
- 追加機能
- 削除機能
- 完了チェック機能
解答例
<template>
<div>
<h1>TODOリスト</h1>
<input v-model="newTodo" @keyup.enter="addTodo">
<button @click="addTodo">追加</button>
<ul>
<li v-for="(todo, index) in todos" :key="index">
<input type="checkbox" v-model="todo.done">
<span :class="{ done: todo.done }">{{ todo.text }}</span>
<button @click="removeTodo(index)">削除</button>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
newTodo: '',
todos: []
}
},
methods: {
addTodo() {
if (this.newTodo.trim()) {
this.todos.push({
text: this.newTodo,
done: false
});
this.newTodo = '';
}
},
removeTodo(index) {
this.todos.splice(index, 1);
}
}
}
</script>
<style scoped>
.done {
text-decoration: line-through;
color: gray;
}
</style>
🎉 まとめ
この記事では、Vue.jsの基本文法を以下のように解説しました。
- 開発環境: Node.jsとVite（create-vue）の準備
- 基本構文: データバインディング、v-if、v-for
- コンポーネント: 親子間のデータ受け渡し
- ライフサイクル: mounted などのフック
Java/Python/PHP/Vue.jsの比較
| 項目 | Java | Python | PHP | Vue.js |
|---|---|---|---|---|
| 型 | 静的型付け | 動的型付け | 動的型付け | JavaScript（動的） |
| 用途 | 業務システム | AI/データ分析 | Web開発 | フロントエンド |
| Hello World | 5行程度 | 1行 | 1～2行 | HTMLテンプレート |
| 学習難易度 | 高 | 低 | 中 | 中 |
次のステップ
- Vue Routerでページ遷移を実装
- Piniaで状態管理を学ぶ
- Vuetify/Element PlusでUIコンポーネントを活用
これからVue.jsを学ぶ方の参考になれば嬉しいです！
参考になったら「いいね」👍 お願いします！