Vue 入門 — 環境構築と最初の画面

Vue 入門 — 環境構築と最初の画面

ゼロから「動いた」までを一緒に

1. Vue とは何か

Vue は「画面を作る道具」

*(図は省略)*

Vue は Web の画面（UI）を効率よく作るための JavaScript の道具（フレームワーク）。

ボタンを押す・入力する、に合わせて画面を自動で書き換えてくれる。

どんなものが作れるか

• 入力フォーム・ボタン・一覧表示のある Web アプリ
• 管理画面・ダッシュボード
• ユーザー操作に反応する画面全般

> 「データが変わると画面も変わる」アプリを、少ないコードで作れる。

なぜ Vue を学ぶのか

素の JavaScript だけだと	Vue を使うと
画面更新を全部自分で書く	データを変えれば画面が追従
コードが長く複雑になりがち	部品（コンポーネント）に分けて整理
大規模になると破綻しやすい	仕組みに乗って秩序を保てる

> 「手で DOM を書き換える」世界から「データを宣言する」世界へ。

2. JavaScript と何が違うのか

Vue は JavaScript の上に乗っている

*(図は省略)*

Vue は新しい言語ではない。JavaScript の知識（変数・関数・配列・オブジェクト）はそのまま使う。

そこに「画面と結びつける書き方」が足されるだけ。

具体的な違い：画面の更新

// 素の JavaScript：自分で画面を書き換える
document.getElementById('count').textContent = count

<!-- Vue：データを画面に結びつけておくだけ -->
<p>{{ count }}</p>

> Vue では「どこに何を出すか」を一度書けば、あとはデータを変えるだけ。

知っておけば十分な JS の基礎

このコースで前提にする JavaScript（すでに学習済み）:

• 変数: const / let
• 関数: function name() {}
• 配列: [1, 2, 3] / .push() / .filter()
• オブジェクト: { name: 'Taro', age: 30 }

> これらが分かれば Vue に入れる。足りなければ JS の復習を先に。

3. 環境を理解する（Node.js・npm）

Vue を動かすのに必要なもの

*(図は省略)*

> この3つを用意すれば Vue 開発が始められる。

Node.js とは

Node.js = JavaScript を、ブラウザの外（自分の PC）で動かすための実行環境。

• 普段 JavaScript はブラウザの中で動く
• Vue の開発では、PC 上でビルドツール（Vite）を動かす必要がある
• そのために Node.js を入れる

> Vue 本体ではなく「開発に使う道具を動かす土台」が Node.js。

Node.js のバージョンを確認

ターミナルで次を実行する。

node --version

出力例（数字はバージョン。v20 以上ならOK）:

v26.0.0

> command not found なら Node.js が未インストール。次のスライドへ。

Node.js が入っていないとき

Node.js 公式サイトから LTS 版をインストールする。

• <https://nodejs.org/> を開く
• 「LTS」と書かれた方をダウンロード（安定版）
• インストーラを実行し、画面の指示に従う
• 終わったら node --version で確認

> LTS = Long Term Support（長期サポート版）。迷ったら LTS を選ぶ。

npm とは

npm = Node Package Manager。ライブラリ（部品）を取ってきて管理する道具。

• Vue 本体も Vite も、npm で取ってくる
• Node.js を入れると npm も一緒に入る

npm --version

出力例:

11.12.1

> 「ライブラリを取ってくる・管理する係」が npm。

4. プロジェクトを作る

npm create vue でひな形を作る

ターミナルで、プロジェクトを置きたいフォルダに移動してから実行する。

npm create vue@latest

> これで Vue プロジェクトの「ひな形」が対話形式で作られる。

対話で聞かれること

プロジェクト名や設定を聞かれる。学習用は基本そのまま Enter（No）でOK。

✔ Project name: … my-first-vue
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router …? … No
✔ Add Pinia …? … No
...

> 最初は機能を足さず、最小構成で始める。あとから足せる。

作成後に表示される手順

作成が終わると、次の手順が表示される（実際の出力）。

Scaffolding project in .../my-first-vue...

Done. Now run:

   cd my-first-vue
   npm install
   npm run dev

> この3コマンドを順に実行すれば起動する。次で1つずつ見る。

① プロジェクトに移動

cd my-first-vue

• cd = change directory（フォルダを移動する）
• 作ったプロジェクトの中に入る

> これ以降のコマンドは、このフォルダの中で実行する。

② npm install が何をするか

npm install

*(図は省略)*

package.json に書かれた必要なライブラリを、ネットから取ってきて node_modules/ に入れる。

npm install の出力例

実際にはこう表示される（数分かかることもある）。

added 120 packages, and audited 121 packages in 8s

found 0 vulnerabilities

• added 120 packages = 120個のライブラリが入った
• found 0 vulnerabilities = 既知の脆弱性なし

> 1回やれば node_modules/ に保存される。毎回はやらない。

③ npm run dev で起動する

npm run dev

実際の出力:

  VITE v8.0.16  ready in 594 ms

  ➜  Local:   http://localhost:5173/

> http://localhost:5173/ をブラウザで開くと、画面が表示される。

localhost:5173 とは

*(図は省略)*

• localhost = 自分の PC。インターネットには公開されない
• 5173 = Vite 開発サーバーが使う番号（ポート）

> 開発中だけアクセスできる、自分専用の画面。

サーバーを止める

開発サーバーを止めたいときは、ターミナルで:

Ctrl + C

> 止めるとブラウザからアクセスできなくなる。再開は npm run dev。

5. package.json と node_modules

package.json とは

プロジェクトの「設定ファイル」。何のライブラリを使うか等が書いてある。

実際の package.json（一部）:

{
  "name": "my-first-vue",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.5.32"
  }
}

package.json の読み方

項目	意味
name	プロジェクトの名前
scripts	npm run dev などで実行するコマンドの定義
dependencies	動作に必要なライブラリ（Vue 本体など）
devDependencies	開発時だけ使うライブラリ（Vite など）

> npm run dev は、ここの "dev": "vite" を実行している。

node_modules は触らない

*(図は省略)*

• 大量のライブラリが入る（数百MB）
• 消えても npm install で復活する
• だから .gitignore に入っている

> 自分が編集するのは src/ の中だけ。

6. プロジェクトの構造

フォルダ構成（実物）

my-first-vue/
├── index.html          ← 入口の HTML
├── package.json        ← 設定・ライブラリ一覧
├── vite.config.js      ← ビルドツールの設定
├── node_modules/       ← ライブラリ本体（触らない）
└── src/                ← ★ ここを編集していく
    ├── main.js         ← Vue を起動する最初のコード
    ├── App.vue         ← ★ 画面の本体
    ├── components/     ← 部品（コンポーネント）置き場
    └── assets/         ← 画像・CSS

> 編集するのは主に src/App.vue。

main.js とは

src/main.js は Vue アプリを起動する最初のコード。

import { createApp } from 'vue'
import App from './App.vue'

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

• App.vue を読み込んで
• index.html の <div id="app"> に画面を載せる

> ここは基本いじらない。「App.vue を画面に出す」入口。

App.vue とは

src/App.vue = 画面の本体。あなたが主に編集するファイル。

• .vue という専用の拡張子のファイル
• この1ファイルに HTML・JavaScript・CSS をまとめて書く
• これを SFC（Single File Component） と呼ぶ

> 「画面を作る ＝ App.vue を編集する」と思ってよい。

7. VSCode で開いて編集する

VSCode でプロジェクトを開く

方法は2つ。

# ターミナルから（プロジェクトのフォルダで）
code .

または VSCode を起動 → ファイル → フォルダを開く → my-first-vue を選択。

> code . の . は「今いるフォルダ」の意味。

Vue 用の拡張機能を入れる

VSCode の拡張機能（Extensions）で 「Vue - Official」 を検索してインストール。

*(図は省略)*

> これを入れると .vue が見やすく・書きやすくなる。

App.vue を開いて編集する

1. 左のファイル一覧から src/App.vue をクリック
2. 中身を全部消して、次のコードに書き換える
3. 保存する（Cmd + S / Ctrl + S）

> 保存すると、ブラウザが自動で更新される（ホットリロード）。

8. 最初の画面を作る

src/App.vue を書き換える

src/App.vue の中身をすべて消して、この全文に置き換える。

<script setup>
const message = 'Hello Vue'
</script>

<template>
  <h1>{{ message }}</h1>
</template>

> 3つのブロックのうち、今回は <script> と <template> だけ。コピペでOK。

保存してブラウザを見る

npm run dev が動いた状態で保存すると——

*(図は省略)*

画面に「Hello Vue」が出た。 あなたの最初の Vue アプリ。

今書いたコードの意味（App.vue）

<script setup>
const message = 'Hello Vue'   <!-- JS：変数を用意 -->
</script>

<template>
  <h1>{{ message }}</h1>       <!-- HTML：変数の中身を表示 -->
</template>

• <script setup> に JavaScript を書く
• <template> に画面の HTML を書く
• {{ message }} で変数の中身を画面に出す

SFC の三層（App.vue の全体像）

*(図は省略)*

> 1つの .vue に、見た目・動き・装飾が揃う。これが SFC。

style も足してみる

src/App.vue を、この全文に置き換える（<style> を追加）。

<script setup>
const message = 'Hello Vue'
</script>

<template>
  <h1>{{ message }}</h1>
</template>

<style scoped>
h1 {
  color: #1e40af;
}
</style>

> 保存すると、見出しが青くなる。scoped はこの部品だけに効く CSS。

9. 困ったとき（トラブルシュート）

command not found: node

Node.js が入っていない、またはパスが通っていない。

• Node.js を公式サイトの LTS からインストール
• インストール後、ターミナルを開き直す
• 再度 node --version で確認

> 入れた直後は、ターミナルの再起動が必要なことが多い。

npm install がエラーで止まる

症状	対処
ネットワークエラー	接続を確認して再実行
途中で止まった	node_modules を消して npm install をやり直す
権限エラー	管理者権限・フォルダの場所を見直す

# やり直しの例
rm -rf node_modules
npm install

ブラウザに画面が出ない

1. npm run dev が動いているか（ターミナルを確認）
2. URL が合っているか（http://localhost:5173/）
3. ポートが変わっていないか（出力の Local: を見る）

> 5173 が使用中だと、別の番号（5174 等）になることがある。出力を見る。

画面が真っ白・エラーが出る

ブラウザで F12 を押して、コンソールの赤いエラーを読む。

*(図は省略)*

> よくある原因: <template> のタグ閉じ忘れ、.vue の書き間違い。

ホットリロードが効かない

保存しても画面が変わらないとき:

1. ファイルを保存したか（Cmd/Ctrl + S）
2. npm run dev が動いているか
3. それでもダメなら、ターミナルで Ctrl + C → npm run dev で再起動

> たいていは保存忘れか、サーバーの再起動で直る。

10. 用語集とまとめ

今日の用語（1/2）

用語	意味
Vue	画面（UI）を効率よく作る JavaScript の道具
Node.js	JavaScript を PC 上で動かす土台
npm	ライブラリを取ってくる・管理する道具
Vite	Vue の開発サーバー・ビルドツール

今日の用語（2/2）

用語	意味
package.json	プロジェクトの設定・ライブラリ一覧
node_modules	ライブラリ本体（自動生成・触らない）
SFC / .vue	HTML/JS/CSS をまとめた画面の部品
App.vue	画面の本体。主に編集するファイル
localhost:5173	開発中の画面を見る自分専用の URL

まとめ：0→1 の流れ

手順	コマンド
プロジェクト作成	npm create vue@latest
移動	cd my-first-vue
ライブラリ取得	npm install
起動	npm run dev
確認	ブラウザで localhost:5173
編集	src/App.vue を書き換えて保存

このあとの演習

ドリルで、自分の手で最小の画面を作る。

> まず「動かす・編集する・保存する」のサイクルに慣れよう。

手を動かす番です

演習ガイドを開いて始めよう

ハンズオン

ch01-sfc 演習ガイド

受講生向け演習問題集

採点の仕組み (読んでから始めてください)

採点テストは 「お題の通りに動くか」 を機械的にチェックします。

ドリルごとに 3つのタイプ があるので、各ドリル冒頭の 【タイプ】 を確認してください。

タイプ fill (穴埋め問題) — 文法・APIを知っているか

• ___ (3個並んだアンダースコア) の空欄を埋める
• 既存の <template> のテキストやボタン順は そのまま
• ロジック自由度: 低 (お題どおりに直す)

タイプ add (機能追加問題) — 既存コードに機能を足せるか

• 既存コードを残したまま、新しい機能を 追加 する
• 実装方法は自由 (関数名・変数名・内部ロジックは好きに)
• ただしテストが要求する見た目 (表示テキスト・ボタンの並び順) は守る
• 既存テストを壊さないこと

タイプ build (ゼロベース実装問題) — 仕様から実装を組み立てられるか

• ほぼ空の App.vue から 自力で全部書く
• <template> 構造・id/class・内部ロジック: 完全に自由
• 守るのは画面の機能仕様だけ: 表示するテキスト・ボタンの操作で何が起きるか
• 一番ハードだが、実装力が一番つくタイプ

3タイプ共通で守ること

• ファイル名 (App.vue) は変えない
• tests/ フォルダは触らない (採点ロジック)
• テンプレートの 表示テキスト (「カウント:」等) はテストが見ているので残す

このガイドのドリル一覧

#	ドリル名	タイトル	タイプ	難易度
1	01-hello-sfc	{{TITLE}}	🔧 穴埋め	★

> 詰まったら ヒント ページを開く。それでも分からなければ講師に質問。

ドリル 1: {{TITLE}}

ドリル名: 01-hello-sfc

> 🔧 【タイプ: 穴埋め問題】 ___ の部分を埋めて完成させてください。既存のコード構造は変えないこと。

問題

starter.vue の ___ を埋めて完成させよ。

確認方法

ドリル 1: ヒント

ドリル名: 01-hello-sfc

> ⚠️ 自力で考えてから読んでください

> {{HINT}}

<script setup>
const hello = 'Hello, Vue'
</script>

<template>
  <p>{{ hello }}</p>
</template>

{{ANSWER_CODE}}

{{ANSWER_CODE}}