2022-01-15

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

blogwriterimg
飲茶
#福利厚生
#勉強
#開発
#react.js
#microCMS
blogimg

こちらで見てください!!



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

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

0.最初に


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

大まかな流れ



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

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


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

1.Internet


さあここからは実際に勉強に入っていきます。
ここではインターネット上でどのようにしてWebサイトが動くか、その仕組みについて概要を理解します。
Webを支える根幹の記述ですので理解しておくべき事項となります。ただ、プログラマブルに中の設計まで詳細に理解する必用はなく、そもそもそれはなんぞや？と言う点と、大きな流れとして何が動いていて、どの要素がどう働きあっているのかが分かれば良いかと思います。
この章で今回私たちが作るNext.js×microCMSのサイトの仕組みも理解できるかと思います。
CMSやヘッドレスCMSについてはまた別途サイトで調べるなどしましょう。
この章に関しては、書籍を読みつつ並行して2以降に進んでいけば良いかと思います。

Internet 推薦教材


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


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


どちらも名著であり初心者であっても分かりやすいので大変お勧めできる書籍となっています。
※権力なき社団ハッピフルの構成員であれば、福利厚生「CTOの書籍を勝手に拝借しよう」を使うことでオフィス内にあるこちらの書籍を見つけることで無断で持ち出すことが可能です！

2.HTML,CSS


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

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


HTML,CSS 推薦教材




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

3.JavaScript


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

JavaScript 推薦教材




Progateでコースを一通り行った上でもっと本格的に学びたいとなった場合は上記書籍やドットインストールの動画を推薦します。

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


パッケージマネージャーは現代のフロントエンドエンジニアにとって必須の知識ですが、本サイトのようなものを作る上で雰囲気で乗り切ろうと思えば行けちゃうかもしれません。
パッケージマネージャーとは、他の人が作成したパッケージ（package）と呼ばれる『機能をまとめたもの』を管理（manage）するものです。セットで多少の linux コマンドも使えるようになることが望ましいです。
推薦教材とかは特になく、やっていく中で雰囲気を掴んでいきましょう。ちなみに、次に紹介するじゃけえ先生の書籍でパッケージマネージャーについて触れられているのでそこで学ぶのもアリです！
よく分からないエラーが出た、調べても全然分からん、というときはパッケージマネージャーでのエラーであることが経験的に多かったです。
「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(シングルページアプリケーション)と何が違うの？とかが理解できます。
また、チュートリアルは都度見返すものとなります。全く分からん!となってもさらっと流して進むことが大事です。

さて、これで一通り本サイトのような静的なサイトを構築するための知識には触れました。
では実践として以下の記事を読んで世の中に自分のサイトを無料で公開しましょう!!
Next.js(TypeScript)+ Vercel + TailwindCSS + microCMS で自作ホームページを無料で公開しよう!![ガチテックブログシリーズ]

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

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

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

最後におまけ


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