技術スタックまとめ

フロントエンド

• Astro
  • サイト全体のページ生成を担当。静的生成をベースにしつつ、必要な部分だけ動的に動かせる構成。
• TypeScript
  • コードの型安全性を高め、更新時の不具合を減らすために利用。
• Three.js / WebGL
  • Hero 演出や実験ページでの画像遷移・シェーダー表現を実装。

コンテンツ管理

• Astro Content Collections（Markdown）
  • Works / Labs / Devlogs を Markdown で管理。
  • スキーマ定義により、公開設定や日付などの入力ルールを統一。
• 独自 Admin（開発環境専用）
  • /admin から記事編集・画像アップロード・カバー管理を実施。
  • 本番ビルドには含めない運用で、安全性を確保。

画像・メディア処理

• Sharp
  • アップロード画像のサニタイズと最適化に利用。
• Astro Assets
  • 画像配信・最適化をフレームワーク標準機能で管理。

開発・運用

• Node.js + pnpm
  • 開発環境と依存管理の基盤。
• ESLint / Prettier
  • コード品質とフォーマットを統一し、保守性を維持。
• Cloudflare Web Analytics
  • 無料かつ軽量なページビュー計測を実施。

この構成にした理由

• 更新しやすい: Markdown中心で、作品追加や修正の運用コストが低い。
• 壊れにくい: 型チェックとルール化で、更新時の崩れを抑えられる。
• 表現を作り込める: Three.js を併用し、見た目の個性を実装しやすい。
• 将来拡張しやすい: Labs で実験し、良いものを本体へ段階的に反映できる。