Next.js×microCMSで自作のポートフォリオサイトを無料で作れるようになるまでのロードマップ

こんにちは！やむちゃ(@hpfull_01)です！

↓この記事の最新バージョンはこちらで見てください!!
https://blog.hpfull.jp/nextjs-microcms-roadmap/

今回は私が運営するサイトのような、Next.js×microCMSのサイトが一人で作れるようになるまでのヌクヌクロードマップを解説していきたいと思います。
この記事の通りに学んでいけば自作のホームページやポートフォリオサイトが無料で構築できます！！
ぜひ最後までご覧ください。

※私自身もひよこエンジニアです。それ違うよ！とかここはこう勉強した方が効率いい、などあればどしどしコメントorDMください!!!

最初に、ロードマップ作成に参考にしたサイトです。フロントエンドのデベロッパーの開発・運用に必要なスキルや知識、ツールやテクノロジーをステップバイステップのフローにまとめたロードマップです。英語で書いてありますが、時間のある時に見ておいてください。
https://roadmap.sh/frontend
フロントエンドのデベロッパーの開発・運用に必要なスキルや知識、ツールやテクノロジーをステップバイステップのフローにまとめたロードマップです。

0. 最初に

まず最初に大まかな流れと使用するツールについて触れておきましょう。

大まかな流れ

上記のようなステップを踏んでいくことを頭に入れておきましょう！

使用するツール(エディター)

使用するツールは都度自分で調べて合いそうなものを使用していくのが良いです。
エディターはVisual Studio Code(VSCode)がおすすめですが、AtomやSublime Textを利用するのも良いと思います。

1. Internet

ここではインターネット上でどのようにしてWebサイトが動くか、その仕組みについて概要を理解します。
Webを支える根幹の記述ですので理解しておくべき事項となります。ただ、プログラマブルに中の設計まで詳細に理解する必用はなく、そもそもそれはなんぞや？と言う点と、大きな流れとして何が動いていて、どの要素がどう働きあっているのかが分かれば良いかと思います。
この章に関しては、書籍を読みつつ並行して2以降に進んでいけば良いかと思います。

Internet 推薦教材

ここで私が推薦する教材は以下の2つの書籍です。

• Webを支える技術
• 「プロになるためのWeb技術入門」 ――なぜ、あなたはWebシステムを開発できないのか

どちらも名著であり初心者であっても分かりやすいので大変お勧めできる書籍となっています。

2. HTML,CSS

次に学ぶのはHTML,CSSです。
皆さんおなじみかと思いますが、HTML,CSSはwebサイトの画面で表示されているプログラムです。
基本的なことを学び、がっつりここでWeb制作の力などつけたい人は演習で何かしらのサイトの模写をすると良いと思います。

↓私がプログラミング学習を始めて最初に行った模写がツイッターの模写でした。

完全未経験でプログラミング始めた時の懐かしい模写です！
ProgateのHTML,CSSを終えたら軽く模写して何か形にしてみると学びが大きいし何より楽しいですよ！#駆け出しエンジニアと繋がりたい#プログラミング初心者#今日の積み上げ #Progate#相互フォロー#権力なき社団ハッピフル pic.twitter.com/DvEjFD4hcH

— やむちゃ@ハッピフル (@hpfull_01) March 8, 2022

HTML,CSS 推薦教材

書籍でちゃんと学びたい人は

• 1冊ですべて身につくHTML & CSSとWebデザイン入門講座
  で学ぶと良いでしょう。
  または、シンプルにProgateなどでHTML,CSSのコースをするのが手っ取り早いかと思います。僕はHTML,CSSのコースをHTML & CSS Flexbox編までしっかりとやり込みました。
  道場コースは時間に余裕があればやっておくと良いかと思います！

3. JavaScript

JavaScript はウェブページにて複雑な機能をできるようにするプログラミング言語です。上記のHTMLやCSSでできたWebサイトに動きをつけることができます。例えば、画像のスライダーやマウスを動かした際のアニメーションなどです。

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 JavaScript

JavaScript 推薦教材

• 改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで

Progateでコースを一通り行った上でもっと本格的に学びたいとなった場合は上記書籍を推薦します。

4.パッケージマネージャー

パッケージマネージャーは現代のフロントエンドエンジニアにとって必須の知識ですが、本サイトのようなものを作る上で雰囲気で乗り切ろうと思えば行けちゃうかもしれません。
パッケージマネージャーとは、他の人が作成したパッケージ（package）と呼ばれる『機能をまとめたもの』を管理（manage）するものです。セットで多少の linux コマンドも使えるようになることが望ましいです。

この章の推薦教材とかは特になく、やっていく中で雰囲気を掴んでいきましょう。
ちなみに、次に紹介するじゃけえ先生の書籍でパッケージマネージャーについて触れられているのでそこで学ぶのもアリです！
また、最近Youtubeでたにぐち まことさんが運営するともすたチャンネルでとても分かりやすい動画が上がっていました！こちらもおすすめです！

※よく分からないエラーが出た、調べても全然分からん、というときはパッケージマネージャーでのエラーであることが経験的に多かったです。
「npm」や「Yarn」といった単語が出てきた際には少し思い出してみてください。

5.JavaScriptライブラリ React.js

JavaScriptのフレームワーク(ライブラリ)は

• React.js
• Vue.js
• Angular

などが代表的ですが、今回は、ReactとそのラッパーであるNext.jsを推奨します。
フレームワークってそもそも何？って思ったら定番のこちらのサイトを参照しましょう。
「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 フレームワーク

React.js 推薦教材

いきなりReact.jsに触れると、結局これは動いたけど何やってんの？っていう感じになると思うので、そんな時はじゃけえさんという方の以下のUdemy教材(現在は書籍)で学ぶと良いです。
この教材はJavaScriptの復習にもなるためここで相当理解が深まります。

• モダンJavaScriptの基礎から始める挫折しないためのReact入門

こちらは

JavaScriptへの理解なくしてReactの習得はなし得ません。

というじゃけえ先生の信念のもと作られた教材です。
これを視聴すればReactが裏側でやってくれていることのイメージがしやすくなります。

上記を学んだら、以下のUdemy教材

• Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

こちらを視聴しつつ手を動かして楽しくノラリクラリヌクヌクコーディングしていきましょう。

もしReactからいきなり入るのは嫌だというイヤイヤ期の方は、jQueryを学んでから雰囲気を掴むと良いかもしれません。
jQueryはavaScriptを簡単に扱うことができるようにするライブラリ（よく使われる機能やプログラミングの部品を集めてひとまとめにしたもの）です。

例

var testList = document.getElementsByClassName('test-list');

getElementsByClassName('test-list') はHTML上のtest-listというクラス名のものを配列で取得するという処理です。
jQueryを使えば、この処理が

var testList = $('.test-list');

として書くことができます。なんとなく上記でライブラリってよく使う処理を便利に呼び出せるものなんだなーっていうのがわかるかと思います。

jQueryに関してもProgateで学んでおくので十分だと言えます。

Next.js 推薦教材

Reactについてある程度理解ができたら次はNext.jsを学んでいきましょう。

まずはNext.jsのチュートリアルです。こちらをやることでSSR(サーバーサイドレンダリング)って何？SPA(シングルページアプリケーション)と何が違うの？とかが理解できます。英語ですがDeeeplで翻訳したり、Next.jsチュートリアル ノート ( +日本語翻訳)このようなものを参考にしながら読めばなんとかなります!

また、チュートリアルは都度見返すものとなります。全く分からん!となってもさらっと流して進むことが大事です。

さて、これで一通り本サイトのような静的なサイトを構築するための知識には触れました。
では実践として世の中に自分のサイトを無料で公開しましょう!!

良かったら以下の記事も読んでみてください。
Next.js(TypeScript)+ Vercel + TailwindCSS + microCMS で自作ホームページを無料で公開しよう!!

また、Next.jsのプロジェクトをVercelというホスティングサービスにデプロイ(インターネットに公開的な)するのにGithubというツールを利用します。ここで軽く学んでおきましょう。。
プロダクト開発をチームでする場合も、個人でする場合もソースコードをどこかしらで管理しなければなりません。

Git入門：Git初学習者のための効率的な学習方法を考えてみた

こちらを読んでおきましょう。

最後に

ここまでみてくださり誠にありがとうございました!!
実際には手を動かして学んでいきながら、ここも足りないな、となれば自分で調べて学んでいく姿勢が非常に重要です。
それではまた、ご機嫌よう。