これから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の教材で学ぶ
- メンターを利用する
公式チュートリアルで学ぶ
情報の正確性では、公式ドキュメント / チュートリアルに勝るものはありません。ただし、初心者向けではないので、難しいと感じるかもしれません。
- 既に他の言語を書ける方
- 英語に抵抗がない方
- 多少難しくても頑張れる方
まずは、やってみて、難しいようであれば書籍やwebの教材で学んでも良いと思います！
書籍で学ぶ
書籍は情報が古い場合もありますが、体系的に学べる点ではとても良いです。入門書から始めれば、公式ドキュメント / チュートリアルより、分かりやすいはずです。
詳しくは、下記の記事で紹介しています。
【注意点あり】React / Next.jsの勉強本おすすめ8選！webの教材で学ぶ
YouTubeやUdemyで教材を出している方がいるので、それらを活用するのも良いでしょう。動画の方が流れがわかりやすいので、より初心者に優しいです。
メンターを利用する
メンターを使えば、数万円/月で学習サポートしてくれます。
私たちも、模写修行や当メディア運営メンバーを中心に、現役エンジニアによるメンタリングサービスHello Mentorをやっています。
下記の画像のように、1人1人ロードマップを組んで、最短でゴールを目指せるようにサポートしています。
ただ質問に答えるだけでなく、こまめに連絡をとりながら、次にやるべきことを指示して進めるのが特徴です。
初学者だけでなく、中級者にも対抗できる、数少ない学習支援サービスです。少しでも気になる方は、ぜひ下記のリンクから個別説明会へお越しください。
React / Next.jsの勉強手順
React / Next.jsの勉強は下記の順番で進めると良いです。
- HTML・CSSの勉強
- JavaScriptの勉強
- React / Next.js / TypeScriptの勉強
- React / Next.jsを使ったアプリケーションを作ってみる
- ポートフォリオ制作
- ポートフォリオサイト制作(必須ではない)
HTML・CSSとJavaScriptの勉強に関しては、下記の記事も参考にしてみてください。
【2024年版】web制作の独学に使える学習サイト15選！ JavaScriptの勉強ができるおすすめの本やサイト紹介！ポートフォリオ / ポートフォリオサイト制作に関しては、下記の記事を参考にしてみてください。
React / Next.jsで作るポートフォリオの例やポイントを紹介！『Reactを使ったサイトやアプリケーションを作ってみる』では、ReactとNext.jsを使って、例えば下記のようなものを作ってみると良いです。
- microCMSを使った爆速なブログを作ってみる
- firebaseでリアルタイムチャットを作ってみる
- firebaseでお問い合わせフォームを作ってみる
これらはHello Mentorで出している課題です。Hello Mentorでは、下記の流れで課題にチャレンジしてもらっています。
- 仕様を伝えて自分の力で作ってもらう
- 提出してもらいコードレビュー
- 修正&解答となるコードを渡す
プログラミング学習では、『作る→コードレビュー→解答でプロの書き方を学ぶ→作る…』このサイクルをたくさん回すのが重要です。
基礎学習後は、とにかくたくさん作るのが、唯一の近道です！
独学に限界を感じていませんか？
模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。
👇 こんな方のためのサービスです。
- 独学に限界を感じている...
- 何をどこまで勉強すれば良いかわからない...
- 自分の書き方が正しいかわからない...
- 検索しても解決しない問題が多い...
- 転職や副業のアドバイスが欲しい...
メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。
高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。
少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません！)
この記事を書いた人
Gaku / @gaku92014091
フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます！webサービスを作るのが好き！
当メディア運営メンバーでメンターやってます！👉
詳しく見る
0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています！