更新(2023.7.18)
現在以下のシリーズを執筆中です。webpackでのReact開発環境構築を通じたコンパイル、バンドル、ビルドについての理解から、最新のビルドツールのviteの凄みまで扱おうと思っています。ぜひチェックお願いします。
更新(2023.6.28)
ReactのDockerローカル開発環境構築方法を同僚が執筆しました。HMR(Hot Module Replacement)もしっかり効いて開発者体験かなりいいので、以下チェックしていただいてハンズオン等進めていただけるといいかなと思います。
本編
TL;DR
- 色々あってよくわからないモダンフロントエンドまわりをキャッチアップするには、まずその歴史や背景から知っていこう
- 自分が学びたいことや、そもそもの学習目的を明確化すると学習教材選定が捗る
- 私は「React ハンズオントレーニング」と「りあクト!シリーズ」を学習素材として選択
前置き(エンジニアってさぁ・・・)
今年入社した新卒SEなのですが、エンジニアってマジで勉強しなきゃいけないことが多すぎないですか？
この３ヶ月、インフラとかバックエンドの技術を触らせてもらう機会が多くて、すごく勉強になる反面、思ったことがありまして。
「AWSサービスとかIaCとかって便利になってハッピーハッピーだけど、それって私もフロントエンドとか書ける時間ができちゃうってことだよね？最近のエンジニアさん、色々やろうとしすぎじゃない？？」
巷で言うフルスタックエンジニアってやつですね。もちろん大きい会社とかだと、それぞれ分かれてたりもするのでしょうが、私の場合あまり人数が多くいるチームではないので、現実問題みんながそれなりにそれぞれできた方がスムーズに開発が進みます。それに「外部リソースを借りる」ということがいかに難しいかということも、有難いことにこの数ヶ月で学ぶ機会がありました。
少し話が逸れてしまいました。
表題の「React 2023 最新 おすすめ 教材 と検索して疲弊しているあなた、もしくはサーバーサイドエンジニアの方へ」はまさに、こんな全部自分でやらなきゃいけないかもしれないエンジニアが、尊い尊いプライベートの時間を犠牲にしてまで勉強をするのだから、効率の良い勉強をしたいと考え「効率の良い勉強ってなんだ？」と悩んだ記録です。
Reactとかモダンフロントエンド周りの学習リソースや、ロードマップ探しに奮闘し、疲弊したそこのあなた(私)、「何ちゃらJS多すぎぃぃぃ!!!」と叫びたくなったことがあるあなた(私)。一度大量のタブやブックマークがあるウィンドウから離れて、この記事を読んでみてください。ちょっとこれからの学習のやり方とか、本当に効率の良い勉強方法ってなんだろう、と一緒に考えてみませんか？
対象読者
- 「私こそがモダンだ」と胸を張って言いたい人
- 効率的な勉強法やReact学習の道筋が知りたくてたまらない人
→「6.具体的に選定した学習教材」を見ればその場では解決するかもしれませんが、それは根本的な問題解決になっていないことをこの記事で書きます。 - プライベートの時間さえも技術のキャッチアップに費やす熱心な人(私とか)
1.膨大な学習リソースに圧倒される
そもそもなぜ、私やあなたは疲れるほどにロードマップや適切な教材探しに奔走してしまうのか？
その答えは明確です。
「出来るだけ効率的な学習をしたいから」
そこで私は考えるわけです。「最新で、かつ最初は概念の説明を受けながら、実際に書きながら学べるハンズオン形式がいいな!!(できればお財布に優しい...)」
もちろん、人の好みやその人のレベルによって適切な学習媒体は異なると思います。
いくつか選択肢があります。
- Udemyなどの動画教材
- Youtubeなどの動画教材
- 本
- 公式リファレンス
- ネット記事
ただ私はどうしようもないワガママなのか次のように思います。
-
Udemy
なんかバージョンも新しいものに対応してるものありそうだし、めっちゃ良さそう!!!けど、高すぎる。。。
例えば
・【2023年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript
・Modern React with Redux [2023 Update]
なんかは2023って書いてありますし、ハンズオン形式なので、良い感じそうです。でも、どちらもお値段1万円以上、すみません、却下です。(セールを狙えというのもありますが、私は必要だと思った時に買って勉強したいです。そんくらい払えという意見には、ぐう。。まだその勇気とお財布の余裕とやる気がありません。) -
Youtube、ネット記事、本
無料で良質そうなものが様々あります。
・Full Modern React Tutorial
とか
・「エンジニア1年生の自分に教えたいReact学習で重宝できる教材と記事まとめ」@KNR109
のように様々載せてくれているやつもあります。でも、私は最新2023がいいのです。使わなくなってたり、わざわざ不便で書かれなくなった方法を新しい方法を知らずに学ぶなんて、非効率極まりない!!
却下です。 -
リファレンス
ハンズオンとしては物足りなさを感じそうです。
もちろん重宝します、後々。
こうしてみると、とてもワガママですね。
2.ここまで色々調べるのに小一時間
様々な記事や教材を回ってみて、とても疲れました。お腹も空きました。それでも、どれも微妙に自分が求めてるものと違う気がします。小一時間あれば、Reactの基礎的な概念について学ぶことや、好きなアニメを2本観ることができたかもしれません。でもインターネット上のどこかに、そんな無駄に思えた時間も取り返すような、私が求めている条件を満たしつつ「2023最新の最も効率的な学びの道筋」があるはずです。
「本当でしょうか？」
おそらく、この世の中に「1コンテンツだけで2023最新の内容をほとんど拾え、かつお手頃な」という私のわがまま要件を満たすものはないような気がします。
そもそも私は何が嫌で、これまでみてきた素晴らしい教材の数々を退けていたのでしょうか？その答えはきっと、ここに集約されると思います。
「遠回りをしたくない。ど真ん中だけ手っ取り早く抑えたい」
というのも、特にここ最近のモダンフロントエンドの動きは、側から見ていてもめまぐるしいように思います。
「なんちゃらJSとかRe何とかとかがたくさんあるけれど、君たちいったいなんで存在しているのだね。」という疑問だらけです。
教材を様々やっていると「なんだよあのハンズオンでやったやつ今使われてねーじゃん」とか「バージョン違うから、最新にバージョン上げたら、書き方もよく使われるパッケージも全然違うし、というか動かん(動作保証されてないので当たり前)」みたいなことがあります。
何となくReactとかモダンフロントエンド周辺は、バージョンとか、流行り廃りを気にせずに迂闊に手を出すと、そういった事象に露骨に直面する気がして、嫌なのですね。
3.じゃあ先に全体(何がど真ん中か)を把握すれば?
そうです。最初からこうすればよかったのです。Reactが、各モダンフロントエンド周辺技術が一体どうして必要になったのか?またReact自体がどういった変遷を辿って、現在に至るのか。
この辺の話って、何だか使うかもわからないハンズオンを不安を抱きながらやってるよりも個人的によほど面白いですし「そういう変遷を辿って今がある」という知識は有難いことに廃れません。むしろ、新しく出た機能とかをキャッチアップする際に、有効に働いたりするものでしょう。温故知新というやつでしょうか。
そして、何より今回の1番の悩みの種であり、目的でもある学習素材選定の解像度も上がるのです。
4.具体的にどうするの？
まずGoogle先生(もしくは最近気になるあの娘)に「React 2023 最新 おすすめ 教材」ではなく「React 歴史 変遷」などと聞いてみましょう。すると様々な有識な方々が、Reactやモダンフロントエンドの変遷について語ってくれているものがあります。それをふむふむと読んで、理解した気になりましょう。
例えば自分は以下を参考にしました。
1.React で紐解くモダンフロントエンド開発の歴史と進歩/NRI Digital Blog
→モダンフロントエンド開発の潮流とその周辺ツールなどの登場人物をざっくり掴めます。
2.クックパッドモダンウェブフロントエンド勉強会資料/morisin
→特にReactに焦点が当たったモダンフロントエンド開発の潮流が知れます。なぜReactが求められ、さらにReactの現行機能のモチベーションはどこにあるのかを知れました。それと同時に、2022年にメジャーアップデートのあったReact 18の主要な追加仕様やそのモチベーションも語ってくれています。(私が求めていた最新...!!)
3.React今昔物語/ICS MEDIA
→React 18以前のバージョン変更に特に焦点を当てたもの。Reactが公開された2013年からクラスコンポーネント時代、関数コンポーネント時代、Hooks APIの登場と激動のReact史をリリースバージョンベースで垣間見ることができました。
4.React.js: The Documentaryで振り返るReact普及の歴史
→React関係者のインタビュー動画まとめ。React気に入ったら観ようかな。
5.How to Learn React in 2023/Reed Barger
→早い話、2023年にReact学ぶならこれは学んどけとか、逆にこれは別のでできるからそっちでやりなとか教えてくれました。1~3を読んだ上で読むと、情報の取捨選択の精度が上がると思います。
6.モダンフロントエンドデザインパターン 〜 優れたUXを実現するには〜/淡路 大輔 @gee0awa
→昨今のモダンフロントエンドにどういったレンダリング手法があって、それがどういった要求から生まれたのかを知ることができます。1~3の文献を読んだ上でスライドをみるとよりしっかりと理解できると思います。
色々ソースを書きましたが、これら全てを理解しろと言っているわけではないのです。
むしろ、しっかりと学習する前なので、具体的にどう書くのかも、Hooks APIとか関数コンポーネントの何が嬉しいのかも、この時点で完全に理解する必要はありません。感覚として「それ聞いたことある。あの人が何かこうだって言ってたよね」と日常で又聞きしたものをぼやっと喋れるくらいで問題ないと思っています。
5.全体がぼやっとわかったから何なの？
自分の目的に沿った学習コンテンツ選びの指標になります。
例
- 2023最新に固執していたが、どうやらひとまずReactのバージョン差異については、最低限2018年~の関数型コンポーネント、2019年〜のHooks APIまでを抑えたバージョンのコンテンツであればいいだろう
- 状態管理に使うReduxについてはそれなりにコンテンツとしてのボリュームがありそうなので、ひとまず無視してReact Context APIを学習する形でよさそうだ
- Next.jsについてはチームやプロジェクトが本格的にReactオンリーで動くことになりそうになってから学習で問題ないだろう(サーバーサイドレンダリングは後回し)
6.具体的に選定した学習教材
『Reactハンズオンラーニング 第2版』/オライリージャパン
オライリーの技術書は自分がPythonのやつを読んだ時に、例が分かりづらすぎて毛嫌いしていましたが、以下３つの理由より選出しました。
- 値段が5000円以下で、ハンズオン形式であること
- 最低限学びたい内容が全て載っていたこと
- 初版時最新(2021年)のエコシステムを考慮したコンテンツであること
『りあクト！ TypeScriptで始めるつらくないReact開発 シリーズ第4版』/くるみ割り書房 ft. React 大岡由佳さん
- 値段がトータル5000円以下で、内容を見る限りReactに限らずモダンフロントエンドに関わることや、実際の開発のTipsなどかなり広範囲に渡って学べて、辞書的に使えそうなこと
- オライリー本にはなかったReact 18を抑えつつ、TypeScriptによる記述をおこなっていること
- 著者の名前が推しと似ていること
→こういったBOOTHにある良質な著作とかってアフィ目的のおすすめブログみたいなものとかには絶対出てこないですし、自分もダン@HyperFormさん(@d0ne1s)の「Reactの学習、今からやるならこうする」を見て初めて知りました。手元に置いてモダンフロントエンド開発のお供にすることを強くお勧めします。
本来やりたいことって「一度やると決めたコンテンツを集中して、脇目を振らず取り組むこと」だと思います。でも、その選んだコンテンツの選定理由が曖昧だと、「やっぱり、Udemyのあの教材の方が評価が良いのだし、あっちにしようかな」とか、一通り学び終わった後「他のやつもやった方がいいかな…」とか思ってしまうかもしれません。
また、こうして改めて全体を知ったつもりになって俯瞰した上で、自分が眺めてきたコンテンツを見ると、最新の状況に追いつくという点では不適切だと思われる講座や、過剰なものが多いことに驚きます。2023最新が必ずしも自分が求めてる最新でない場合もありました。(もちろんそういった知識自体が無駄だと言っているわけではなく、今回の自分の目的に合わないという意味合いです。また、あくまで本学習前なので、「実際学習を始めてみたら必要だった」ということもあると思います。)
7. 元の自分は何が良くなかったのか整理する
- 「分かってから始めたい病患者」という自覚がありながら、自分が何を把握すれば前に進めるのかを知ろうとせずに、目的や学習コンテンツ選びの解像度が低いまま、インターネットの海を彷徨っていた
この様な状況をまずいと捉え、今回本学習前に以下のようなプロセスを踏みました。
- Reactやモダンフロントエンドって何だ？というところから始まり、その周辺を見渡すことで、それがどうやら度重なるデファクトスタンダードの変更と複雑なエコシステムで構成されているらしいということを理解(メタ的な把握)
- 集めた情報と現在の学習目的から、学習項目の優先順位の決定
- 実際にその優先順位と照らし合わせて、それに敵う学習コンテンツの選定
まず最初にReactやモダンフロントエンドって何だ？というところから始まり、それがどうやら度重なるデファクトスタンダードの変更と複雑なエコシステムで構成されているらしいということを理解しました。そうすることで、あくまで「効率的に最新やベスプラをキャッチしたい」という目的に対して、有効だと思われるコンテンツ選定をすることができ、自分の学んでいる内容が、少なくとも現段階では廃れた技術である心配をせずに(若しくは廃れているということを自覚して)、安心して選択した教材に取り組むことができます。
大事なことは、巷で何となく言われている優良教材や講座を見つけ出すことではなく、自分の目的に合った教材選びをすることです。例えば目的が「効率的に学びたい」のであれば、今回のように自分が最低限学ぶべきポイントがどこかを見定めて、それを充足するコンテンツを選択し、あとは脇目も振らずしっかりとやりきり、さっさと現場で使うということが重要になります。また、特定の機能について学びたいといった場合や、単純な興味関心で学んでみたい、など目的とその対象は様々あると思いますので、その時々にあったやり方を選択するといいと思います。
8.LPR(Learning Process Re-engineering)のススメ
この記事を書いたきっかけとして、Reactとかモダンフロントエンドの学習を始める際に以下の様なことを考えた経緯があります。
「エンジニアが割とフルスタックであることを求められる時代に、私は多くの技術を学ばなければいけない。でも、それは基本的には昔の技術者がインフラとかバックエンドとかフロントエンドとか専門領域を持ってやられていたことで、その人たちと同じクオリティに達するには、普通に考えてその人たち分の努力と時間が必要だよな。きっと今の時代、インターネットを駆使すれば良質な学習コンテンツは溢れているけれど、それを自分は本当に使いこなせているのだろうか。今の自分の学習スピードで本当の意味でのフルスタックを達成できるのはいつなのだろうか。一度自分の学習プロセスを見直さなければいけないのではないか。」
本章のタイトルにある「LPR(Learning Process Re-engineering)」は私が作った造語です。おそらく優秀なエンジニアさんは、Reactの学習に限らず新しいことを学ぶときに、無意識のうちにこういった学習コンテンツ選びができているのでしょうが、少なくとも私のようなひよっこの新卒は「良さげな」コンテンツにただ飛びつくのではなく、目的に応じて自らの学習プロセスを意識的に再構築する必要があると思うのです。
長くなりましたが、風邪予防にてうが(手洗いうがい)とLPR!!
一緒にモダンフロントエンド勉強がんばりましょう。
参考(敬略)
- 【2023年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript/【CodeMafia】 WEBプログラミング学習
- Modern React with Redux [2023 Update]/Stephen Grider
- 「エンジニア1年生の自分に教えたいReact学習で重宝できる教材と記事まとめ」/KNR(@KNR109)
- Full Modern React Tutorial
- React で紐解くモダンフロントエンド開発の歴史と進歩/NRI Digital Blog
- クックパッドモダンウェブフロントエンド勉強会資料/morisin
- React今昔物語/ICS MEDIA
- React.js: The Documentaryで振り返るReact普及の歴史/laiso
- How to Learn React in 2023/Reed Barger
- モダンフロントエンドデザインパターン 〜 優れたUXを実現するには 〜/淡路 大輔
- Reactハンズオンラーニング 第2版/著:Alex Banks、Eve Porcello 訳:宮崎 空
- りあクト！ TypeScriptで始めるつらくないReact開発 第4版【① 言語・環境編】/大岡由佳
- Reactの学習、今からやるならこうする/ダン@HyperForm(@d0ne1s)
-
React公式リファレンス
→最近大幅な更新(2023.6.11現在翻訳中)が入ったようで、クラス型コンポーネントを前提としたものを無くし、関数型コンポーネントでHooksを利用する想定のドキュメントにリニューアルしているようです。慣れてきたら公式は常に最高のパートナーになるので、重宝しましょう。