React サイトをできるだけ高速でアクセスしやすいものにしたいですか？お問い合わせいただきありがとうございます。
React は、UI の構築を容易にするオープンソース ライブラリです。この学習パスでは、アプリケーションのパフォーマンスとユーザビリティを向上させるために使用を検討すべき、エコシステム内のさまざまな API とツールについて説明します。
このガイドでは、React アプリケーションを使い始める方法について説明します。このセクションの他のガイドでは、React アプリの速度やユーザー補助を最適化するトピックについて説明します。
なぜこれが有用なのでしょうか。
高速で信頼性の高いアプリケーションを構築する方法に関するコンテンツはたくさんありますが、高速で信頼性の高い React アプリケーションを構築する方法に関するコンテンツは多くありません。これらのガイドでは、React アプリの視点から、React エコシステムに固有のライブラリ、API、機能のみについて説明します。
学習内容
この学習プログラムのチュートリアルでは、以下の内容は取り上げません。
- React の使用方法
- React の仕組み
これらのコンセプトの両方については、必要に応じて説明しますが、このセクションのガイドと Codelab では、高速でアクセスしやすい React サイトを作成する方法に重点を置いています。そのため、React の基本的な知識が必要です。
Create React App
Create React App（CRA）は、React アプリケーションの開発を開始する最も簡単な方法です。モジュール バンドルツール（webpack）とトランスパイラ（Babel）を含むビルドシステムなど、多くのコア機能が組み込まれたデフォルトの設定が用意されています。
コマンドライン シェルで、新しいアプリケーションを作成するには、次のコマンドを実行するだけです。
npx create-react-app app-name
コマンドの実行が完了したら、次のコマンドを使用してアプリケーションに移動して実行できます。
cd new-app
npm start
次の埋め込みは、新しくブートストラップされた CRA アプリケーションのディレクトリ構造と実際のウェブページを示しています。
CRA は、テスト用の基本的な Jest 設定を含む webpack と Babel のビルドプロセスを設定するために、複数の構成ファイルとビルドスクリプトを使用します。ユーザーにとって操作が簡単になるように、これらのファイルは非表示になっており、CRA から取り出すまでアクセスできません。取り外しは、これらの構成ファイルをすべて独自のソースコードとして扱うことになるため、可能な限り避けるのが最善です。管理が難しくなる可能性があります。
新しい CRA アプリケーションのディレクトリ構造には、アプリケーションの作業に実際に変更が必要なファイルのみが含まれています。詳しくは、CRA のドキュメントをご覧ください。
次のステップ
Create React App の作成を開始する方法がわかりましたので、このラーニング パスのすべてのガイドで、アプリのパフォーマンスとアクセシビリティを改善する方法を学びましょう。