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 & Jav...

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

ESLint / Prettier

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

Prettier 入門 ~ESLintとの違いを理解して併用する~ - Qiita
お知らせ(2021/05/26 追記) 以前はeslint --fixなどで ESLint を実行時に Prettier でコードを整形し、整形したコードに対して構文チェックが実行されるようにすることが推奨されていました。 ESLi...

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

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

TypeScript

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

スタイルガイド(コーディング規約) - TypeScript Deep Dive 日本語版

基本的には上記に則り、細かい構文チェックは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 design...

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

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

UIフレームワーク

Material-UIはよく使います。

MUI Core: Ready to use components, free forever
Get a growing list of React components, ready-to-use, free forever and with accessibility always in mind.

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

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パターンを用いると、ドメインごとにファイルが見やすくなると思います。

GitHub - alexnm/re-ducks: An attempt to extend the original proposal for redux modular architecture: https://github.com/erikras/ducks-modular-redux
An attempt to extend the original proposal for redux modular architecture: - GitHub - alexnm/re-ducks: An attempt to extend the original proposal for ...
./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をコピーしました