【2019年版】バックエンドエンジニアが React でモダンなフロントエンド開発を始めるまで

id:daido1976 です。入社してからあっという間に1年が経っていました。

直近3ヶ月ほどプライベートでフロントエンド開発の勉強をしていたのですが、ここ数年で CSS の Grid や React の Hooks が新しく導入されたことなどもあり、少し古いコンテンツだと教材として役立たない¹ と感じることが多かったので、本記事では私が実際にやってみた中で 2019年時点で オススメできると判断した教材や学び方を皆さんにご紹介したいと思います。

はじめに

今回は実務レベルでフロントエンド開発できるスキルを身につけたい、という目標があったので JavaScript はもちろん所属チームである EC Booster で採用している React、さらにフロントエンド開発において避けて通ることのできない CSS の学習を前提としています。

参考までに筆者のスペックは 👇 の記事の1年後をご想像ください。

developer.feedforce.jp

具体的にはこの後 Ruby や Rails を使って、SPA のための GraphQL API サーバや Google 広告系の API を利用したバッチ処理の実装など、バックエンド開発をメインに行なっていました。

やったこと

JavaScript

MDN の JavaScript の部分を読む & 手を動かす

所要期間: 約5日

Rails 開発をする前に Ruby の基礎をがっつりやったことで早期にキャッチアップできた経験から、まずは JavaScript の言語仕様をしっかり把握しようと思いました。
ここでは React でも頻出の import/export、アロー関数、分割代入に加えて、変数のスコープ（Ruby と違って最初戸惑った）などについて学びました。
数行のスクリプトを書いて実行、をとにかくひたすら繰り返していました。

developer.mozilla.org

JavaScript Primer を読む

所要期間: 約2日

こちらは ES2015 を前提とした JavaScript の入門書。
MDN で分かりづらかった部分を補完したり、ES2015 以降の仕様のみを把握したい時に利用しました。

jsprimer.net

YouTube 動画で Promise を学ぶ

所要期間: 約0.5日

Promise、難しいですよね…。
有名な JavaScript Promiseの本を読んだのですが、自分には難しくて中々理解できませんでした。
色々探し回った結果、以下の YouTube 動画がものすごく分かりやすくて何とか概要を掴むことができました。

youtu.be

デバッグ方法を学ぶ

所要期間: 約0.5日

Ruby には pry という大好きなデバッガー（としても使える）ライブラリがあるのですが、JavaScript にも debugger ステートメントという素晴らしいものがあるのだと知りました。
- JavaScriptのデバッグ方法 – JSを嫌いにならないためのTips | POSTD
あと Chrome DevTools の使い方も以下の記事を読んで把握しました。
- ChromeのデベロッパーツールでJSをデバッグする方法（2019年版） - ICS MEDIA

React

React 公式のチュートリアルを2周する

所要期間: 約2日

JS を学ぶ前に一度やり、JS を学んでからもう一度やりました。React の概要を掴むには良かったです。
ただ、このチュートリアル内では Class Components が前提で Hooks については全く触れられてないので、後述の Full Stack Open 2019 で補完しました。

ja.reactjs.org

egghead.io の動画で Redux を学ぶ

所要期間: 約2日

Redux 公式のドキュメントをさっと読んでから Redux の作者である Dan Abramov 氏が作成した以下の動画を観ながら手を動かしました。
序盤で createStore を自分で実装してみようという内容があるのですが、それがとても分かりやすかったです。

egghead.io

ヘルシンキ大学の Web 開発カリキュラム Full Stack Open 2019 をやる

所要期間: 約10日

React × Express.js × MongoDB の構成でイチから SPA 作れるようになろうぜ、という趣旨のチュートリアル。
React は Hooks 前提で、さらに Jest を使ったテスト、Redux、GraphQL などのコンテンツもあり、何より説明が半端なく分かりやすい。今だったら React 公式のチュートリアルすっ飛ばしてこっちやった方がいいかも、と思うほど素晴らしい。
今回はフロントエンド技術の習得に注力したかったので、バックエンド開発部分（Part3, 4 辺り）は飛ばしました。

fullstackopen.com

CSS

CSS in Depth を読む & 手を動かす

所要期間: 約5日

CSS がずっと苦手だった私を助け出してくれた一冊。Flexbox と Grid Layout の章を読んだだけで元を取れた気がします。
タイトルや出版社からしてめちゃくちゃアカデミックな内容を想像していたんですが、全然違いました。一つ一つのプロパティ指定について丁寧に解説してくれるようなとても優しい本です。
出版日が2018年とけっこう新しいのも嬉しい。