コマンド一つでReact環境を簡単に構築！ Create React Appコマンドの紹介

人気のフロントエンド開発のフレームワークであるReactの開発環境を準備するにはさまざまな方法があります。

Reactの公式ページを見ると、新しいシングルページアプリケーションをReactで作る際には、Create React Appというコマンドを使用することが推奨されています。

Create React Appを使うことで、無料で簡単にReactの開発環境を構築し、開発を開始することができます。この記事では、簡単にReactの開発環境を構築することができるCreate React Appについて、使い方を紹介します。

併せて、Reactの開発環境をCreate React Appを使わずに構築する方法と、知っておきたい周辺技術についても紹介します。

Create-React-Appの使い方

それでは、Create React Appの使い方を紹介します。

Create-React-Appの準備

Create React Appを使用するには、Node.jsをインストールする必要があります。すでにNode.jsをインストールしてある場合には、この手順は不要です。

Node.js のインストール

Node.jsの公式サイトにアクセスし、インストーラをダウンロードします。二つボタンがありますが、最新版ではなくLTS版のほうをダウンロードします。インストーラがダウンロードできたら、インストーラを実行し、Node.jsをインストールします。

インストールが完了したら、ターミナル（Windowsの場合はコマンドプロンプト）で以下を実行し、インストールが正しく終わっていることを確認します。

   node -v	

「v」から始まる文字列が表示されていれば、インストールが成功しています。

Create-React-Appの実行

Node.jsのインストールが完了したら、すぐにCreate React Appを使用することができます。

任意のフォルダーの中でターミナルを起動し、以下のコマンドを実行します。「my-app」の部分はプロジェクト名になるため、好きな文字列で構いません。

   npx create-react-app my-app	

次に、以下のコマンドを実行します。

   cd my-app	

最後に、以下のコマンドを実行します。Reactのサンプルアプリケーションがブラウザで起動すれば、環境構築は完了です。

   npm start	

TypeScriptで開発したいとき

JavaScriptをより便利にした言語であるTypeScriptをReact開発に使用したい場合には、代わりに以下のコマンドを実行します。「my-app」の部分はプロジェクト名になるため、好きな文字列で構いません。

   npx create-react-app my-app --templete typescript	

実行出来たら、以下のコマンドを順番に実行します。

   cd my-app
   npm start	

プロジェクト内のソースコードを見ると、拡張子が「.tsx」となっています。TypeScriptを基調としたソースコードになっていることを、ファイルを開いて確認してみてください。

慣れてきたら使いたい「npm run eject」コマンド

Create React Appで作成したアプリケーションは、ファイルに変更を加えるとWebブラウザの方にも自動的に反映されます。この仕組みはCreate React Appが提供しています。

Reactの公式が推奨しているCreate React Appですが、この仕組みがもし使えなくなった時のために、Create React Appの仕組みを使わずに環境構築をしたように変換するコマンドが用意されています。それがnpm run ejecというコマンドです。

このコマンドを実行することでCreate React Appが使えなくなっても、今まで開発してきたプロジェクトが無駄になることはありません。万が一Create React Appが使えなくなった時のために覚えておきたいコマンドです。

Create-React-Appを使わないReactプロジェクトのBuild方法

Reactプロジェクトの実行には、JavaScriptへのトランスパイルが必要

Reactプロジェクトのソースコードは、「JSX」（TypeScriptを使用した場合には「TSX」）という、特殊な言語で記述されています。

これを直接Webブラウザ上で実行することはできません。Webブラウザ上で上記のソースコードを実行するためには、JavaScriptへの適切な変換が必要です。

このように、ある言語からほかの言語へ変換を行うことを、「トランスパイル」と呼びます。ReactプロジェクトをWebブラウザ上で実行するには、JavaScriptへのトランスパイルが必要です。

Create React Appはトランスパイルを自動で行っていました。Create React Appを使わなくても、JavaScriptへのトランスパイルは可能です。さまざまな手段がありますが、ここでは「WebPack」を使用する方法を紹介します。

WebPackとは

WebPackとは、JavaScriptやCSS、画像といったWebページの表示に使うファイルを、一つのファイルにまとめることができるバンドラーの一つです。Webページの読み込みを最適化、すなわち高速化するために用いられます。

さまざまなファイルを一つのファイルにまとめる過程で、トランスパイルも行うことができます。WebPackの使い方を詳しく見ていきます。

WebPackの使い方

前提として、Node.jsはインストール済みとします。

インストール方法

まずは、プロジェクトフォルダーでnpmを初期化する必要があります。プロジェクトフォルダーで以下のコマンドを実行します。「package.json」というファイルができていれば成功です。

   npm init -y	

次に、WebPackモジュール本体のインストールをします。プロジェクトフォルダーで以下のコマンドを実行します。

   npm install -D webpack webpack-cli	

最後に、WebPackを設定するためのファイルを作成します。プロジェクトフォルダーの直下に、以下のファイル名を持つファイルを作成します。この名前は指定されており、デフォルトでは自由に変えることはできません。

   webpack.config.js	

以上で、WebPackを使用するための準備が整いました。

WebPackのさまざまな利用方法

webpack.config.js を書き換えることでさまざまなトランスパイルが可能

先ほど用意したwebpack.config.jsは空ですが、書き換えることでJSXからJavaScriptへのトランスパイルを含めたさまざまなことが可能になります。

「webpack」の公式サイトにある「構成」のページを参考にして、webpack.config.jsを記述します。

サンプルとして、TypeScriptを使用したReactプロジェクトをトランスパイルするためのwebpack.config.jsを示します。

• mode：”development”ではデバッグ情報を含んだトランスパイルをします。”production”では最適化され、軽量化されたソースコードを出力します。
• entry：最初に読み込むJSX（この例ではTSX）ファイルを指定します。
• output：トランスパイルしたファイルを出力する先を指定します。この例では、プロジェクトフォルダー/outフォルダーに「index.js」という名前でトランスパイルされて出力されます。
• module：トランスパイルに使用するモジュールを定義します。この配下は利用する環境によって大きく変わるため、自身の環境に合わせて設定しましょう。

   module.exports = {
     mode: "development",
     entry: "./src/index.tsx",
     output: {
       path: `${__dirname}/out`,
       filename: "index.js"
     },
     module: {
      rules: [
         {
           test: /\.tsx?$/,
           use: "ts-loader"
         }
       ]
     },
     resolve: {
       extensions: [".ts", ".tsx", ".js", ".json"]
     },
   };	

Sassのトランスパイルにも使用できる

WebPackはバンドラーのため、Sassのトランスパイルにも利用できます。以下のモジュールをnpmからインストールし、適切にwebpack.config.jsを設定することでトランスパイルが可能になります。

• css-loader
• sass-loader
• sass
• MiniCssExtractPlugin

あると便利な周辺技術

JavaScriptを書くために覚えておくと便利な周辺技術を紹介します。

Eslint

Eslintは、JavaScriptの文法検証ツールです。JavaScriptのソースコードを実行する前に、構文エラーを確認することができます。

非常に高い自由度を持っていることが特徴です。さらにReactを記述するためのJSX記法をサポートしています。Reactの開発効率を上げるために活用したいツールとなります。

使い方

EslintはNode.jsのパッケージとして配布されているため、npmコマンドからインストールします。以下のコマンドを実行します。（説明を簡単にするために -g オプションをつけてグローバルインストールをしています）

   npm install -g eslint	

インストールできたかどうかを確認します。以下のコマンドを実行し、バージョン番号が表示されれば成功です。

   eslint -v	

次に、eslintの設定ファイルである「.eslintrc.json」を用意します。プロジェクトフォルダーの直下に用意します。

ファイル名の先頭にピリオドが必要なことに注意しましょう。.eslintrc.jsonでは非常にさまざまな設定が可能です。

「ESLin」のサイトにある「ESLint 入門」のページを参考に自分のための設定ファイルを構築します。.eslintrc.jsonが用意出来たら、Eslintを実行します。プロジェクトフォルダーでターミナルを開き、以下のコマンドを実行します。

   eslint ***.js	

「***.js」の部分には、文法を検証したいJavaScriptのファイル名を指定します。または、文法を検証したいJavaScriptファイルが入ったフォルダー名を指定します。フォルダーを指定した場合にはフォルダー内のすべてのファイルが検証されます。

まとめ

この記事ではReactの開発環境を簡単に構築できる方法である Create React App について紹介しました。Create React Appを使用しない方法についても紹介しましたが、やはり手間がかかり複雑です。

簡単で便利なCreate React Appで、React開発について気軽にチャレンジしてみてはいかがでしょうか。フレームワークを扱えるフリーランスITエンジニアは、フリーランスとしても多くの案件を獲得し、活躍できるでしょう。

フリーランスITエンジニア専門エージェント「HiPro Tech」では、高単価・長期契約ができる案件を豊富に扱っており、実際多くのITエンジニアが活躍中です。

当サービスでフリーランスITエンジニアとしての一歩を踏み出してみませんか。登録は無料なため、ぜひ、登録してみてください。