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

# 自己紹介

<img src="https://pbs.twimg.com/profile_images/811386468165767168/sJMkR8lt.jpg" height="100" width="100">

* 渡辺 貴明
* [<font color="#1da1f2"><i class="fa fa-twitter"></i></font> EngFrontend](https://twitter.com/EngFrontend) <font  color="LightGray"><i class="fa fa-comment-o"></i>follow me!</font>
* アジアクエスト株式会社
* フロントエンドエンジニア

---------

# 今日の話

React未経験者が、
Reduxのプロジェクトにスムーズに参加するため
何をしたか？:thinking:

---------

# 想定する状況

* ソースは[react-redux-universal-hot-example](https://github.com/erikras/react-redux-universal-hot-example) を元に複雑にした感じ :point_left:**大事**:eyes:
* アーキテクチャは[こんな感じ](https://speakerdeck.com/yoshidan/nodefest2016)
* これから物量をこなす段階
* 新しく人を追加する
* 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:

---------

# ステップ１

**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を覚えてもらう

---------

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

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

* Reducer、ActionCreator、initialState、Constantの作成
* combineReducerでまとめる
* connect、mapStateToProps、mapDispatchToPropsで繋ぐ

初見だと全て意味不明

---------
# ステップ５のサポート

Fluxの図を見て概念は分かった。
しかし作れない、というもどかしさがある。

分からないことが多くパニックになりがち。
最低限の部分なので手助けせず自力で達成してもらう。

<font color="Red">大体、[赤い画面 ](https://github.com/commissure/redbox-react/blob/master/README.md)がトラウマになる。</font>
メンタルのサポートが必要。

---------

# ステップ６

**Reduxでstateを更新する**

inputを置いて、onChangeでstateを更新してレンダリングする。
incrementやdecrementでもいいかもしれない。
Reducerの役割や動きを覚えてもらう。

---------

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

原因はステップ５でどこか間違っているから、というのがほとんど。
「Reduxでstate持ってこれた！」
と、ぬか喜びさせておいて実はできていない現実を見せつける。

---------
# ステップ６のサポート

実はできていない現実に、うちのめされる。
最低限の部分なので手助けせず自力で達成してもらう。

<font color="Red">大体、[赤い画面 ](https://github.com/commissure/redbox-react/blob/master/README.md)がトラウマになる。</font>
メンタルのサポートが必要。

---------

# ステップ７

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

BFFでの新規クラスの作成方法を覚えてもらう。
APIを叩く方法を覚えてもらう。
データ取得してstateを更新する方法を覚えてもらう。

---------

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

ReduxとBFFのコードがディレクトリ距離的に離れるので、
ReduxのコードからBFFのコードを追いにくい。
grepabilityが悪いのが原因。

---------

# 結果

---------

# 割とうまく行った:clap:

全員チュートリアル完了に3～5日ぐらい。
初見:point_left:で [react-redux-universal-hot-example](https://github.com/erikras/react-redux-universal-hot-example)は **覚えることが多い。**

とはいえ初期メンバーも全員Reactがわからず、
2～3週間はまともに作業できなかった。

それに比べれば大きな進歩！
1週間で仕事を渡せるようになった！

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

---------

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

Reactがrenderしか分からない、
なんとなく雰囲気でReact+Reduxをやっている状態が続く。。

でもコードは書けてしまうし、
勉強する必要性に迫られない。
仕事に追われていて時間ない。

少し古いがせめて@tomofさんの[ 翻訳資料 ](http://js.studio-kingdom.com/react/
)読むべし 

---------

# まとめ
* 未経験者を受け入れるのは恐くない
* でも継続した勉強を