過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のため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 のインストール方法は 4 通り</strong>: ① <strong>CDN</strong> (script タグ 1 行) ② <strong>npm</strong> (<code>npm install vue</code>) ③ <strong>create-vue</strong> (<code>npm create vue@latest</code>、推奨) ④ <strong>Vue CLI</strong> (レガシー)</li><li>初学者は <strong>CDN</strong>、本格開発は <strong>create-vue (Vite ベース)</strong></li><li><strong>Vue 3 がメインライン</strong> (2022〜)。Vue 2 は 2023/12/31 EOL</li><li>create-vue は <strong>Vite + Vue 3 + TypeScript / Router / Pinia / Vitest</strong> 等を対話形式で選択</li><li><strong>Composition API</strong> + <code><script setup></code> が現在の主流書き方</li></ul></td></tr></table>
<h2>方法1: CDN で 1 行インストール</h2>

<p>最も手軽な方法。HTML ファイル 1 つで動きます。学習や検証、既存ページへの部分導入に向いています。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Vue 3 Hello</title>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="count++">{{ count }} 回押された</button>
  </div>

  <!-- ★ ここで Vue 3 を読み込む -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, ref } = Vue;
    createApp({
      setup() {
        const message = ref(&apos;こんにちは Vue 3!&apos;);
        const count = ref(0);
        return { message, count };
      }
    }).mount(&apos;#app&apos;);
  </script>
</body>
</html></code></pre>
<p><strong>本番</strong>では <code>vue.global.prod.js</code> を使い、サイズを小さく:</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-html"><!-- 開発版 (warnings あり) -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- 本番版 (圧縮、warnings なし) -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<!-- ES Modules で読む場合 -->
<script type="module">
  import { createApp, ref } from &apos;https://unpkg.com/vue@3/dist/vue.esm-browser.js&apos;;
  // ...
</script></code></pre>
<h2>方法2: create-vue (推奨)</h2>

<p>公式の Vite ベース足場ツール。<strong>Node.js 18+</strong> が必要です。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-bash"># Node.js 18+ を用意 (推奨は 20 LTS)
node -v   # v20.x 以上

# プロジェクト作成 (対話形式)
npm create vue@latest

# 質問内容 (例)
# ✔ Project name: … my-vue-app
# ✔ Add TypeScript? … No / Yes
# ✔ Add JSX Support? … No / Yes
# ✔ Add Vue Router for Single Page Application development? … No / Yes
# ✔ Add Pinia for state management? … No / Yes
# ✔ Add Vitest for Unit Testing? … No / Yes
# ✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
# ✔ Add ESLint for code quality? … No / Yes
# ✔ Add Prettier for code formatting? … No / Yes

cd my-vue-app
npm install
npm run dev
#   ➜  Local:   http://localhost:5173/</code></pre>
<h2>方法3: 既存プロジェクトに npm で追加</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-bash"># Vue 本体だけ追加
npm install vue@3

# よく入れる関連
npm install vue-router@4   # ルーティング
npm install pinia          # 状態管理 (Vuex 後継)
npm install @vitejs/plugin-vue --save-dev  # Vite で .vue を扱う
npm install -D vite        # ビルドツール

# package.json の起動スクリプト
# "scripts": {
#   "dev":   "vite",
#   "build": "vite build",
#   "preview": "vite preview"
# }</code></pre>
<h2>方法4: Vue CLI (レガシー、非推奨)</h2>

<p>Webpack ベースの旧足場。<strong>新規プロジェクトでは create-vue (Vite) を使ってください</strong>。</p>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-bash"># 旧 CLI (Webpack)
npm install -g @vue/cli
vue create my-app
cd my-app
npm run serve

# 公式は 2023 以降 maintenance mode
# 新規は create-vue 推奨</code></pre>
<h2>create-vue で作られる構成</h2>
<pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-text">my-vue-app/
├── index.html
├── package.json
├── vite.config.js
├── public/
│   └── favicon.ico
└── src/
    ├── main.js            # ← createApp(App).mount(&apos;#app&apos;)
    ├── App.vue            # ← ルートコンポーネント
    ├── components/
    │   └── HelloWorld.vue
    ├── router/            # vue-router 選択時
    │   └── index.js
    └── stores/            # pinia 選択時
        └── counter.js</code></pre>
<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"><!-- src/App.vue -->
<script setup>
import { ref, computed } from &apos;vue&apos;;

const count = ref(0);
const doubled = computed(() => count.value * 2);
const increment = () => count.value++;
</script>

<template>
  <h1>Hello Vue 3</h1>
  <p>count: {{ count }} / doubled: {{ doubled }}</p>
  <button @click="increment">+1</button>
</template>

<style scoped>
h1 { color: #42b883; }
</style></code></pre>
<h2>Composition API vs Options API</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>項目</th><th>Composition API (推奨)</th><th>Options API</th></tr></thead>
<tbody>
<tr><td>記法</td><td><code><script setup></code> + <code>ref</code> / <code>computed</code></td><td><code>data() {}</code> / <code>methods: {}</code></td></tr>
<tr><td>ロジック再利用</td><td>composable 関数 (<code>useFoo()</code>)</td><td>mixin (非推奨)</td></tr>
<tr><td>TypeScript</td><td>型推論が効きやすい</td><td>型注釈が冗長</td></tr>
<tr><td>学習曲線</td><td>やや高</td><td>低 (直感的)</td></tr>
<tr><td>推奨</td><td><strong>Vue 3 の標準</strong></td><td>既存プロジェクト互換</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-bash"># 開発サーバ (HMR 付き、http://localhost:5173)
npm run dev

# 本番ビルド (dist/ に出力)
npm run build

# ビルド結果のローカルプレビュー
npm run preview

# 型チェック (TS 利用時)
npm run type-check

# テスト (Vitest 選択時)
npm run test:unit</code></pre>
<h2>FAQ</h2>

<p><strong>Q: Vue 2 と Vue 3、どちらを学ぶべき？</strong><br />
A: 新規は Vue 3。Vue 2 は 2023/12/31 で EOL。既存 Vue 2 プロジェクトは <code>vue-demi</code> や Vue 2.7 を経て段階的に移行。</p>

<p><strong>Q: TypeScript は必須？</strong><br />
A: 必須ではないが推奨。create-vue で「Add TypeScript? Yes」を選ぶだけで設定済。</p>

<p><strong>Q: Nuxt.js とは？</strong><br />
A: Vue の SSR / SSG フルスタックフレームワーク。Next.js (React) に相当。<code>npx nuxi@latest init my-app</code> で開始。</p>