触って確かめられる体験デモ
デモアプリ
「どれくらいのものを作ってもらえるのか」を、言葉ではなく実物でご確認ください。
すべてブラウザ内だけで動作し、データが送信されることはありません。
ECミニショップ
検索・絞り込み・商品詳細からカート・擬似チェックアウトまで、商用ECサイトの主要機能を一通り体験できるデモです。
Next.js 15
React 19
TypeScript
localStorage
Vitest
予約・受付システム
営業時間・休憩・担当スタッフ・所要時間から空き枠を算出する、店舗予約システムのデモです。
Next.js 15
React 19
TypeScript
localStorage
Vitest
カンバンタスクボード
ドラッグ&ドロップに加え、絞り込み・仕掛かり上限・操作の取り消しまで備えたプロジェクト管理ボードです。
Next.js 15
React 19
dnd-kit
TypeScript
Vitest
受注・案件管理ダッシュボード
KPIの目標対比から案件明細・CSV出力まで備えた、業務システムの管理画面デモです。
Next.js 15
React 19
Recharts
TypeScript
Vitest
開発の裏側
これらのデモの作り方
ここにあるデモはすべて、要件定義書と設計書を先に書き、実装をAIエージェントに任せる進め方で作っています。同じ進め方を、お客様のプロダクト開発にも適用しています。
① 要件定義
作るものの範囲を先に文章で固定します。「やらないこと」も明記し、判断が必要な箇所を実装前に洗い出します。
要件定義書受け入れ基準
② 設計
型定義・状態設計・画面構成・エラー時の挙動まで決めてから実装に入ります。検討して採らなかった案とその理由も残すため、後から読んでも判断を追えます。
設計書エッジケース一覧
③ 実装
データ層 → 純関数 → フック → UI の順に、画面に触れない層から積み上げます。小さな単位でコミットし、何をなぜ変えたかを日本語で残します。
日本語のコミット履歴各コミットで動作を壊さない粒度
④ 検証
計算・絞り込み・状態遷移・保存データの正規化を純関数に分離し、境界値をユニットテストで固定します。各コミットで静的解析・テスト・ビルドを通します。
ユニットテスト静的解析とビルドの通過
前提と注意
- 設計・レビュー・受け入れ判断は人が行い、実装をAIエージェントに任せています。全自動ではありません。
- デモ自体にAI機能は搭載していません。AIは開発プロセスで使用しています。
- 各デモに表示している顧客・商品・案件・タスクなどはすべて架空のサンプルデータです。
使用したAIエージェント: Claude Code (Anthropic)