写真サイトをリニューアルしました！
こんにちは。さかです。
以前から個人で運用している写真サイトをリニューアルしました。
何をしたのかを、簡単に紹介したいと思います。
背景
初回リリースから2年半。そろそろ作り直したいな、と考えていました。
以前のサイトはSPAで、ページを開くたびにクライアントからAPIを叩く作りになっており、内容がほとんど変わらないページでも、毎回リクエストが飛びます。構成として無駄が多い状態でした。
そこでデザインを含めて全面的に作り直し、Webサイトに特化した構成に変えました。
技術構成
主に以下を採用しました。
- ・フレームワーク: Astro + React
- ・ホスティングサービス: Cloudflare Workers
- ・CMS: microCMS
- ・スタイル: Tailwind CSS
- ・AIエージェント: Claude Code
フレームワーク
動的な要素が少ないサイトなので、SPAをやめてSSGに変更し、フレームワークもReactではなく以前から気になっていたAstroにしました。
Astroにはアイランドアーキテクチャ（Islands Architecture）という仕組みがあります。
ページ全体は静的なHTMLとして配信しつつ、ボタンやメニューのように動きが必要な部分だけを選んでJavaScriptを読み込めるというものです。
コンポーネントはReactやVueで書けて、読み込むタイミングも個別に指定できます。
<!-- ページ読み込みが落ち着いたら、このReactコンポーネントを動かせるようにする -->
<ReactComponent client:idle />
<!-- ページ読み込み後、最優先で即座に実行する -->
<ReactComponent client:load />
<!-- ユーザーがスクロールして、画面に入ったら実行する -->
<ReactComponent client:visible />必要なコンポーネント（島）のJavaScriptだけを、必要な量だけブラウザに送ることで、表示がかなり速くなりました。
ホスティングサービス
ドメインをCloudflareで取得していたこともあり、今回を機にホスティングもVercelからCloudflare Workersへ移しました。
以前は静的ページならCloudflare Pages、動的な処理が必要ならWorkersという棲み分けでしたが、WorkersにStatic Assetsが加わり、静的ファイルの配信もWorkers単体でできるようになりました。
公式からも「今後はWorkersの開発に注力するので、新規開発ではWorkersを推奨する」とアナウンスがあります。それならWorkersでいいな、と思い、採用しました。
AIエージェント
Claude Codeです。モデルは主にOpus 5とSonnet 5を使用しました。
構成やディレクトリ設計はOpusで詰めて、実装はSonnetに任せる。そんなハイブリッドで進めました。スキルやサブエージェントは使っていません。
コードレビューだけは自分でやりました。レビューもAIのほうがいいという意見はあります。ただ今回はコードを読んでAstroを学ぶのが目的のひとつだったので、レビューしながらAIに質問して、フレームワークの理解を進めました。
前回はAIコーディングエージェントがなかったので3〜4ヶ月かかりましたが、今回はバイブコーディングで約3週間。休日に学びながら進めてこの期間なので、AIが自走できるようハーネスを整えれば、おそらく1~3日で終わると思います。
さいごに
AIがなかった頃は、サイトを作るのに環境構築やコーディングで時間がかかり、それなりのハードルがありました。今は作って公開するところまでAIに任せられます。
ただ、作ったものを管理するのは人間です。AIが書いたコードや構成を理解して、AIの言いなりで進めないようにする必要があると感じます。
そのうえで、AIから学んだことを自分のものにして「自分ならこうする」と提案できるところまで持っていく。AIと共存していくには、そこが大事だと思います。
サイトは冒頭にリンクを貼っているので、よかったら覗いてみてください。
ここまで読んでいただき、ありがとうございました。
