このポートフォリオの技術スタック

技術選定の背景

このポートフォリオは AI（Codex など）による補助を活用しながら実装しています。 ただし AI に任せきりにするのではなく、React や JavaScript の基礎理解を得るために Udemy 講座などで学習を行いました。

初期段階では Webpack ベースの構成も試しましたが、最終的には Next.js を採用しています。

理由は以下です。

• サーバーサイドとクライアントサイドを分離できる
• API を同一プロジェクト内で管理できる
• React コンポーネント単位で責務を分割できる

特に AI を補助として開発する場合、コードが部分的に壊れるリスクがあります。 そのため コンポーネント単位で管理できる構成の方が拡張や修正がしやすいと判断しました。

全体構成

• フレームワーク: Next.js (App Router)
• 言語: TypeScript
• UI: React
• スタイル: Tailwind CSS

フロントエンドとサーバーサイドの処理を同一リポジトリで扱えるため、機能追加時の実装と管理を一元化しやすい構成です。

UI / フロントエンド

• React 19
• Next.js 16
• Tailwind CSS 4
• Lucide React (アイコン)

画面はコンポーネント単位で分割されており、ページごとの責務が明確です。
スタイルはユーティリティクラス中心で、実装速度と再利用性を両立しています。

3D 表示

• three
• @react-three/fiber
• @react-three/drei
• @react-three/postprocessing
• @pixiv/three-vrm

3Dモデル表示は Three.js 系の技術スタックで構成されています。 React ベースでシーン管理が可能なため、UI と 3D の状態連携がしやすい設計です。

ポートフォリオの中心ページとして 3D ROOM を実装しており、 Blender で制作したシーンを Web 表示用に最適化しています。

最適化の結果

• Transfer 約 50MB → 約 7MB
• DrawCalls 11,000 → 約 70

まで削減できました。

詳細な改善内容は以下の記事でまとめています。

音楽機能

• HTML Audio
• React Context

音楽再生機能は HTML Audio をベースに実装しています。

複数の UI コンポーネントから再生状態を扱う必要があるため、 React Context を利用してプレイヤー状態を管理する構成にしています。

実装自体は AI 補助を用いて作成していますが、現在は Context の仕組みを理解するために コードを読みながら構造を学習しています。

AI / API

• Grok API (xAI)
• Next.js Route Handler (src/app/api/aichat/route.ts)
• axios

チャット機能は Grok API を利用しています。

Next.js のサーバー側 Route Handler を経由する構成にしており、 クライアントから直接外部 API を呼ばない設計にすることで API キー管理と責務分離を行っています。

コンテンツ管理（ブログ）

• Markdown 記事: content/blog/posts/*.md
• 画像: public/blog/images/...
• 表示: React Markdown

記事は Markdown ベースで管理し、コード変更なしで追加できます。
技術記事・制作ログの継続運用に向いた構成です。

開発・品質管理

• ESLint
• TypeScript 型チェック（開発時）
• Next.js 標準ビルドフロー

静的解析を前提にした開発フローで、変更時の破壊的な影響を早期に検知しやすくしています。

まとめ

このポートフォリオは、Next.js + TypeScript を土台に

• 3D 表示
• 音楽再生
• AI チャット
• Markdown ブログ

を統合した構成です。

特に 3D 表示では、Blender ベースのシーンを Web 向けに最適化し、 転送量や描画負荷を大幅に削減する改善を行っています。

3D 表現・AI キャラクター・音楽機能を統合した インタラクティブな Web 体験の実装を目標としています。