Reactを学習するためには、まず開発環境を整える必要があります。このレッスンでは、プログラミング初心者の方にもわかりやすく、Reactの開発環境のセットアップ方法を説明します。
必要なもの
Reactの開発環境を構築するために、以下のツールが必要です：
- Node.js
JavaScriptを実行するための環境です。Reactアプリケーションの開発に必要です。 - テキストエディタ
コードを書くためのソフトウェアです。Visual Studio Code（VS Code）がおすすめです。 - Webブラウザ
Chrome、Firefox、Edgeなどの最新のブラウザがあれば問題ありません。
Step 1: Node.jsのインストール
Node.jsは、JavaScriptをサーバー側で実行できるようにするツールです。Reactの開発にも必要です。
📥 インストール手順
- Node.jsの公式サイトにアクセスします
- 「LTS」と書かれたバージョンをダウンロードします（LTSは安定版を意味します）
- ダウンロードしたファイルを実行して、インストールします
- インストール中は、デフォルトの設定のままで問題ありません
- インストールが完了したら、パソコンを再起動します
✅ インストール確認
ターミナル（Mac）またはコマンドプロンプト（Windows）を開いて、以下のコマンドを入力します：
node --versionバージョン番号が表示されれば、インストールは成功です（例: v20.11.0）。
Step 2: テキストエディタの準備
コードを書くためのテキストエディタを準備します。おすすめはVisual Studio Code（VS Code）です。
📝 Visual Studio Codeのインストール
- VS Codeの公式サイトにアクセスします
- 自分のOS（Windows/Mac/Linux）に合わせてダウンロードします
- ダウンロードしたファイルを実行して、インストールします
- インストール後、VS Codeを起動します
※ VS Codeは無料で使えます。他のエディタ（Sublime Text、Atomなど）を使っても問題ありませんが、VS Codeは初心者にも使いやすく、多くの拡張機能が利用できます。
Step 3: React + Viteプロジェクトの作成
Reactの開発を始めるには、プロジェクトを作成する必要があります。Vite（ヴィート）という高速なビルドツールを使うと、簡単にReactプロジェクトを作成できます。
🚀 プロジェクトの作成手順
ターミナルまたはコマンドプロンプトで、プロジェクトを作成したいフォルダに移動して、以下のコマンドを実行します：
npm create vite@latest my-app注意: 「my-app」はプロジェクト名です。好きな名前に変更できます（日本語やスペースは使わないようにしてください）。
コマンドを実行すると、いくつかの質問が表示されます：
- Select a framework: 矢印キーで
Reactを選択してEnterキーを押します - Select a variant: 矢印キーで
JavaScriptまたはTypeScriptを選択してEnterキーを押します（初心者の方はJavaScriptがおすすめです）
選択が完了すると、プロジェクトフォルダが作成されます。次に、プロジェクトフォルダに移動して、必要なライブラリをインストールします：
cd my-appnpm installnpm install コマンドは、プロジェクトに必要なライブラリをダウンロードします。少し時間がかかる場合があります。
💡 Viteとは？
Viteは、Reactアプリケーションを高速に開発できるツールです。従来のツールよりも起動が速く、変更の反映も早いのが特徴です。モダンなReact開発ではViteが主流になっています。
Step 4: 開発サーバーの起動
プロジェクトが作成できたら、開発サーバーを起動して、Reactアプリケーションをブラウザで確認できます。
▶️ サーバーの起動方法
ターミナルまたはコマンドプロンプトで、プロジェクトフォルダに移動して、以下のコマンドを実行します：
npm run devコマンドを実行すると、ターミナルに表示されるURL（例: http://localhost:5173）にアクセスすると、Reactアプリケーションが表示されます。Viteは高速に起動するため、すぐにブラウザで確認できます。
✅ 成功の確認
ブラウザに「Vite + React」という文字と、カウントアップするボタンが表示されれば、環境構築は成功です！
プロジェクトの構造（簡単な説明）
作成されたプロジェクトには、いくつかのファイルとフォルダが含まれています。最初のうちは、以下のファイルを理解しておけば十分です：
- src/App.jsx
メインのコンポーネントファイルです。ここにコードを書いていきます。 - src/main.jsx
Reactアプリケーションのエントリーポイント（起点）です。通常は変更しません。 - index.html
HTMLファイルです。ReactアプリケーションがこのHTMLに表示されます。Viteでは、プロジェクトのルートフォルダにあります。 - package.json
プロジェクトの設定ファイルです。使用しているライブラリの情報が記載されています。 - vite.config.js
Viteの設定ファイルです。通常は変更する必要はありません。
※ その他のファイルやフォルダについては、必要に応じて学習を進めながら理解していけば問題ありません。
よくある問題と解決方法
❌ 「node コマンドが見つかりません」
Node.jsが正しくインストールされていない可能性があります。Node.jsを再インストールし、パソコンを再起動してみてください。
❌ 「npm create vite コマンドが実行できない」
インターネット接続を確認してください。また、管理者権限でターミナル/コマンドプロンプトを実行してみてください。
❌ 「ポート5173が既に使用されています」
別のViteアプリケーションが既に起動している可能性があります。他のターミナルウィンドウで実行中のアプリを停止するか、Viteは自動的に別のポート（5174など）を使用します。
まとめ
このレッスンでは、Reactの開発環境を構築する方法を学びました。
- Node.jsをインストールしました
- テキストエディタ（VS Code）を準備しました
- Viteを使ってReactプロジェクトを作成しました
- 開発サーバーを起動して、Reactアプリケーションを確認しました
環境構築が完了したら、次のレッスンで実際にReactのコードを書いていきましょう！