React開発を始める前にやっておくべきこと。それは開発の環境構築です。
今回の記事では、React公式で推奨されている環境構築方法のCreate React Appコマンドを紹介。初めての人でもわかりやすくNode.jsやnpmのインストールからreate React Appコマンドまでをわかりやすく解説していきます。
ちなみに、Reactの概要については「Reactとは？注目のJavaScriptフレームワークのメリットとデメリット」という記事に記載していますので、気になる方はそちらもご覧ください。
React開発の環境構築
React公式では、シングルページアプリケーション（SPA）を作る際には簡単にReactの開発環境を構築できる「Create React App」コマンドが推奨されています。Create React Appを使うためにはnpm（Node Package Manager）というツールが必要です。
npmはNode.jsというサーバーサイドのJavaScriptにおける実行環境のパッケージを管理するためのツールですので、Create React Appを実行するにはNode.js/npmがインストールされていなければいけません。
今回は環境構築するパソコンにNode.jsがインストールされていないという前提で進めていきます。既に他の開発などでインストールしている等の場合は読み飛ばしていただければと思います。
インストール方法１／インストーラーでインストール（windows・mac）
Node.jsをインストールする際におすすめなのが、Node.jsの公式サイト（https://nodejs.org/ja/）で提供されているインストーラーを使うことです。これはwindowsでもmacでもほとんど同じ方法でインストールできます。
インストール手順としては、以下の通りです。
1.https://nodejs.org/ja/download/ のページで自分のOSをクリックしてインストーラをダウンロードする。
出典：https://nodejs.org/ja/download/
2.インストーラを開き、「ようこそNode.jsインストーラへ」の画面で右下の「続ける」を選択。
3.使用許諾契約の画面で、「続ける」→ポップアップの「同意する」を選択。
4.インストール選択画面で「続ける」を選択。
5.標準インストール画面で「インストール」を選択してインストール完了。
以上でNode.jsがインストールされました。コマンドプロンプト（ターミナル）で以下のコマンドを実行してみてください。
% node --versionnode.jsがインストールされていれば「v16.13.1」のようにnodeのバージョンが表示されます。
また、npmも一緒にインストールされていますので、こちらもコマンドプロンプト（ターミナル）でバージョンをチェックしてみましょう。
% npm --version実行してバージョンが表示されれば、インストールは正常に完了しています。
インストール方法２／コマンド操作でインストール（mac）
macではコマンドラインから操作でインストールする方法もあります。こちらもパソコンに何も入っていないという前提で手順を紹介します。
homebrew
Macで様々なツールをインストールできるパッケージ管理ツール「homebrew」を導入します。まず、パソコンにインストールされているかどうかを以下のコマンドで確認します。
% brew -v導入されていればバージョンが表示されますが、導入されていなければ「command not found」が返ってきます。この場合、以下のコマンドを実行してhomebrewをインストールしてください。
% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"nodebrew
次に、複数のNode.jsのバージョンを管理できる「nodebrew」というツールをインストールします。
% brew install nodebrew完了したら「nodebrew -v」コマンドで、正常にインストールできたかチェックしましょう。「nodebrew 0.0.0（バージョンの数字）」と返ってくれば正常です。
Node.js
Node.js（安定版）のインストールコマンドは以下の通りです。
% nodebrew install-binary stableインストール後に「nodebrew ls」とコマンドを実行するとNode.jsのバージョンが表示されます。その時に「current: none」と表示されている場合は「nodebrew use v0.0.0（指定するバージョン）」とコマンドを実行してバージョンを指定してください。
npm
Node.jsのインストールが完了したら、npmのバージョンもチェックしましょう。
% npm -vバージョンが表示されていればインストール済ですが、command not foundが返ってきた場合はnpmをインストールする必要があります。以下のsudoコマンドを実行してください（ユーザーパスワードが必要になります）。
% sudo npm install -g npmちなみに、npmには「npx」というnpmパッケージを簡単に実行できるコマンドが同梱されています。Reactではnpxを使いますので、以下のコマンドでnpxのバージョンもチェックしておくとよいでしょう。
% npx -vReactプロジェクトの作成
npm/Node.jsが正常にインストールできたらいよいよ「Create React App」コマンドを使ってReactプロジェクトを作成していきます。
まず、コマンドプロンプト（ターミナル）を立ち上げて、cdコマンドでReactプロジェクトを作りたいディレクトリに移動してください。
次に、Create React Appコマンドを叩きます（my-appの部分はフォルダ名になるので自由に変更して構いません）。
% npx create-react-app my-app実行すると、コマンド上でさまざまな処理が行われ、その場所にmy-app（別の文字列で指定した場合はその名前）というフォルダが作成されます。フォルダ内にはReactのWebアプリケーションを実行するため必要なさまざまなファイルが置かれます。
Create React Appコマンドの処理が終わったら、cdコマンドでプロジェクトの中に移動してサーバーを起動してみましょう。
プロジェクト内へ移動
% cd my-app（別の文字列で指定した場合はその名前）
サーバー起動
% npm startブラウザが起動し、以下のようなReactのサンプルアプリケーションが表示されれば環境構築は完了です。
Web 上で試せるオンラインエディタ
React公式サイト（https://ja.reactjs.org/docs/getting-started.html#try-react）では、Reactを試す方法の１つとしてWeb 上のコードエディタを使用することを進めています。公式サイトでは以下の３つのオンラインエディタが紹介されています。
CodePen（https://codepen.io/）
CodeSandbox（https://codesandbox.io/）
Stackblitz（https://stackblitz.com/）
じゃけぇ（岡田拓巳）著の『モダンJavaSciptの基本から始めるReact実践の教科書』によると、2021年8月現在、最も簡単にReact開発を退官するのにおすすめなのは「CodeSandbox」と紹介しています。
CodeSandboxは「WEBエディター上で簡単にJavaScriptのプロジェクトが作成できて、コーディング、共有、GitHubとの連携ができるサービス」（じゃけぇ（岡田拓巳）著『モダンJavaSciptの基本から始めるReact実践の教科書』より）です。
使い方は至ってシンプル。まずCodeSandboxのトップページ右上にある「Create Sandbox」ボタンをクリックします。
次に遷移したメニュー画面でReactをクリックします。
これだけで簡単にReactプロジェクトを作成できます。
環境構築に時間を割かなくてよいので、勉強に集中したい人におすすめです。
最後に
今回はReact開発のための環境構築について、Node.jsのインストールからプロジェクトの作成までを解説しました。
環境構築ができればReact開発のスタートラインに立ったも同然。Create React AppでReactプロジェクトを作成して自分が思い描くアプリを開発してみたり、WEBエディターで学習を深めたり･･･。
あなたに合った方法でReact開発にチャレンジしてみてはいかがでしょうか。