コース目次 / 第0章

準備

ターミナルとViteで、開発サーバが動く土台をつくります。

第0章 / 全11章目安約75分この章のゴール: tabi-dashboard が localhost に表示され、保存すると画面が勝手に変わる

お使いのパソコン

手順が切り替わります

お使いのエディタ

ファイル操作が切り替わります

コース2の敵は、コース1の「環境構築」ではなく ターミナル恐怖症 です。黒い画面に文字を打つのは、慣れるまで誰でも怖いものです。

先に安心してほしいことを1つ。

このコースで覚えるコマンドは、実質4つだけです。
cd(フォルダに入る)/ npm install(道具を取り寄せる)/ npm run dev(開発サーバを動かす)/ Ctrl + C(止める)。
このあと npm run check(第1章)と npm run build(第6章)が増えますが、どちらも npm run 〜 という同じ形です。新しい形は出てきません。

今日のゴール

ブラウザに「はるとの旅ダッシュボード」というタイトルと、空っぽの3つのパネル(行き先・旅費の換算・天気)が表示されます。そして ファイルを保存すると、リロードしなくても画面が変わります。コース1の「保存 → リロード」が「保存 → 勝手に変わる」に進化します。

ミニ解説: 今日出てくる3つの言葉

言葉	何者か
Node.js	ブラウザの外でJavaScriptを動かすための土台。これから使う道具はほぼ全部これで動く
npm	道具の取り寄せ係。「あのライブラリ持ってきて」を代わりにやってくれる
Vite(ヴィート)	開発サーバ。保存を見張っていて、変わったところだけ画面に反映する

保存した瞬間に画面が変わる仕組みを HMR(ホットモジュールリプレースメント)と呼びます。名前は覚えなくて大丈夫です。

1. Node.js を入れる

Mac をお使いの方

ブラウザで「Node.js 公式」と検索し、公式サイトを開きます。LTS と書かれたボタン(推奨版)を押してインストーラをダウンロードし、案内のとおりに進めてください。

Windows をお使いの方

ブラウザで「Node.js 公式」と検索し、公式サイトを開きます。LTS と書かれたボタン(推奨版)を押してインストーラをダウンロードし、案内のとおりに進めてください。途中のチェックボックスは初期状態のままで構いません。

入ったか確かめます。まずターミナルを開いてください。

VS Code をお使いの方

VS Code を開き、メニューの「ターミナル」→「新しいターミナル」を選ぶと、画面の下半分に黒っぽい領域が出ます。これがターミナルです。

ターミナル派の方

「ターミナル」を開きます(Launchpad の「その他」の中、または Spotlight で ターミナル と検索)。

スタートメニューで PowerShell と検索して「Windows PowerShell」を開きます。このタブの手順は PowerShell を前提にしています。

このタブでは、ファイルを作る・移す・消すところをコマンドで書きます。書き方がMacとWindowsで違うところだけ、上の Mac / Windows タブで分けてあります。分けていないコマンドは、PowerShellでもそのまま動きます。

VS Codeのターミナルターミナル

node -v

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

v22.11.0 のようにバージョンが出れば成功です(数字は違って構いません)。

何も出ない / 「見つかりません」と言われたら、まず VS Code をいったん終了して開き直してターミナルのウィンドウを閉じて開き直してください。インストール直後は、開きっぱなしのターミナルが新しい道具に気づいていないことがあります。これがこのコースの定型リカバリ1番です。

2. プロジェクトを作る

作業したい場所(デスクトップなど)にターミナルで移動してから、Viteにプロジェクトの骨組みを作ってもらいます。

Mac をお使いの方

VS Codeのターミナルターミナル

cd ~/Desktopnpm create vite@6 tabi-dashboard -- --template vanilla

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

Windows をお使いの方

VS Codeのターミナルターミナル

cd %USERPROFILE%Desktopnpm create vite@6 tabi-dashboard -- --template vanilla

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

PowerShellをお使いの場合は cd $HOME\Desktop でも同じです。~ はWindowsのコマンドプロンプトでは使えません。

--template vanilla は「素のJavaScriptのテンプレートで作って」という指定です。TypeScriptのテンプレートは選びません。 TS化は自分の手でやるのが、このコースの主題だからです。

画面が教材と違っても大丈夫です。 Viteの対話画面はよく変わります。最後に tabi-dashboard というフォルダができていればOKです。どうしても進めないときは、このページの下のZIPをダウンロードして解凍すれば、同じ地点に立てます。

3. 動かす

VS Codeのターミナルターミナル

$cd tabi-dashboard$npm install$npm run dev

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

npm install は道具の取り寄せです。少し時間がかかります。npm run dev を打つと、ターミナルに http://localhost:5173/ のようなURLが出ます。そのURLをブラウザで開いてください。

止めたいときは、ターミナルをクリックしてから Ctrl + C です(Macでも Ctrl です。command ではありません)。

5173 以外の番号が出ていたら、その番号が正解です。Viteは番号が使われていると勝手に隣へ逃げます。URLはいつもターミナルの表示を見てください。

4. 中身を入れ替える

テンプレートに入っているサンプル(カウンターなど)は使いません。次のようにします。

できあがったフォルダには、すでに src フォルダと src/main.js・src/style.css が入っています。ここにサンプルのカウンターも同居しているので、片付けます。

src/counter.js と src/javascript.svg を削除する
index.html を下の内容に置き換える

ターミナル派の方

npm run dev を動かしたターミナルは開発サーバに占領されているので、そこには打てません。もう1つタブ(または窓)を開いて、そちらで打ってください。

削除もファイルを開くのも、コマンドでできます。

2枚目のターミナル

rm src/counter.js src/javascript.svgnvim index.html

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

2枚目のPowerShell

Remove-Item src\counter.js, src\javascript.svgnvim index.html

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

エディタは nvim でなくて構いません。このコースでファイルを開く例はすべて nvim で書きますが、vim でも hx でも emacs でも、お好みのエディタのコマンドに読み替えてください。

index.html

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>はるとの旅ダッシュボード</title>
  </head>
  <body>
    <header class="header">
      <h1 class="site-title">はるとの旅ダッシュボード</h1>
      <p class="greeting" id="greeting"></p>
    </header>

    <main class="dashboard">
      <section class="panel">
        <h2>行き先</h2>
        <div class="places" id="places"></div>
      </section>

      <section class="panel">
        <h2>旅費の換算</h2>
        <div class="exchange" id="exchange"></div>
      </section>

      <section class="panel">
        <h2>天気</h2>
        <div class="weather" id="weather"></div>
      </section>
    </main>

    <script type="module" src="/src/main.js"></script>
  </body>
</html>

そして src/main.js と src/style.css を、次の内容にします。

src/main.js

import './style.css';

console.log('旅ダッシュボード、起動しました');

CSSはコース1の復習なので説明しません。丸ごとコピーして構いません(あとで自由に変えてください)。ただし貼らずに進めると、この先の章の画面が教材の見た目になりません。

src/style.css

:root {
  --bg: #f7f8fa;
  --surface: #ffffff;
  --border: #dfe3e8;
  --text: #2b2f36;
  --muted: #6b7280;
  --accent: #3f6b86;
  --radius: 12px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Hiragino Sans', 'Noto Sans JP', system-ui, sans-serif;
  line-height: 1.8;
}

.header {
  background: var(--accent);
  color: #fff;
  padding: 24px 20px;
}

.site-title {
  margin: 0;
  font-size: 1.4rem;
}

.greeting {
  margin: 4px 0 0;
  font-size: 0.95rem;
  opacity: 0.9;
}

.dashboard {
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  display: grid;
  gap: 20px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 20px 20px;
}

.panel h2 {
  font-size: 1.05rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.places {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.place {
  flex: 1 1 200px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
}

.place h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  color: var(--accent);
}

.place p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
}

.field {
  display: block;
  margin-bottom: 12px;
  font-size: 0.9rem;
}

.field input,
.field select {
  display: block;
  width: 100%;
  max-width: 320px;
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}

.result {
  font-size: 1.2rem;
  font-weight: 700;
}

.note {
  color: var(--muted);
  font-size: 0.85rem;
}

.error {
  color: #a8443a;
}

.forecast {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.day {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
}

button {
  font-family: inherit;
  font-size: 0.9rem;
  padding: 6px 16px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}

button.secondary {
  background: var(--surface);
  color: var(--accent);
}

保存すると、ブラウザが勝手に新しい表示になります。これがHMRです。

あなたの番

index.html の <title> と <h1> を、自分のダッシュボード名に変えてください。保存した瞬間に画面が変わることを確かめます。
ターミナルで Ctrl + C を押して止め、もう一度 npm run dev で起動してみてください。「止められる」と分かっているだけで、ターミナルはずいぶん怖くなくなります。

この先の予告

次の章から TypeScript が出てきます。といっても、やることは「.js を .ts に名前を変える」だけです。身構えなくて大丈夫です。

実務メモ

React Native(Expo)の npx expo start と、今日の npm run dev は同じ構図です。開発サーバを立ち上げて、保存したら反映される。呼び名が違うだけで、やっていることは変わりません。

TSエラー語辞典

この章で実際に出るエラー英文と、その日本語訳です。卒業するころには全章ぶんがお助けページに集まります。

エラー英文	言っていること
`command not found: node`	Node.jsがまだ見えていません。ターミナルを開き直してください(VS Codeなら本体ごと)

ハマったら

Windows で「このシステムではスクリプトの実行が無効になっているため」と出る

PowerShellの安全装置が npm をブロックしています。コマンドプロンプトに持ち替えると、設定を書き換えずに済みます。

VS Codeのターミナルの右上にある「+」の横の ∨ を押し、Command Prompt(コマンドプロンプト)を選んでから、もう一度同じコマンドを打ってください。

スタートメニューで cmd と検索して「コマンドプロンプト」を開き、そこで同じコマンドを打ってください。

その場合、フォルダ移動は cd %USERPROFILE%\Desktop を使ってください(~ はコマンドプロンプトでは展開されません)。

会社や学校のパソコンで npm install が途中で止まる

プロキシ(社内ネットの関所)に阻まれていることが多く、ここで戦うと1日溶けます。個人のパソコンで進めることを強くおすすめします。 どうしても社内PCで進めたい場合に備えて、第5章以降はインターネットに繋がらなくても完走できる代替経路(録画済みのAPIデータを使う方法)を用意してあります。

ZIPで戻したい

このページの下のZIPは、この章を終えた状態です。

解凍したら、フォルダの中で次の2つを順に打ちます。

ZIPを解凍したフォルダの中で

npm installnpm run dev

行頭の $ は「ここからコマンド」という目印です。$ は打たないでください。

丸ごと置き換えると自分で書き換えた内容が消えます。 まず src/places.ts(自分の行き先データ)と、自分で変えた文言をメモ帳に待避してから、壊れたファイルだけを差し替えてください。

こうなっていればOK

ターミナルで node -v がバージョンを表示する
npm run dev で開発サーバが起動する
ブラウザに「はるとの旅ダッシュボード」と空の3パネルが出ている
main.js を保存すると、リロードしなくても画面が変わる
Ctrl + C で開発サーバを止められる

うまくいかないときは、この章の完成ファイル一式(ZIP)をダウンロードして続きから進めても大丈夫です。

あと6章で、あなたのサイトに公開URLが付きます。

この章はまだ完了していません。