俺のReact(Next.js)学習法は間違っている！！
この記事は「つながる勉強会 Advent Calendar 2022」の 23日目の記事です。
前日の記事はこちら
「独学エンジニアの課題として、ログ解析システムを作った。 - Step3. データのインポート」
記載されたやまてさんとはプライベートでも仲良くさせていただいてますが、アウトプットは量も質もヤバイです。
つながる勉強会 Advent Calendar 2022でも一人で3記事投稿されていますが、なんとさらに一人でアドベントカレンダー25記事の完走にも挑戦されています。
「完走賞をとって Qiitan を自分にクリスマスプレゼントする Advent Calendar 2022」
間違いなく変態です。（良い意味で）
この記事では、フロントエンドの経験がほとんどない私がReactとNext.jsを学習するにあたって参考にしている教材や、つながる勉強会の運営の皆様から教えていただいた教材について紹介していきます。
ReactやNext.jsの学習を始めたいけど何から始めればいいかわからない方やおすすめの教材を探している方の参考になるかと思います。
私自身まだしっかり見れていないものもあるので、実際にやってみた感想などは随時更新していきます。
「お前らの〇〇は間違っている！！」みたいなタイトルを見かけることがあるのでそれを自虐的にしたタイトルにしてみましたが、これから紹介する学習法はとてもオススメで間違ってはないと思います。笑
間違いかけていた私の学習法を正していただいたので少しですが共有しようと思います！！
おすすめの教材
モダンJavaScriptの基礎から始める挫折しないためのReact入門
こちらはUdemyで人気のReactの入門コースです。
まずはJavaScriptの基本的なところからハンズオンで始まるので、フロントエンドに自信がない方でも始めやすい内容になっています。
CodeSandboxというオンラインエディタを使用するのですが、環境構築が不要なのでつまずくことなく簡単にReactの学習を始めることができます。
JavaScriptの基礎を一通り学んだ後は、素のJavaScriptで簡単なTodoアプリを作成します。
その後Reactの基本的なところを学び、同じTodoリストをReactで作成します。
JavaScriptとの違いを体験することで、Reactの良さを感じることができます。
説明がとてもわかりやすく、講師の方の人の良さが滲み出ていました。
動画内容とは関係ないですが、動画学習を効率的に進めるためにこちらの記事が参考になりました。
りあクト！ TypeScriptで始めるつらくないReact開発
こちらはりょーたさんに紹介していただいた書籍です。
まだほとんど読めてないのですが、JavaScriptの基礎や歴史からがっつり書かれている印象です。
デキる先輩エンジニアに教わる対話形式で構成されているので、内容に入り込んで学習できそうです。
全3巻構成です。
Next jsで学ぶReact講座
こちらはユウトさんに紹介していただいたYouTube動画です。
Next.jsを使うことでReactの構文以外のところでつまずかないように、効率よくReactを習得することができます。
同時にNext.jsにも触れていけるので個人的にとてもタイムリーな内容です。
そしてYouTubeなのでこのクオリティの動画が無料というのもありがたいです。
Next.js 公式チュートリアル
こちらはゆーたろーさんにおすすめしていただきました。
全部英語なので正直おすすめされていなければやっていなかったと思いますが、とてもわかりやすかったです。
英語は翻訳ツールのDeepLを使用することで問題なく進めることができました。
Reactの基本的なところもチュートリアルに含まれているのでReact初心者にも優しいチュートリアルでした。
完走するとこんな感じのWebサイトを作成してデプロイまでできます。
やってみた感想としては、「Next.jsめちゃくちゃ便利！！」です。
ぽちぽちやってると良い感じにできていくので感動します。
そしてVercelを使用して簡単に無料でデプロイできてしまいます。
簡単すぎて「本当にデプロイできてるの？」と感じます。
しかも修正してGitHubにプッシュするだけで自動で反映されます。すごい！！
簡単にできる反面、Reactの知識が少なすぎてしっかり定着していないなと感じたのでReactの基礎をしっかり学ぼうと思いました。
ReactとNext.jsの学習を始めた経緯
なぜReactとNext.jsを学び始めたかというと、このアドベントカレンダーの主催でもあり、いつもお世話になっているつながる勉強会がきっかけでした。
勉強会に参加するとSlackに招待していただけるのですが、そこで主催者のりょーたさんが
「アプリを作るので誰かお手伝いしていただける方いませんかー？？」
という投稿をされていました。
とても興味があったので
「邪魔すると思いますがぜひやってみたいです！」
という形で参加させていただけることになりました。
そこでNext.jsを使って開発するということだったので、過去に作成されているアプリのコードを見てみたのですが
「全く読めない…」
となりました。
結果的に邪魔すらできない状況になってしまったので、まずはNext.jsをキャッチアップしていくということで学習を始めました。
Next.jsの公式チュートリアルをやってみると
「いや、まずReactやん」
ということで現在に至ります。
当面の目標はつながる勉強会の共同開発に参加して邪魔できる状況になることです！笑
メガベンチャーに勤務されるレベルの方々と共同開発が経験できるようなので、つながる勉強会めちゃくちゃおすすめです！！
関西にお住まいの方はもちろん、遠方の方でも勉強会に参加される価値があると思います。
未経験の方でも参加しやすい勉強会です。
最後に
リリース前で時間が取れない中、アドベントカレンダーに追われながらこのブログを書いたので、まとまりのない内容になってしまったかもしれませんがReactやNext.jsの学習を始める方の参考になれば幸いです。
明日はShumaさんが「クリスマスイブのインフラエンジニア」について書かれるそうなのでとても楽しみです！！
