Engineer
ポートフォリオサイト（本サイト）
AstroやRemixなど複数のフレームワークでの試作を経て、最終的にNext.jsで構築。デプロイ環境（Cloudflare Pages）との相性を重視し、安定性を優先して完成させました。
フロントエンド:TypeScriptNext.jsReactTailwind CSSSCSS
バックエンド:SupabasePostgreSQLDrizzle ORM
デプロイ:Cloudflare PagesGitHub Actions
画像最適化、レスポンシブデザイン、アクセシビリティに配慮。
実装詳細:
- Next.js App RouterによるSSR（Edge Runtime）
- Supabase RLSによるセキュアなデータアクセス
- WebP形式への画像最適化
- Cloudflare Pagesによる高速デプロイ
実店舗運用 POSレジシステム
家族経営の美容室で2025年10月から毎日稼働しているPWAアプリ。Vanilla JSで構築。
フロントエンド:JavaScript (ES6+)PWAService WorkerIndexedDB
バックエンド:SupabasePostgreSQL
1万行超のコードを自力でモジュール化。iPhone特有の表示崩れ対策やオフライン動作、災害復旧機能など、現場での実用性を徹底的に追求。
主な特徴:
- 複雑な割引計算ロジックの自動化（計算ミスを解消）
- iPhone/Safariにおける表示崩れ・UI干渉の徹底排除
- オフライン動作・災害復旧システムの構築
- IndexedDBによる自動バックアップスケジューラー
テトリス風ゲーム
Canvas APIを使用したブラウザゲーム。滑らかなアニメーションと直感的な操作を実現。
フロントエンド:JavaScriptTypeScriptCanvas APIRequestAnimationFrameGame Loop
60fpsの滑らかなアニメーション、キーボード操作の最適化。
実装詳細:
- RequestAnimationFrameによる60fpsアニメーション
- Game Loopによる状態管理
- キーボードイベントハンドリング
- Canvas APIによる描画最適化
クリエイターとしての活動についてもご覧いただけます
クリエイターとしての紹介を見る