React / Redux / TypeScriptのプロジェクトでのより良い開発環境について考えてみたいと思います。
本記事はあくまで全体を俯瞰した概要とし、一つ一つの項目に関しては、もう少し掘り下げて書きたいと思います。
TSLint
TSLint 開発チームより、TSLintは非推奨となる予定が発表されまています。
今からTSLintを入れるのであれば、ESLintを使うべきだと思います。
ESLint / Prettier
基本的に、他人の敷いたレールに乗っかっていたい僕です。
むしろ推奨設定の方が、例えば新しく誰かがプロジェクトにJoinした場合に、説明のコストが少なくて済むのではと思っています。
上記記事でもあるように、コミットをフックにしてコード整形するのはプロジェクトの性格次第な気もしています。
エディタでファイルを保存した時にコード整形するやり方ぐらいは把握しておきたいですね。
TypeScript
Deep Dive からスタイルガイドが出ています。
基本的には上記に則り、細かい構文チェックはESLintにお任せですね。
テスト
以下記事を実践したい
ビルド環境
トランスパイラ、モジュールバンドラーとして、 webpack で全部束ねる感じで。
ディレクトリ構造
大きくはReactの Components と Redux 関連で分ける感じです
後述しますが、Reduxのディレクトリ構成は Re-ducks パターンに則るので、ディレクトリ名もそのようにしています。
./project/
├── components
├── ducksそれぞれの深堀は以下のようになります。
React Components
設計思想
Atomic Designを取り入れるのが、今の所やりやすいですね。
なので、ディレクトリとしても以下のような形になります。
./project/
├── components
│ ├── atoms
│ ├── molecules
│ ├── organisms
│ ├── templates
│ └── pagesUIフレームワーク
Material-UIはよく使います。
他にも色々とあるので、プロジェクトに合わせて使うと良いと思います。
React Toolbox
Rebass
CSS
styled-componentを使ってコンポーネントごとにCSSを適用しています。
Redux
設計思想
先述の通り、Re-ducksパターンを用いると、ドメインごとにファイルが見やすくなると思います。
./project/
├── ducks
│ ├── domain1
│ │ ├── actions.ts
│ │ ├── index.ts
│ │ ├── operations.ts
│ │ ├── reducers.ts
│ │ ├── selector.ts
│ │ └── types.ts
│ ├── domain2
│ │ ├── actions.ts
│ │ ├── index.ts
│ │ ├── operations.ts
│ │ ├── reducers.ts
│ │ ├── selector.ts
│ │ └── types.ts
・
・
・Redux関連は書きたいことが盛り沢山なので、また深堀して記事を書きたいと思います。
あとがき
なんかさらっと概略を書いた感じで、上辺だけみたいな感じになってしまいましたが、これから各項目を掘ってリンクさせていきたいと思います。
