こんにちは。
最近暑くなってきて通勤が大変な阿部です。
さて、普段Railsを書いている私ですが、先月初めてReactのPRを出しました！
新しい言語を勉強すること、それを実際に使って何かを作り上げることは楽しいなぁと改めて感じ、エンジニアの良さを再認識した出来事でした。
そんなわけで、今回のブログはタイトルの通りRailsエンジニアのReact入門ということで、業務の合間にどうやって勉強したかを記事にしてみました。
もしこれからReact始めてみたい！という方の参考になれば幸いです。
React入門した時のわたし
Reactの勉強を始めた時のわたしのスペックは下記です。
見ての通り、JSはjQueryくらいしか触ったことがありませんでした。
- 普段はRails（Ruby）でバックエンドの実装に携わる
- Rubyの他にちゃんと触ったことある言語はHTML・CSS・JS（jQuery）くらい
- 業務でフロント連携することが多いのだが、簡単な修正くらい自分でできるようになりたかった
React入門、その前に…
そもそも、Reactは公式サイトにあるようにJSのライブラリです。
（開発をおこなっているのはFacebook社）
React はユーザーインターフェースを作成する為の JavaScript のライブラリです。
というわけで、Reactに入門する前にまずはJS（ES6）の基礎から学ばねばと思い、Udemyで買ったES6の基礎講座を通勤中や始業前にちょこちょこ見ながら勉強しました。
アプリにDLして見れるので、スマホから空き時間にささっとできるのがいいと思います！
いざ入門
で、Reactに入門するために何をしたかといえば…
Reactチュートリアルです！笑
- React公式のチュートリアル
- 現在日本語版もあり、入門しやすい
- 環境構築なしでブラウザからサクッと入門もできる（ちなみにわたしはローカルに環境構築からやりました）
Reactのポイントを押さえながら三目並べ（マルバツゲーム）を作っていきます。
これを、以前このブログでも紹介させて頂いた開発合宿in三浦海岸でやってきました！
普段も土日に勉強したりしていますが「環境の違う場所でひたすら開発！」という経験がなかったので、とても集中して取り組めたと思います！
また、チームのみんなといつもと違うことをすることによって、「この人こんな技術に興味があるんだ」とか「それ面白そう！」などの発見もありとても楽しかったです。
そんな楽しかった合宿で一通り基礎をさらいながらチュートリアルの五目並べは完成！
チュートリアルを最後まで進めると動く三目並べゲームができるわけですが、このあとさらに6つの拡張課題が待っています。
- 履歴内のそれぞれの着手の位置を (col, row) というフォーマットで表示する。
- 着手履歴のリスト中で現在選択されているアイテムをボールドにする。
- Board でマス目を並べる部分を、ハードコーディングではなく 2 つのループを使用するように書き換える。
- 着手履歴のリストを昇順・降順いずれでも並べかえられるよう、トグルボタンを追加する。
- どちらかが勝利した際に、勝利につながった 3 つのマス目をハイライトする。
- どちらも勝利しなかった場合、結果が引き分けになったというメッセージを表示する。
これらは課題だけで、サンプルコードなどは載っていません。
合宿中に全て終わらなかったので、通常の業務に戻った後も空いている時間を見つけて取り組んでいましたが、
- どうやったら実現できそうか
- 実現したいことを解決できる関数などはあるのか？
など考えながら進めるのは実際の業務に近く感じ、結果最後までやってよかった！と思いました。
また、JS（ES6）・Reactの基礎の振り返りもしつつ理解を深めることができました。
これからやる場合、拡張課題までやることをオススメしたいです！笑
（コードの良し悪しはともかく）やりきった記録をQiitaにあげてありますので興味のある方はそちらも見てみてください。
実戦投入！
ここまでコツコツ勉強が終わった段階で（約1ヶ月）なんと実戦投入されました。
当時担当していたリニューアルプロジェクトのフロント一部分の実装を任され、悪戦苦闘しつつもなんとか完成し、今実際に動いています。
業務でやってみて大変だったのは
- Componentの親子関係の把握とpropsの受け渡し
- どこでState管理するか
- どこでrenderされるのか
など、理解したつもりだったけど、いざ実戦となるとやはり理解するのが大変です。
もう一度最初からドキュメントを読み直しましたが、勉強したことをすぐに実務で使えたのは理解を深める上で大事だと思います。
おわりに
記事書いてみたらJS（ES6）の基礎とReactチュートリアルしかやっていなかったのですが、それでも業務でPR出せるレベルでReactに入門できました。
この体験を通して、よく言われているインプット -> アウトプットがいかに大事かも身をもって学べたと感じてます。
また、Reactの勉強を通して、RailsのAPIについても考えることができたのが一番大きな収穫だったかもしれません。
- React入門するのは難しくない
- ブラウザでダイレクトにコードの挙動が確認できて楽しい
- 実際に自分で作ったAPIを使ってバックエンドと連携したことで、Rails側でもフロントから使いやすいAPIを考えるようになった
- 勉強する（インプット） -> 実際にコード書く（アウトプット）でわかったつもりになってた箇所がわかった
- 平日勉強する場合は朝のほうが邪魔も入らず集中できる
Reactやってみたいという軽い気持ちで始めたものの、得られたものは結構大きかった！
というわけで、RailsエンジニアがReact入門したお話でした。
（なお、これを書いている今現在はReduxと格闘中です）
最後まで読んでいただき、ありがとうございました！！
