nisshi.dev

概要

nisshi-devのポートフォリオサイトです。ブログ記事、登壇スライド、制作物、活動履歴をまとめて掲載しています。

開発経緯

自分のアウトプットを一箇所にまとめたくて作りました。

ブログ記事はZennやQiitaに分散しがちだし、登壇スライドはSpeaker Deckに置いたまま埋もれていきます。制作物・活動履歴も含めて、全部を自分のドメインで管理できるサイトが欲しくなりました。

また、3DGSや3Dモデル、XR体験などを埋め込めるようなブログを作りたかった、というのもあります。

Claude Code 4.5 Opus以降で、かなり理想に近い設計でスムーズに開発ができるようになったので、自分のやりたいことを全て詰め込んでいく予定です。

技術スタック

React 19 + Next.js 16（App Router）で構築しています。コンテンツはFumadocs（MDX）で管理し、3DグラフィックスはR3F（React Three Fiber）エコシステムを使っています。

UIはShadcn UI（将来的にHeroUIに移行予定）を採用し、スタイリングはTailwind CSS v4、アニメーションはMotionです。コメント・いいね機能はFuma Comment、DBはTurso + Drizzle ORM、キャッシュ・レートリミットはUpstash Redis、エラー監視はSentry、AI機能はVercel AI SDKを使っています。テストはVitest + Storybook統合テストで書いています。Storybookは公開しています。Vercelにデプロイしています。

初期段階でNext.jsで開発していましたが、開発を進めていくにつれ、Turbopackで欲しい機能が足りなかったりしていることがあったりするのもあり、将来的にはVite + React Routerでの実装に変更しようと思っています。