React / Redux / TypeScript での開発環境について考えてみる

React

React / Redux / TypeScriptのプロジェクトでのより良い開発環境について考えてみたいと思います。
本記事はあくまで全体を俯瞰した概要とし、一つ一つの項目に関しては、もう少し掘り下げて書きたいと思います。

TSLint

TSLint 開発チームより、TSLintは非推奨となる予定が発表されまています。

Roadmap: TSLint -> ESLint · Issue #4534 · palantir/tslint
As you may have read in this blog post, we plan to deprecate TSLint in 2019 and support the migration to ESLint as the standard linter for both TypeScript &...

今からTSLintを入れるのであれば、ESLintを使うべきだと思います。

ESLint / Prettier

基本的に、他人の敷いたレールに乗っかっていたい僕です。

Prettier 入門 ~ESLintとの違いを理解して併用する~ - Qiita
はじめに Prettierに関しての備忘録です。 「Prettierの何が便利なのかよくわからない」 「ESLintと何が違うのかよくわからない」 「eslint --fixでコード整形ができるからPrettierの必要性が...

むしろ推奨設定の方が、例えば新しく誰かがプロジェクトにJoinした場合に、説明のコストが少なくて済むのではと思っています。

上記記事でもあるように、コミットをフックにしてコード整形するのはプロジェクトの性格次第な気もしています。
エディタでファイルを保存した時にコード整形するやり方ぐらいは把握しておきたいですね。

TypeScript

Deep Dive からスタイルガイドが出ています。

StyleGuide

基本的には上記に則り、細かい構文チェックはESLintにお任せですね。

テスト

以下記事を実践したい

フロントエンドでTDDを実践する(理論編) - Qiita
この記事は リクルートライフスタイル Advent Calendar 2018 8日目の記事です。 2018/12/10更新:続編で フロントエンドでTDDを実践する(react-testing-libraryを使った実践編)を書き...

ビルド環境

トランスパイラ、モジュールバンドラーとして、 webpack で全部束ねる感じで。

webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packagi...

ディレクトリ構造

大きくはReactの Components と Redux 関連で分ける感じです
後述しますが、Reduxのディレクトリ構成は Re-ducks パターンに則るので、ディレクトリ名もそのようにしています。

./project/
├── components
├── ducks

それぞれの深堀は以下のようになります。

React Components

設計思想

Atomic Designを取り入れるのが、今の所やりやすいですね。

Atomic Design
Hey there! I wrote a book called Atomic Design that dives into this topic in more detail, which you can buy as an ebook. We’re not designing pages, we’re desig...

なので、ディレクトリとしても以下のような形になります。

./project/
├── components
│   ├── atoms
│   ├── molecules
│   ├── organisms
│   ├── templates
│   └── pages

UIフレームワーク

Material-UIはよく使います。

Material-UI: A popular React UI framework
React components for faster and easier web development. Build your own design system, or start with Material Design.

他にも色々とあるので、プロジェクトに合わせて使うと良いと思います。

React Toolbox

React Toolbox
React Toolbox is a set of React components that implement Google's Material Design specification. It's powered by CSS Modules and harmoniously integrates with y...

Rebass

Rebass
React primitive UI components built with Styled System

CSS

styled-componentを使ってコンポーネントごとにCSSを適用しています。

styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

Redux

設計思想

先述の通り、Re-ducksパターンを用いると、ドメインごとにファイルが見やすくなると思います。

alexnm/re-ducks
An attempt to extend the original proposal for redux modular architecture: - alexnm/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関連は書きたいことが盛り沢山なので、また深堀して記事を書きたいと思います。

あとがき

なんかさらっと概略を書いた感じで、上辺だけみたいな感じになってしまいましたが、これから各項目を掘ってリンクさせていきたいと思います。

タイトルとURLをコピーしました