TypeScriptで始めるReactプロジェクトのボイラープレート作ってみた
TypeScriptで始めるReactプロジェクトのボイラープレート作ってみた:
あーあ、hooks出ちゃったからあまり今後使わない可能性あるんだけど、せっかく作ったし記事にしようかなと。
create-react-app使ってReactプロダクトを始めるでも全然ありだと思うんですけど、結局必要なものを自分で入れなければいけない。
例えば、redux,redux-form,recompose,styled-components, prettier etc
とか。
結局入れるもの多いし、ディレクトリ構成なんかもちゃんとやろうとすると最初からだとめんどくさい。それに、Reactのプロダクトをいくつか作らさせてもらっていて、自分的なベストプラクティスも固まってきた。だったら、最初からできているもの作っちゃえば楽じゃないってことで作ってみた感じ。
ただ、後述しますがReact Hooksが今後出るからちょっとな感は否めない・・・
GitHub - Takumi0901/ts-react-redux-boilerplate: TypeScript + React + Redux Counter Example
Reactプロジェクト始めるうえで私的に必要最低限のものとして列挙。こう並べてみると結構あるんですよね。
ただ、FlowよりはTypeScript!新規プロジェクトならなおさらTypeScript!
typescript-fsaが無いaction、reducerはもう嫌だ!
Reduxでやる理由の一つにRedux DevTools Extension!
Prettierで自動整形してくれないと気持ち悪い体になってしまった!
React Hot Loader無いともう無理!
だいたいディレクトリ構成はこれで定着してきた感。詳細はあとで説明するとして個人的にはcontainersの中身は結構気に入っている。ViewとReduxのコネクト部分をうまく切り分けることができたかなと。Viewが切り分けられていることによって今後Hooksが正式リリースされても対応しやすいのではと安易に考えている部分もある。
ここではAPIとのやり取りを行う。
特に変わりばえはしない感じだと思う。
ボイラープレートでは特に何も作っていない。
基本的に見た目の部分はmaterial-uiを使用している。ただ、プロダクトによってはmaterial-uiを使わずに自前でComponentを作る場合もあるはず。その場合はatomsやmoleculesをつくる。
あとは必ずステートレスに作ること。components配下のものはReduxとのコネクトはしてはいけないルール。
ここではAtomic Designでゆうところのpagesごとにディレクトリをきっている。そのページごとに必要な機能を実装していくイメージ。
ここではstateに渡される前に共通の処理を行う
今回はスネークケースとキャメルケースの変換をしている
例えばリクエスト時はスネークケースからキャメルケースへの変換をする
こういった処理をリポジトリ層を作ってやっていた時もあったけど、変換するのをあまり意識せずにできるので気に入っている
あとはstoreでかませればOK
ここはデータごとに切り分けていて、Re-ducksパターンっぽい?のを採用している。
alexnm/re-ducks: An attempt to extend the original proposal for redux modular architecture: https://github.com/erikras/ducks-modular-redux
typescript-fsaとtypescript-fsa-reducersを使う
これのおかげでかなりスッキリ書くことができる
immutable.jsを使う
reducer周りでごにょごにょするとかなり見栄え悪くなるのを防げる
reducerは交通整理のみを行うことができる
スタイルに関する部分でstyled-components使ってbase.cssやreset.cssを提供している。
ちょっとマージンつけたいとか、colorを変更したい時に対応するために用意している。使う必要が無いなら使うべきでは無いもの。ただ、突発的にComponentでは対応できない・Componentを作る必要も無いときなんかに使っているユーティリティCSSクラス。
これと似たようなの使っている。
GitHub - Takumi0901/utility-style
おそらくここ最近で一番気に入っているのがrecompose!Reactのv16.7.0で実装されるHooksもrecomposeの作者が作っているとかなんとかという。
Redux使うとどこのClass Componentでもstateとactionとlifecycleなどが使えるになる。これが後々つらみになるっことが多くて、特にどこでもlifecycle使えるとどこで何やってんだかわけわかんなくなる。Stateの変更をしているのがどこなのか所在がわからなくなったりする。
とはいえ、親Componentからバケツリレーをするにしても階層が深くなればなるほどしんどくなる。
んでrecomposeを使うことによってステートレスComponentのみでComponentを作ることができ、Reduxとのコネクトやlifecycle、ローカルステートを機能として提供することができる。
Atomic Designのorganismsを機能ごとのステートレスComponentにして、機能はenhancerで持つようにしてみた。
そうすることで、見た目と機能を完全に分離することができるのでかなりみやすくなったし、pageごとに切り分けられているorganisms単位になっているので、Stateの変更の所在もそのディレクトリ内で完結している。
ステートレスComponentのみで作ると、pureにすることができずStateの更新が全ての子Componentに波及してしまう。しかし、recomposeではステートレスComponentにpureにしたり
これをあるプロダクトで試したところ、体感でもわかるくらいに描画スピードが上がったのでおすすめ。
実際のパフォーマンス向上の施策については下記の記事がとても参考になる。
React製のSPAのパフォーマンスチューニング実例 | リクルートテクノロジーズ メンバーズブログ
React v16.7.0でHooksが導入される(2018/10/31現在)
まだすぐにはHooksをプロダクトでは使わないかもしれないが、現状かなり話題になっているのでHooksを利用することにはなると思う。実際、関数型プログラミングが強化されたような感あるし、recomposeっぽいとこもある。今後、React Hooksを使ったボイラープレートも作ろうかと。
ただ、React HooksによりステートレスComponentは今後もっと推奨されるはずなので、ステートレスComponentとロジック部分は切り分けておけば移行もしやすいのではと思っている。
このボイラープレートも無駄では無いはず・・・
あーあ、hooks出ちゃったからあまり今後使わない可能性あるんだけど、せっかく作ったし記事にしようかなと。
はじめに
create-react-app使ってReactプロダクトを始めるでも全然ありだと思うんですけど、結局必要なものを自分で入れなければいけない。例えば、redux,redux-form,recompose,styled-components, prettier etc
とか。
結局入れるもの多いし、ディレクトリ構成なんかもちゃんとやろうとすると最初からだとめんどくさい。それに、Reactのプロダクトをいくつか作らさせてもらっていて、自分的なベストプラクティスも固まってきた。だったら、最初からできているもの作っちゃえば楽じゃないってことで作ってみた感じ。
ただ、後述しますがReact Hooksが今後出るからちょっとな感は否めない・・・
GitHub - Takumi0901/ts-react-redux-boilerplate: TypeScript + React + Redux Counter Example
自分の中でのレギュラー
Reactプロジェクト始めるうえで私的に必要最低限のものとして列挙。こう並べてみると結構あるんですよね。ただ、FlowよりはTypeScript!新規プロジェクトならなおさらTypeScript!
typescript-fsaが無いaction、reducerはもう嫌だ!
Reduxでやる理由の一つにRedux DevTools Extension!
Prettierで自動整形してくれないと気持ち悪い体になってしまった!
React Hot Loader無いともう無理!
Contains
-
typescript 3.1 -
react 16.6 -
redux 4.0 -
react-router 4.3 -
react-router-redux 4.0 -
redux-form 7.4 -
redux-thunk 2.3 -
recompose 0.30.0 -
styled-components 3.4.10 -
styled-components-ts 0.0.14 -
immutable 4.0.0-rc.10 -
typescript-fsa 3.0.0-beta-2 -
typescript-fsa-reducers 0.4.5 -
material-ui 0.20.2 -
Redux DevTools Extension
Build tools
-
Webpack 4 -
Webpack Dev Server -
Typescript Loader -
React Hot Loader -
HTML Webpack Plugin -
Uglifyjs Webpack Plugin -
Prettier -
Lint staged & Husky
ディレクトリ構成について
だいたいディレクトリ構成はこれで定着してきた感。詳細はあとで説明するとして個人的にはcontainersの中身は結構気に入っている。ViewとReduxのコネクト部分をうまく切り分けることができたかなと。Viewが切り分けられていることによって今後Hooksが正式リリースされても対応しやすいのではと安易に考えている部分もある。. ├── public │ └── assets ├── src │ ├── api │ ├── components │ │ └── atoms │ ├── containers │ │ ├── app │ │ │ ├── enhancers │ │ │ └── organisms │ │ ├── home │ │ │ ├── enhancers │ │ │ ├── organisms │ │ │ └── pages │ │ └── users │ │ ├── enhancers │ │ ├── organisms │ │ └── pages │ ├── redux │ │ ├── middleware │ │ └── modules │ │ ├── counter │ │ └── users │ └── styles ├── webpack ├── webpack.common.js ├── webpack.config.js ├── webpack.production.config.js // ・・・
apiディレクトリ
ここではAPIとのやり取りを行う。特に変わりばえはしない感じだと思う。
componentsディレクトリ
ボイラープレートでは特に何も作っていない。基本的に見た目の部分はmaterial-uiを使用している。ただ、プロダクトによってはmaterial-uiを使わずに自前でComponentを作る場合もあるはず。その場合はatomsやmoleculesをつくる。
あとは必ずステートレスに作ること。components配下のものはReduxとのコネクトはしてはいけないルール。
containersディレクトリ
ここではAtomic Designでゆうところのpagesごとにディレクトリをきっている。そのページごとに必要な機能を実装していくイメージ。- enhancers: recomposeを使ってreduxをコネクト
- organisms: 機能ごとのView
- pages: そのページで使うorganismsをまとめたただのステートレスComponent
pages/Home.tsx
const Home: React.SFC<Props> = () => { return ( <React.Fragment> <Helmet> <title>title</title> </Helmet> <CounterActions /> <FormFieldsElement /> </React.Fragment> ) } export default withRouter<any>(Home)
organisims/CounterActions.tsx
const CounterActions: React.SFC<Props> = ({ counter, increment, decrement }) => { return ( <Paper className={'u-pt-24 u-pr-24 u-pb-24 u-pl-24 u-mb-24'} square elevation={0}> <Typography variant="headline">Counter!!</Typography> <Typography variant="display1">{counter.count}</Typography> <Button variant="contained" color="primary" onClick={() => increment(1)}> + </Button> <Button variant="contained" color="secondary" onClick={() => decrement(-1)}> - </Button> </Paper> ) } export default counterEnhancer(CounterActions)
enhancers/Counter.ts
export interface Props { increment(count: number): void decrement(count: number): void counter: ICounter } const connector = connect( (state: IStore) => { return { counter: state.counter } }, dispatch => Redux.bindActionCreators({ increment, decrement }, dispatch) ) export const counterEnhancer = compose<Props, {}>( connector, onlyUpdateForKeys(['counter']), lifecycle({ componentDidMount() { console.log('mounted') } }) )
redux
middleare
ここではstateに渡される前に共通の処理を行う今回はスネークケースとキャメルケースの変換をしている
例えばリクエスト時はスネークケースからキャメルケースへの変換をする
こういった処理をリポジトリ層を作ってやっていた時もあったけど、変換するのをあまり意識せずにできるので気に入っている
import { decamelizeKeys } from 'humps' export default _ => (next: any) => (action: any) => { if (action.type.match(/post.*REQUEST$/)) { action.payload = decamelizeKeys(action.payload) } next(action)
const configureStore = (initialState?: IStore): Redux.Store<IStore> => { let composes if (process.env.NODE_ENV === 'development') { const composeEnhancers = typeof window === 'object' && window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__'] ? window['__REDUX_DEVTOOLS_EXTENSION_COMPOSE__']({}) : Redux.compose composes = composeEnhancers(Redux.applyMiddleware(thunk, responseCamelizer, requestDecamelizer)) } else { composes = Redux.compose(Redux.applyMiddleware(thunk, responseCamelizer, requestDecamelizer)) } return Redux.createStore(rootReducer, initialState, composes) } export default configureStore
modules
ここはデータごとに切り分けていて、Re-ducksパターンっぽい?のを採用している。alexnm/re-ducks: An attempt to extend the original proposal for redux modular architecture: https://github.com/erikras/ducks-modular-redux
modeles/counter/index.ts
typescript-fsaとtypescript-fsa-reducersを使うこれのおかげでかなりスッキリ書くことができる
import { CounterRecord } from 'src/redux/modules/counter/records' import actionCreatorFactory from 'typescript-fsa' import { reducerWithInitialState } from 'typescript-fsa-reducers/dist' // Action types const actionCreator = actionCreatorFactory() export enum ActionTypes { INCREMENT = 'counter/INCREMENT', DECREMENT = 'counter/DECREMENT' } export const increment = actionCreator<number>(ActionTypes.INCREMENT) export const decrement = actionCreator<number>(ActionTypes.DECREMENT) // Reducer export const countUpReducer = reducerWithInitialState(new CounterRecord()) .case(increment, (state, payload) => state.inc(payload)) .case(decrement, (state, payload) => state.dec(payload))
modeles/counter/records.ts
immutable.jsを使うreducer周りでごにょごにょするとかなり見栄え悪くなるのを防げる
reducerは交通整理のみを行うことができる
import { Record } from 'immutable' import { ICounter } from 'src/redux/modules/counter/types' export class CounterRecord extends Record({ count: 0 }) implements ICounter { inc(payload: number) { return this.withMutations(s => s.set('count', this.count + payload)) } dec(payload: number) { return this.withMutations(s => s.set('count', this.count + payload)) } }
styles
スタイルに関する部分でstyled-components使ってbase.cssやreset.cssを提供している。
utilityStyles
ちょっとマージンつけたいとか、colorを変更したい時に対応するために用意している。使う必要が無いなら使うべきでは無いもの。ただ、突発的にComponentでは対応できない・Componentを作る必要も無いときなんかに使っているユーティリティCSSクラス。これと似たようなの使っている。
GitHub - Takumi0901/utility-style
recomposeについて
おそらくここ最近で一番気に入っているのがrecompose!Reactのv16.7.0で実装されるHooksもrecomposeの作者が作っているとかなんとかという。Redux使うとどこのClass Componentでもstateとactionとlifecycleなどが使えるになる。これが後々つらみになるっことが多くて、特にどこでもlifecycle使えるとどこで何やってんだかわけわかんなくなる。Stateの変更をしているのがどこなのか所在がわからなくなったりする。
とはいえ、親Componentからバケツリレーをするにしても階層が深くなればなるほどしんどくなる。
んでrecomposeを使うことによってステートレスComponentのみでComponentを作ることができ、Reduxとのコネクトやlifecycle、ローカルステートを機能として提供することができる。
Atomic Designのorganismsを機能ごとのステートレスComponentにして、機能はenhancerで持つようにしてみた。
そうすることで、見た目と機能を完全に分離することができるのでかなりみやすくなったし、pageごとに切り分けられているorganisms単位になっているので、Stateの変更の所在もそのディレクトリ内で完結している。
ステートレスComponentのみで作ると、pureにすることができずStateの更新が全ての子Componentに波及してしまう。しかし、recomposeではステートレスComponentにpureにしたり
onlyUpdateForKeys
でどのStateが更新されたら再renderするか指定することもできる。これをあるプロダクトで試したところ、体感でもわかるくらいに描画スピードが上がったのでおすすめ。
実際のパフォーマンス向上の施策については下記の記事がとても参考になる。
React製のSPAのパフォーマンスチューニング実例 | リクルートテクノロジーズ メンバーズブログ
終わりに
React v16.7.0でHooksが導入される(2018/10/31現在)まだすぐにはHooksをプロダクトでは使わないかもしれないが、現状かなり話題になっているのでHooksを利用することにはなると思う。実際、関数型プログラミングが強化されたような感あるし、recomposeっぽいとこもある。今後、React Hooksを使ったボイラープレートも作ろうかと。
ただ、React HooksによりステートレスComponentは今後もっと推奨されるはずなので、ステートレスComponentとロジック部分は切り分けておけば移行もしやすいのではと思っている。
このボイラープレートも無駄では無いはず・・・
コメント
コメントを投稿