reactjs
redux

React+Redux未経験者のプロジェクト受入

More than 1 year has passed since last update.


自己紹介


  • 渡辺 貴明


  • nabepon_dev follow me!

  • アジアクエスト株式会社

  • フロントエンドエンジニア



今日の話

React未経験者が、

Reduxのプロジェクトにスムーズに参加するため

何をしたか?:thinking:



想定する状況


  • ソースはreact-redux-universal-hot-example を元に複雑にした感じ :point_left:大事:eyes:

  • アーキテクチャはこんな感じ

  • これから物量をこなす段階

  • 新しく人を追加する

  • ES5のjsはできるがReact触ったことない



必要なこと


  • Reactを覚える必要がある

  • Reduxも覚える必要がある

  • BFFでのAPIの叩き方も覚える必要がある

  • ES2015も覚える必要がある



問題


  • Reactだけ覚えても仕事に入れない:sweat_smile:

  • 丁寧に覚える時間はない:laughing:

  • しかし、覚えないと渡せる仕事がない:innocent:



やったこと


  • 専用のチュートリアル的なものを作成:shamrock:

  • 最小構成のサンプルを作って真似して書いてもらう



チュートリアルの内容


  1. Reactを弄ることができるようになる

  2. 新規でページ追加できるようになる

  3. React+ReduxのFluxを1周できるようになる

  4. BFFでAPIを叩けるようになる

ES2015はやってりゃ覚える:muscle:



ステップ1

Reactコンポーネントを作る

とりあえずHello,World!

といってもJSXを書くだけ。

ぶっちゃけReactはrenderだけ覚えてくれればいい。

React怖くないよ~という意識を植え付ける作戦。



ステップ2

Reactにpropを喰わせてレンダリング

動的に変化させるため、変数の入れ方を覚えてもらう。

同時にpropTypesを覚えてもらう。

Reactちょろいぜ~という意識を植え付ける作戦。



ステップ3

CSS Modulesを使ってスタイリング

といっても普通にSASSを書くだけ。

CSS Modulesの仕組みを覚えてもらう。

BEMからオサラバできる感動を覚えてもらう。



ステップ4

新規ページを追加する

react-routerの基本を覚えてもらう。

新規ページ追加で必要になる作業を覚えてもらう。



ステップ5

Reduxからstate持ってくる

react-reduxのconnectを覚えてもらう

Reducer、ActionCreatorを覚えてもらう



ステップ5で大体つまずく:persevere:

新規追加しようとすると、必要な所作が多い


  • Reducer、ActionCreator、initialState、Constantの作成

  • combineReducerでまとめる

  • connect、mapStateToProps、mapDispatchToPropsで繋ぐ

初見だと全て意味不明



ステップ5のサポート

Fluxの図を見て概念は分かった。

しかし作れない、というもどかしさがある。

分からないことが多くパニックになりがち。

最低限の部分なので手助けせず自力で達成してもらう。

大体、赤い画面 がトラウマになる。

メンタルのサポートが必要。



ステップ6

Reduxでstateを更新する

inputを置いて、onChangeでstateを更新してレンダリングする。

incrementやdecrementでもいいかもしれない。

Reducerの役割や動きを覚えてもらう。



ステップ6で大体つまずく:persevere:

原因はステップ5でどこか間違っているから、というのがほとんど。

「Reduxでstate持ってこれた!」

と、ぬか喜びさせておいて実はできていない現実を見せつける。



ステップ6のサポート

実はできていない現実に、うちのめされる。

最低限の部分なので手助けせず自力で達成してもらう。

大体、赤い画面 がトラウマになる。

メンタルのサポートが必要。



ステップ7

BFFでAPIを叩いてデータ取得

BFFでの新規クラスの作成方法を覚えてもらう。

APIを叩く方法を覚えてもらう。

データ取得してstateを更新する方法を覚えてもらう。



ステップ7で大体つまずく:persevere:

ReduxとBFFのコードがディレクトリ距離的に離れるので、

ReduxのコードからBFFのコードを追いにくい。

grepabilityが悪いのが原因。



結果



割とうまく行った:clap:

全員チュートリアル完了に3~5日ぐらい。

初見:point_left:react-redux-universal-hot-example覚えることが多い。

とはいえ初期メンバーも全員Reactがわからず、

2~3週間はまともに作業できなかった。

それに比べれば大きな進歩!

1週間で仕事を渡せるようになった!

入門が完全にRedux WayだったのでsetStateは1行もなし!



弊害:tired_face:

割とうまく行ったが弊害もある。

Reactがrenderしか分からない、

なんとなく雰囲気でReact+Reduxをやっている状態が続く。。

でもコードは書けてしまうし、

勉強する必要性に迫られない。

仕事に追われていて時間ない。

少し古いがせめて@tomofさんの 翻訳資料 読むべし



まとめ


  • 未経験者を受け入れるのは恐くない

  • でも継続した勉強を