第13回
自分のパソコンでReactを動かそう（つぎの一歩）
StackBlitzで作ったものを自分のパソコンでも動かす方法を小学生向けに解説。Node.jsの準備とViteでReactプロジェクトを作る手順、そして次に学ぶことを案内します。
最終回です。ここまでブラウザの中（StackBlitz）でReactを動かしてきました。今回は、それを自分のパソコンでも動かしてみます。少しだけ「黒い画面（ターミナル）」を使うので、おうちの人といっしょに進めるのがおすすめです。
StackBlitzの中身も「Vite」だった
StackBlitzは、Vite というReactの開発道具を、ブラウザの中で動かしてくれていました。同じViteを自分のパソコンに入れれば、StackBlitzと同じようにReactを動かせます。地続きなので、こわくありません。
手順1：Node.js を入れる
ViteなどのReactの道具を動かすには、Node.js（ノード・ジェイエス） というものが必要です。
- ブラウザで
nodejs.orgを開く - 「LTS」と書かれた、おすすめ版をダウンロードする
- ダウンロードしたファイルを開いて、案内どおりに進める（インストール）
ここはおうちの人にお願いするのが安心です。アプリを入れる作業なので、おうちの人と相談してね。
手順2：Reactプロジェクトを作る
ターミナル（黒い画面。Macは「ターミナル」、Windowsは「ターミナル」や「コマンドプロンプト」）を開いて、次のように打ちます。
npm create vite@latest my-appこれは「Viteで my-app という名前の新しいプロジェクトを作って」という意味です。すると、いくつか質問されます。
- フレームワークは？ → React
- 言語は？ → JavaScript
を選びます（矢印キーで選んでエンターです）。
手順3：動かす
作ったプロジェクトに入って、必要な部品を入れて、動かします。
cd my-app
npm install
npm run devそれぞれの意味は、こうです。
| コマンド | いみ |
|---|---|
cd my-app |
my-app のフォルダに入る |
npm install |
必要な部品をまとめて入れる |
npm run dev |
Reactを動かす（開発サーバーを起動） |
うまくいくと、http://localhost:5173 のような住所（URL）が表示されます。それをブラウザで開くと——あなたのパソコンの中でReactが動いています！
きょうのうんせい
大吉 🎉
src/App.jsx の中身を、StackBlitzで作ったおみくじのコードに書きかえれば、おみくじも自分のPCで動きます。
ここまでで学んだこと
このシリーズ全14回で、こんなにたくさんのことを学びました。
- Webのしくみ … ブラウザ・サーバー・URL（第1回）
- 3つのことば … HTML・CSS・JavaScript（第2〜4回）
- React … 部品（コンポーネント）で作る考え方（第5回）
- StackBlitz … ブラウザだけでReactを動かす（第6回）
- コンポーネント・JSX・props・map … 部品を作ってならべる（第7〜8回）
- state・イベント・条件 … 押すと変わる動き（第9回）
- アプリ作り … おみくじ・クイズ・じゃんけん（第10〜12回）
- 環境構築 … 自分のPCで動かす（第13回・今回）
つぎに学ぶこと
「もっとくわしく学びたい！」と思ったら、次は React基礎 完全ガイド シリーズへ進んでみましょう。このシリーズで体験したことを、もう少し深く・ていねいに学べます。
あせらず、自分のペースで。あなたはもう、自分の手でアプリを作れるようになりました。これからも、いろいろ作って楽しんでください！
まとめ
- StackBlitzの中身も Vite。だから自分のPCでも同じものが動かせる
- Node.js を入れる →
npm create vite@latestでプロジェクトを作る →npm run devで動かす http://localhost:5173を開くと、自分のPCの中でReactが動く- もっと学ぶなら、次は React基礎 完全ガイド へ
ここまでおつかれさまでした。あなたの「作って楽しい」プログラミングは、ここからが本番です！