Create React Appを使用したReactプロジェクトのセットアップ

React は、フロントエンドアプリを開発するための最も人気のあるJavaScriptライブラリの1つです。元々はFacebookによって開発されたオープンソースのライブラリです。Reactは、JSX – JavaScriptとHTMLのような構文を組み合わせたプログラミングパラダイムを使用して、高速なアプリケーションを作成できることで急速に人気を集めました。

以前は、Reactプロジェクトのセットアップは複雑なプロセスでした。以下のコンポーネントを手動で設定する必要がありました。

• ビルドシステム
• コードトランスパイラ（最新の構文をブラウザが読み取り可能なコードに変換するもの）
• プロジェクトのベースディレクトリ構造

ありがたいことに、Create React App のおかげで、そのような日々は過去のものとなりました。これは、これらすべてのステップを自動化する素晴らしいツールです。Create React Appは、コードのトランスパイル、リンティング、テスト、およびビルドシステムを処理します。さらに、ホットリロードをサポートするサーバーが付属しているため、変更が加えられるとWebページが更新されます。もちろん、これらすべては整理されたディレクトリ構造内で行われます。

要するに、Webpack のようなビルドシステムや、Babel のようなトランスパイラを手動で設定する手間に煩わされる必要はありません。心配事が減ることで、フロントエンド開発に完全に集中できます。Create React Appを使用すると、最小限の準備でReactを開始できます。

このガイドでは、Create React Appを使用して基本的なReactアプリケーションを起動し、実行する方法を紹介します。これは、将来のあらゆるアプリケーションプロジェクトの基盤として機能します。.

前提条件

このチュートリアルで説明する手順を実行するには、事前に以下のソフトウェアを設定しておく必要があります。

• • 適切に設定された Ubuntu サーバー。次の手順に従うことができます：CloudSigmaでのUbuntuサーバーの設定.
  • 最新バージョンの Node.js がインストールされていること。以下は、UbuntuへのNode.jsのインストール.

ステップ 1: 専用のnpmプロジェクトディレクトリの作成

Node.jsパッケージの場合、npm がデフォルトのパッケージマネージャーです。ここでは npm を使用して専用のプロジェクトディレクトリを作成します。ここには、プロジェクトに関するすべてのメタデータや追加のNode.js依存関係モジュールを保存する package.json などの重要なファイルが格納されます。JSONは、JavaScriptオブジェクトに基づくデータ共有の標準フォーマットです。JSONについて詳しく知りたい場合は、this guide を参照してください。

まず、専用のディレクトリを作成します。

次に、 npm に対し、ファイル内で開発環境を初期化するよう指示します。これにより、プロジェクトに必要な package.json ファイルが作成されます。現在のディレクトリを変更します。

次の npm init コマンドを実行します：

なお、このディレクトリをgitリポジトリの一部にしたい場合は、最初に設定しておくことをお勧めします。初期化スクリプトが自動的にそれを検出し、それに応じてすべてを設定します。完了すると、ディレクトリ内に package.json ファイルが存在するはずです。テキストエディタで確認してみましょう：

ステップ 2: Create React Appを使用したReactプロジェクトの作成

このステップでは、Create React Appを呼び出してサンプルReactプロジェクトを構築します。このスクリプトは、必要なすべてのものをすべての依存関係とともに新しいディレクトリにコピーします。 npm パッケージマネージャーには、 npx というツールも付属しています。これは実行可能なパッケージを実行するために使用されます。これを使用して、プロジェクトを実際にダウンロードすることなくCreate React Appスクリプトを実行します。

実行すると、指定されたディレクトリで create-react-app が実行されます。また、依存関係をインストールするために npm install コマンドも実行されます。使いやすさを考慮して、ここでは cloudsigma-react-react-tutorial という名前を使用します。次のコマンドを実行してください：

プロセスの最後に、次の通知が表示されます。インストールが正常に完了した場合の成功メッセージです。また、プロジェクトが作成された場所も報告されます。

ステップ 3: React-Scriptsの適用

それでは、様々な react-scripts（インストール中にインストールされたもの）について簡単に説明します。

• • まずは、 test スクリプトを実行して、テストコードを実行します。
  • The build スクリプトは、プロジェクトの縮小版（本番環境用）を作成します。
  • 最後に、 eject スクリプトは、カスタマイズを完全にコントロールできるようにします。

まず、Reactプロジェクトディレクトリの内容を確認します：

各ファイルの説明は以下の通りです：

• • node_modules/：このディレクトリには、アプリで使用されるすべての外部JavaScriptライブラリが含まれています。ここをいじる必要はほとんどありません。
  • public/：ベースとなるHTML、JSON、画像ファイルが格納されています。プロジェクトのルートとして機能します。
  • src/：このディレクトリには、プロジェクトのReact JavaScriptコードが含まれています。ほとんどの時間をここで過ごすることになります。このディレクトリについては、ガイドの次のパートで詳しく説明します。
  • .gitignore：gitが無視するディレクトリ（例えば、 node_modules ディレクトリなど）を指定するファイルです。一般的に、大容量ファイルを含むディレクトリや、バージョン管理に含める必要のないログファイルをホストするディレクトリは除外するのが望ましいです。この場合、React固有のディレクトリもいくつか含まれます。
  • README.md：Create React Appに関する多くの有用な情報が含まれているマークダウンファイルです。例えば、コマンドの概要や高度な設定へのリンクが含まれています。今のところ、これを使用することはありません。ただし、プロジェクトが進行するにつれて、プロジェクトに関するドキュメントをさらに追加していくことになります。

ファイル package.json および package-lock.json は npm によって使用されます。最初の npx コマンドを実行したときに、ベースプロジェクトが作成されました。追加の依存関係がインストールされたときに、 package-lock.json. npm は package-lock.json を使用して、パッケージが正確なバージョンと一致することを確認します。これにより、他の誰かがプロジェクトをインストールした場合でも、まったく同じ依存関係を取得できます。自動的に作成および管理されるため、手動で変更する必要はほとんどありません。

最後に説明するファイルは package.json です。これにはプロジェクトに関するメタデータが含まれています。例えば、メタデータにはプロジェクトのタイトル、バージョン番号、依存関係などが含まれます。また、プロジェクトの実行に使用できるスクリプトも含まれています。 package.json ファイルの内容を確認してみましょう：

これは、さまざまなオブジェクトを含むJSONファイルです。scriptsオブジェクトを見てみましょう。ここには4つの異なるスクリプトが含まれています：

• • start
  • build
  • test
  • eject

これらのスクリプトは重要度順に並んでいます。 start スクリプトはローカル開発サーバーを起動します。次に、残りのスクリプトの使用方法について詳しく説明します。

• • Buildスクリプト

For running an npm スクリプトを実行するためのコマンド構造は次のとおりです：

To run the build スクリプトを実行するには、次のコマンドを使用します：

コードを使用可能なバンドルにコンパイルするプロセスが開始されます。完了したら、出力ディレクトリを確認してください：

新しいディレクトリ build/ が作成されていることに注目してください。これには、他のファイルの縮小および最適化されたバージョンが含まれています。これはいつでも .gitignore ファイルに追加することをお勧めします。なぜなら、いつでも build スクリプトを使用して生成できるからです。

• • Testスクリプト

The test スクリプトは、 npm で実行する際に run パラメータを必要としないスクリプトの1つです。ただし、run を付けても問題なく動作します。実行すると、このスクリプトは Jest というテストランナーを起動します。テスターは、ファイル拡張子が .spec.js または test.js であるプロジェクトファイルを検索し、それらのファイルを実行します。

次の npm コマンドは test スクリプトを実行します：

出力にはいくつかの注意点があります。テストランナーは特定の拡張子を持つファイルのみを検索することを覚えていますか？この場合、テストスイートは1つだけ（ .test.js 拡張子）。これには単一のテストのみが含まれています。Jestはコード階層内のテストを自動検出できるため、ディレクトリ内にテストを自由にネストできます。

さらに、Jestはテストを一度実行して終了するだけではありません。ターミナルでテストを実行し続けます。ソースコードに変更が加えられた場合、テストを再実行します。Jestでは、実行するテストを制限することもできます。たとえば、0を押すことで、変更されたファイルのみをテストするようにJestに指示できます。テストスイートが大きくなるにつれて、このオプションは多くの時間を節約します。Jestテストランナーを終了するには、次を押します q.

• • Ejectスクリプト

この eject スクリプトは、すべての依存関係と設定ファイルをプロジェクトにコピーし、コードを完全に制御できるようにします。ただし、そうすることで、プロジェクトはCreate React Appの統合ツールチェーンから削除されます。一度実行すると、元に戻す方法はありません。

Create React Appのメリットは、数多くの設定の負担を軽減してくれることです。最新のJavaScriptアプリケーションを構築するには、連携して動作する多くのツールが必要です。Create React Appはすべての設定を自動で処理するため、プロジェクトをejectするということは、その後はすべて手動で行う必要があることを意味します。

Create React Appの顕著なデメリットは、すべての設定を自身で管理するため、プロジェクトの完全なカスタマイズが提供されないことです。ほとんどのプロジェクトでは、それは問題になりません。しかし、プロジェクトを完全に制御したい場合は、コードをejectする必要があります。一度ejectすると、Create React Appの新しいバージョンにアップデートできなくなります。すべての機能強化を手動で管理する必要があります。

ステップ 4: サーバーの起動

次に、ローカルサーバーを起動し、ウェブブラウザでプロジェクトを実行します。サーバーを起動するために、別のスクリプトが用意されています。これを実行するのに、 npm run コマンドは必要ありません。実行すると、スクリプトはローカルサーバーを起動し、プロジェクトコードを実行し、ウォッチャーを起動して、コードの変更を監視します。変更はブラウザに直接表示されます。次のコマンドでサーバーが起動します：

出力には、ブラウザでプロジェクトにアクセスするためのURLが表示されます。また、実行中のプロジェクトに関するさまざまな情報も表示されます。ブラウザでURLを開きます：

出力が示すように、Create React Appはポート 3000 を使用してプロジェクトを提供します。ポートがすでに使用されている場合、Create React Appは次に利用可能なポートを使用します。ファイアウォールを設定している場合は、ポート 3000 （or the port Create React App reports）。詳細については、managing the UFW firewall here.

サーバーを終了するには、次を押します Ctrl+C をターミナルウィンドウから入力します。これにより、実行中のプロセス（サーバーインスタンス）が終了します。

ステップ 5: ホームページの変更

次に、 public/ ディレクトリに保存されているコードを変更する方法を学びます。これにはベースとなるHTMLページが含まれており、プロジェクトのルートとして機能します。将来的にこれ以上編集する必要はないかもしれませんが、プロジェクトのベースとして機能します。

まず、 npm でサーバーを起動し、次に public/ ディレクトリに移動します：

ディレクトリには、次のようなファイルが含まれます favicon.ico, logo192.png, logo512.png など。これらは、ウェブページを訪れたユーザーがタブ、ブラウザ、またはスマートフォンで目にするアイコンです。ブラウザは自動的に適切なサイズのものを選択します。最終的には、プロジェクトに適したアイコンに置き換えることになります。今のところは、そのままにしておきます。

ファイル manifest.json は、構造化された metadata のセットを保持しています。プロジェクトの説明や、利用可能なアイコンのリストなどが含まれています。

ファイル robots.txt は、web crawlers 用の情報を保持しています。ウェブクローラーはワールドワイドウェブを“クロール”し、検索エンジン用にページをインデックスします。特定の理由がない限り、このファイルを調整する必要はありません。たとえば、特定のコンテンツへの特定のURLを簡単にアクセスできないようにしたい場合があります。その場所を robots.txt に追加すると、検索エンジンによってインデックスされなくなります。

ファイル index.htmlはアプリケーションのルートです。アプリにアクセスすると、常にこのファイルが提供されます。これはディスプレイに表示されるファイルです。簡単に見てみましょう。テキストエディタで開きます：

かなり短いファイルです。以下の中には画像や文字がないことに注意してください。 <body>。Reactは独自のエンジンを使用してそれらのコンテンツを構築し、JavaScriptを使用して注入します。ただし、Reactはコードをどこに注入するかを知る必要があります。ファイル index.htmlがその役割を果たします。

の<title>を にMy React App:

変更します。その後、ファイルを保存してエディタを閉じます。次に、ブラウザでウェブページを確認します：

ご覧の通り、タブのタイトルが に変更されました。My React App。自動的に変更されなかった場合は、 を押してページを再読み込みしてください。F5または Ctrl+R.

テキストエディタに戻りましょう。すべてのReactプロジェクトはルート要素から開始する必要があります。1つのページに複数存在することも可能ですが、少なくとも1つは必須です。これにより、生成されたすべてのHTMLコードをどこに配置するかをReactに伝えます。私たちの index.html内で、要素 の場所を見つけてください。<div id="root">。これは、Reactが今後の変更に使用する <div>です。 の値をidからrootに 変更してみてください。base:

 

 

その後、ブラウザでページを再読み込みします。コンテンツは表示されません。FirefoxのWeb Developer Toolsが示すように、エラーが発生します：

テキストエディタに戻り、 の値をidに 戻します。root:

ステップ 6: 見出しタグとスタイルの変更

これまでに、ローカルサーバーを起動し、ルートHTMLファイルに小さな変更を加えました。次は、 src/ディレクトリにあるReactコンポーネントを操作します。CSSとJavaScriptのコードに変更を加えます。変更はホットリロードを使用して自動的に適用されます。

サーバーが停止している場合は、 を使用して起動してください。npm。その後、 src/ディレクトリの内容を確認します：

ここには複数のJavaScriptファイルとCSSファイルがあります。それらを1つずつ見ていきましょう。

• ServiceWorker.js

プログレッシブウェブアプリケーション（PWA）を作成したい場合に重要なファイルです。このサービスワーカーは、プッシュ通知やオフラインキャッシュなどのさまざまな機能を提供します。今のところは、そのままにしておきます。

• SetupTests.js and App.test.js

これらのファイルの名前が示すように、これらはファイルのテストに使用されます。 testスクリプトを npmを使用して実行すると、これらのファイルが実行されました。ファイル setupTests.jsには、いくつかのカスタム expectメソッドが含まれています。

を見てみましょう。App.test.js。テキストエディタで開きます：

これには、ドキュメント内にフレーズ learn reactが存在するかどうかを確認する基本的なテストが含まれています。ブラウザのタブを開いている場合は、ページ上にそのフレーズが表示されているのを確認できます。他のユニットテストとは異なり、Reactのテストは異なります。コンポーネントにはマークアップのような視覚情報（およびデータ操作のロジック）が含まれる場合があるため、従来のユニットテストは簡単には機能しません。その点において、Reactのテストは機能テストまたは統合テストの一種として説明する方が適切です。

• CSSファイル

利用可能ないくつかのスタイリングファイルがあります： App.css, index.css、および logo.svg。Reactでスタイルを適用するには、複数の方法に従うことができます。追加の設定が必要ないため、最も簡単な方法はプレーンなCSSを書くことです。

コンポーネントにCSSを直接インポートすることができます。これにより、CSSファイルを分割して個々のコンポーネントにのみ適用させることができます。実際にはCSSをJavaScriptから分離しているわけではありません。むしろ、関連するすべてのコンポーネント（CSS、JavaScript、画像、マークアップ）をまとめてグループ化しています。

をApp.cssテキストエディタで開きます：

これは、特別なCSSプリプロセッサを使用しない標準的なCSSファイルです。必要に応じて後で追加できます。Create React Appは、優れた初期設定のエクスペリエンスを提供しつつ、中立であることを目指しています。

変更を加えて、実際に動作を確認してみましょう。次の値を変更します： background-color を以下に変更します： blue:

ブラウザで変更を確認します：

• • Index.js

それでは、ReactのJavaScriptコードを変更してみましょう。テキストエディタを使用して、 index.js を開きます：

上部では、以下をインポートしています： React, ReactDOM, index.css, App、および serviceWorker。 Reactをインポートすることで、JSXをJavaScriptに変換するために必要なコードを取り込んでいます。 ReactDOM は、Reactコードをベース要素（例えば index.htmlなど）に接続するコードです。次の行を見てみましょう：

これはReactに対し、 idが「root」である要素を見つけ、そこにReactコードを挿入するように指示しています。 <App/> はルート要素であり、すべての要素はここから分岐します。

CSSファイル（ index.cssなど）もインポートしていますが、実際にはそれに対して何も行っていません。インポートすることで、実際にはReactスクリプトを介してWebpackに対し、最終的にコンパイルされるバンドルにCSSコードを含めるよう指示しています。そうしないと、CSSスタイルが表示されません。

• App.js

次に、 App.jsを見てみましょう。テキストエディタで開きます：

 

内容を変更することでプロジェクトにどのような影響があるか見てみましょう。次の <p>タグの内容を変更します：

その後、ファイルを保存し、ブラウザで変更を確認します：

お見事！初めてのReactコンポーネントの調整が完了しました！

もう一つ注目すべき点があります。次の要素を見てください： <img>:

Notice that the logo が波括弧の中に渡されていることに注目してください。属性（文字列や数値ではないもの）を渡すときは、常に波括弧の中に渡す必要があります。これにより、Reactはそれらを文字列ではなくJavaScriptオブジェクトとして扱います。

この場合、アプリは実際に画像をインポートしているわけではありません。代わりに、画像への参照となっています。Webpackがプロジェクトをビルドするときに、画像を適切な位置に配置します。ブラウザでこれを確認できます。FirefoxでWeb Developer Toolsを開きます：

Webpackはすべての画像に一意のファイルパスを割り当てようとします。そのため、画像が同じ名前でインポートされたとしても、異なるパスを持つことになります。

ステップ 7：プロジェクトのビルド

このステップでは、プロジェクトをデプロイ可能なパッケージにコンパイルする方法を学びます。ターミナルを起動し、プロジェクトの build スクリプトを実行します：

コンパイラは、出力先となる専用のディレクトリ build/を作成します。コンパイルプロセスが何を行うかを確認するために、 index.htmlファイルを、 build/ディレクトリから開いてみましょう：

ご覧の通り、すべてのコードはコンパイルされ、使用可能な最小の状態に縮小（ミニファイ）されています。これは一般に公開されるコードではないため、可読性は問題になりません。縮小されたコードは、すべての機能を維持しながら、占有スペースを削減します。空白が非常に重要である言語（Pythonなど）とは異なり、ウェブ言語（HTML、CSS、JavaScript）は、ブラウザが解釈するために適切なスペースを必要としません。

最後に

このガイドでは、Reactアプリケーションを作成する方法を実演しました。また、複雑な技術的詳細を省き、JavaScriptビルドツールを使用した基本的な設定も紹介しました。これこそが、Create React Appが提供する重要な価値です。Reactを始めるために、すべてを知る必要はありません。複雑なビルド手順を学ぶことなく、Reactコードだけに集中することができます。

ここでは、Reactプロジェクトの起動、テスト、ビルドの方法も実演しました。これらのコマンドは、あらゆる規模のプロジェクトにおいて極めて重要です。

ハッピー・コンピューティング！