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

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

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

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

私たちが運営しているHello Mentorでは、実務で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の勉強本おすすめ6選！

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. ポートフォリオサイト制作(必須ではない)

この記事では、React / Next.jsの勉強方法を紹介しました。HTML・CSSとJavaScriptの勉強に関しては、下記の記事も参考にしてみてください。

web制作の学習サイト15選！独学向け・無料あり！ 【無料あり】JavaScriptの勉強ができるおすすめの本やサイト紹介！

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

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

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

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

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

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

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

最新情報でReact / Next.jsの勉強をしたいならメンターの活用がおすすめ！

私たちが運営しているHello Mentorは、メンター全員が今も現役のエンジニアです。フロントエンドエンジニアで、React / Next.jsを教えられるメンバーがいます。

最新の情報をキャッチアップしているので、適切なアドバイスができます。

プログラミングは独学可能ですが、プロのサポートがあれば、効率的かつ安心して学習ができます。

厳しい時代も生き残れるエンジニア/デザイナーになりたい方は、まずは無料相談にお越しください。(強引な営業等、一切ありません！)