Portfolios

実務での「Google広告費×CRMデータ突合」の知見をベースに個人開発。複数媒体の広告費とCRMの参加ステータスを結合し、CRA（申込単価）・CRP（完了単価）を自動算出。集計データをGemini APIに渡し、構造化JSON（responseSchema）で改善アクションを自動出力するダッシュボード。

• NestJS の Factory/Strategy パターンで媒体別CSVパーサーを実装・拡張性を確保
• バックエンド側でSQLライクな集計をプレ処理しGemini APIへのトークンを最小化
• Gemini SDK の responseSchema で返却JSONスキーマを完全固定し型安全な構造化出力を実現
• メモリキャッシュによるAPI呼び出し制御（無料枠RPM制限への対策）
• @vendia/serverless-express で NestJS を AWS Lambda 上にサーバーレス配置

Rails 8 API をバックエンドに持つフルスタック EC サイト。フロントエンドは React + TanStack Query で非同期状態を管理し、Zustand でカートを制御。管理者・ユーザー両面の UI を実装。

• Rails 8 API Mode（devise-jwt 認証・Pundit 認可）と React の完全分離アーキテクチャ
• TanStack Query でサーバー状態キャッシュ・楽観的更新を実装
• Zustand によるカート状態のグローバル管理（セッション永続化）
• React Hook Form + Zod によるスキーマベースのバリデーション
• 管理者ダッシュボード・商品管理・注文管理を含む全画面実装

地域の合唱サークルから依頼を受けて設計・実装・納品した実案件。ライブラリ依存を最小限に抑えながら、保守しやすいコンポーネント設計とアクセシビリティ対応を両立。

• IntersectionObserver を使った useFadeIn カスタムフックを自前実装
• お知らせデータを型付き JSON で UI から分離し、担当者が更新しやすい構造に
• スキップナビゲーション実装によるキーボードアクセシビリティ対応
• React Router v7 による SPA ルーティング（直リンク・ブラウザバック対応）

Three.js パーティクル・GSAP アニメーション・HUD デザインシステムで構築したシネマティックなポートフォリオサイト。ゲームUI/SF的な世界観をWebで表現。

• @react-three/fiber + @react-three/drei でパーティクルフィールドを3D描画
• GSAP ScrollTrigger による高度なスクロール連動アニメーション
• Framer Motion + Lenis スムーススクロールで没入感のあるUXを実現
• HUDインスパイアのデザインシステムをTailwind CSS v4でゼロから設計

2015年からのキャリア全月次収入を記録・可視化するパーソナルファイナンスツール。ローカルでは SQLite に月単位で実データを保存・編集でき、デプロイ時はモックデータを表示するデモモードに自動切り替え。

• Vite configureServer プラグインで SQLite REST API を dev server に直接注入（バックエンドプロセス不要）
• VITE_DEMO_MODE 環境変数でローカル（SQLite 実データ）とデプロイ（モック表示）を切り替え
• 月次レコード（year+month 複合主キー）を better-sqlite3 で CRUD、フロントで年次集計に変換
• Recharts ComposedChart で年次集計グラフ（棒＋折れ線）を描画、年行クリックで月次明細を展開
• Vite manualChunks でアプリ本体・vendor・Recharts を分割しキャッシュ効率を最大化
• GitHub Actions OIDC で S3 sync → CloudFront 無効化まで自動デプロイ