今回は本サイトのような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システムを開発できないのか
どちらも名著であり初心者であっても分かりやすいので大変お勧めできる書籍となっています。
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 推薦教材
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の習得はなし得ません。
というじゃけえさんの考えのもと作られた教材です。
これを視聴すれば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のプロジェクトをVercelというホスティングサービスにデプロイ(インターネットに公開的な)するのにGithubというツールを利用します。ここで軽く学んでおきましょう。。
プロダクト開発をチームでする場合も、個人でする場合もソースコードをどこかしらで管理しなければなりません。
Git入門：Git初学習者のための効率的な学習方法を考えてみた
こちらを読んでおきましょう。
まとめ: Next.js×microCMSで自作のポートフォリオサイトを無料で作れるようになるまでのロードマップ
ここまでみてくださり誠にありがとうございました!!
実際には手を動かして学んでいきながら、ここも足りないな、となれば自分で調べて学んでいく姿勢が非常に重要です。
それではまた、ご機嫌よう。
コメント