フロントエンド日記

検索フォーム

フリーワード検索
カテゴリー検索

【初心者向け】React勉強法!Next.jsでブログを作るまでのロードマップ

みなさんこんにちは。

iPhone15 pro maxをゲットしてノリノリなコーギーです。

今回のテーマはReactの勉強法!

まだまだ未熟ですが、Next.jsでブログサイトを制作できるようになったこれまでの学習をまとめていきたいと思います。

Reactを学ぶメリット

Reactは非常に人気のあるライブラリで、日本だけでなく、世界の多くの企業やプロジェクトで使用されています。

Reactを使いこなすことができれば、webサイトからアプリケーションまで、様々な分野で活躍することが可能です。

また、近年のサイト表示速度高速化の観点から見ても、どんどんReactの需要が伸びていくと考えられます。

フロントエンドエンジニアであれば、ぜひ使いこないておきたいライブラリとなっています!

Reactを学ぶ前に

Reactを学ぶ前に、JavaScriptの学習を進めることをオススメします。

よく使うJavaScriptの構文として、

  • アロー関数
  • スプレッド構文
  • map

といった、比較的新しい記述が出てきます。

これらで書かれたコードの意味が全くわからない...。という方は、先にJavaScriptの学習を始めた方が効率よくReactを学べると思います。

私もこれらの構文がわからなかったので、下記のUdemy2本を購入して、まずJavaScriptを学び直しました。

【初心者の方にオススメ】

Udemy講座:【JavaScript&CSS】ガチで学びたい人のためのWEB開発実践入門(フロントエンド編)

【中級者の方にオススメ】

Udemy講座:【JS】ガチで学びたい人のためのJavaScriptメカニズム

Udemyの講座は、普段では値段が結構しますが、月に2~3度はセールを行なってくれます。

セール中は、講座が2,000円台になるので、セールを待つのがオススメです!

はじめの一歩

はじめてReactに触れたのは、公式ドキュメントの⚪︎×ゲームでした。

英語で書かれていますが、とりあえずコードをコピー&ペーストして動かしてみて、感覚を養いました。

一通りコードを写し終えてもよくわからなかったので、次はUdemyで初心者向けの講座を購入しました。

Udemy講座:モダンJavaScriptの基礎から始める挫折しないためのReact入門

こちらの講座は、初めてReactを触るユーザー向けに解説してくれているので、かなりわかりやすかったです!

JavaScriptの基本から初めて、Reactの全体像をざっくり掴めるので、ぜひ購入することをオススメします。

もっとReactを知る

徐々にReactの特徴がつかめてきたので、より深く、できることを増やしたいと思い書籍をいくつか購入しました。

いくつか購入しましたが、よかった2冊を紹介します。

こちらはReactのフレームワークであるNext.jsについて書かれた本です。

JavaScriptの基本に触れつつ、React,Next.jsについて解説してくれています。

実際に、Notionをつかってブログを作ってみたり、webアプリを作ってみたりと、ハンズオン形式で手を動かしながらReact,Next.jsを理解していけるのがよかったです。

そこまで分厚い本ではないので、一読してみるもの良いかと思います。

次に、React,Next.jsを学ぶすべての方に読んでいただきたいのが、下記の本です。

こちらは、マイナビさんの本です。

マイナビさんの本は、いつも丁寧な解説でわかりやすいので、この本に限らず全ての本がとてもオススメです。

内容は、Next.jsとmicrocmsというヘッドレスCMSでブログを作るという内容ですが、わたしはこの1冊でReactの基礎を学んだといっても過言ではありません。

webサイトを作る上で必要な情報は全て網羅されております。

わたしは、1回目でまず内容を読み、2回目で実際に手を動かしながらハンズオン形式で実践してみました。

一度内容を流し読みし、次に手を動かすことで理解がさらに深まって、とてもよかったです。

Next.jsは、アップデートでApp Routerという従来とは異なる新しい仕様が追加されましたが、こちらもgithubで最新の仕様に対応しており、基礎から応用まで幅広く本書で学べます。

この2冊を読めば、React使えます。Next.js使えますといっても良いのではないでしょうか!

初心者から脱却する

今までの内容で少し自信がついてきましたが、もっと自由に使いこなしたいと思い、Udemyでさらに講座を追加購入しました。

Udemy講座:【2023年最新】React(v18)完全入門ガイド|Hooks、Next.js、Redux、TypeScript

こちらは、React最新バージョンの18を一から十まで学べるかなり濃い講座となっています。

独習JavaScriptの著者でもあるCode Mafiaさんの講座で、基礎から応用まで、とことんReactを学ぶことができます。

全24時間の講座になっており、これを全て理解できれば、もうあなたはReactマスターです。

ちなみにわたしはこちらの講座を2周しましたが、チンプンカンプンなところがいくつかあります...。

ここまでくれば、立派なReacter(造語です)となっていることでしょう!!

まとめ

いかがでしたでしょうか?

私が実際に歩んできたReact勉強のための道のりをご紹介しました。

モダンな技術を学びたい。どうせなら人気のある廃れにくい技術を学びたいと思い、Reactを学んでみました。

まだまだ未熟ですが、どんどん知識を吸収して、いいものを作っていきたいと思います!

ぜひ、参考にしていただけたら幸いですし、同じ勉強を頑張っている方と仲良くなれたらなと思います!

みんなで頑張りましょう!

おまけ

2023年9月27日に発売された最新の本をご紹介します!

最新のReact18や、Next.jsのApp Routerにも対応している本です。

なかなか動画が苦手だなと感じている方や、わたしのように勉強は紙の本がやる気がでる!という方にオススメです。

分厚い本ですが、その分丁寧に、JavaScriptの基本から解説されています。

最新の技術にも対応したいという方は、ぜひ購入してみてください!