Vue.js入門ステップガイド｜はじめてのVue 3を公開まで9ステップ

このガイドで分かること

このページは、Vue.js（ビュー・ジェイエス）をはじめて学ぶ人が、小さなVueのアプリを作ってインターネットに公開するまでを、9つのステップで順番に進めるためのロードマップです。

結論から言うと、Vue は「まず HTML ファイル1つで動かして書き方を覚え、そのあと開発用の道具（Vite）に移って、公開まで進む」のが一番つまずきにくい道です。この順番は、Vue 公式ガイドの章の並びに合わせています。ただし、Node.js やコマンドラインに慣れている人は、ステップ7から読んでもかまいません。

こんな人に向けて書いています。

• HTML・CSS・JavaScript を少し書いたことがあり、次に Vue を学びたい人
• 「Vue ref」「v-for key」などのリファレンス記事を読みに来たが、全体の順番が分からなくなった人
• jQuery（JavaScript を短く書くための道具）や素の JavaScript で画面を作ってきて、Vue との違いを知りたい人

このガイドの読み方です。

1. 「全体像」の図で、9つのステップの順番をながめます。
2. ステップ1から順に、コード例を自分のパソコンで実際に動かします。各コード例には「期待する表示」を書いています。
3. 分からない言葉は、ページの後ろの「用語ミニ辞典」で確かめます。
4. くわしく知りたくなったら、各ステップの「ここで読む記事」へ進みます。記事は読まなくても最後まで進めます。記事名の後ろに「（近日公開）」と付いているものは、公開日まではリンクが無い文字だけの表示です。

このガイドのコードは、2026年10月7日時点の最新版（Vue 3.5.43、Vite 8.3.3、Vue Router 5.3.1、Pinia 4.0.3、create-vue 3.24.0、Node.js 24）で、筆者が実際に作成・ビルドし、ブラウザ（Microsoft Edge）でボタンの操作やページ移動まで確かめたものです。

HTML・CSS・JavaScript がまだ不安な人は、先に HTMLサイトの作り方ロードマップ を終えてから戻ってくると、ずっと楽に進めます。

全体像：Vue.jsを学ぶ9ステップとは

始める前のチェックリスト

次の4つがそろっていれば、ステップ1から始められます。Node.js とエディタは、ステップ2で入れます。

• HTML と CSS で、簡単な1ページを作ったことがある（不安なら HTMLサイトの作り方ロードマップ から）
• JavaScript の const・関数・配列を、少し読める
• Windows か Mac のパソコンと、インターネットにつながる環境がある
• ソフトをダウンロードして、パソコンに入れることができる

ステップ1：Vue.jsとは・何が嬉しいか

このステップのゴール

Vue.js が何をする道具で、素の JavaScript や jQuery と比べて何が楽になるのかを、自分の言葉で説明できることです。

やること

1. 下の2つのコード（素の JavaScript と Vue）を見比べ、「画面を書き換える命令」がどこにあるかを探します。
2. 下の図で、「命令して書き換える」と「データを変えると画面が付いてくる」の違いを確認します。
3. Vue 公式の「はじめに」のページを開き、最小のサンプルを読みます。

Vue は、公式の説明では「ユーザーインターフェース（画面）を作るための JavaScript フレームワーク」です。標準の HTML・CSS・JavaScript の上に作られていて、次の2つが中心の機能です。

• 宣言的レンダリング： 「画面はこのデータをこう表示する」と、テンプレートに書いておく書き方です。
• リアクティビティー： JavaScript のデータが変わると、Vue が気づいて、画面を自動で更新する仕組みです。

素の JavaScript で「押した回数」を数えるボタンを作ると、こうなります。

<button id="btn">押した回数：0</button>
<script>
  let count = 0
  const btn = document.querySelector('#btn')
  btn.addEventListener('click', () => {
    count++
    btn.textContent = '押した回数：' + count
  })
</script>

数を増やすたびに、btn.textContent = ... で画面を書き換える命令を自分で書いています。jQuery を使っても、書き方が短くなるだけで「自分で書き換える」点は同じです。

同じものを Vue で書くと、画面側は <button @click="count++">押した回数：{{ count }}</button> だけです（ステップ3で実際に動かします）。count を増やすと、表示は Vue が自動で直します。

期待する表示： どちらのコードも、ボタンを2回押すと「押した回数：2」になります（筆者の確認結果）。見た目は同じで、違うのは書き方と、画面が大きくなったときの直しやすさです。

Vue が嬉しいのは、画面が大きくなったときです。画面の書き換え場所が増えるほど、素の JavaScript では「どこを書き換え忘れたか」の不具合が増えます。Vue なら、データを正しく変えれば画面は付いてきます。ただし、ボタンが1つ動けばよいだけの小さなページなら、素の JavaScript で十分です。Vue は、画面が大きくなりそうなときに選ぶ道具です。

つまずきやすい点

• Vue 2 の情報を読んでしまうことです。Vue 2 のサポートは 2023年12月31日に終わっています。new Vue({ el: '#app' }) という書き方を見たら、古い情報です。Vue 3 では createApp(...).mount('#app') と書きます。
• 「Vue を使えば JavaScript を覚えなくてよい」は誤解です。Vue の中身は JavaScript なので、変数・関数・配列の基本は必要です。

次へ進む前のチェック

• 「宣言的レンダリング」と「リアクティビティー」を一言で言える
• 素の JavaScript との違いを「画面を書き換える命令の有無」で説明できる
• Vue 3 と Vue 2 の書き方の見分け方（createApp か new Vue か）を知っている

ここで読む記事

• Vue 3 Composition APIとOptions APIの違い｜書き方の比較（近日公開）
  Vue の2つの書き方（Composition API と Options API）の違いです。
• jQueryから素のJavaScriptへ移行｜書き換え対応表と注意点（近日公開）
  jQuery の書き方を素の JavaScript に置き換える対応表です。
• querySelectorとは｜使い方・querySelectorAllとの違い・nullエラー対策（近日公開）
  素の JavaScript で要素を探す方法です。Vue との違いが分かります。

ステップ2：必要な前提（HTML/CSS/JSの最低限、Node.js、エディタ）

このステップのゴール

Vue を始めるのに必要な JavaScript の知識を確認し、Node.js とエディタを準備することです。

やること

1. JavaScript の最低限を確認します。 次の6つが読めれば十分です。const と let、関数とアロー関数（() => {}）、オブジェクト（{ name: 'たろう' }）、配列と filter・map、分割代入（const { createApp } = Vue）、import と export。
2. エディタを用意します。 Vue 公式は、開発用のエディタの推奨構成として「Visual Studio Code（VS Code）＋ Vue – Official 拡張機能」を挙げています。VS Code は公式サイト（https://code.visualstudio.com/）の「Download」から入れます。入れたら、VS Code の左の縦の並びにある「Extensions（拡張機能）」アイコン（四角が4つの形）を押し、検索欄に Vue - Official と入れて「Install」を押します。ほかのエディタを使う場合は、.vue ファイルに対応しているかを確認します。
3. Node.js を入れます。 ステップ3〜6では不要ですが、ステップ7で必要になります。公式のダウンロードページ（https://nodejs.org/ja/download）で「LTS（長期サポート版）」と書かれた版のインストーラーを入れます。インストーラーを開いたら、途中の選択肢は初期のまま「次へ」（Mac は「続ける」）で進めます。
4. ターミナル（コマンドを打つ画面）を開き、バージョンを確認します。 Windows ならスタートメニューの「ターミナル」または「PowerShell」、Mac なら「ターミナル」アプリです。

node -v
npm -v

期待する表示： v24.19.0 のように v で始まる番号と、11.17.0 のような番号が1行ずつ表示されます（数字は入れた版によって違います）。

版は、ダウンロードページに並ぶ版のうち、「LTS」と書かれたものの中で番号が一番大きいものを入れれば大丈夫です（2026年10月7日時点では v24）。Vue 公式が前提とする版は「22.18.0 以上の 22 系、または 24.12.0 以上」で、v24 の LTS ならこれを満たします。上の v24.19.0 は筆者の環境での表示例です。ただし、LTS の番号は時期によって変わるので、入れる前に公式のページで確かめます。

つまずきやすい点

• node が見つからないというエラーは、入れた直後にターミナルを開き直していないことが多い原因です。ターミナルを閉じて開き直します。
• 古い Node.js が入っていると、ステップ7でエラーになります。node -v の番号が前提の版より小さければ、入れ直します。
• JavaScript の基本があいまいなまま進むと、Vue のエラーなのか JavaScript のエラーなのか区別できず、つまずきます。不安な項目は先に記事で確認します。

次へ進む前のチェック

• const・アロー関数・配列の filter・分割代入が読める
• VS Code を入れ、Vue – Official 拡張機能を入れた
• node -v で、前提の版以上が表示された
• npm -v で番号が表示された

ここで読む記事

• Node.jsのインストール方法｜LTSの選び方とバージョン確認
  Node.js の入れ方、LTS の選び方、バージョンの確認方法です。
• let・const・varの違い｜使い分けとスコープの基本
  let・const・var の違いと使い分けです。
• アロー関数とは｜書き方・thisの違い・使えない場面
  アロー関数の書き方と注意点です。
• map・filter・reduceの使い方｜配列メソッドを実例で
  配列の map・filter・reduce の使い方です。
• 分割代入とは｜配列・オブジェクトの書き方と落とし穴
  const { createApp } = Vue のような分割代入の書き方です。
• npmとpackage.jsonの基本｜init・install・scriptsの使い方（近日公開）
  npm と package.json の基本です。

ステップ3：CDNで最小のVueを動かす

このステップのゴール

HTML ファイル1つに Vue を読み込み、ボタンを押すと数字が増える最小のアプリを、ブラウザで動かすことです。

やること

1. ドキュメントフォルダに vue-practice というフォルダを作ります。VS Code のメニュー「File」→「Open Folder…」（Mac は「Open…」）でそのフォルダを開き、左側のファイル一覧の VUE-PRACTICE の行にマウスを乗せて出る「New File…」アイコンで step3.html を作ります。ステップ4〜6のファイルも、同じように作ります。
2. 下のコードを入力して保存します。
3. ファイルをダブルクリック（またはブラウザにドラッグ）して開きます。インターネットにつながっている必要があります。
4. ボタンを3回押します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>はじめての Vue</title>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="count++">押した回数：{{ count }}</button>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, ref } = Vue

    createApp({
      setup() {
        const message = ref('こんにちは、Vue！')
        const count = ref(0)
        return { message, count }
      }
    }).mount('#app')
  </script>
</body>
</html>

期待する表示： 「こんにちは、Vue！」の下に「押した回数：0」のボタンが出ます。3回押すと「押した回数：3」になります（筆者の確認では、読み込まれた Vue は 3.5.43 でした）。

コードは3つの部分でできています。

1. 読み込む： <script src="https://unpkg.com/vue@3/dist/vue.global.js"> で、CDN から Vue を読み込みます。これは公式のクイックスタートと同じ書き方です。
2. 作る： createApp({ setup() { ... } }) でアプリを作ります。setup() は Vue が決めた名前の関数で、画面で使うデータをここで作って return します。setup() の中で ref(0) を使うと、「変わったら画面に知らせるデータ」になります。return したものが画面で使えます。
3. 取り付ける： .mount('#app') で、id="app" の要素の中を Vue の担当にします。

CDN で使う方法は、ビルド（公開用にまとめ直す作業）が要らないので、手軽に試せます。ただし、.vue ファイル（単一ファイルコンポーネント）は使えません。また、公式は、本番で CDN から使う場合は、末尾が .prod.js の本番向けファイルを使うよう案内しています。

つまずきやすい点

• 画面に {{ message }} がそのまま表示されるのは、Vue が動いていない合図です。mount('#app') の名前と id="app" が合っているか、Vue の読み込みより後に自分のスクリプトを書いているかを確かめます。
• インターネットにつながっていないと、CDN から Vue を読み込めません。エラーは、ブラウザの開発者ツール（Windows は F12、Mac は Command＋Option＋I で開く）の Console に出ます。
• vue@3 と書くと、3 系の新しい版が自動で使われます。練習では便利ですが、本番では vue@3.5.43 のように版を固定します。

次へ進む前のチェック

• ボタンを押すと数字が増えた
• 「読み込む・作る・取り付ける」の3つを説明できる
• ref で作ったデータを return すると画面で使えることを確認した
• わざと mount('#app') を mount('#ap') に書き換えて保存・再読み込みし、{{ }} がそのまま出ることを試した（試したら元に戻す）

ここで読む記事

• Vue 3 CDNで使う方法｜ビルドなしでHTMLに読み込む手順（近日公開）
  CDN で Vue を読み込む2つの方法を説明しています。
• Vue 3 テンプレート構文の基本｜{{ }}・v-bind・v-onの書き方
  次のステップで使う {{ }}・v-bind・v-on の基本です。
• scriptタグとdeferの使い方｜読み込み位置とnullエラー
  script タグの読み込み順の考え方です。

ステップ4：テンプレート構文（{{ }}、v-bind、v-if、v-for、v-on、v-model）

このステップのゴール

テンプレート（画面の形）の中で、データの表示、属性へのデータの結びつけ、条件による表示、リストの繰り返し、クリックの受け取り、入力欄との結びつけができることです。

やること

1. vue-practice フォルダに step4.html を作り、下のコードを入力して開きます。
2. 入力欄の「ゲスト」を消して自分の名前を入れ、上の行が同時に変わるのを確かめます。
3. 「表示を切り替え」ボタンを押して、「いまは表示中です」が消えたり出たりするのを確かめます。

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>テンプレート構文</title></head>
<body>
  <div id="app">
    <p>{{ name }} さん、こんにちは</p>
    <a v-bind:href="url">Vue 公式サイト</a>
    <p><input v-model="name"></p>
    <button v-on:click="show = !show">表示を切り替え</button>
    <p v-if="show">いまは表示中です</p>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.text }}</li>
    </ul>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, ref } = Vue

    createApp({
      setup() {
        const name = ref('ゲスト')
        const url = ref('https://ja.vuejs.org/')
        const show = ref(true)
        const items = ref([
          { id: 1, text: 'HTML' },
          { id: 2, text: 'CSS' },
          { id: 3, text: 'JavaScript' }
        ])
        return { name, url, show, items }
      }
    }).mount('#app')
  </script>
</body>
</html>

期待する表示： 最初は「ゲスト さん、こんにちは」、リンク「Vue 公式サイト」、入力欄、ボタン、「いまは表示中です」、「HTML」「CSS」「JavaScript」の箇条書きが並びます。入力欄に「たろう」と入れると、1行目が「たろう さん、こんにちは」に変わります。ボタンを押すと「いまは表示中です」が消えます（筆者の確認結果）。

つまずきやすい点

• 属性の中に {{ }} は書けません。 <a href="{{ url }}"> は動かないので、:href="url" と書きます。
• v-for には :key を付けます。 1つずつ違う値（例：item.id）にします。配列の番号（index）は key に使いません。並べ替えや削除をしたときに表示がずれる原因になります。ただし、並べ替えも削除もしない一覧なら、問題は起きにくいです。
• v-if と v-show の違い： v-if は消すときに要素ごと取り除き、v-show は CSS で見えなくするだけです。切り替えが頻繁なら v-show が向いています。
• HTML ファイルに直接書いたテンプレート（DOM 内テンプレート）では、ブラウザが先に HTML として読むので、大文字の名前が小文字になるなどの制約があります。ステップ6で部品の名前を todo-item と書くのは、このためです。

次へ進む前のチェック

• items に { id: 4, text: 'Vue' } を1行足し、リンク先の url を別の URL に変えて、表示が変わることを確かめた
• :href と @click が省略形だと説明できる
• v-for に、ほかと重ならない（一意の）:key を付けた
• 属性の中で {{ }} を使わない理由を説明できる

ここで読む記事

• Vue 3 テンプレート構文の基本｜{{ }}・v-bind・v-onの書き方
  {{ }}・v-bind・v-on と省略形を、例でくわしく説明しています。
• Vue 3 v-ifとv-showの違い｜使い分けと表示切り替え（近日公開）
  v-if と v-show の違いと使い分けです。
• Vue 3 v-forとkeyの使い方｜indexをkeyにしてはいけない理由（近日公開）
  v-for と key の付け方、index を key にしてはいけない理由です。
• Vue 3 v-modelの使い方｜フォーム入力と修飾子（.number .trim .lazy）（近日公開）
  v-model の使い方と、.number・.trim などの修飾子です。

ステップ5：データの仕組み（ref・computed・watch）

このステップのゴール

Composition API（関数を組み合わせて書く Vue の書き方）の基本である ref・computed・watch の役割の違いを理解し、使い分けられることです。

やること

1. vue-practice フォルダに step5.html を作り、下のコードを入力して開きます。
2. 個数を 3 にして、合計が変わるのを確かめます。
3. 個数を 10 にして、メッセージが出るのを確かめます。

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>ref・computed・watch</title></head>
<body>
  <div id="app">
    <p>りんご 1個 {{ price }} 円</p>
    <label>個数 <input type="number" min="1" v-model.number="qty"></label>
    <p>合計：{{ total }} 円</p>
    <p>{{ note }}</p>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, ref, computed, watch } = Vue

    createApp({
      setup() {
        const price = ref(120)
        const qty = ref(1)
        const total = computed(() => price.value * qty.value)
        const note = ref('')

        watch(qty, (newQty) => {
          note.value = newQty >= 10 ? 'まとめ買いですね！' : ''
        })

        return { price, qty, total, note }
      }
    }).mount('#app')
  </script>
</body>
</html>

期待する表示： 最初は「合計：120 円」です。個数を 3 にすると「合計：360 円」（120 × 3 ＝ 360）、10 にすると「合計：1200 円」（120 × 10 ＝ 1,200）になり、その下に「まとめ買いですね！」と出ます（筆者の確認結果）。

迷ったときの決め方は、「値を作るなら computed、何かを起こすなら watch」です。合計や絞り込んだ一覧のような「計算した値」は computed にします。データが変わったときに通信する、保存する、メッセージを出すといった「処理」は watch にします。このサンプルは、watch の動きを見るために、あえて note を watch で作っています。ただし、note のように「ほかのデータから決まる値」は、実際には const note = computed(() => qty.value >= 10 ? 'まとめ買いですね！' : '') と computed でも書け、そのほうが簡単で間違いが少なくなります。

つまずきやすい点

• JavaScript の中では .value が要ります。 ref で作ったデータは、setup() の中では qty.value と書きます。テンプレートの中では .value は不要です（Vue が自動で取り出します）。
• 入力欄の数字が文字列になる： v-model だけだと、入力は文字の '3' として入ります。数として使うなら v-model.number にします。
• computed の中でデータを書き換えない： computed は値を計算して返すだけにします。書き換えは watch や関数で行います。
• reactive という道具もありますが、公式は状態を宣言する主な方法として ref を勧めています。最初は ref だけで十分です。

次へ進む前のチェック

• 合計が個数に合わせて自動で変わった
• .value が要る場所と要らない場所を説明できる
• computed と watch の使い分けを1文で言える
• v-model.number の意味を説明できる

ここで読む記事

• Vue 3 refとreactiveの違い｜使い分けと落とし穴（近日公開）
  ref と reactive の違い、.value の落とし穴です。
• Vue 3 computedとwatchの違い｜使い分けとwatchEffect（近日公開）
  computed と watch の違い、watchEffect の使いどころです。
• Vue 3 ライフサイクルフックの使い方｜onMountedの実行タイミング（近日公開）
  画面に表示されたときに処理をする onMounted などのタイミングです。
• Vue 3 Composition APIとOptions APIの違い｜書き方の比較（近日公開）
  同じ処理を Options API で書くとどうなるかの比較です。

ステップ6：コンポーネント（部品）に分ける

このステップのゴール

画面を部品（コンポーネント）に分け、親から子へ props で値を渡し、子から親へ emit で知らせ、slot で中身を差し込めることです。

やること

1. vue-practice フォルダに step6.html を作り、下のコードを入力して開きます。
2. 「牛乳を買う」の「削除」ボタンを押し、件数が減るのを確かめます。

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>コンポーネント</title></head>
<body>
  <div id="app">
    <my-card>
      <h2>やることリスト（{{ todos.length }}件）</h2>
      <todo-item
        v-for="t in todos"
        :key="t.id"
        :text="t.text"
        @remove="removeTodo(t.id)"
      ></todo-item>
    </my-card>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, ref } = Vue

    const TodoItem = {
      props: ['text'],
      emits: ['remove'],
      template: `<p>{{ text }} <button @click="$emit('remove')">削除</button></p>`
    }

    const MyCard = {
      template: `<div style="border:1px solid #ccc; padding:8px 16px"><slot></slot></div>`
    }

    createApp({
      components: { TodoItem, MyCard },
      setup() {
        const todos = ref([
          { id: 1, text: '牛乳を買う' },
          { id: 2, text: '本を返す' }
        ])
        function removeTodo(id) {
          todos.value = todos.value.filter((t) => t.id !== id)
        }
        return { todos, removeTodo }
      }
    }).mount('#app')
  </script>
</body>
</html>

期待する表示： 枠の中に「やることリスト（2件）」と、「牛乳を買う［削除］」「本を返す［削除］」が並びます。「牛乳を買う」の削除を押すと、「やることリスト（1件）」になり、「本を返す」だけが残ります（筆者の確認結果）。

コードの template: の後ろで文字を囲んでいる `（バッククォート）は、' ' を含む文字列や複数行の文字列を書くための JavaScript の記号です。

部品どうしのやりとりは、3つの決まりで覚えます。

• props（下へ）： 親が :text="t.text" と書くと、子の props: ['text'] で受け取れます。子は、受け取った props を自分で書き換えません。
• emit（上へ）： 子が $emit('remove') で「削除ボタンが押された」と知らせ、親が @remove="removeTodo(t.id)" で受け取ります。$emit は Vue が用意した「親に知らせる」命令です。データを実際に消すのは、データを持っている親です。
• slot（差し込み）： MyCard の <slot></slot> の場所に、親が <my-card> の中に書いた見出しやリストが入ります。枠の見た目だけを部品にしたいときに使います。

つまずきやすい点

• 子で props を書き換えようとするのは間違いです。変えたいときは emit で親に頼みます。
• 部品の名前の書き方： JavaScript で components: { TodoItem } と登録すると、HTML に直接書いたテンプレートでは、Vue が todo-item と読み替えて使えるようにします。HTML に直接書いたテンプレートでは、部品の名前を小文字のハイフン区切り（todo-item）で書き、<todo-item /> のような自己終了タグ（閉じタグを書かずに /> で終える書き方）は使えません。ステップ7の .vue ファイルなら、<TodoItem /> と書けます。
• 部品を細かく分けすぎると、かえって読みにくくなります。「2回以上使う」「100行を超える」などを目安に分けます。

次へ進む前のチェック

• 削除ボタンで件数が減った
• props と emit の向き（下へ・上へ）を説明できる
• slot の役割を説明できる
• 子が props を書き換えない理由を説明できる

ここで読む記事

• Vue 3 コンポーネントの基本｜作り方・登録・slotの使い方
  コンポーネントの作り方・登録のしかた・slot の基本です。
• Vue 3 props と emit の使い方｜親子コンポーネントのデータ受け渡し（近日公開）
  props と emit の書き方と、型や必須の指定です。
• Vue 3 v-forとkeyの使い方｜indexをkeyにしてはいけない理由（近日公開）
  部品を繰り返すときの key の付け方です。

ステップ7：ビルド環境（Vite、npm create vue@latest）と .vue ファイル

このステップのゴール

公式のプロジェクト作成ツール（create-vue）で、Vue Router と Pinia 入りのプロジェクトを1つ作り、VS Code で開いて、.vue ファイル（単一ファイルコンポーネント）で部品を書けることです。このプロジェクトは、ステップ8とステップ9でもそのまま使います。

7-1 プロジェクトを作って起動する

1. ターミナルを開き、ドキュメントフォルダへ移動します。 開いた直後は、自分のユーザーのフォルダにいます。cd Documents と打ちます（cd は「フォルダを移動する」コマンドです）。
   • 確かめ方：Windows（PowerShell）では、行の先頭が PS C:\Users\名前\Documents> に変わります。Mac では pwd と打ち、/Users/名前/Documents と出れば移動できています。
2. プロジェクトを作ります。 次のコマンドを打ちます。

npm create vue@latest

3. 質問に答えます。 2026年10月時点の create-vue（3.24.0）では、次の順に聞かれます。
   • Project name：my-vue-app と入れてエンターキー
   • Use TypeScript?：矢印キーで No に動かしてエンターキー。TypeScript は JavaScript に型の決まりを足した書き方で、このガイドでは使いません（最初は Yes が選ばれています）
   • Select features to include in your project：矢印キーで「Router」に移動してスペースキー、「Pinia」に移動してスペースキーを押して印を付け、エンターキー（Router はページ切り替え、Pinia は共有データの道具で、ステップ8で使います）
   • Select experimental features to include in your project：何も選ばずにエンターキー
   • Skip all example code and start with a blank Vue project?：No のままエンターキー（サンプルを残します）
   • 成功の目安：Scaffolding project in … と Done. Now run: が出ます。
4. プロジェクトの中に入り、道具を取り寄せます。

cd my-vue-app
npm install

成功の目安：数十秒〜数分かかり、最後に added 145 packages, and audited 146 packages in 12s のような行と found 0 vulnerabilities が出ます（数字は時期で変わります。npm fund の案内が出ても問題ありません）。赤い ERR! が出て止まったときは、node -v で版を確かめ、my-vue-app の中にいるかを確かめます。

5. 開発用サーバーを起動します。

npm run dev

成功の目安：VITE v8.3.3 ready in … と Local: http://localhost:5173/ が出ます。ブラウザで http://localhost:5173/ を開くと、Vue のサンプル画面が出ます。localhost は「自分のパソコンの中だけで動いている確認用のサーバー」で、外の人からは見えません。このターミナルは閉じずにそのままにします。

7-2 VS Code で開き、.vue で部品を書く

1. VS Code でプロジェクトを開きます。 VS Code のメニュー「File」→「Open Folder…」（Mac は「Open…」）で、ドキュメント の中の my-vue-app フォルダを選びます。
2. サンプルの見た目を外します。 VS Code の左側のファイル一覧（エクスプローラー）で src の中の main.js を開き、1行目の import './assets/main.css' を消して保存します（この行はサンプル用の見た目で、残すと画面が左右2列になります）。
3. 部品を作ります。 左側のファイル一覧で src の中の components フォルダを右クリックし、「New File…」を選んで CounterButton.vue と名前を付け、下のコードを書いて保存します。

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <button type="button" @click="count++">押した回数：{{ count }}</button>
</template>

<style scoped>
button {
  font-size: 18px;
  padding: 8px 16px;
}
</style>

4. src/App.vue と src/views/HomeView.vue を、次のように全部書き換えて保存します。

src/App.vue

<script setup>
import { RouterView } from 'vue-router'
</script>

<template>
  <h1>はじめての Vite + Vue</h1>
  <RouterView />
</template>

src/views/HomeView.vue

<script setup>
import CounterButton from '@/components/CounterButton.vue'
</script>

<template>
  <h2>ホーム</h2>
  <CounterButton />
</template>

期待する表示： 保存すると、再読み込みしなくてもブラウザの画面が「はじめての Vite + Vue」「ホーム」と「押した回数：0」のボタンに変わり、押すと数字が増えます（筆者の確認結果）。

.vue ファイルは、1つの部品の <script setup>（JavaScript）、<template>（画面の形）、<style scoped>（その部品だけに効く CSS）を1ファイルにまとめたものです。公式は、ビルドの仕組みを使う場合は、この形で部品を書くのを勧めています。<script setup> の中で import した部品や変数は、そのままテンプレートで使えます。ステップ3〜6で書いた setup() { ... return {...} } が要りません。<RouterView /> は、URL に合った画面（ここでは HomeView）を表示する場所で、ステップ8でくわしく使います。@/ は src/ を表す近道の書き方です。

Router と Pinia を選んだことで、次のファイルが作られています。

つまずきやすい点

• npm create vue@latest の @latest を省かないようにします。create-vue の公式説明でも、省くと古いものが使われるおそれがあると注意しています。
• npm install と npm run dev は、cd my-vue-app で中に入ってから打ちます。package.json が無い場所で打つとエラーになります。
• 開発用サーバーを止めるときは、npm run dev を打ったターミナルで Ctrl＋C（Mac も Control＋C）を押します。行の先頭の PS …> などが戻れば止まっています。止めると localhost:5173 は開けなくなります。
• エラーの手がかりは2か所です。ブラウザの開発者ツール（Windows は F12、Mac は Command＋Option＋I）の Console と、npm run dev を動かしているターミナルに、ファイル名と行番号つきで出ます。

次へ進む前のチェック

• my-vue-app を、Router と Pinia を選んで作った
• npm run dev で、ブラウザに画面が出た
• VS Code で my-vue-app を開き、CounterButton.vue を作った
• 「押した回数」のボタンが動いた

ここで読む記事

• npm create vue@latestの使い方｜Vueプロジェクト作成
  npm create vue@latest の質問の答え方と、作られたファイルの見方です。
• Vue 3 script setupとは｜書き方・defineProps・defineEmits（近日公開）
  <script setup> の書き方と、defineProps・defineEmits です。

ステップ8：ルーティング（Vue Router）と状態管理（Pinia）の入り口

このステップのゴール

ステップ7の my-vue-app をそのまま使い、Vue Router で「ホーム」と「このサイトについて」の2つの画面を切り替え、Pinia のストアで、2つの画面に同じデータを共有できることです。

やること

1. npm run dev が動いていることを確かめます（止めていたら、my-vue-app の中で npm run dev を打ちます）。
2. src/router/index.js を開き、path: '/' と path: '/about' の2つが最初から登録されていることを確かめます。書き換えは不要です。
3. src/stores/counter.js を開いて読みます（これも書き換え不要です）。
4. src/App.vue・src/views/HomeView.vue・src/views/AboutView.vue を、下のコードに全部書き換えて保存します。
5. ブラウザで「みんなのカウント」を2回押してから「このサイトについて」を押します。

src/router/index.js（create-vue が作ったもの。該当部分）

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    },
  ],
})

src/stores/counter.js（create-vue が作ったもの）

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const doubleCount = computed(() => count.value * 2)
  function increment() {
    count.value++
  }

  return { count, doubleCount, increment }
})

src/App.vue

<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <h1>はじめての Vite + Vue</h1>
  <nav>
    <RouterLink to="/">ホーム</RouterLink> |
    <RouterLink to="/about">このサイトについて</RouterLink>
  </nav>
  <RouterView />
</template>

src/views/HomeView.vue

<script setup>
import CounterButton from '@/components/CounterButton.vue'
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
</script>

<template>
  <h2>ホーム</h2>
  <p><CounterButton /></p>
  <button type="button" @click="counter.increment()">みんなのカウント：{{ counter.count }}</button>
</template>

src/views/AboutView.vue

<script setup>
import { useCounterStore } from '@/stores/counter'

const counter = useCounterStore()
</script>

<template>
  <h2>このサイトについて</h2>
  <p>ホームで押した回数：{{ counter.count }}（2倍は {{ counter.doubleCount }}）</p>
</template>

const counter = useCounterStore() は、「共有データのストアを呼び出して、counter という名前で使えるようにする」という1行です。

期待する表示： ホームでは「ホーム | このサイトについて」のリンク、「押した回数：0」と「みんなのカウント：0」のボタンが出ます。「みんなのカウント」を2回押してから「このサイトについて」を押すと、ページの再読み込みなしで URL が http://localhost:5173/about に変わり、「ホームで押した回数：2（2倍は 4）」と表示されます。CounterButton の数は部品の中だけのデータなので、画面を移ると 0 に戻ります（筆者の確認結果）。

• Vue Router： Vue 公式がサポートするルーター（URL と画面を結ぶ係）で、公式は多くの SPA でこれを使うことを勧めています。<RouterLink to="/about"> はページを再読み込みせずに URL を変え、<RouterView /> の場所に、URL に対応した画面が表示されます。
• Pinia： Vue 公式が勧める状態管理（共有データの管理）の道具です。ストアの中は、データ（ref）、計算した値（computed）、データを変える関数の3つでできています。

ストアに入れるのは、複数の画面で使うデータだけにします。ログイン中のユーザー名や、何ページにもまたがる入力の途中経過が向いています。ただし、1つの画面の中だけで使う「開いている・閉じている」のような状態は、部品の中に置くほうが分かりやすいと、Pinia の公式も説明しています。

つまずきやすい点

• ブラウザを再読み込みすると、ストアのデータは 0 に戻ります。 ストアはブラウザが開いている間だけ覚えているデータです。残したいときは、localStorage（ブラウザの中にデータを残しておける仕組み）に保存する処理を別に作ります。
• <a href="/about"> でリンクすると、ページ全体が再読み込みされ、ストアのデータも消えます。画面の切り替えには <RouterLink> を使います。
• CounterButton.vue が見つからないというエラーは、7-2 の手順3を飛ばしたときに出ます。src/components/ に作ります。

次へ進む前のチェック

• RouterLink で、再読み込みなしに画面が切り替わった
• ホームで増やした数が、別の画面に表示された
• ストアに入れるデータと、部品に置くデータの違いを説明できる

ここで読む記事

• Vue Routerの使い方｜ルート定義・RouterLink・RouterView
  ルートの定義、RouterLink・RouterView、URL から値を受け取る方法です。
• Piniaの使い方｜ストアの作成とstate・getters・actions
  ストアの作り方と、storeToRefs での取り出し方です。

ステップ9：ビルドして公開する

このステップのゴール

npm run build で公開用のファイルを作り、サーバーに置いて公開できることです。公開した URL を直接開いたときに 404（ページが見つからないエラー）にならない設定もします。

公開の場所と、404 対策の選び方

ビルドしてできるのは、HTML・CSS・JavaScript だけのファイル（静的ファイル）です。このガイドのアプリは Vue Router を使うので、「見つからない URL には index.html を返す」設定（フォールバック）ができるサーバーに置きます。 ただし、設定ができない場所でも、URL に # が付く「ハッシュモード」に切り替えれば置けます。サーバーを持っていない人は、HTMLサイトの作り方ロードマップ のステップ7（サーバーの申し込み・ドメイン・HTTPS・SFTP〈サーバーへファイルを送る方法〉）を先に読みます。

9-1 ビルドして手元で確認する

1. npm run dev を動かしているターミナルで Ctrl＋C（Mac も Control＋C）を押して止め、次のコマンドを打ちます。

npm run build
npm run preview

成功の目安：npm run build のあと、dist/index.html や dist/assets/index-○○○.js などのファイル名と大きさの一覧が出て、最後に ✓ built in … と表示されます。npm run preview のあと、表示された http://localhost:4173/ を開くと、開発中と同じ画面が出ます。確かめたら Ctrl＋C で止めます。Vite の公式は、npm run preview はビルドの確認用で、本番のサーバーとしては使えないと注意しています。

なお、dist/index.html をダブルクリックして開いても、画面は真っ白です。ファイルを直接開く方法（file://）では動かない仕組みのためで、失敗ではありません（筆者の確認結果）。

9-2 .htaccess を置いてから、アップロードする（Apache の場合）

1. VS Code の左側のファイル一覧で public フォルダを右クリックし、「New File…」で .htaccess という名前のファイルを作り、下の内容を書いて保存します。public に置いたファイルは、ビルドのときに dist にそのままコピーされます。

public/.htaccess（Vue Router 公式の Apache の例。ドメインの直下に置く場合）

<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . index.html [L]
</IfModule>

2. もう一度 npm run build を打ちます。VS Code の左側のファイル一覧で dist を開き、.htaccess があることを確かめます（Windows のエクスプローラーでは、. で始まるファイルが見えないことがあります）。
3. dist フォルダの中身（index.html・assets フォルダ・.htaccess など）を、SFTP でサーバーの公開用フォルダ（サーバーの中で、置いたファイルがインターネットに公開される場所）にアップロードします。dist フォルダごと送らないようにします。
4. https://自分のドメイン/ と https://自分のドメイン/about を、それぞれ直接開いて表示されるか確かめます。

成功の目安：筆者が XAMPP（自分のパソコンで Apache を動かせるソフト）の Apache で、この .htaccess を入れた dist を配信して試したところ、/about を直接開いても「このサイトについて」の画面が表示されました。設定しない簡易サーバーでは、同じ URL が 404 になりました。

nginx の場合： Vue Router 公式の例は、サーバーの設定ファイルの location / { } の中に try_files $uri $uri/ /index.html; の1行を書く形です。設定ファイルを自分で書き換えられるかは、サーバー会社の案内で確かめます。書き換えられないときは、9-3 のハッシュモードを使います。

9-3 ハッシュモードに切り替える（設定ができない・分からない場合）

src/router/index.js の2か所を書き換えます。

変更前

import { createRouter, createWebHistory } from 'vue-router'

  history: createWebHistory(import.meta.env.BASE_URL),

変更後

import { createRouter, createWebHashHistory } from 'vue-router'

  history: createWebHashHistory(import.meta.env.BASE_URL),

保存したら npm run build を打ち、dist の中身をアップロードします（.htaccess は不要です）。

成功の目安：URL が https://自分のドメイン/#/about のように # 付きになります。# から後ろはサーバーに送られないので、この URL を直接開いても 404 になりません。筆者が設定のない簡易サーバーで試したところ、/#/about を直接開いて「このサイトについて」の画面が表示されました。ただし、Vue Router の公式は、ハッシュモードは SEO（検索での扱い）に悪い影響があると説明しています。

9-4 フォルダの中に置く場合（ドメインの直下に置く人は読み飛ばしてよい）

https://自分のドメイン/myapp/ のように、フォルダの中に置くときは2か所を変えます。ビルドしたファイルは、何も設定しないと「ドメインの直下に置く」前提で /assets/... という場所を指すため、そのままだと画面が真っ白になります。

1. vite.config.js の defineConfig({ のすぐ下に、base: '/myapp/', の1行を足します。

// vite.config.js（create-vue が作ったものに、base の1行を足した全体）
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  base: '/myapp/',
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url)),
    },
  },
})

2. Apache の場合は、public/.htaccess の RewriteBase と最後の行を、フォルダの名前に合わせて書き換えます。

<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>
<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /myapp/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /myapp/index.html [L]
</IfModule>

3. npm run build を打ち、dist の中身を、サーバーの公開用フォルダの中の myapp フォルダにアップロードします。

成功の目安：dist/index.html の中の場所が /myapp/assets/… に変わります。筆者が XAMPP の Apache で試したところ、/myapp/ からの画面の切り替えも、/myapp/about を直接開くのも表示されました。ハッシュモードの場合は、手順1の base だけで済みます。

つまずきやすい点

• 画面が出ないときは、まず dist の中身が全部アップロードされているかを確かめます。
• フォルダの中に置くのに base を設定しないと、画面が真っ白になります。開発者ツールの Console に、JavaScript ファイルが見つからないエラーが出ます。
• 公開するファイルに、パスワードや API キー（外部サービスの合言葉）を書かないようにします。ビルドしたファイルは誰でも中身を読めます。

次へ進む前のチェック

• npm run build と npm run preview で、画面を確かめた
• 自分のサーバーに合った 404 対策（.htaccess／nginx の1行／ハッシュモード）をした
• 置き場所がフォルダの中なら、base を設定した
• /about（ハッシュモードなら /#/about）を直接開いても表示される

ここで読む記事

• Vueアプリのビルドと公開｜npm run build・base・404対策
  ビルド・base の設定・404 の対策をまとめています。
• Webサイトの公開手順｜SFTPでサーバーにアップロード
  dist の中身を SFTP でサーバーに送る手順です。

よくある失敗と対策

困ったときの相談先

Vue の技術の質問に、公的機関が個別に答える窓口はありません。技術の疑問は、公式のドキュメントとコミュニティで調べるのが基本です。

質問するときは、「やったこと」「期待した表示」「実際の表示とエラー文」「Vue・Node.js の版」の4つを書くと、答えてもらいやすくなります。サーバーの契約やサイトの改ざんのトラブルは、HTMLサイトの作り方ロードマップ の「困ったときの相談先」に公的な窓口をまとめています。

次に読む記事

• Vue 3 テンプレート構文の基本｜{{ }}・v-bind・v-onの書き方
  テンプレート構文の基本です。
• Vue 3 コンポーネントの基本｜作り方・登録・slotの使い方
  コンポーネントの作り方と slot です。
• Node.jsのインストール方法｜LTSの選び方とバージョン確認
  Node.js の入れ方です。
• npm create vue@latestの使い方｜Vueプロジェクト作成
  Vite でプロジェクトを作る方法です。
• Vue Routerの使い方｜ルート定義・RouterLink・RouterView
  Vue Router の使い方です。
• Piniaの使い方｜ストアの作成とstate・getters・actions
  Pinia の使い方です。
• Vueアプリのビルドと公開｜npm run build・base・404対策
  ビルドと公開、404 の対策です。
• let・const・varの違い｜使い分けとスコープの基本
  変数の宣言の違いです。
• アロー関数とは｜書き方・thisの違い・使えない場面
  アロー関数の書き方です。
• map・filter・reduceの使い方｜配列メソッドを実例で
  配列のメソッドです。
• 分割代入とは｜配列・オブジェクトの書き方と落とし穴
  分割代入の書き方です。
• scriptタグとdeferの使い方｜読み込み位置とnullエラー
  script タグの読み込み順です。

公開予定の記事（近日公開。読まなくても最後まで進めます）

• Vue 3 CDNで使う方法｜ビルドなしでHTMLに読み込む手順（近日公開）
  CDN で Vue を使う方法です。
• Vue 3 refとreactiveの違い｜使い分けと落とし穴（近日公開）
  ref と reactive の違いです。
• Vue 3 v-ifとv-showの違い｜使い分けと表示切り替え（近日公開）
  表示の切り替えの使い分けです。
• Vue 3 v-forとkeyの使い方｜indexをkeyにしてはいけない理由（近日公開）
  リスト表示と key です。
• Vue 3 v-modelの使い方｜フォーム入力と修飾子（.number .trim .lazy）（近日公開）
  入力欄との結びつけです。
• Vue 3 computedとwatchの違い｜使い分けとwatchEffect（近日公開）
  computed と watch の違いです。
• Vue 3 props と emit の使い方｜親子コンポーネントのデータ受け渡し（近日公開）
  props と emit の使い方です。
• Vue 3 script setupとは｜書き方・defineProps・defineEmits（近日公開）
  <script setup> の書き方です。
• Vue 3 Composition APIとOptions APIの違い｜書き方の比較（近日公開）
  2つの書き方の比較です。
• Vue 3 ライフサイクルフックの使い方｜onMountedの実行タイミング（近日公開）
  ライフサイクルフックのタイミングです。
• npmとpackage.jsonの基本｜init・install・scriptsの使い方（近日公開）
  npm と package.json の基本です。

用語ミニ辞典

本文で分からない言葉が出たら、ここで確かめます。

よくある質問（FAQ）

Q. Vue.jsは、JavaScriptを知らなくても使えますか？
A. 使えません。Vue の中身は JavaScript で、公式ドキュメントも HTML・CSS・JavaScript の基礎知識を前提にしています。ただし、全部を覚える必要はなく、ステップ2の6つの基本が読めれば始められます。

Q. Vue 2とVue 3はどちらを学べばいいですか？
A. Vue 3 です。Vue 2 のサポートは 2023年12月31日に終わっています。ただし、古いサイトの保守では Vue 2 のコードに出会うことがあるので、new Vue という書き方を見たら Vue 2 だと分かるようにしておきます。

Q. Options APIとComposition APIはどちらで書けばいいですか？
A. このガイドでは Composition API（ref や <script setup>）で書いています。create-vue が作るサンプルも Composition API で書かれています。ただし、既存のプロジェクトがあれば、その書き方に合わせます。

Q. CDNで使う方法と、Viteで作る方法はどちらがいいですか？
A. 既存の HTML の一部だけを動かしたいなら CDN、画面がたくさんあるアプリなら Vite です。ただし、CDN では .vue ファイルが使えません。

Q. Node.jsはどの版を入れればいいですか？
A. ダウンロードページに並ぶ版のうち、「LTS」と書かれたものの中で番号が一番大きいものです。2026年10月7日時点では v24 で、Vue 公式の前提（22.18.0 以上の 22 系、または 24.12.0 以上）を満たします。ただし、LTS の番号は時期で変わるので、入れる前に公式で確認します。

Q. npm create vue@latest の質問の内容が、このガイドと違います。
A. 質問の内容は create-vue の版で変わることがあります。このガイドは 3.24.0 で確かめています。迷ったら、TypeScript は No、Router と Pinia は選ぶ、それ以外は選ばない、の方針で答えます。

Q. 再読み込みすると、Pinia のデータが消えます。
A. ストアのデータは、ブラウザが開いている間だけ覚えているものなので、正常な動きです。残したいときは、localStorage に保存する処理を別に作ります。

Q. 自分のサーバーが Apache か nginx か分かりません。
A. サーバー会社のマニュアルで「.htaccess」が使えるかを探します。使えると書いてあればステップ9の 9-2、分からなければ 9-3 のハッシュモードで公開します。

Q. jQueryからVueに移るべきですか？
A. 書き換え忘れの不具合に困っているなら、移る価値があります。ただし、動いている小さなページを書き直す必要はありません。

Q. Vue Routerと Piniaは、最初から必要ですか？
A. 画面が1つで、共有するデータも無いアプリなら不要です。このガイドでは、ステップ8で使うので最初から選んでいます。ただし、後から npm install vue-router pinia で入れて設定を書き足すこともできます。

出典

このガイドは、2026年10月7日時点で Vue.js・Vite・Vue Router・Pinia・Node.js の公式の資料を確認し、コードを実際に動かして書いています。各ソフトの版・コマンドの質問・推奨は変わることがあるので、最新は公式で確認してください。このガイドは一般的な情報の提供であり、個別の設計や契約についての助言ではありません。

参照した主な一次情報（公式の資料）は次のとおりです。

• Vue.js はじめに
  https://ja.vuejs.org/guide/introduction
• Vue.js クイックスタート
  https://ja.vuejs.org/guide/quick-start
• Vue.js テンプレート構文
  https://ja.vuejs.org/guide/essentials/template-syntax
• Vue.js リアクティビティーの基礎
  https://ja.vuejs.org/guide/essentials/reactivity-fundamentals
• Vue.js 算出プロパティ
  https://ja.vuejs.org/guide/essentials/computed
• Vue.js ウォッチャー
  https://ja.vuejs.org/guide/essentials/watchers
• Vue.js コンポーネントの基礎
  https://ja.vuejs.org/guide/essentials/component-basics
• Vue.js 単一ファイルコンポーネント
  https://ja.vuejs.org/guide/scaling-up/sfc
• Vue.js ツールガイド
  https://ja.vuejs.org/guide/scaling-up/tooling
• Vue.js ルーティング
  https://ja.vuejs.org/guide/scaling-up/routing
• Vue.js 状態管理
  https://ja.vuejs.org/guide/scaling-up/state-management
• Vue.js 本番デプロイ
  https://ja.vuejs.org/guide/best-practices/production-deployment
• Vite はじめに
  https://ja.vite.dev/guide/
• Vite 静的サイトのデプロイ
  https://ja.vite.dev/guide/static-deploy
• Vue Router Getting Started
  https://router.vuejs.org/guide/
• Vue Router Different History modes
  https://router.vuejs.org/guide/essentials/history-mode.html
• Pinia Getting Started
  https://pinia.vuejs.org/getting-started.html
• Node.js ダウンロード
  https://nodejs.org/ja/download
• Node.js Releases
  https://nodejs.org/en/about/previous-releases
• create-vue（GitHub）
  https://github.com/vuejs/create-vue