新しい React アプリを作る

もっとも良いユーザ・開発体験を得るために統合されたツールチェインを使いましょう。

このページではいくつかの人気のある React ツールチェインを説明します。これは次のようなタスクに役立ちます：

• 大量のファイルとコンポーネントでスケールする
• npm を通してサードパーティライブラリを利用する
• よくある間違いを早期に発見する
• 開発環境で CSS と JS をライブ編集する
• 本番用の出力を最適化する

このページで推奨されているツールチェインは始めるにあたって設定が不要です。

ツールチェインが必要ない場合

あなたが上記のような問題を経験していなかったり、まだ JavaScript のツールを利用するのに慣れていない場合、HTML ページに簡単な <script> タグで React を追加することを検討してください（JSX の利用も検討してみてください）。

これは既存のウェブサイトに React を統合する最も簡単な方法でもあります。あなたが役立つと思えばいつでもより大きなツールチェインを追加できます。

推奨するツールチェイン

React チームは主に以下のソリューションを推奨します：

• React を学習中か、新しいシングルページアプリケーションを作成したい場合、Create React App を利用してください
• Node.js でサーバサイドでレンダーされたウェブサイトを構築するなら、Next.js を試してください
• 静的なコンテンツ中心のウェブサイトを構築するなら、Gatsby を試してください
• コンポーネントライブラリの構築や既存のコードベースへの統合をするなら、その他の柔軟なツールチェインを試してください

Create React App

Create React App は React を学習するのに快適な環境であり、React で新しいシングルページアプリケーションを作成するのに最も良い方法です。

開発環境をセットアップして最新の JavaScript の機能を使えるようにし、快適な開発体験を提供し、そして本番環境用の最適化を行います。あなたのマシンに Node >= 14.0.0 及び npm >= 5.6 の環境が必要です。プロジェクトを作成するには次を実行します：

npx create-react-app my-app
cd my-app
npm start

補足

最初の行の npx は打ち間違いではありません — これは npm 5.2 から利用できるパッケージランナーツールです。

Create React App はバックエンドのロジックやデータベース接続は扱いません。フロントエンドのビルドパイプラインを構築するだけであり、バックエンドに関しては好きなものを組み合わせて使って構いません。内部では Babel と webpack を利用していますが、それらについて知る必要はありません。

本番環境にデプロイする準備ができたら、npm run build を実行すれば、build フォルダ内に最適化されたアプリケーションのビルドが生成されます。Create React App の詳細については、該当ツールの README および ユーザガイド を参照してください。

Next.js

Next.js は React を使って静的なサイトやサーバサイドでレンダーされるアプリケーションを構築する場合に人気のある軽量フレームワークです。すぐに使えるスタイルおよびルーティングのソリューションを含み、サーバ環境として Node.js を利用することを想定しています。

Next.js のオフィシャルガイドを参照してください。

Gatsby

Gatsby は React で静的なウェブサイトを作成するのに最も良い方法です。React コンポーネントを使用しながらも、事前レンダーされた HTML と CSS を出力することで最速のロード時間を保証します。

Gatsby のオフィシャルガイド および スターターキットのギャラリーを参照してください。

その他の柔軟なツールチェイン

以下のツールチェインはより大きな柔軟性や選択肢を提供します。経験豊富なユーザにこれらを推奨します。

• Neutrino は webpack のパワーとプリセットのシンプルさを兼ね備えています。プリセットには React アプリ と React コンポーネント用のものがあります。
• Nx はフルスタックの monorepo 開発用ツールキットであり、React、Next.js、Express などのビルトインサポートを有しています。
• Parcel は高速な、ゼロ設定のウェブアプリケーションバンドラであり、React と共に利用できます。
• Razzle は設定不要のサーバレンダリングフレームワークでありながら、Next.js よりも柔軟性があります。

ゼロからツールチェインを作成する

JavaScript ビルドツールチェインは一般的に次から成ります：

• パッケージマネジャ。Yarn や npm など。サードパーティのパッケージの広大なエコシステムを利用でき、それらを簡単にインストールしたりアップデートしたりできます。
• バンドラ。webpack や Parcel など。モジュール化されたコードを書けるようになり、それを小さなパッケージにまとめてバンドルしてロード時間の最適化を行います。
• コンパイラ。Babel など。未だ動作している古いブラウザでもモダンな JavaScript コードを書いて動作させることができます。

ゼロから独自の JavaScript ツールチェインを設定したい場合、こちらのガイドをチェックすると Create React App の機能の一部を再現できます。

カスタムしたツールチェインは忘れずに本番環境用に正しく設定してください。