前回は、完成したアプリを世界へ届けるための「Cloudflare APIトークン（合鍵）」を安全に取得しました。インフラ側の準備が整った今、今回はいよいよ皆様のパソコン内（ローカル環境）に、アプリを開発するための「専用の作業部屋」を構築していきます。

ここから先は、エンジニアの象徴とも言える「黒い画面（ターミナル）」を使用します。「難しそう」「壊してしまわないか不安」と感じるかもしれませんが、仕組みを理解すれば、ターミナルはパソコンと直接対話できる非常に便利で強力なツールとなります。

ターミナルは「パソコンへの直接の命令窓口」
普段、私たちはマウスを使ってフォルダを開いたり、ボタンをクリックしてソフトを起動したりしています（これをGUIと呼びます）。ターミナルは、それらの操作を「文字（コマンド）」だけでパソコンに指示するための窓口（CLI）です。

Windowsであれば「コマンドプロンプト」や「PowerShell」、Macであれば「ターミナル」という標準アプリを開いて作業を進めます。VS Code（テキストエディタ）を開き、その中にあるターミナル機能を使うのが、画面が一つにまとまって最も効率的です。

Vite（ヴィート）を使った最速の土台作り
Webアプリをゼロから手書きで作ろうとすると、設定ファイルの作成だけで数日かかってしまうことも珍しくありません。そこで現代の開発現場では、一瞬で最適な土台（足場）を組み上げてくれる強力な構築ツールを使用します。今回は、現在最も注目されている超高速ビルドツール「Vite」を採用します。

ターミナルを開き、作業したい場所（デスクトップなど）に移動した後、アプリの雛形を作成するコマンド（npm create vite@latest など）を入力して実行します。
すると、ターミナル上で対話形式の質問が始まります。
「プロジェクトの名前は？」「使う言語やフレームワークは？」と聞かれるので、今回は「React」と、より安全に開発を進められる「TypeScript」を十字キーで選択します。たったこれだけの操作で、必要なファイル群が一瞬にして自動生成されます。

依存パッケージのインストールとローカルサーバーの起動
雛形となるフォルダが作成されたら、次に行うのは「部品の取り寄せ」です。
ターミナルで作成したフォルダの中に移動し、パッケージをインストールするコマンド（npm install）を実行します。これにより、Reactを動かすために必要な世界中の天才たちが作ったプログラムの部品（ライブラリ）が、インターネット経由で手元のフォルダ内に一斉にダウンロードされます。

部品がすべて揃ったら、いよいよ手元のパソコン内に「自分専用のテスト用Webサーバー」を立ち上げます。
起動コマンド（npm run dev）を入力してエンターキーを押すと、ターミナル上に http://localhost:5173/ といったURLが表示されます。

この「localhost（ローカルホスト）」というのは、「今、あなたのパソコンの中だけで動いているテスト環境」を意味します。ブラウザを開いてこのURLにアクセスし、ViteとReactの初期画面（ロゴマークなどが回っている画面）が表示されれば、環境構築は無事成功です！

次回（第4回）は、この初期画面のまま、前回取得したAPIトークンを使ってCloudflareへ「初回の本番デプロイ」を行います。手元で作ったものがインターネット上に公開される感動の瞬間を、論理的な手順とともにお届けします。

【編集後記】
黒い画面にキーボードでアルファベットを打ち込み、文字の羅列がダーッと流れていく様を見ると、まるで自分がハッカーになったかのような高揚感がありますよね。最初は「おまじない」のように見えていたコマンドも、それぞれが「フォルダを作る」「部品を持ってくる」「サーバーを動かす」という明確な意味を持っていることが分かると、一気に恐怖心が消え去るはずです。localhostの画面が表示された時のあの達成感、ぜひ何度でも噛み締めてください！