ポートフォリオ をリニューアルしました。
2023年にNext.jsで作った 旧ポートフォリオのコードをすべて捨てて、Astroを使って新しく作り直しました。
旧ポートフォリオは2023年初頭に作ったのですが、当時はNext.jsのApp Routerがベータ版だったので、Pages Routerを使っていました。
ただ、そこから数年経ってApp RouterはNext.jsのデファクトとなり、最近は個人開発ではもっぱらApp Routerばかり触るようになっています。
そんな感じでPages Routerの書き方も少しずつ忘れてきてしまっており、旧ポートフォリオのコードベースを見たときにgetStaticPropsとかgetServerSidePropsとかが出てきては「これどうやって書くんだっけ・・」みたいなことが頻発するようになりました。
特にブログページはSSGを使っていたので、App Routerとはぜんぜん違うコードはメンテが辛かったです。
旧ポートフォリオを作った当時はまだTailwindを知らなかったので素直にCSS Modulesでスタイルを書いていたのですが、Tailwindの気持ちよさを知ってしまったらCSS Modulesを使ってスタイルを当てる手間がしんどくなってしまいました。
最近Cloudflareにハマっています。ワーカーやら静的アセットやらデータベースやら、なんでもかんでもCDNにばら撒くことのできる設計思想が面白くて、最近いろいろなものをばら撒いてみています。
そんなこんなでポートフォリオもCloudflareのCDNにばら撒きたくなってしまうのは自明の理です。
今回はCloudflare Pagesを使って全世界にばら撒くことにしました。別にばら撒くだけなら旧ポートフォリオをNext.jsで静的ビルドしても良かったのですが、コードベースが古く全世界にばら撒くには忍びないので、作り直しました。
※Vercelも全世界にCDNを持っているじゃんというツッコミが入りそうなのですが、Cloudflareのほうがスケールが大きいので...
今回初めてAstroを使ってみたのですが、以下のような点が良いと感じました。
ポートフォリオサイトには特に動的な要素がないので、可能であれば素のHTML+CSSで書いてしまいたかったのですが、そうすると以下の点が課題でした。
これらを解決するために、今回はAstroを使ってみました。ほぼ素のHTMLに近い書き心地で、簡単にコンポーネントを再利用できて、.mdファイルをコンポーネントとしてインポートできて、Tailwindもいい感じにビルドしてくれて、もう言うことありません。素晴らしいです。
（今回は完全に静的なサイトだったので特に出番はなかったのですが）Astroの特徴であるアイランドアーキテクチャも面白いんじゃないかと思います。このアーキテクチャが提唱された当時の反応は知りませんが、ReactのServer Components(RSC)が普及した今となってはスッと理解できます。
これは昔の自分を褒めたいのですが、今までのブログデータをMicroCMSで管理していました（ブログをMicroCMSで再構築した）。
このおかげで、MicroCMSとAstroをつなぐだけでブログのお引越しができました。一瞬で行うことができて、とても気持ちが良かったです。
これは個人の好みや ポートフォリオを通じて伝えたいメッセージの内容によって変わるとは思いますが、自分は伝えたいことを端的に伝えてくれるシンプルなWebページが好きなので、そのようなデザインにしてみました。
触れたことのない技術に触れるのは、やはり面白いです。
おそらく、今回作った新しいポートフォリオも数年後にリプレイスすることになるのでしょうが、その時はどんな技術を使うのでしょうか。今から楽しみです。