これから React を学びたい！実務で React を使えるようになりたい！という人のために、React を使いこなせるようになるまでの道筋を教えます。 ネットで検索すると Amazon 書籍を適当に人気順に並べた記事が出てきますが、この記事は筆者自身が実際に買って、読んで、手を動かして、何を学べたかの経験を紹介しています。
JavaScript に慣れていない人を想定して、ゼロから React を使いこなすまでの手順を紹介します。
決して楽な道ではないですし、「これだけやれば全部 OK」というわけではないですが、道標にはなります。
JavaScript Primer で JavaScript の基礎を身につける
まずは JavaScript の勉強をします。JavaScript の知識なくして React は学べません。 モダンな JavaScript に自信がない人は、まずは JavaScript Primer から読んでください。
『JavaScript Primer』は JavaScript のバイブル的な本です。手元に置いて、辞書的に何度も見返す類の本になるでしょう。 この本の利点は、読めば JavaScript の仕様を一通り押さえられる点にあります。
最初は手を動かしながら読んでください。
大学受験に例えるなら黄チャートのような存在です。まず一通り押さえておきたいレベルの本です。 逆に言えば、JavaScript の基礎については JavaScript Primer 以外は必要ありません。
ウェブでも一通り学べますが、個人的には書籍をおすすめしたいです。
Amazon→JavaScript Primer 迷わないための入門書
JavaScript Primer の欠点をあえて挙げるなら、作りが辞書的で、やり切るのに体力と気力が必要な点です。 手を動かしながら勉強すると、かなり時間がかかるでしょう。ですが、やる価値は十分にあります。
JavaScript Primer を学んだ内容を記憶と理解の取っ掛かりにして、実開発では MDN Web Docs を使いながら JavaScript を書いていくことになるでしょう。
プロを目指す人のための TypeScript 入門
JavaScript の基礎を一通り学んだ後は、『プロを目指す人のための TypeScript 入門』を読みます。 現代の Web フロントエンド開発で、素の JavaScript を使っている会社はほとんどありません。
基本的には TypeScript を使います。型の補助なしで大規模開発するのは辛すぎるからです。
「プロジェクトで使うのは基本的に TypeScript です」と書くと、初心者の方は「JavaScript を勉強しても無駄になるの？」と思ってしまうかもしれませんが、全く無駄になりません。
TypeScript は JavaScript の上位互換で、JavaScript の機能は基本的にすべて使えます。TypeScript の静的型付け以外の部分は JavaScript そのものです。
さて、 TypeScript に入門するなら、プロを目指す人のための TypeScript 入門一択です。 これ以上の本はありません。今後 2、3 年は『プロを目指す人のための TypeScript 入門』以上の本が出てくることもないでしょう。最高の入門書です。
ただ TypeScript の機能を羅列するだけでなく、「なぜ」を深堀りして説明してくれるので、理解が飛躍的に高まります。 随所に「筆者はこう考える」という経験豊富な筆者の視点も紹介されていて、自分がコードレビューするときによく思い出します。
実践につながる良書です。必読です。絶対に購入して、手元に置いて 3 回は読んでください。
Amazon→プロを目指す人のための TypeScript 入門
基礎から学ぶ React/React Hooks で React を使ってみる
JavaScript と TypeScript の基礎を学んだ後、「React を基礎から学びながら、何か作ってみるか」という人におすすめの本です。 説明がわかりやすいので、躓くことなく読み終えることができます。
上の手順では JavaScript を教科書的に学んできました。
ここまでの過程で身につけた知識を『基礎から学ぶ React/React Hooks』で実践につながる形で復習できるのもグッドです。
近年の React は React Hooks を使って当たり前になっていますが、『基礎から学ぶ React/React Hooks』はタイトルにもあるように、React Hooks にも対応しています。
最終的にはよくある TODO アプリを作るのですが、ありきたりながらも、基礎が詰まっていると言えるでしょう。
最後に Chakra UI でデザインを今風にする点も Good です。
よくある UI を無視して「とりあえず React 動けばいいやろ」的な本だと、実践につながるイメージが湧きづらいですよね。
安心して『基礎から学ぶ React/React Hooks』をやりましょう。
Udemy で React を学ぶためのおすすめコース！ React & TypeScript Chrome Extension Development
ここまで来たら、実際に自分でアプリケーションを作ってリリースしてみましょう。 基礎を勉強してから、実際に自分で考えて作ってみて、また基礎に戻る...というのを繰り返すのが、プログラミングの上達のコツです。
自分でググりながら試行錯誤しているときが一番、プログラミング力が伸びています。
さて、では何をリリースするのがいいかというと、Chrome 拡張を TypeScript と React で作りましょう。
以下の Udemy が非常に役に立ちます。
→React & TypeScript Chrome Extension Development [2022]
React + TypeScript で Chrome 拡張を作ろう、という趣旨の動画コースで、価格も Udemy の中では安めです。
Webpack を使ってビルドしているので、Webpack の仕組みもなんとなくわかるようになります。
- Chrome 拡張でタイマーを作ってみる
- 天気予報の API を叩いて Chrome 拡張に天気予報を表示する
- 広告ブロッカーを作る
など、実践的な内容です。広告ブロッカーは Chrome の API を使えば簡単に実現できます。
Chrome 拡張は Chrome Web Store へのリリースも簡単にできるので、ポートフォリオにはもってこいです。
「こんなものを作ってリリースしました！」とアピールしやすいです。また、便利ツールも簡単に作れるので、実務でチームメンバーのために何かサクッと作ってあげるのも良いでしょう。
非常に有用な動画でした。
ここまで勉強して、まずは 1〜2 個、Chrome 拡張を React + TypeScript で作ってしまいましょう。 勉強したからといって、自分でゼロから作るときにサクサクと作れるわけではありません。
都度、検索しながら、迷いながら作っていくことになります。 それでも基礎はできているので、「何を調べながら作ればいいかさっぱりわからない」という状態ではないはずです。
なので、1〜2 個作ってリリースして、成功体験を積んでみてください。
りあクト！ TypeScript で始めるつらくない React 開発 第 3.1 版
さて、2022 年時点では React 界で最も有名な書籍といっても過言ではないでしょう。 師匠と弟子の会話形式で進んでいくチュートリアルです。
同人誌だからといって馬鹿にしてはいけません。他の書籍よりもずっとずっと、深いところまで突っ込んで解説してくれます。 踏み込んだ解説は会話形式だからこそと言えるでしょう。
大学入試に例えると、「面白いほどわかる本」シリーズに似ています。「面白いほどわかる本」で目が覚めるような思いをした経験がある人は、間違いなく『りあクト！ 』と相性が良いです。
3 分冊ですが、全部買ったほうがいいです。私達の React のレベルを大きく引き上げてくれる超絶良書です。
りあクト！ TypeScript で始めるつらくない React 開発 第 3.1 版【Ⅰ. 言語・環境編
Real-World Next.js
ここまでの学習で React に関しては自信が持てるようになったと思います。
次は Next.js の勉強をしましょう。React のサーバーサイドレンダリングや Static Generate をより手軽に実現できるようになります。
それ以外にも以下のようなメリットがあります。
- webpack や babel といったフロントエンドのビルド環境をフレームワーク側で内包
- ファイルシステムを利用した手軽なルーティング機能
- TypeScript のビルトインサポート
- CSS Modules や数々の CSS in JS のビルトインサポート
- 数々のパフォーマンス最適化
さて、Next.js を学びたい場合は、まずはVercel の Next.js チュートリアルでブログサイトを作るところから始めます。
次に『Real-World Next.js』を写経し始めます。
この本では Next.js でのアプリケーション開発の勘所を押さえられるだけでなく、E2E テストや認証、Docker を使ったデプロイまで学べます。 1 冊やりきれば、あとは公式のドキュメントや Stackoverflow などで検索しながら作りたいものが作れるようになるはずです。
Amazon→Real-World Next.js
Amazon のリンクを見て、「おいおい、英語の本かよ」と思った人もいるかもしれません。 ですが、『Real-World Next.js』は非常に簡単な英語で書かれているのでものすごく読みやすいです。
また、開発中はどちらにしても英語で検索して、英語でドキュメントを読むことになります。 英語は避けては通れないので、どうせなら DUO 3.0 を読むよりも技術書を読んで英語も一緒に勉強しましょう。
Kindle で買えば PC 上で DeepL で翻訳もできます。
Next.js を一通り学んだら、自分の技術ブログを Next.js で作ってみて、Vercel か Cloudflare にデプロイしましょう。 作ったブログに独自ドメインを設定すれば、面接で話せるポートフォリオにもなります。
React Hooks in Action
React Hooks について本格的に学んでおきましょう。 ここまで勉強して経験を積んできても、まだ Hooks については学び足りていないはずです。
React Hooks を本格的に、しっかり理解したい人には『React Hooks in Action』がおすすめです。
サンプルも実用的です。
ホテルの予約サイトを作りながら、React Hooks の機能を一通り触っていけるようになっています。
useState や useEffect は割と習熟しやすいのですが、useMemo、useReducer、useCallback などもしっかり学んでいくにはこの本をやるのが一番です。
日本語ではこのレベルの本はまだ出ていません。
Simplifying JavaScript
現場で開発していると、「関数型でシンプルに書け」とコードレビューで指摘されるかもしれません。 シンプルに JavaScript を書きたい人には『Simplifying JavaScript』を一通り読んでほしいです。
現場で求められるレベルは『Simplifying JavaScript』で書かれているレベルの内容です。 関数を組み合わせて、シンプルに機能を作っていってください。
Amazon→Simplifying JavaScript
ここまでやっておけば、React + TypeScript を使って開発する会社での面接は間違いなく突破できます。 現場でもすぐに戦力になるでしょう。現場のコードもすぐに理解できるようになっているはずです。
まずはこの記事で書かれた書籍を半年〜1 年くらいの期間でやりきることを目標にしてください。 同時にポートフォリオを作っていけば、フロントエンドエンジニアとして現場に参画できます。
React を使っているテック企業
SNS ではエンジニアの年収がたびたび話題になります。 年収 1000 万を超えてくるメガベンチャーでも React は使われています。
たとえば、以下のような企業で React が使われています。
- LINE
- エムスリー
- SmartHR
- ユーザベース
- DeNA
- ZOZO
- CyberAgent
- メルカリ
- dinii
React の経験を積んで、メガベンチャーでフロントエンドの求人が出ていたら、すかさず応募しましょう。
現在、SIer などにいて「IT 系だけどコーディング経験はそんなにない」という人は、この記事に書いてあるような本を一通り読んでおいて、自分でいくつかポートフォリオを作ってから、ソフトウェアエンジニアに応募するのが良いのではないでしょうか。
私は最初の転職のとき、マイナビエージェントのリクルーターにとてもお世話になりました。エンジニアをやりたい人は一度相談してみてください。
React を使える企業に転職したいと感じたなら、以下の記事もおすすめです。
【IT・WEB エンジニア向け】おすすめ転職サイト｜各サイトのメリット・デメリットを年収 1000 万超の現役エンジニアが徹底解説