React初心者にオススメの、最新ボイラープレート11選

Reactでボイラープレート（boilerplate）を使うとき、なにを基準に選べば良いでしょうか？
GitHubのスターの数が多いものから選ぶこともあれば、シンプルなものを選ぶこともあるでしょう。

ボイラープレートとは、JavaScriptのフレームワーク「React」で使用するコンポーネントファイル群です。言い換えるとテンプレートのようなものです。スターターキット、コンポーネントライブラリーと呼ばれることもあります。

これらはとても便利なものですが、初心者が利用するのには少し難しい作業も多いです。なぜなら、パッケージ管理にnpmやyarn、JSX/ES6をコンパイルするトランスコンパイラにBabel、ビルドにはBrowserifyやwebpackを使用しています。

例にあげたものが必ずしも使われるとは限りませんが、これらの知識が必要となります。そのため、事前の学習が必要であることが多いのが難点です。

今回は、初心者でも使いやすいものを含めていくつかのボイラープレートをまとめてみました。

おすすめのReactボイラープレート

数あるReactボイラープレートの中から、11つをピックアップしました。

1. React Starter Kit（リアクトスターターキット）

React Starter Kit

React Starter Kitは、フロントエンドで求められる要件を多く抑えています。
SPAでは初回表示の遅さが弱点ですが、Webpackを使用してコードを分割することでReact Starter Kitは初回表示のパフォーマンスを向上させています。

さらに、Node.js、Universal Routerを組み合わせてRSKを実現することが可能です。そのため、サーバーとブラウザが共通のルーティングルールを基準として、差異のみ異なった仕組みを使用します。これにより、さらなるパフォーマンスの向上が期待できます。

ユーザーが、コードを分割して表示したページを観覧している間に、JavaScriptの読み込みを開始させます。これは操作性と初期表示のスピードの問題を解決します。

Webpackのバンドル機能によってUIのコンポーネント単位でCSSを書くことも可能で、CSSの破綻を防ぎます。

2. React Boilerplate（リアクトボイラープレート）

React Boilerplate

React Boilerplateでは、ReactとReduxを使用して、コンテナ、コンポーネント、ルート、セレクタ、サガが利用可能です。CLIからテストを行うこともできます。

ファイルの変更は時系列で記録しており、確認とデバックを行うことが可能です。CSSとJavaScriptの変更も自動で反映して表示します。CSSはモジュールとして共通と差分の管理を行い、衝突を避けるためにカプセル化されます。JSX構文、テンプレート文字列、オブジェクト構造化解除も簡単に行なえます。

18カ国語のサポートに加えて、オフラインファーストで設計されています。ほかには、ルーティングでindex以外のページ追加、JavaScriptコンテンツをインデックスするSEOも対応しています。

3. React Slingshot（リアクトスリングショット）

React Slingshot

React Slingshotは、初心者向けのコンパクトなボイラープレートです。

ターミナルやコマンドで npm と入力すると、ブラウザが起動し開発を始めることができます。ファイルを変更して保存するたびに、システムがリロードを行いコードに問題はないかチェックします。自動でリロードを行ったフィードバックはターミナルやコマンドにログとして残り。さかのぼって確認することができます。

サンプルのアプリケーションが含まれているので、どのように連帯して動いているのか確認することができます。 npm コマンドのみで使用できるので、初心者でも比較的に使いやすいボイラープレートです。

4. React Static Boilerplate（リアクトスタティックボイラープレート）

React Static Boilerplate

React Static Boilerplateは、サーバレスでの起動が可能です。CDNストレージベースのGitHub、Amazon S3、Firebaseなどから直接ホストできます。

RSBを使用して作成したすべてのページで、REST API、Azure関数、Amazon Lambada、DigitalOceanのDockerエンドポイントなどへのGraphQL呼び出しができます。React Static Boilerplatでは、Material UIも使用されています。

5. NWB

NWB

NWBでは、React、Prereact、Inferno、JavaScriptを使用しています。
主にWeb用のReactアプリやライブラリ、npmモジュールを生成するために使われています。

React公式で推奨のスターターキットとして紹介されており、依存する環境を自動的にインストールする機能が用意されています。Bootstrapの使用も可能です。公式ドキュメントの情報量が豊富で、わかりやすく説明がまとまっています。

6. React Bootstrap（リアクトブートストラップ）

React Bootstrap
React Bootstrapは、Bootstrapが使いたい人には人気なボイラープレートです。
Bootstrapのコンポーネントを、JSXで使用できるように作られています。

現在はBootstrap v4へのサポートを行っている最中で、Bootstrap v4を使用したい場合はReactStrapというボイラープレートもあります。使い方は簡単ですが、React Bootstrapほどコンポーネントの数が多くありません。

7. Razzle（ラズル）

Razzle

Razzleは、Reactの公式で推奨されているボイラープレートのひとつです。
設定不要でサーバレンダリングされたJavaScriptアプリケーションを作成します。

非常に簡単に使用することができて、公式ドキュメントに使い方がしっかりまとめられています。npmとyarnのどちらにも対応しています。

8. Create React App（クリエイトリアクトアップ）

Create React App

Create React Appでは、BabelとWebpackのインストールが必要ありません。
npm start で、webpack-dev-serverが起動しブラウザが立ち上がります。ファイルを編集して保存する度にブラウザがリロードされ、変更を反映します。ほかにも、Autoprefixerに対応しています。

簡単に使用することができて、公式ドキュメントがしっかりと明記されています。React公式でも推奨され続けている人気のボイラープレートです。

9. StarHackIt

StarHackIt

StarHackItは、認証や権限、リレーショナルSQLデータベースを備えたフルスタックなボイラープレートです。
フロントサイドとサーバーサイドで、どのような技術を使用しているのかのような詳細は紹介ページで詳しく明記されています。

10. Universal Relay Boilerplate（ユニバーサルリアリーボイラープレート）

Universal Relay Boilerplate

Universal Relay Boilerplateは、まだあまり知られていないボイラープレートですがUniversal Relay Boilerplateを使用した開発では、Webとネイテイブアプリ（iOS、Android）が同じコードで利用可能です。

パフォーマンスのサポート以外にも、サーバーサイドの処理やセキュリティのサポートも備えており、Node.jsとCassandraをサーバーサイドで使用しています。

11. Next.js（ネクスト.js）

Next.js

Next.jsは、静的なエクスポートやサーバーレンダリングされたボイラープレートです。Next.js全体を学べるようにと書かれたREADMEや、Learning Next.jsがとても参考になります。

Webpackなしで自動的にコードを分割、ルーティング、自動リロード、サーバークライアント側で統合したレンダリングが可能です。ビルドに必要な設定は必要なくなり、今まで必要だった面倒な設定が簡単なりました。Reactの公式でも推奨されている人気のボイラープレートです。

まとめ

フロントエンド開発ではブラウザの仕様を補うために、求められるニーズや対応すべき環境に合わせて周辺技術は複雑化し、使用するツールや技術も増えてきました。

今回ご紹介した、ReactはネイテイブアプリとWebアプリケーションを同じコードで管理できるようになったりと開発コストを押さえることができます。ボイラープレートは、Reactをさらに効率的に有効活用するために生まれたものです。

開発の要件などに合わせて、適したものを使ってみてください。

（翻訳：Yuri Tanaka）