LoginSignup
2
2

【ぜ~んぶ無料!】React/Next.jsの最強教材たちを紹介するぜ

Last updated at Posted at 2024-06-13

はじめに

今回は特に説明などはないのですが、めっちゃくちゃわかりやすくしかもすべて無料で利用できますので、是非、共有したいなと思って書きました。

初学者の頃はどうしても英語のドキュメントを読むのが苦手だと思いますので、是非、活用して欲しい教材たちです。

その1 Next.jsの公式ドキュメント日本語版

メチャクチャわかりやすいから共有したい。
こちらはNextの基礎となるApp Routerの仕組みを解説しながら、Reactの最新機能を使ってアプリケーションを構築するための新しい方法が学べます。Pagesルーターに慣れてしまってApp Router慣れないという方は必見です。

その2 基礎から学ぶNext.js by 日本Oracle社

こちら日本オラクル株式会社からでている教材です。
Reactの学習から記載されているので、こちらも是非活用して欲しいやつですね。

その3 React研修 by Recruit社

こちらはRecruit社が公開している無料のReact研修教材です。
本格的なハンズオンはありませんが、「Reactの考え方」、「状態や作用を扱う基本的なAPI、Hooks」などの使い方が学べます。

React学び終わったら次はこれをとっかかりにやったらメチャクチャ理解度深まるし、3~4週もすれば個人開発のスキルセットにも組み込んでいけるのではないかというレベルになると思います。

また、Reactについては以前も紹介したこちらをやるといいと思います。
https://ja.react.dev/
スクリーンショット 2024-05-27 7.46.05.png

各教材のやり方(参考程度)

1. コードリーディング。

まず1周目は普通に読んでいき理解の確認をしていきます。
この時に、自分の理解度が浅い所は何かしらチェックしておくなり、notionにメモしておくなりしておきましょう。30分くらい考えたりしてもわからない場合はとばしてどんどん次に進んでください。

2. 分からなかったところの理解

1周目は理解できていたところは飛ばして、わからなかったところだけ時間をかけて調べるなりGPT先生と会話して2週目をおわらせましょう

3. ハンズオン

この時Github上でリポジトリを作成してcommitしながらやっていきましょう。

4. オリジナルのプロジェクト作成

まずは簡単なアプリからつくって、そこからどんどん機能を拡張していきましょう。
また、Udemyなんかでもいいと思います。

ドキュメントでNext.jsの概念や基本を理解した上でオンラインの教材を実施するとかなり理解力が上がるので、どんどん手を動かしていってください:muscle:

おわりに

React/Next.jsは腐ってもJavaScriptなのでこれらのドキュメントやチュートリアルをやるうえで、JSの知識が足りないと感じた方はこちらの記事のメソッドや記法などを是非もう一度確認してみてください:writing_hand_tone2:

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2