この記事は自作のポートフォリオ、ProadMapsで作成しました。
ProadMapsのサービス紹介、作成までの学習記録は別途記事を作成したので、チェックいただけると大変ありがたいです！
概要
Next.jsでポートフォリオを作成できるようになるまでの学習記録になります。今だったらこの順番でやればよかったなぁと思う順番に並び替えています。
タグ
Next.js,React,TyepScript,JavaScript,Ruby,Rails
開始時スキル
Railsの学習経験あり
終了時スキル
ポートフォリオに取り掛かれる
総ステップ数
7
ステップ1 【Progate】 Progate(プロゲート) | Learn to code, learn to be creative.
紹介文/コメント
環境構築なくぱっと基礎を押さえられるのでおすすめです。可能であれば、jQueryも実施しておくと、DOMの操作がわかりやすいかもしれないです。
所要時間
中 (10h〜40h程度)
実施年月
2022年4月
コンテンツURL
ステップ2 【書籍】初めてのJavaScript 第3版
紹介文/コメント
Reactを学習するにあたって、JavaScriptがわかっていないとどこまでがJavaScriptの記法で、どこからがReactの記法、機能かわからなくなってしまうので、しっかり学習するのをお勧めします。独習JavaScriptを学習されている方も多かったので、そちらでも良いかと思います。
所要時間
中 (10h〜40h程度)
実施年月
2022年8月
コンテンツURL
ステップ3 【Udemy】 【2022年最新】React(v18)完全入門ガイド｜Hooks、Next.js、Redux、TypeScript
紹介文/コメント
「手を動かす」のと、「Reactの原理・原則の説明」みたいなところのバランスがとてもよく、飛躍なく少しずつレベルアップしていく(急に難易度が上がってもうわからないみたいなことはないはず)ので、時間を取れるという方には、最初の教材としておすすめです。一気にNext.js、Typescriptの説明まで見るのではなく、React終わった段階で、一旦、後述のReactをやるのもアリかもしれません。(私が一気にやって、かなりこんがらがったので... 。とはいえ、分けてやってもこんがらがるかもしれませんが...笑) 動画学習があまり好きでない方もいるかもしれませんが、特に、初心者の方にとっては、映像で実際のコーディングが見れるのは勉強になるところが多いかと思います。ただ、かなりボリュームは多いので、覚悟は必要です..笑(私はおそらく60hぐらいかかりました。)
所要時間
大 (40h以上)
実施年月
2022年9月
コンテンツURL
ステップ4 【Techpit（テックピット）】 【Rails×React】UberEats風アプリを作りながら、SPA開発を学ぼう | Techpit
紹介文/コメント
初学者向けというよりは、Reactの基礎を一周した人向けかなという感じですが、「RailsのAPIモードとは」、「バックエンドをRails、フロントエンドをReactと分けて作成するとは」、「どうやって連携するのか」、みたいなところを、ちょうど良い難易度、ボリュームで学べるので、個人的にとてもおすすめです。私は、これでRails×Reactでアプリを作った後、Rails×Next.js、Rails×Next.js(TypeScript)と書き換えて見たのですが、個人的にはよい学習方法だったかなと思っています。
所要時間
中 (10h〜40h程度)
実施年月
2022年9月
コンテンツURL
ステップ5 【Qiita】 大幅にリニューアルされた Next.js のチュートリアルをどこよりも早く全編和訳しました - Qiita
紹介文/コメント
Next.jsのチュートリアルを和訳してくれているものです。英語でやるパワーがありませんでした..笑 ボリュームは少ないので、ぱっと終わるかと思います。Typescriptへの書き換えも最後に出してくれるので、おすすめです。
所要時間
小 (10h以内)
実施年月
2022年9月
コンテンツURL
ステップ6 【書籍】 Amazon.co.jp: 作って学ぶ Next.js/React Webサイト構築 eBook : エビスコム: 本
紹介文/コメント
Typescriptではないですが、個人的にTypeScriptでNext.jsを書く前にJavaScriptで書いた方が理解が深まった気がしたので、逆にTypescriptではないのでおすすめです。難易度もちょうど良く、Next.jsの基礎が学べるかと思います。
所要時間
中 (10h〜40h程度)
実施年月
2022年10月
コンテンツURL
ステップ7 【技術評論社】 TypeScriptとReact/Next.jsでつくる 実践Webアプリケーション開発
紹介文/コメント
TypeSctiptを用いた開発をもう少し深堀りしたいなと思ってやってみましたが、コードを細かく説明して、一緒に開発していくというよりは、多少Next.jsを理解した上で、現場で使われているツールや、書き方のお手本みたいなのを全体的に教えてくれる感じでした。5,6章でアプリを作成していきますが、細かく説明していくのではなく、中身は分かった上で、方針を説明していく形なので、書き方を学ぶという意図だとちょっと違うかなと思います。(ソースも全部説明ではなく、重要なところを紹介であとはgithubからコピーして下さい。といった形)ただ、開発のイメージや、いろんなツール、本番環境へのデプロイを学べるので、時間をかけずにさらっとやってみて、実際にポートフォリオを作成する際に、お手本としてディレクトリ構成や書き方を参考にするという使い方をするには、めちゃくちゃ良い本だと思いました。(実務経験がある方はまた違う感想になるかもしれません)
所要時間
中 (10h〜40h程度)
実施年月
2022年9月
コンテンツURL
以上です。
どなたかのお役に立てれば嬉しいです！