🟢 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を学ぶ方の参考になれば嬉しいです！

参考になったら「いいね」👍 お願いします！