Reactの環境構築

Reactの環境構築

React開発に必要なツールのインストール

Reactの環境構築のためにいくつかのツールが必要です。ここではそれらのツールをダウンロード・インストールします。対象のOSは最新の Mac OS X もしくは最新の Windows OS を対象としています。Reactの環境構築は比較的簡単に行うことができます。

エディタ

Visual Studio Codeロゴ

まずはReactアプリのソースコードを編集するため、開発用エディタをダウンロード・インストールしましょう。エディタは何でも構いませんが、何もインストールしていない場合は Visual Studio Code というエディタがおすすめなので、下記ページからインストールしましょう。

Visual Studio CodeはMicrosoftによって開発されているテキストエディターで特に TypeScript を記述するときにその親和性の高さから好んで使用されます。また、JavaScript以外にもGoやRubyなど複数の言語に対応している便利なエディターです。

Visual Studio Codeのダウンロード

上記サイトからダウンロードして、インストールウィザードの指示に従って、インストールを進めていきます。

Visual Studio Codeのインストール

Visual Studio Codeをインストールしたら、次には Node.js をインストールします。

Node.js

Node.jsロゴ

React開発に必要な ライブラリをインストール したり、Reactの ソースコードをビルド して動作させるために Node.js が必要です。Node.jsはRyan Dahl氏によって開発されたJavaScriptの実行環境であり、Reactのみならず、近年のフロントエンド開発ではほぼ必須のツールとなっています。

Node.js未ダウンロードの場合や過去のバージョンをインストールして古くなってしまっている場合には下記ページから「 推奨版 (LTS) のバージョン 」をダウンロードして開き、インストールウィザードの画面指示に従ってそのままインストールします。

Node.jsのダウンロード

上記サイトからダウンロードして、インストールウィザードの指示に従ってインストールします。

Node.jsのダウンロード

Node.jsのインストール

ひととおり完了したら、Node.jsがインストールされたかどうかチェックしてみましょう。

Macでは ターミナル 、Windowsでは コマンドプロンプト を開き、下記のコマンドでエラーが返ってきたり、コマンドが見つからないと言われる場合には、Node.jsがPCに正常にインストールされていない可能性があります。

# Node.jsのバージョンチェック
node -v

Node.jsのバージョンをチェック

上記のコマンドを叩いてエラーが返ってくる場合はもう一度、Node.jsのインストールを試してみましょう。コマンドを打って、Node.jsがインストールされていることを確認したら、次はReactアプリの雛形を作っていきます。

Create React AppでReactアプリの雛形をつくる

Reactの開発を始めるための一般的な方法は現時点では Create React App を使うことです。

Create React App Github

Create React AppはFacebook社が開発・提供しているReact開発用のコマンドラインツールです。Create React Appを使えば、 コマンド一つでReactアプリの雛形を作成 することができます。Macであれば、ターミナルから、Windowsであればコマンドプロンプトから使用することができます。 Create React App を使うために Node.jsのインストールが必要です。

Macでは ターミナル 、Windowsでは コマンドプロント もしくは Power Shell を起動して下記のコマンドを入力しましょう。場所はデスクトップなど、どこでも構いません。

# デスクトップに移動
cd Desktop

下記のコマンドを入力するとReactアプリの雛形がmy-appディレクトリの中に自動的に作成されます。

# 下記コマンドでmy-appというReactプロジェクトを作成する。
npx create-react-app my-app

Create React App が必要なライブラリ等を自動でインストールします。暫く時間がかかりますので、そのまま待ちましょう。

Create React Appでアプリの雛形を作成

インストールが終わって、Reactアプリの雛形が無事作成されたら、作成したmy-appディレクトリの中に移動して、Reactアプリを立ち上げます。

# 作成したmy-appディレクトリの中に移動
cd my-app

# Reactアプリを立ち上げる
npm start

上記の npm start コマンドを叩くと自分のマシンの 3000番ポート でReactアプリが立ち上がります。Google Chromeなどのブラウザでアドレスバーに http://localhost:3000 と入力して、アクセスすると、Reactアプリが起動していることを確認できます。

Reactアプリを確認

Reactアプリが立ち上がっていることを確認できたら、次はこの Create React App で作成されたReactアプリの中身を実際に編集していきましょう。

ブラウザ上でReact開発を試せるサービス

ここではローカルに開発環境を構築しましたが、Google ChromeなどのWebブラウザ上でReact開発を試せるサービスがあります。代表的なものとしてCodeSandbox というWebサービスがあります。Reactのプロジェクトを作成するだけで、開発環境構築不要でReact開発を試すことができます。何か小さく検証したい場合や、開発環境を構築する必要もない時などに試してみるのもおすすめします。