React Reduxスターターキット

React Redux Starter Kit の概要を意訳しました。
誤りやより良い表現などがあればご指摘頂けると助かります。

原文：https://github.com/davezuko/react-redux-starter-kit/blob/master/README.md

---

廃止予定の警告

Reduxエコシステムの到来により始まったこのプロジェクトは、ユーザーのクイックスタートを支援することが目的でした。 それ以降、ツール群やベストプラクティスは劇的に進化しました。可能な限り最新の経験を得るために、多くのReactとReduxのコア開発者がサポートするcreate-react-appのようなものをチェックすることをお勧めします。

React Redux Starter Kit

このスターターキットは、素晴らしいフロントエンドテクノロジーを多数搭載して稼働させるために設計されています。

このプロジェクトの主目的は、モダンなWebアプリケーションを開発するための安定した基盤を提供することです。プロジェクト構造の強制や実際のアプリケーションのデモではなく、フロントエンド開発を堅牢かつ簡単に、さらに最も重要なのは楽しむためのツールセットを提供するということです。下記の完全な機能リストをご覧ください！

最後に、このプロジェクトは多くの協力者の助力がなければ成立しなかったでしょう。今日あなたが目にしているのは、進化するエコシステムに対応するために何百もの変更が加えられたプロダクトです。皆さまの多大なるご協力に感謝します。

要件

• node ^5.0.0
• yarn ^0.23.0 or npm ^3.0.0

インストール

開発環境が要件を満たしていれば、次の手順で react-redux-starter-kit に基づいた新しいプロジェクトを作成可能です。

$ git clone https://github.com/davezuko/react-redux-starter-kit.git <my-project-name>
$ cd <my-project-name>

続いてプロジェクトの依存関係をインストールします。モジュールのバージョンを固定したインストールのために Yarn が推奨されますが npm install でも構いません。

$ yarn  # 依存関係のインストール

プロジェクト実行

インストール手順が完了したら準備完了です！

$ yarn start   # 開発サーバーを起動する（`npm start` でも可）

開発中は、おそらくほとんど yarn start を使うことになるでしょうが、自由に使える追加スクリプトも用意されています。

npm run <script>	説明
start	localhost:3000 でアプリケーションを提供します
build	~/dist にアプリケーションをビルドします
test	Karmaでユニットテストを実行します。テストを参照
test:watch	ウォッチモードで test を実行します
lint	潜在的なエラーを検出するためにLintを実行します
lint:fix	Lintを実行して修正可能な全てのエラーを修正します

プロジェクト構造

このボイラープレートのプロジェクト構造はフラクタルです。つまり、機能はファイルタイプではなく特徴によってグルーピングされます。この構造は飽くまでもガイドに過ぎず、決して模範的というわけではことを忘れないでください。その狙いはスケーラブルなアプリケーションを構築するために一般的に受け入れられたガイドラインとパターンを示すことです。このパターンについて深く知りたければ、ジャスティン・グリーンバーグ氏によるこの素晴らしい記事をご覧ください。

.
├── build                    # 全てのビルド関連コード
├── public                   # 静的なパブリックアセット (ソースコードのどこからもimportされない)
├── server                   # webpackのmiddlewareを提供するExpressアプリケーション
│   └── main.js              # サーバーアプリケーションのエントリポイント
├── src                      # アプリケーションのソースコード
│   ├── index.html           # アプリケーションのメインHTMLコンテナ 
│   ├── main.js              # アプリケーションの起動と描画
│   ├── components           # グローバルで再利用可能なコンポーネント
│   ├── containers           # グローバルで再利用可能なコンテナ
│   ├── layouts              # 主要なページ構造を規定するコンポーネント
│   │   └── PageLayout       # 各ルートを描画するグローバルなアプリケーションレイアウト
│   ├── routes               # メインルートの定義と非同期の分割ポイント
│   │   ├── index.js         # storeと共にメインアプリケーションの起動
│   │   ├── Home             # フラクタルルート
│   │   │   ├── index.js     # ルート定義と非同期の分割ポイント
│   │   │   ├── assets       # コンポーネントの描画に必要なアセット
│   │   │   ├── components   # プレゼンテーショナルReactコンポーネント
│   │   │   └── routes **    # フラクタルサブルート (** オプション)
│   │   └── Counter          # フラクタルルート
│   │       ├── index.js     # Counterのルート定義
│   │       ├── container    # コンポーネントをアクション＆ストアと結合する
│   │       ├── modules      # reducer、constatnｔｓとactionの集合
│   │       └── routes **    # フラクタルサブルート (** オプション)
│   ├── store                # Redux固有の部品
│   │   ├── createStore.js   # Reduxストアの生成と設置
│   │   └── reducers.js      # reducerの登録と注入
│   └── styles               # アプリケーション全体のスタイル (共通設定)
└── tests                    # ユニットテスト

ライブ開発

ホットリロード

ホットリロードは、アプリケーションが開発モード（ yarn start ）で実行されて中はデフォルトで有効になっています。この機能はwebpackのHot Module Replacementで実装されています。この機能は、アプリケーションの実行中にコードの更新をリロードなしでリアルタイムに反映します。それはこんな具合に動作します。

• JavaScript モジュールにとって、コードの変更はツリーの最上部から再描画するためのトリガーとなります。グローバルなstate（reduxなど）は保持されますが、ローカルコンポーネントのstateはリセットされます。この挙動はReact Hot Loaderとは異なりますが、完全な再描画を実行することでReact Hot Loaderのパッチ適用による小さなバグを避けることができます。
• Sassのあらゆる変更がリアルタイムでスタイルを更新します。追加の設定やリロードは不要です。

Redux Devツール

ChromeエクステンションのRedux DevToolsの導入をオススメします。Chromeエクステンションは、モニターを別スレッドで起動し、より優れたパフォーマンスと機能を提供します。最も人気のあるいくつかのモニターが付属していて、設定やactionのフィルターを容易にし、また追加のパッケージを必要としません。

しかし、プロジェクトへの開発ツールコンポーネント追加は単純です。まずはパッケージをnpmから取得しましょう。

$ yarn add -D redux-devtools redux-devtools-log-monitor redux-devtools-dock-monitor

次に、手動の統合チュートリアルに従ってください。

ルーティング

react-router のルート定義によりアプリケーション内のロジックの単位を定義します。詳しくはプロジェクト構造をご覧ください。

テスト

ユニットテストを追加するため、 ~/test 内の至るところに単純に .spec.js ファイルを生成しています。Karmaとwebpackがこれらのファイルを自動的に取得し、MochaとChaiはimportされることなくテスト内で利用できます。テスト中で利用できる便利なプラグインとパッケージをご紹介します。

dirty-chai

chaiから利用可能なアサーションのいくつかはmagical gettersを使っていますが、いくつか問題があります。

1. プロパティ名を誤って入力した場合（例. expect(false).to.be.tru ）、式は未定義として評価され、 true 上のmagical getterは決して実行されないので、テストは勝手にパスしてしまいます。
2. デフォルトでは、Lintはそれらを理解していないので、未使用の式としてマークしますが、これは邪魔になりがちです。

Dirty Chaiはこれらのgetterを呼び出し可能な関数に変換してくれます。これにより、アサーションをミスタイプすると、そのプロパティを定義していないため、アサーションを呼び出す試みがスローされます。

// `true` 上のgetterが呼び出されないため黙ってパスする!
it('should be true', () => {
  expect(false).to.be.tru // 未定義として評価
})

// 断然良い！ アサーションが無効なため、暗黙的にパスされずにスローされる。
it('should be true', () => {
  expect(false).to.be.tru() // `tru` は未定義！
})

本番用ビルド

デプロイ

箱の外では、このスターターキットは yarn build によって生成される ~/dist フォルダによってデプロイ可能です。このプロジェクト自身はSSRやAPI構造の詳細は考慮されていません。それらはスターターキットの拡張を難しくする強情な構造を必要とするためです。しかし、より応用的なデプロイ戦略が必要であればいくつかのヒントを示しましょう。最も簡単なデプロイ方法は静的デプロイです。

静的デプロイ

nginxのようなWebサーバー経由でアプリケーションを配信する場合、入り口のルートを ~/dist/index.html ファイルに向け、残りはreact-routerに任せましょう。この方法がよく分からない場合、このドキュメントが役立ちます。スターターキットに同梱されているExpressサーバーは、APIや他の必要なもののために拡張可能ですが、静的デプロイには不要です。

謝意

このプロジェクトはコミュニティの協力なしには成立しませんでした。最大の貢献者たちを強調したいと思います。多大なるご協力に感謝します。あなたたちは私の人生をもっと快適にしてくれ、その過程で多くのことを教えてくれました。

• Justin Greenberg - Babel 6に導いた全てのプルリクエストと、パターンを改善する一貫した仕事ぶり
• Roman Pearah - バグレポート、イシューの優先順位付けへの助けとプルリクエストへの貢献
• Spencer Dixon - redux-cliの開発
• Jonas Master - イシューの優先順位付けへの助けとGitterチャンネルでの果てしないサポート

ここに掲載されていない全ての貢献者の仕事に対しても深い感謝の気持ちをお伝えします。