ポートフォリオサイト

概要

要件定義は私が行い、実装は全てFable5とOpus4.8に作ってもらいました。実はClaude Code(Fable)を開発でがっつり使った初めてのプロジェクトです。

担当役割

企画・要件定義・ちょっとした設定。

こだわりポイント

ホームで魚たちが泳いでいるのと、フレッシュ機能がお気に入りポイントです。 フレッシュ機能は私のアイデアで、私の呟きが延々と流れていきます。Discordから投稿できるようにしたので、本当にXみたいな使い方ができます。 ブログの方は気が向かないと書かない気がするので、パッと思いついたものはフレッシュで書いていきます。 （名前もかなり気に入っている）

技術的なポイント

Opusによると

• Next.js 16 (App Router) + React Server Components
• Cloudflare Workers に OpenNext アダプタでデプロイ
• next-intl による日英のルーティング(/ja, /en)
• コンテンツは Markdown をビルド時に HTML 化(Workers 互換のため) だそう。ふーん。

個人的には、Cloudflareのコスパの良さを実感したくて、Cloudflareに全乗っかりの構成にした点です。 実際無料枠が太っ腹（個人レベルではまずリミットに行かないレベル）なので、とっても助かります。最近AI周りでも力入れまくってるみたいなので、これからが楽しみですね。

課題と解決

Opusによると

Cloudflare Workersはランタイムでの動的コード評価を禁止しているため、 一般的な MDX ランタイムレンダリングが使えませんでした。 ビルド時に HTML へ変換する構成に切り替えることで、Workers互換と高速表示を両立しました。 だそう。

ふーん、多分そうだよね。ちょっと詰まってるの私も見てました。

ヘッダーの部分はLiquid Glassな感じにしたかったのですが、Opusの視認性のチェックが少し甘かったので、少々修正しました。

感想

本当にこのポートフォリオサイトを作るのに自然言語しか使ってないです。

ポートフォリオサイトってエンジニアの力量を発揮する場だと思っていたんですが、生成AI時代の到来でそうも言ってられない気もするので、乗れるものには乗っかった方がいいですね。それよりもコンテンツを見て！という方が良い気がしています。

2023年ぐらいにもChatGPTでWebアプリ開発を完結させようとしたことがあったのですが、その時は全然完結できなかったです。それから比べると凄い時代になったな〜という感想です。