今日の話
React未経験者が、
Reduxのプロジェクトにスムーズに参加するため
何をしたか？
想定する状況
- ソースはreact-redux-universal-hot-example を元に複雑にした感じ
大事
- アーキテクチャはこんな感じ
- これから物量をこなす段階
- 新しく人を追加する
- ES5のjsはできるがReact触ったことない
必要なこと
- Reactを覚える必要がある
- Reduxも覚える必要がある
- BFFでのAPIの叩き方も覚える必要がある
- ES2015も覚える必要がある
問題
- Reactだけ覚えても仕事に入れない
- 丁寧に覚える時間はない
- しかし、覚えないと渡せる仕事がない
やったこと
- 専用のチュートリアル的なものを作成
- 最小構成のサンプルを作って真似して書いてもらう
チュートリアルの内容
- Reactを弄ることができるようになる
- 新規でページ追加できるようになる
- React+ReduxのFluxを1周できるようになる
- BFFでAPIを叩けるようになる
ES2015はやってりゃ覚える
ステップ１
Reactコンポーネントを作る
とりあえずHello,World!
といってもJSXを書くだけ。
ぶっちゃけReactはrenderだけ覚えてくれればいい。
React怖くないよ~という意識を植え付ける作戦。
ステップ２
Reactにpropを喰わせてレンダリング
動的に変化させるため、変数の入れ方を覚えてもらう。
同時にpropTypesを覚えてもらう。
Reactちょろいぜ~という意識を植え付ける作戦。
ステップ３
CSS Modulesを使ってスタイリング
といっても普通にSASSを書くだけ。
CSS Modulesの仕組みを覚えてもらう。
BEMからオサラバできる感動を覚えてもらう。
ステップ４
新規ページを追加する
react-routerの基本を覚えてもらう。
新規ページ追加で必要になる作業を覚えてもらう。
ステップ５
Reduxからstate持ってくる
react-reduxのconnectを覚えてもらう
Reducer、ActionCreatorを覚えてもらう
ステップ５で大体つまずく
新規追加しようとすると、必要な所作が多い
- Reducer、ActionCreator、initialState、Constantの作成
- combineReducerでまとめる
- connect、mapStateToProps、mapDispatchToPropsで繋ぐ
初見だと全て意味不明
ステップ５のサポート
Fluxの図を見て概念は分かった。
しかし作れない、というもどかしさがある。
分からないことが多くパニックになりがち。
最低限の部分なので手助けせず自力で達成してもらう。
大体、赤い画面 がトラウマになる。
メンタルのサポートが必要。
ステップ６
Reduxでstateを更新する
inputを置いて、onChangeでstateを更新してレンダリングする。
incrementやdecrementでもいいかもしれない。
Reducerの役割や動きを覚えてもらう。
ステップ６で大体つまずく
原因はステップ５でどこか間違っているから、というのがほとんど。
「Reduxでstate持ってこれた！」
と、ぬか喜びさせておいて実はできていない現実を見せつける。
ステップ６のサポート
実はできていない現実に、うちのめされる。
最低限の部分なので手助けせず自力で達成してもらう。
大体、赤い画面 がトラウマになる。
メンタルのサポートが必要。
ステップ７
BFFでAPIを叩いてデータ取得
BFFでの新規クラスの作成方法を覚えてもらう。
APIを叩く方法を覚えてもらう。
データ取得してstateを更新する方法を覚えてもらう。
ステップ７で大体つまずく
ReduxとBFFのコードがディレクトリ距離的に離れるので、
ReduxのコードからBFFのコードを追いにくい。
grepabilityが悪いのが原因。
結果
割とうまく行った
全員チュートリアル完了に3～5日ぐらい。
初見で react-redux-universal-hot-exampleは 覚えることが多い。
とはいえ初期メンバーも全員Reactがわからず、
2～3週間はまともに作業できなかった。
それに比べれば大きな進歩！
1週間で仕事を渡せるようになった！
入門が完全にRedux WayだったのでsetStateは1行もなし！
弊害
割とうまく行ったが弊害もある。
Reactがrenderしか分からない、
なんとなく雰囲気でReact+Reduxをやっている状態が続く。。
でもコードは書けてしまうし、
勉強する必要性に迫られない。
仕事に追われていて時間ない。
まとめ
- 未経験者を受け入れるのは恐くない
- でも継続した勉強を