241
Help us understand the problem. What are the problem?

posted at

updated at

Organization

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

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

by nabepon
1 / 24

自己紹介

  • 渡辺 貴明
  • EngFrontend 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さんの 翻訳資料 読むべし


まとめ

  • 未経験者を受け入れるのは恐くない
  • でも継続した勉強を
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
241
Help us understand the problem. What are the problem?