【Vue 3 速習ハンズオン 第1回】Node.js環境構築からHello World、起動の仕組み（main.js・Vite）まで徹底解説

Vue.js未経験のエンジニアに向けた「Vue 3 速習ハンズオン」の第1回です。

今回はMac環境を想定し、Homebrewを使用せずに公式サイトのインストーラでNode.jsをクリーンに導入。Viteを使ったプロジェクトの新規作成から、最小限の「Hello World」アプリを動かして仕組みを紐解くまでの全工程を解説します。

---

1. Node.js のインストール（インストーラ版）

パッケージマネージャを介さず、公式サイトから直接インストーラを取得して導入します。

• 
  導入手順と確認
  
  1. 公式サイトへのアクセス： ブラウザで Node.js 公式サイト にアクセスします。
  
  2. インストーラのダウンロード： トップページに表示されている LTS（推奨版） の .pkg ファイルをダウンロードします。
  
  3. インストール実行： ダウンロードしたインストーラ（例: node-vX.X.X.pkg）をダブルクリックし、画面の指示に従って完了させます（管理者パスワードが必要です）。
  
  4. インストールの確認： ターミナルを開き、以下のコマンドでバージョンを確認します。
  
  node -v
  
  v24.21.0
  
  
  
  npm -v
  
  11.19.0

---

2. Vue 3 プロジェクトの新規作成

超高速ビルドツール「Vite」を使用して、Vue 3のプロジェクト環境を一瞬で生成します。

• 
  コマンド実行と対話プロンプト
  
  ターミナルで任意のディレクトリに移動し、プロジェクト生成コマンドを実行します。
  
  cd ~
  
  npm create vue@latest my-vue-app
  
  
  表示される質問（プロンプト）に対して、以下のように選択して進めます。
  
  ・Use TypeScript? → No を選択して Enter
  
  ・Select features to include... → 何も選択せず（none のまま）Enter
  
  ・Select experimental features... → 何も選択せず（none のまま）Enter
  
  ・Skip all example code and start with a blank Vue project? → No を選択して Enter

---

3. 依存関係のインストールと初期起動確認

生成されたプロジェクトへ移動し、必要なパッケージをインストールしてサーバーを起動します。

cd my-vue-app

npm install

npm run dev

ターミナルに表示されるローカルURL（例: http://localhost:5173）をブラウザで開き、ウェルカム画面が表示されることを確認したら、ターミナルで Ctrl + C を押して一度サーバーを停止します。

---

4. Hello World サンプルコードの実装

エディタ（VS Codeなど）で my-vue-app フォルダを開き、src/App.vue の中身をすべて削除して、以下のコードに書き換えて保存してください。

• 
  src/App.vue の実装コード
  <script setup>
  import { ref } from 'vue'
  
  // リアクティブな変数（状態）の定義
  const message = ref('Hello World from Vue 3!')
  const clickCount = ref(0)
  
  // メソッド（アクション）の定義
  const changeMessage = () => {
  clickCount.value++
  message.value = `ボタンが ${clickCount.value} 回押されました！`
  }
  </script>
  
  <template>
  <main class="container">
  <h1>Vue 3 連載 第1回：Hello World</h1>
  
  <!-- 1. 変数の表示（マスタッシュ構文） -->
  <p class="message-box">{{ message }}</p>
  
  <!-- 2. イベントハンドリング（@click） -->
  <button @click="changeMessage">メッセージを変更する</button>
  </main>
  </template>
  
  <style scoped>
  .container {
  max-width: 500px;
  margin: 60px auto;
  font-family: sans-serif;
  text-align: center;
  }
  .message-box {
  font-size: 1.2rem;
  font-weight: bold;
  color: #2c3e50;
  background: #f4f6f8;
  padding: 20px;
  border-radius: 6px;
  margin: 20px 0;
  }
  button {
  background: #42b883;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  }
  button:hover {
  background: #35495e;
  }
  </style>

---

5. アプリケーションの実行とリアクティブの体感

再度 npm run dev で開発サーバーを起動し、ブラウザ（http://localhost:5173）で動作を確認します。

ボタンを何回かクリックし、DOMを手動書き換えせずともデータ変更だけで画面が追従するVue 3のリアクティブの仕組みを体感してください。

---

6. 【解説】プロジェクト構成と「起動の仕組み」

① ディレクトリ構成の全貌

my-vue-app/

  ┣ index.html          # ★すべての起点となるHTMLファイル

  ┗ src/

      ┣ assets/          # 画像や共通CSSなどの静的アセット

      ┣ components/      # 再利用可能な子パーツ置き場

      ┣ App.vue          # アプリの根幹となるメイン画面コンポーネント

      ┗ main.js          # アプリ全体の「最初のエントリーポイントJS」

② 起動の連鎖（誰が最初にどこを呼んでいるのか？）

1. 起点は index.html： ブラウザが最初に読み込むルートの index.html には、<div id="app"></div> と <script type="module" src="/src/main.js"></script> が記述されています。

2. main.js の仕事： 呼び出された main.js が Vue アプリのインスタンスを生成し、メイン画面である App.vue を #app にマウントします。



■ エンジニア向け対比まとめ

概念	バックエンド（Java / C等）	Vue.js (Vite) の世界
アプリの起点	main() 関数 / エントリーポイント	プロジェクト直下の index.html (から呼ばれる main.js)
ルート画面	メインクラス / トップレイアウト	src/App.vue
部品群	サブクラス / 共通ライブラリ	src/components/ フォルダ内の .vue

---

7. 【徹底解説】main.js の数行に詰まった起動のメカニズム

src/main.js の実際のコード4行を見てみましょう。

import './assets/main.css'



import { createApp } from 'vue'

import App from './App.vue'



createApp(App).mount('#app')

• 
  1行ずつのコード解説
  
  ・CSSのインポート (import './assets/main.css')： JSコードの中から直接CSSを読み込み、アプリ全体にスタイルを適用します。
  
  ・コアと部品の召喚 (import { createApp } from 'vue' / import App from './App.vue')： Vueのコアエンジンと、最上位画面である App.vue をインポートします。
  
  ・マウント処理 (createApp(App).mount('#app'))： App.vue を組み込んだアプリの箱を作り、index.html の <div id="app"> にガチャンとハメ込みます。これによって動的なSPA（シングルページアプリケーション）が起動します。

---

8. まとめ

• 
  ・環境構築：Node.jsを公式サイトからクリーンに導入し、Viteで高速プロジェクト生成。
  
  ・リアクティブ：ref や @click を用いて、直感的なデータ連動を実装。
  
  ・起動フロー：index.html → main.js → App.vue のマウントという一連の流れを把握。

次回は、複数のコンポーネントを組み合わせたパーツ分割や、より実践的なデータバインディングの仕組みに踏り込んでいきます。お楽しみに！