このページの本文へ

大規模でスケールするReactアプリケーション開発のための実践的アドバイス

2017年06月23日 15時00分更新

記事提供:WPJ

  • この記事をはてなブックマークに追加
本文印刷

Reactの大きな特徴の1つは、ファイルを自由に構造できることです。自由ゆえ、パッと見て理解できる構造にならないこともあります。そのためStackOverflawや類似サイトでは、どんなファイルの構造にするか数多くの質問が寄せられています。ファイルの構造は主観的で、正しい答えがありません。本記事ではReactアプリを作成するとき、私が考えるツール選び、ファイル構造、コンポーネントの分解方法を解説します。

ビルドツールとエラー回避

アプリのビルドにWebpackを使ったことがあれば、私がWebpackの大ファンというのもうなずけるでしょう。Webpackは複雑なツールですが、バージョン2の優れた機能と新しい公式ドキュメントのおかげでだいぶ理解しやすくなりました。Webpackに触れてコンセプトを理解したら、とてつもないパワーを手にしたことになります。私はReact独自の仕様をしたJSXを含むコードのコンパイルにはBabelを、ローカル環境へのサイト構築にはwebpack-dev-serverを使用しています。ホットリロード機能には利点を感じないため、webpack-dev-serverの自動更新機能で十分満足しています。

依存オブジェクトのインポートとエクスポートには、モジュールの構文としてBabelで変換コンパイルされるES2015を使用しています。WebpackがNode流インポートであるCommonJSをサポートしても、ES2015も登場からしばらくたったこともあり、最良のものを選びたいのです。

WebpackではES2015モジュールを使って、使われないコードをバンドルから排除できます。完璧ではありませんが、便利な機能です。コミュニティがES2015によるnpm向けコードの公開を進めているので今後さらに便利になるでしょう。

この記事をWPJのサイトで読む

Web Professionalトップへ

Web Professionalトップページバナー

WebProfessional 新着記事

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く