🎯 この記事のゴール
- Vue3の基本概念を理解する
- 簡単なアプリを作れるようになる
- 実務に進める土台を作る
1. Vueとは何か？
Vueは「ユーザーインターフェース（UI）を作るためのJavaScriptフレームワーク」です。
👉 一言でいうと
「画面を効率よく作るための仕組み」
2. Vue3の特徴
- シンプルで学びやすい
- リアクティブ（データ変更で画面が自動更新）
- コンポーネント設計
3. 開発環境の準備
Node.jsが必要です。
npm create vite@latest my-vue-app
cd my-vue-app
npm install
npm run dev
👉 ブラウザで http://localhost:5173 を開く
4. Vueの基本構造
Vueはこの3つで構成されます👇
<template>
<!-- HTML -->
</template>
<script setup>
// JavaScript
</script>
<style>
/* CSS */
</style>
5. データバインディング
🔹 データを表示する
<script setup>
const message = "Hello Vue!"
</script>
<template>
<p>{{ message }}</p>
</template>
👉 {{ }} でデータを表示
6. リアクティブデータ
<script setup>
import { ref } from 'vue'
const count = ref(0)
const increment = () => {
count.value++
}
</script>
<template>
<button @click="increment">+</button>
<p>{{ count }}</p>
</template>
👉 ポイント
-
ref()でリアクティブ化 -
.valueで操作
7. イベント処理
<button @click="increment">クリック</button>
👉 @clickでイベントを登録
8. 条件分岐
<p v-if="count > 5">多いです</p>
<p v-else>少ないです</p>
9. 繰り返し
<script setup>
const items = ['A', 'B', 'C']
</script>
<template>
<li v-for="item in items" :key="item">
{{ item }}
</li>
</template>
10. コンポーネント
🔹 子コンポーネント
<!-- Child.vue -->
<script setup>
defineProps(['msg'])
</script>
<template>
<p>{{ msg }}</p>
</template>
🔹 親で使う
<Child msg="Hello" />
11. 実践：カウンターアプリ
<script setup>
import { ref } from 'vue'
const count = ref(0)
const add = () => count.value++
const sub = () => count.value--
</script>
<template>
<h1>{{ count }}</h1>
<button @click="add">+</button>
<button @click="sub">-</button>
</template>
12. 初心者がハマるポイント
❌ refを忘れる
👉 画面更新されない
❌ .valueを忘れる
👉 値が変わらない
❌ keyをつけない
👉 描画バグの原因
13. 実務に進むために必要な次のステップ
- ルーティング（Vue Router）
- 状態管理（Pinia）
- API通信（axios）
- コンポーネント設計
🎯 まとめ
Vue3で重要なのは👇
- データが変わると画面が変わる（リアクティブ）
- コンポーネントで分割する
- 状態を正しく管理する
🔚 一言でまとめると
👉 Vue3は
「データを中心に画面を作るフレームワーク」