【2026年版】Vueの始め方 — やさしいフロントエンドフレームワーク入門

セットアップ手順

# Viteを使ったVueプロジェクト作成
npm create vite@latest my-vue-app -- --template vue-ts
cd my-vue-app
npm install
npm run dev

コンポーネントの基本（Composition API）

<script setup lang="ts">
import { ref, computed } from 'vue'

const count = ref(0)
const doubled = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>

<template>
  <div>
    <p>カウント: {{ count }}（2倍: {{ doubled }}）</p>
    <button @click="increment">+1</button>
  </div>
</template>

<style scoped>
button { padding: 0.5rem 1rem; }
</style>

よくある詰まりポイント

Q: ref の値を変更するときに .value が必要なのはなぜ？ → ref はオブジェクトでリアクティブな値をラップしているため、.value でアクセスします。テンプレート内では自動的にアンラップされるので {{ count }} と書けばOKです。

Q: Options APIとComposition APIどちらを使うべき？ → 新規プロジェクトでは再利用性が高いComposition APIが推奨されています。既存のVue 2コードを読む機会がある場合はOptions APIも学んでおくと役立ちます。

Q: v-model がうまく動かない → v-model はフォーム要素（input/select）で双方向バインディングに使います。子コンポーネントでは defineProps と defineEmits を組み合わせて実装します。

ひよこ

Vueってよく聞くけど、ReactやAngularと比べてどういうところがいいの？

ペンギン先生

VueはHTMLに近いテンプレート構文で書けるから、HTMLとCSSの基礎があればすごく入りやすいんだ。Reactだと JSX という独自の書き方を覚える必要があるけど、Vueなら普通のHTMLタグにディレクティブを足していく感覚で書けるよ。学習曲線がゆるやかなのが最大の魅力だね。

ひよこ

たしかにHTMLっぽく書けるなら安心かも！で、最初の環境構築はどうやるの？

ペンギン先生

今はcreate-vueという公式ツールを使うのが標準だよ。ターミナルで「npm create vue@latest」と打つだけでViteベースのプロジェクトが作れるんだ。Viteは超高速なビルドツールだから、ファイルを保存した瞬間にブラウザに反映される。開発体験がとにかく快適だよ。

ペンギン先生

ここで「npm create vite@latest my-vue-app -- --template vue-ts」を実行してみてね。「cd my-vue-app」→「npm install」→「npm run dev」でVueの初期ページが表示されるはずだよ。「localhost:5173」にアクセスして確認してみて！

ひよこ

プロジェクトができたら、まず何を見ればいいの？

ペンギン先生

まずは .vue ファイルを見てみよう。これがSFC（Single File Component）と呼ばれるVueの基本単位で、1つのファイルの中にscriptタグ、templateタグ、styleタグの3つのブロックがまとまっているんだ。HTMLとJavaScriptとCSSが1ファイルに収まるから、コンポーネントごとの見通しがとてもいいよ。

ひよこ

テンプレートの中でデータを表示したり、条件分岐したりするにはどうするの？

ペンギン先生

Vueにはテンプレートディレクティブという仕組みがあるよ。v-bindで属性にデータを紐づけ、v-ifで条件分岐、v-forでリストの繰り返し描画ができる。あとv-modelを使うとフォームの入力値と変数を双方向バインディングできるんだ。HTMLの属性に「v-」をつけるだけだから、覚えやすいでしょ？

ひよこ

データが変わったら画面も自動で更新されるって聞いたけど、それってどういう仕組みなの？

ペンギン先生

それがVueの「リアクティビティ」だね。Composition APIではrefやreactiveという関数でデータを宣言すると、値が変わったときに関連するDOM（画面）が自動で再描画されるんだ。computedを使えば、他のデータから自動計算される値も作れるよ。たとえば商品の個数と単価からrefで持って、合計金額をcomputedで計算する、みたいな使い方だね。

ひよこ

コンポーネントを分けて再利用するにはどうすればいいの？

ペンギン先生

Vueではpropsとemitでコンポーネント間のデータをやり取りするよ。親から子へデータを渡すのがprops、子から親へイベントを通知するのがemitだね。たとえばボタンコンポーネントを作って、表示ラベルをpropsで受け取り、クリックされたらemitで親に知らせる、という流れだよ。

ひよこ

ページが増えてきたらルーティングとか必要になるよね？

ペンギン先生

そのとおり。Vue Routerという公式ライブラリを使えば、URLに応じてページコンポーネントを切り替えられるよ。create-vueのセットアップ時に「Router を追加しますか？」と聞かれるから、Yesを選ぶだけで導入できる。あとアプリ全体で共有するデータの管理にはPiniaという状態管理ライブラリを使うのが今の標準だよ。VuexよりもシンプルでTypeScriptとの相性も抜群なんだ。

ひよこ

Vueをもっと本格的に使いたくなったら、次は何を学べばいいの？

ペンギン先生

Nuxtを学ぶのがおすすめだよ。NuxtはVueベースのフルスタックフレームワークで、サーバーサイドレンダリングやファイルベースルーティングが最初から使えるんだ。ReactにおけるNext.jsのような存在だね。SEOが重要なサイトやパフォーマンスを追求したいときに力を発揮するよ。

ひよこ

最近Vueの界隈で話題になっている新しい技術ってある？

ペンギン先生

Vapor Modeという実験的な仕組みが注目されているよ。これは従来の仮想DOMを使わずに、コンパイル時にリアクティビティのコードを直接生成するアプローチなんだ。仮想DOMの差分計算をスキップできるからパフォーマンスが大幅に向上する。ちなみにVueのリアクティビティシステムは内部でJavaScriptのProxyを使っていて、オブジェクトのプロパティへのアクセスや変更を自動で検知しているんだよ。

ひよこ

ReactとVueで迷っている人にはどうアドバイスする？

ペンギン先生

求人数や大企業での採用実績ではReactが多いけど、Vueは公式ドキュメントが非常に充実していて、日本語の情報も豊富なんだ。個人開発や中小規模のプロジェクトなら生産性の高さでVueが光るし、大規模チーム開発ならReactのエコシステムの厚さが活きる。どちらもモダンフロントエンドの根幹は同じだから、片方を深く学べばもう一方への移行もスムーズだよ。まずは自分が「書いていて楽しい」と感じるほうから始めてみるのが一番だね。