【初心者向け】React / Next.jsの勉強方法と手順を紹介！

これからReact / Next.jsの勉強をする方は、何を使ってどんな勉強をすれば良いか迷う方も多いと思います。

勉強方法を間違えると、遠回りになってしまう可能性もあるので、勉強方法や手順を知ることは重要です。

この記事では、何を使ってReact / Next.jsの基礎を勉強すれば良いかにフォーカスを当てて解説します。

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 基礎学習後に何をしたら良いかわからない...
• 自分のコードやデザインが正しいかわからない...
• 転職や副業・フリーランスのアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターやってます 👆

【注意】React / Next.jsの勉強は最新の情報でしよう！

React / Next.jsのようなモダンなライブラリやフレームワークは、活発に更新されています。『せっかく勉強したのに、古い情報だった…』なんてことがないように、情報の鮮度には注意する必要があります。

Reactは、2019年の2月に追加されたReact Hooksにより、関数コンポーネントが主流になり、実装方法が大きく変わりました。関数コンポーネントではなく、クラスコンポーネントで解説されている教材は避けた方が良いです。

Next.jsは、React以上に活発に更新があります。最近導入されたApp Routerに対応している教材は、かなり少ないです。難しく感じるかもしれませんが、公式ドキュメントや公式チュートリアルで勉強するのが、1番ではあります。

React / Next.jsの勉強方法4選

下記の4つの方法を紹介します。

• 公式チュートリアルで学ぶ
• 書籍で学ぶ
• webの教材で学ぶ
• メンターを利用する

公式チュートリアルで学ぶ

• Reactのチュートリアル
• Next.jsのチュートリアル

情報の正確性では、公式ドキュメント / チュートリアルに勝るものはありません。ただし、初心者向けではないので、難しいと感じるかもしれません。

書籍で学ぶ

書籍は情報が古い場合もありますが、体系的に学べる点ではとても良いです。入門書から始めれば、公式ドキュメント / チュートリアルより、分かりやすいはずです。

詳しくは、下記の記事で紹介しています。

【注意点あり】React / Next.jsの勉強本おすすめ8選！

webの教材で学ぶ

YouTubeやUdemyで教材を出している方がいるので、それらを活用するのも良いでしょう。動画の方が流れがわかりやすいので、より初心者に優しいです。

メンターを利用する

メンターを使えば、数万円/月で学習サポートしてくれます。

私たちも、模写修行や当メディア運営メンバーを中心に、現役エンジニアによるメンタリングサービスHello Mentorをやっています。

下記の画像のように、1人1人ロードマップを組んで、最短でゴールを目指せるようにサポートしています。

ただ質問に答えるだけでなく、こまめに連絡をとりながら、次にやるべきことを指示して進めるのが特徴です。

初学者だけでなく、中級者にも対抗できる、数少ない学習支援サービスです。少しでも気になる方は、ぜひ下記のリンクから個別説明会へお越しください。

React / Next.jsの勉強手順

React / Next.jsの勉強は下記の順番で進めると良いです。

1. HTML・CSSの勉強
2. JavaScriptの勉強
3. React / Next.js / TypeScriptの勉強
4. React / Next.jsを使ったアプリケーションを作ってみる
5. ポートフォリオ制作
6. ポートフォリオサイト制作(必須ではない)

HTML・CSSとJavaScriptの勉強に関しては、下記の記事も参考にしてみてください。

【2024年版】web制作の独学に使える学習サイト15選！ JavaScriptの勉強ができるおすすめの本やサイト紹介！

ポートフォリオ / ポートフォリオサイト制作に関しては、下記の記事を参考にしてみてください。

React / Next.jsで作るポートフォリオの例やポイントを紹介！

『Reactを使ったサイトやアプリケーションを作ってみる』では、ReactとNext.jsを使って、例えば下記のようなものを作ってみると良いです。

• microCMSを使った爆速なブログを作ってみる
• firebaseでリアルタイムチャットを作ってみる
• firebaseでお問い合わせフォームを作ってみる

これらはHello Mentorで出している課題です。Hello Mentorでは、下記の流れで課題にチャレンジしてもらっています。

1. 仕様を伝えて自分の力で作ってもらう
2. 提出してもらいコードレビュー
3. 修正&解答となるコードを渡す

プログラミング学習では、『作る→コードレビュー→解答でプロの書き方を学ぶ→作る…』このサイクルをたくさん回すのが重要です。

独学に限界を感じていませんか？