過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li><strong>Vue.js</strong> は Evan You が 2014 年に公開した<strong>プログレッシブな JavaScript フレームワーク</strong></li><li>現行は <strong>Vue 3</strong> (2020 年〜、Composition API + Vite ベース)。Vue 2 は 2023/12/31 EOL</li><li><strong>SFC (Single File Component)</strong> 1 ファイルに <code><template></code> / <code><script></code> / <code><style></code> をまとめる</li><li>エコシステム: <strong>Vue Router</strong> (ルーティング) / <strong>Pinia</strong> (状態管理) / <strong>Vite</strong> (ビルド) / <strong>Nuxt</strong> (SSR/SSG)</li><li><strong>React と Angular の中間</strong>: 学習曲線が緩く、SFC の構造が分かりやすい</li></ul></td></tr></table>
<h2>Vue.js とは</h2>

<p>Vue.js は<strong>ユーザーインターフェース構築のための JavaScript フレームワーク</strong>です。HTML のテンプレート構文をベースに、リアクティブなデータバインディング、コンポーネント指向、SFC (単一ファイルコンポーネント) を提供します。</p>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>項目</th><th>内容</th></tr></thead>
<tbody>
<tr><td>初版</td><td>2014 年 (Evan You)</td></tr>
<tr><td>現行版</td><td>Vue 3.x (2020〜)</td></tr>
<tr><td>ライセンス</td><td>MIT</td></tr>
<tr><td>公式サイト</td><td>https://ja.vuejs.org</td></tr>
<tr><td>GitHub Stars</td><td>約 210k (2025 時点)</td></tr>
<tr><td>主要採用企業</td><td>GitLab / Nintendo / Adobe (Portfolio) / Alibaba</td></tr>
</tbody>
</table>

<h2>最小サンプル</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><div id="app">
  <p>{{ message }}</p>
  <button @click="count++">押された: {{ count }} 回</button>
</div>

<script type="module">
  import { createApp, ref } from &apos;https://unpkg.com/vue@3/dist/vue.esm-browser.js&apos;;
  createApp({
    setup() {
      const message = ref(&apos;Hello Vue 3&apos;);
      const count = ref(0);
      return { message, count };
    }
  }).mount(&apos;#app&apos;);
</script></code></pre>
<h2>主要コンセプト</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e8f5e9"><th>コンセプト</th><th>説明</th></tr></thead>
<tbody>
<tr><td>リアクティブシステム</td><td><code>ref()</code> / <code>reactive()</code> で値が変わると DOM 自動更新</td></tr>
<tr><td>テンプレート構文</td><td><code>{{ ... }}</code> 補間、<code>v-bind</code>、<code>v-on (@)</code>、<code>v-model</code>、<code>v-if</code>、<code>v-for</code></td></tr>
<tr><td>コンポーネント</td><td>UI を部品化。props で親から子へ、emit で子から親へ通信</td></tr>
<tr><td>SFC</td><td>.vue 拡張子に template / script / style を集約</td></tr>
<tr><td>Composition API</td><td>関数的にロジックを組み立てる。<code><script setup></code> が現代の標準</td></tr>
<tr><td>computed / watch</td><td>派生値の自動再計算、副作用の監視</td></tr>
<tr><td>ライフサイクル</td><td><code>onMounted</code> / <code>onUnmounted</code> / <code>onUpdated</code> 等</td></tr>
</tbody>
</table>

<h2>Single File Component の構造</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-vue"><!-- TodoItem.vue -->
<script setup>
import { ref, computed } from &apos;vue&apos;;

const props = defineProps({
  title: String,
  completed: Boolean,
});
const emit = defineEmits([&apos;toggle&apos;]);

const classes = computed(() => ({
  done: props.completed,
}));
</script>

<template>
  <li :class="classes">
    <input type="checkbox"
           :checked="completed"
           @change="emit(&apos;toggle&apos;)">
    {{ title }}
  </li>
</template>

<style scoped>
.done { text-decoration: line-through; color: #999; }
</style></code></pre>
<h2>Composition API: ref / reactive / computed / watch</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-javascript">import { ref, reactive, computed, watch, onMounted } from &apos;vue&apos;;

// ref: プリミティブ値をリアクティブに
const count = ref(0);
count.value++;             // .value でアクセス
console.log(count.value);  // テンプレート内では自動 unwrap

// reactive: オブジェクトをリアクティブに
const state = reactive({
  user: { name: &apos;taro&apos;, age: 25 },
  todos: [],
});
state.user.age = 26;

// computed: 派生値 (依存変化時のみ再計算)
const doubled = computed(() => count.value * 2);

// watch: 副作用
watch(count, (newVal, oldVal) => {
  console.log(`${oldVal} → ${newVal}`);
});

// ライフサイクル
onMounted(() => {
  console.log(&apos;component mounted&apos;);
});</code></pre>
<h2>エコシステム</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#fff3e0"><th>ライブラリ</th><th>役割</th></tr></thead>
<tbody>
<tr><td><strong>Vite</strong></td><td>開発サーバ + ビルド (Vue 公式推奨)</td></tr>
<tr><td><strong>Vue Router 4</strong></td><td>クライアントサイドルーティング (SPA)</td></tr>
<tr><td><strong>Pinia</strong></td><td>状態管理 (Vuex 後継、TypeScript フレンドリー)</td></tr>
<tr><td><strong>Vuex 4</strong></td><td>旧状態管理。新規は Pinia 推奨</td></tr>
<tr><td><strong>Nuxt 3</strong></td><td>SSR / SSG / フルスタックフレームワーク</td></tr>
<tr><td><strong>VueUse</strong></td><td>composable ユーティリティ集 (useFetch, useStorage 等)</td></tr>
<tr><td><strong>Vitest</strong></td><td>ユニットテスト</td></tr>
<tr><td><strong>Element Plus / Vuetify / PrimeVue</strong></td><td>UI コンポーネント集</td></tr>
</tbody>
</table>

<h2>React / Angular との比較</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>項目</th><th>Vue 3</th><th>React 18+</th><th>Angular 17+</th></tr></thead>
<tbody>
<tr><td>テンプレート</td><td>HTML ベース (SFC)</td><td>JSX</td><td>HTML テンプレート + TS</td></tr>
<tr><td>学習曲線</td><td>低 〜 中</td><td>中</td><td>高</td></tr>
<tr><td>状態管理</td><td>Pinia</td><td>Redux / Zustand / Context</td><td>RxJS / NgRx</td></tr>
<tr><td>ルーティング</td><td>Vue Router</td><td>React Router</td><td>同梱</td></tr>
<tr><td>型安全</td><td>TypeScript 対応</td><td>TypeScript 対応</td><td>TypeScript 標準</td></tr>
<tr><td>規模</td><td>中規模が得意</td><td>大規模も可</td><td>大規模エンタープライズ</td></tr>
<tr><td>SSR フレームワーク</td><td>Nuxt</td><td>Next.js</td><td>Angular Universal</td></tr>
</tbody>
</table>

<h2>Vue 2 と Vue 3 の主な違い</h2>

<ul>
<li><strong>Composition API</strong> が公式に追加 (Vue 2.7 にもバックポートあり)</li>
<li>仮想 DOM のリライト (高速化、Tree-shaking)</li>
<li>Multiple root nodes (Fragments) サポート</li>
<li>Teleport (旧 portal) / Suspense 標準</li>
<li>TypeScript サポート強化</li>
<li>Vue 2 の filter / EventBus は廃止</li>
<li>ビルドツールは Vue CLI から <strong>Vite</strong> へ</li>
</ul>

<h2>学習ロードマップ</h2>

<ol>
<li>HTML / CSS / JavaScript ES2015+ の基本</li>
<li>CDN で Hello World → リアクティブとイベント</li>
<li>create-vue で SFC を書く</li>
<li>Composition API + <code><script setup></code></li>
<li>Vue Router で SPA、Pinia で状態管理</li>
<li>Nuxt 3 で SSR / SSG</li>
<li>Vitest でテスト、Vue DevTools でデバッグ</li>
</ol>

<h2>FAQ</h2>

<p><strong>Q: Vue は廃れる？</strong><br />
A: 2025 年時点で GitHub stars 210k、Nuxt は急成長、State of JS でも上位。エンタープライズ採用 (GitLab 等) も継続。</p>

<p><strong>Q: React か Vue か</strong><br />
A: 求人数は React > Vue。学習しやすさは Vue > React。日本国内の中規模 SaaS で Vue 採用が多い。</p>

<p><strong>Q: Vue 2 プロジェクトの移行</strong><br />
A: 公式の <strong>Vue 2.7</strong> (Naruto) で Composition API を使い、その後 Vue 3 へ。<code>vue-demi</code> も有効。</p>

<!-- @RESTORED_IMG_v1 -->
<h2>📸 参考画像</h2>
<p style="color:#666;font-size:0.85em;margin-bottom:1em">※ 旧バージョンから引き継いだ参考画像です。手順・図解の補助としてご覧ください。</p>
<p style="text-align:center;margin:1em 0"><img alt="参考画像" src="https://jpn.itlibra.com/uploadImage/20190629170228_6465504.png" style="max-width:640px;width:100%;height:auto;border:1px solid #ccc;border-radius:4px" /></p>