SPA開発経験0からReact+Reduxをキャッチアップするためにやった5つのこと

# はじめに
昨年の夏あたりから[モノオク](https://monooq.co.jp/)にジョインし、個人の空きスペースを活用した物置のシェアリングサービス[「モノオク」](https://monooq.com)というサービスを開発しています。

このサービスのフロントエンドではモダンなJSフレームワークであるReact+Reduxを利用しています。

今はReact+Reduxを使って普通に開発していますが、ジョインした当初はSPA開発経験がほぼ0だったため、いろいろと苦戦しました。今回はSPA開発やReact+Reduxが未経験の方向けに、React+Reduxをキャッチアップするために私がやった5つのことを書こうと思います。参考になる方が一人でもいらっしゃれば幸いです。
※他の技術もいろいろとキャッチアップしましたが、そのあたりは別の機会に書こうと思います。

# やったことのサマリ
1. 決意を固める
1. ECMAScriptに慣れる
1. スピードを意識して基本を学習する
1. ハンズオンをやりまくる
1. 知見を学ぶ

# 1. 決意を固める
いきなり精神論かい！という感じですが、、、
何事もそうですが、やったことがないこと・知らないことを新たに始めると、失敗ばかりで正解もよく分からないカオス状態になります。「何があってもキャッチアップするぞ！」などの決意を事前に固めておけば、途中で辛い状態に陥っても、その決意が継続の手助けをしてくれるはずです。エンジニアの皆さんはよくお分かりのはずｗ
↓
私は自分自身をマインドコントロールすることで、モチベが高い状態を維持できるよう努力しています。努力しています。努力しています、、、ｗ

※技術とは直接関係ないですが、、、こういった精神的なものも結構大切だなーと考えています。

# 2. ECMAScriptに慣れる
React+Reduxの概念で苦戦したというよりは、単純にECMAScriptの書き方がわからず苦戦しました。
私の場合「JSは書けるがECMAScriptはよくわからん！」という状態だったので、やりたいことがあっても、それをどうやってコードで表現していいかわからなかったですねー。慣れている言語であればサクサク実装していけるのにECMAScriptだと手が止まる。。。という状態によく陥ってました。「JSは書けるがECMAScriptはよくわからん！」という方々は、恐らくこの壁にぶち当たるのかなと思いました。
↓
ECMAScriptの構文を頭に入れ、書きまくり、慣れることでサクサク実装できるようになりました。
もちろん、trial and errorしまくりました。

### 参考にしたサイト
[ES2015(ES6) 入門](https://qiita.com/soarflat/items/b251caf9cb59b72beb9b)
[ES6(ES2015)チートシート](https://qiita.com/morrr/items/883cb902ccda37e840bc)
[ES2015/2016+ 記法 個人的メモ](https://qiita.com/romiogaku/items/0f337c489754417f9fa8)
[ES2015 (ES6)についてのまとめ](https://qiita.com/tuno-tky/items/74ca595a9232bcbcd727)
[もうはじめよう、ES6~ECMAScript6の基本構文まとめ(JavaScript)~](https://qiita.com/takeharu/items/cbbe017bbdd120015ca0)

# 3. スピードを意識して基本を学習する
利用する技術の概念や思想などの基本を理解しておくことは大切なことですよね。そのことは皆さんお分かりかと思います。ですが、大切だと思うが故に初期の学習段階で時間をかけ過ぎて挫折する、もしくはズルズルと進めてしまう方は結構多いんじゃないでしょうか。時間かけ過ぎると学習したことをいろいろと忘れるので、３歩進んで２歩下がる状態に陥ります。
↓
初期の学習段階で時間をかけ過ぎるのはもったいないので、スピードを意識してキャッチアップしました。

具体的には、最初の頃はなんとなーく理解(完璧な理解は不要)すれば十分で、後述するハンズオンと組み合わせて徐々に理解を深めていくというアプローチをとります。これにより、キャッチアップスピードが早くなり、知識の定着度もUPすると思います。これは私の経験則です。

内容を全部すっ飛ばしても頭に入らないですし、100%理解しようとして過度な時間をかけることはもったいない、、、このあたりのさじ加減はいつも難しいと感じています。

あと、概念や思想を理解する際は、文章よりもイメージ図などを多用している記事を参考にするのが学習スピードを上げるコツかなと思います。

### 参考にしたサイト
#### React
[出来る限り短く説明するReact.js入門](https://qiita.com/rgbkids/items/8ec309d1bf5e203d2b19)
[今からはじめるReact.js〜propsとstate、それからrefs〜](https://qiita.com/kuniken/items/a22adda392ccc30011b1)
[React.jsチートシート](https://qiita.com/morrr/items/c32a4916d55373b64c70)

#### Redux
[Redux入門【ダイジェスト版】10分で理解するReduxの基礎](https://qiita.com/kiita312/items/49a1f03445b19cf407b7)
[Redux 入門 〜Reduxの基礎を理解する〜](https://qiita.com/soarflat/items/bd319695d156654bbe86)
[Reduxの実装とReactとの連携を超シンプルなサンプルを使って解説](https://mae.chab.in/archives/2885)

#### React + Redux
[イメージで覚えるReact + Redux](https://tech.unifa-e.com/entry/2017/07/10/135509)
[たぶんこれが一番分かりやすいと思います React + Redux のフロー図解](https://qiita.com/mpyw/items/a816c6380219b1d5a3bf)
[React Redux入門　](https://qiita.com/toshi1127/items/37924faba5d57f397905)
[React + Redux入門初歩　実際に一からアプリを構築してみる](https://qiita.com/pentamania/items/859fe5f2f7e9cf12d6ca)

# 4. ハンズオンをやりまくる
個人的に座学より、手を動かしたほうが覚えが早いと考えています。
ECMAScriptやReact＋Reduxの概念をある程度理解したら、早い段階でハンズオンで手を動かし、さらにそれを「概念理解⇛ハンズオン⇛概念理解⇛ハンズオン」のように繰り返すことで理解を深めていくというアプローチをとると効率がいいです。

また、ある程度理解が深まってくると出現する壁があります。
学習が終了していざ本番のサービス開発をしようとすると手が止まる。。。という壁です(これはReact＋Reduxに限った話ではありませんが)。「どこから手をつけていいかわからなくなる、何をするべきなのかもわからなくなる」というアレです。
この対策としては、ハンズオンの内容を自分なりにカスタムし、いろいろと試してみることが有効だと思います。これは、用意されたものにそのまま従うのではなく、少しでもいいから、自分で考えたものを自分で開発してみるというアプローチが有効だということです。
本番のサービス開発は、基本的に自分で(自分達で)考えたものを自らゴリゴリ開発し、ゴリゴリ進めていくことになりますからね。

### 参考にしたサイト
[最短で学ぶReactとReduxの基礎から実践まで](https://www.udemy.com/react-redux-from-beginning/)
[フロントエンドエンジニアのためのReact・Reduxアプリケーション開発入門](https://www.udemy.com/react-application-development/)
[Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する](https://qiita.com/chibicode/items/8533dd72f1ebaeb4b614)
[Reactで誰もがやりたかった10の機能。アプリ構想はあるけど作れない人の壁をぶっ壊す。](https://qiita.com/y_kawase/items/8f1b5a303400a09c4923)

# 5. 知見を学ぶ
チュートリアルやハンズオンの記事ではあまり書かれない、お作法やマナー、地雷などを知っておくことは本番のサービスを開発するにあたって大切なことです。苦労した方と同様の苦労をしなくても知見を吸収できるということは、効率的ですし、非常にありがたいですよね。
GitHubなどで公開されている実稼働しているサービスのソースなども参考にすることで、より実践的な知見を学ぶことができるのでおすすめです。

私は新しい分野に手を出す際、技術的な負債を極力残さないよう、知見をよくチェックするようにしています。

### 参考にしたサイト
[React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！](https://qiita.com/numanomanu/items/af97312f34cf1388cee6)
[React/Redux約三年間書き続けたので知見を共有します](http://www.enigmo.co.jp/blog/tech/reactredux%E7%B4%84%E4%B8%89%E5%B9%B4%E9%96%93%E6%9B%B8%E3%81%8D%E7%B6%9A%E3%81%91%E3%81%9F%E3%81%AE%E3%81%A7%E7%9F%A5%E8%A6%8B%E3%82%92%E5%85%B1%E6%9C%89%E3%81%97%E3%81%BE%E3%81%99/)
[[メモ] React(+Redux) を書くときに注意した方がいいこと](https://qiita.com/longtime1116/items/be1ce55276383da27de3)
[React + Reduxでこれはやった方がいいこと](https://marunouchi-tech.i-studio.co.jp/4700/)

# まとめ
* この記事を書いていて思ったのですが、なんか気合入れようとか、手を動かしまくろうとか書いていて、めちゃ体育会系ぽくなったなと、、、ｗ
* React+Reduxというよりは、新技術全般をキャッチアップするための記事っぽくなったかもしれません。このあたりは別の記事でちゃんと書こうと思います。
* 価値観はさまざまですが、これらのアプローチは言語や分野問わず、有効活用できるものかなと個人的には思ってます。

SPA開発、楽しんでやっていきましょう！