スタートガイド: React アプリを最適化する

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 の作成を開始する方法がわかりましたので、このラーニング パスのすべてのガイドで、アプリのパフォーマンスとアクセシビリティを改善する方法を学びましょう。