かなり前ですが、Next.jsでブログを作ってみました。
作ったのは「natto memo」ブログです。
技術的なことはまだまだ勉強中ですが、せっかくブログを作ったので、作ろうと思ったきっかけや使った技術などをまとめてみようと思います。
作ろうと思ったきっかけ
結論から述べるといづれフリーランスとして活動して、その時のポートフォリオにしたいと思っていたからです笑。
大学を卒業後、現在まで数年間社会人として働いていますが、仕事の内容と時間をなかなか自分で調節できないことや、 苦手な人とのコミュニケーションを避けられない点が私としてはストレスに感じ、実力が発揮できていないなーと感じている今日この頃です。（たぶん社会不適合者なんです。。）
ただ、ネガティブな理由だけではなく、自分の学びを発信することでそれが誰かの助けになったり、自分自身の知識定着に繋がるので、文章にまとめる（そして発信する）ってとても大切なことだと思っています。
ブログを作ろうと思った理由というより社会への文句になってしまいましたが、フリーランスになってみたい！という思いが年々高まってきているので、その準備第一弾として、ブログを作ってみました。
使った技術
作ったブログには以下の技術やプログラミング言語を使っています。
HTML
おそらく皆さんご存じのHTML(HyperText Markup Language)です。
Webサイトを作るうえで基本中の基本の言語ということで使用しています。
CSS(Tailwindcss)
HTMLで作成したコンテンツをデザインするための言語で「Cascading Style Sheets」の略だそうです。
今回はプレーンのCSSを使用するか、Bootstrapなどのフレームワークを使用するかで少し悩みましたが、 CSSの基本を理解したいという気持ちの上に楽もしたいという気持ちがあったので、 中間くらいに位置するTailwindcssを使用することにしました。
JavaScript
HTML, CSSときたらJavaScriptですよね。フロントエンドではサイトのコンテンツに動きを付ける時などに使われます。
今回は静的なブログを作成するだけなのでJavaScriptはなくても作れるのですが、 以前から下記のReactというJavaScriptのフレームワークに興味があったので使ってみました。
React
JavaScriptのフレームワークで、コンテンツをコンポーネントという単位でまとめて管理することができます。
ブログ程度の静的なサイトだとHTMLとCSSのみでも問題なく作ることができるのですが、前述の通りReactというものに以前から興味があったので、ページ自体や良く使うHTMLタグをコンポーネント化するために使用しました。
Next.js
JavaScriptのフレームワークであるReactのさらにフレームワークであるNext.jsです。
Next.jsを使用することで難しい設定をしなくとも高速で快適なWebサイトを作ることが出来ます。
また、ルーティングで面倒な設定が不要なことも大きなメリットだと感じています。
Next.jsはReactについて調べている間に存在を知り、Reactを使うなら便利そうだ！使ってみよう！と思ったのがきっかけです。
Vercel
作成したサイト（今回だとブログ）を世に配信するためのサービスです。 Next.jsを開発している会社がVercelという名前で、社名と同名のサービスとなります。
Next.jsの開発会社が開発しているということもあってNext.jsとの相性は抜群だそうで、 Gitの更新をトリガーにしてビルド→デプロイの流れを自動で行ってくれます。
ブログ制作を始める前の自身のスキル
大学を卒業後、システムエンジニアや社内SEを経験していますが、 ぶっちゃけ業務ではバックエンド側を担当することがほとんどで、上記のプログラミング言語はほぼ触れたことはない状態でした。
ですので、ブログ制作を始める前はHTMLはもちろんCSS、JavaScriptにも触れたことはほとんどなく、どちらかというとPythonやSQL、基盤でいうとAWS等の知識しかありませんでした。
ただIT業界で働いていると、業務内で嫌でもITについての話題はでてくるので、 ブログを作るにあたって触れたことのない技術であっても、何となく聞いたことがあるなーという技術やサービス名はいくつかあった、という感じです。
はい、要するにフロントエンド初心者ということですね。
プログラミング言語などの学習方法
上記の通り、フロントエンドについてのスキルはほぼ皆無な私ですが、その状態からどんな過程で学習してこの記事を執筆するまでに至ったか、期間別でご紹介します。
0～1ヶ月半程度 : HTML, CSSの勉強
始めの1か月半の学習はほぼ全てHTMLとCSSの習得にあてていました。
やはりWebサイトを作成する上で欠かせないプログラミング言語ですし、基本中の基本ということでじっくり時間を書けて勉強しました。
その甲斐あってか、3カ月前はHTMLとCSSを使って「Hello World」と表示するだけのページでもどう作れば良いか分からなかったのが、現在ではブログ程度の簡単なサイトであればある程度自由に編集できるようになっています。
ちなみにHTML, CSSに限らず、基本的に勉強はUdemyというオンライン学習サイトを使って勉強しています。
1ヶ月半～2ヶ月 : JavaScriptの勉強
大体1ヶ月半～2ヶ月の半月ではJavaScriptを主に学習していました。
バックエンドで良く使われるプログラミング言語はある程度使える知識は持っていたので、JavaScriptの勉強はあまり時間がかからなかった印象です。
ただ、せっかく勉強するならある程度深い部分まで知っておきたいという思いがあったので、 同期処理/非同期処理の違いやProxyなどの少し難しめの内容も勉強していたこともあり、少し長めに時間を取りました。（現時点のブログではそれら技術は本当に全く使ってないんですけどね、、）
2ヶ月～2ヶ月半 : Reactの勉強
ここに来てやっとですが、Reactの勉強を始めます。 実をいうと、ブログを作ろうと思ってまず初めにUdemyでReactの講座を受講したのですが、HTMLやCSSが全く分からず、 Reactの内容が全然頭に入ってこなかったので、HTML, CSSの勉強時間をまず初めに取り、このタイミングでReactの勉強を始めました。
約2カ月の地道な下積みの甲斐もあって、基本的なReactの仕組みの理解にはあまり時間はかからなかったと思っています。
ただ、コンポーネントを分ける単位や、コンポーネント間でデータを共有するuseContextやReduxをどの区切りで整理するのが良いのかは、実際にWeb制作を経験して学ぶ必要があるなーと思っています。
2ヶ月半～3ヶ月 : Next.jsの勉強とブログ制作
ここでいきなりブログを作り始めます笑。Reactの勉強を始めた頃から早くブログを作りたい欲が高まっていたんですよね笑。
当初はプレーンのReactでブログ作成する予定だったのですが、 UdemyでReactの講座を見ていた時に、あわせてNext.jsというフレームワークの紹介があったので、そこでNext.jsを使うことに方向転換しました。
前に書いた通りNext.jsについては現在も勉強中であまり詳しくは理解できていないのですが、便利さ故にこの早さでブログを公開できています。 （ Next.jsを使ったブログの制作から公開まで一気に学ぶことが出来る講座がUdemyにあったからというのが早く作れた一番の理由です。はい。）
おすすめのUdemy教材
最後に、せっかくなので私が受講して特に良かったと感じたUdemy講座をご紹介します。
HTML/CSSの講座
- 【最新2022】未経験からHTML、CSS をマスターして、WEBデザイナー・エンジニアを目指す 最高の実践コース
- ちゃんと学ぶ、HTML/CSS + JavaScript（JavaScriptも含まれていますが、HTML/CSSの印象が強かったのでHTML/CSSに入れさせていただきました）
- 【tailwindcss】初心者向け講座・CSSが苦手な人向け 【わかりやすさ重視】【次世代のCSS】にじっくり取り組む
JavaScriptの講座
Reactの講座
Next.jsの講座
最後に
かなり前に作成したブログなのですが、このまま静かに眠らせておくのは少し悲しかったので、こちらのブログで紹介させていただきました。
約２年前なので、正直、ブログを作ったときの記憶があまりなく、どんな思いで作ったかもあまり覚えていません。。笑
（ここで告白しますが、過去に書いた記事をほぼそのまま転載しただけです。笑）
ただ、フリーランスになりたい欲がとても強かったのが過去のブログから伺えますね。
まぁ、ご紹介させていただいたブログを作る上で学んだ知識や技術は今でも覚えていて、仕事で活きることも度々あるので、更新こそできていませんが、勉強して良かったとは思っています。
今のところ、自作したブログを更新する気力はあまりないので、このまま放置になってしまうかもしれませんが、何かのきっかけでやる気が出たらまた更新しようと思います。（←絶対更新しない人の言い方笑）
それでは皆さん、良いブログライフを！
