【React】構築したReactアプリをビルドする【create-react-app】

本記事の目次

ビルドとは

ビルド（Build）とは、プログラムやアプリケーションを実行可能な形式に変換する作業のことを指します。

Reactで開発したWebアプリケーションをブラウザで実行する場合、ReactのコンポーネントをJavaScriptに変換し、HTMLやCSSと組み合わせたブラウザ上で実行可能なファイルを生成する必要があります。

ビルドには、コンパイル（Compile）、リンク（Link）、パッケージング（Package）などのプロセスが含まれ、ソースコードの構文チェックや最適化、依存関係の解決などが行われます。

create-react-appで構築したReactアプリをビルドする方法について、順番に解説します。

まずは、create-react-appを使ってReactアプリを構築します。

Reactアプリの開発環境は、以下のコマンドで構築することができます。

npm create-react-app {ディレクトリ名}

開発環境の構築に成功したら、実際にコーディングを行いReactアプリの構築を行いましょう。

Reactアプリが構築できたら、以下のコマンドでビルドを行います。

npm run build

しばらくすると「build」という名前のフォルダが作成されます。

buildフォルダの中には、ビルドされたJavaScriptファイルやCSSファイル、画像などがあるはずです。

ビルドされたファイル類は、ブラウザで表示するとJavaScriptプログラムとして動かすことができます。

このように、create-react-appで構築したReactアプリの基本的なビルドは、コマンド一つで簡単に行うことができます。

create-react-appで構築したReactアプリのビルドを行う際、いくつかのオプションを設定することができます。

watchオプションを使うことで、ファイルの変更を感知して自動的に再ビルドを行うことができます。

npm run build --watch

ファイルに変更があるたびに自動的に再ビルドをしてくれるようになるので、開発効率を向上させることができます。

ただし、常に監視を行うことでCPUやメモリへの負荷が高くなってしまうこともあるため、必要のない時にはwatchオプションを使用しない方が懸命でしょう。

prodオプションを使うことで、本番環境向けのビルドを行うことができます。

npm run build --prod

prodオプションでは、コードを最適化してファイルサイズを小さくしてくれるため、パフォーマンスが向上します。

また、ソースマップを生成しないため、セキュリティの観点からも安全になります。

analyzeオプションを使うことで、ビルドされたJavaScriptファイルのサイズや依存関係を視覚的に確認することができます。

npm run build --analyze

ビルドの最適化に役に立ち、ビルドファイルのサイズが大きい場合には、バンドル解析ツールを使って不要なコードや依存関係を特定し、削除することができます。

create-react-appで構築したReactアプリのビルドは、コマンド一つで簡単に行うことができます。

npm run build

ビルドを行う際に便利なオプションについてもご紹介しました。

//　ファイルの変更を監視し、自動的な再ビルドを行う
npm run build --watch

// 本番環境向けのビルドを行う
npm run build --prod

// ビルドに関するの解析・最適化を行う
npm run build --analyze