Next.js + TailwindCSS + MicroCMS + Verselでブログ兼ポートフォリオサイトを作りました！

タイトルの通りNext.js + TailwindCSS + MicroCMS + Verselを使ってブログ兼ポートフォリオサイトを自作しました🐣

以下サイトを作るに至った経緯や技術選定、自作してみた感想などを記事にしていきます！記念すべき初記事です🎉

以前からWebに興味があって、高校生くらいの頃から「Webってどういう仕組みで動いてるんだろう？」「いつかWebデザインとかやってみたいなぁ」と漠然と思っていました。

そして少し前にゲーム会社を退職することとなり、プログラマとしての自信もついてきたことから、「Webについて１から勉強してみよう！」「ウェブサービスを自分で作れるようになりたい」と思い、Web周りの知識からHTML/CSS, JavaScript, TypeScript, Reactと勉強を重ねてきました💪

次は勉強したことをアウトプットしようとまず手始めにブログ兼ポートフォリオサイトを自作するに至りました。

当初はGatsbyを使ってこのサイトの前身となるものを作ってたりしましたが、どうもしっくりこなくて一旦考え直し保留することにしました。

そこでNext.jsという選択肢を考え色々調べまくった結果、技術的にも不満なく、更に流行もしていたのでNext.jsに決めて再度作り始めました。

これからブログを作ろうといった時に、2022年現在でもブログと言えばWordPress！みたいな雰囲気がまだ存在しているように感じます。

自分も同様にブログなんだしWordPressで適当に手っ取り早く作っちゃおうかなと思ったりもしましたが、そうしなかった理由として

・Next.jsのようなJamstackに比べてパフォーマンスが悪い
・サーバ代がもったいない
・自由の効くデザインしたかった
・セキュリティ面が怖い

とりあえずこの４つがひっかかったのと、勉強したことのアウトプットも兼ねてWordPressではなくNext.jsでブログを自作することにしました。

CSSフレームワークにはTailwindCSSを採用しました。

これにより無駄にいくつものCSSファイルがかさばらなくて済むことがかなりのメリットで、使い方もわかりやすく効率良い開発ができました。

開発言語についてはまずJavaScriptを採用しました。

最初からTypeScriptで書こうとも思ったのですがこのサイトは複雑な機能を実装する予定もなく、型安全性が低いからと言って重大なバグが起こることは考えられにくく、
共同開発する訳でもないためまずはJavaScriptで開発することにしました。
それにTypeScriptの場合MicroCMSのAPIからデータを拾ってきたりする時に、どの型になっているのか分からず調べるのもめんどうだったりしてコーディングの記述量も増えるなどのデメリットが大きく、JavaScriptのほうが素早いコーディングができるという理由もありました。

その後TypeScriptの本を読み進めていたこともあり、８割型開発が進んだ頃に勉強も兼ねてJavaScriptからTypeScriptに徐々に直していきました。TypeScript化の当サイトにおけるメリットとしてpropsの型を定義することで自動補完が効いて、コーディングしやすくなったことが大きかったです。まずはtsconfig.jsonの設定をゆるめにして必要な部分だけをTypeScript化していきました。

Webサイトを作ったのはこれが初めてで、このように公開まですることができて少し自信がつきました💪

検索機能の実装が少し手こずりましたが、Reactのより深い知識が身についていい経験になりました。

デザインについてはよくあるWordPress風な感じにしつつも細かい部分も調整してなるべく見やすくわかりやすいデザインを目指しました🌸

もう少し使いやすくなるような機能を追加したりプロフィールページやキャラクター紹介ページはオリジナリティのあるデザインにしたいと思っているのでそれが今後の課題です…！