tech-stack-decision-maker

技術スタックの意思決定

推測に頼るのはやめましょう。根拠に基づく、確信の持てる技術の提案を得られます。

このスキルでできること

プロジェクトの要件を説明すると、このスキルが次の内容を提案します。

✅ 具体的な技術スタック - フロントエンド、バックエンド、データベース、ホスティングに使う具体的な技術
✅ 各選択の理由 - プロジェクトのニーズに沿った明確な根拠
✅ Claude Code のプロンプト - このスタックで開発するための、そのまま使えるプロンプト
✅ デプロイ戦略 - ホスティング先とその方法
✅ 費用の内訳 - クライアントにかかる月額／年額費用
✅ 代替案 - 別の選択肢を検討するタイミング

対象ユーザー

次のようなソフトウェアの仕立て屋を対象としています。

• 技術の選択肢が多く、圧倒されている
• クライアントに自信を持って提案したい
• 技術的な決定をプロとして説明する必要がある
• 最新の、AI と相性の良い技術スタックを使いたい
• 間違ったスタックを選び、作り直す事態を避けたい

このスキルの使い方

入力形式

入力例：

Project: Fire inspection management system

Requirements:
- Web app for office staff (desktop primarily)
- Mobile-friendly interface for field inspectors
- User authentication with different roles (admin, inspector)
- Database for buildings, inspections, users
- File uploads (photos from inspections)
- PDF report generation
- Email notifications
- Real-time dashboard

Expected Users: 10-15 concurrent users max
Data Volume: ~200 inspections/month, growing slowly
Budget: Mid-range (client can afford hosting, but not enterprise costs)
Timeline: Need to launch in 4-6 weeks

出力形式

---

技術スタックの提案：消防設備点検管理システム

推奨スタック（モダンで AI と相性が良い構成）

Frontend:     Next.js 14 (React framework)
Backend:      Next.js API Routes
Database:     PostgreSQL (via Supabase)
Auth:         Supabase Auth
File Storage: Supabase Storage
Hosting:      Vercel
Styling:      Tailwind CSS

---

このスタックを選ぶ理由

✅ Next.js 14（フロントエンド＋バックエンド）

理由：

• オールインワン： フロントエンドとバックエンドが1つのコードベースにまとまっているため、Claude Code での開発が簡単です
• 高速な開発： React コンポーネントと組み込みのルーティングにより、すばやく開発できます
• モバイル対応： 初期状態でレスポンシブに対応しています
• SEO 対応： 必要に応じてサーバーサイドレンダリングを利用できます
• Claude Code と好相性： ドキュメントが豊富で、Claude が適切に扱えます

最適な用途： ウェブインターフェースと API ロジックの両方が必要なプロジェクト

代替案： 複数のフロントエンドから API を利用する必要がある場合は、React と Express を分けて構成します

---

✅ PostgreSQL（Supabase 経由）

理由：

• リレーショナルデータ： プロジェクトには明確な関連性があります（建物 → 点検 → ユーザー）
• 堅牢： 複雑なクエリ、トランザクション、データ整合性に対応します
• Supabase で管理： データベース管理の煩わしさがありません
• 組み込み機能： リアルタイムサブスクリプション、行レベルセキュリティ、自動生成される REST API
• 手頃な価格： 小規模プロジェクト向けの無料プラン、本番環境では月額 $25

最適な用途： 構造化データと関連性を扱うプロジェクト

代替案： データ構造が非常に柔軟、または未定義の場合は MongoDB

---

✅ Supabase（認証＋ストレージ＋データベース）

理由：

• 包括的なバックエンド： 認証、データベース、ストレージがすべて1つにまとまっています
• すばやくセットアップ： バックエンドサーバーの設定は不要です
• デフォルトで安全： 行レベルセキュリティポリシーがデータを保護します
• ファイルストレージを内蔵： 写真を簡単にアップロードできます
• 優れたドキュメント： Claude Code は連携方法を把握しています

最適な用途： 複雑なカスタムバックエンドロジックが不要なプロジェクト

代替案： Firebase（同様の機能を備えた Google のエコシステム）、または複雑なロジックが必要な場合はカスタムバックエンド

---

✅ Vercel（ホスティング）

理由：

• Next.js 向けに開発： シームレスにデプロイできます（文字どおりワンクリックです）
• 自動デプロイ： GitHub にプッシュすると、すぐにデプロイされます
• エッジネットワーク： CDN が組み込まれており、世界中で高速に動作します
• 無料プラン： 内容が充実しており、小規模プロジェクトに最適です
• カスタムドメインの設定が簡単： クライアントのドメイン設定も簡単です

最適な用途： Next.js プロジェクト（同じ会社が開発しています）

代替案： Next.js 以外のスタックを使う場合は Railway または Render

---

✅ Tailwind CSS（スタイリング）

理由：

• すばやくスタイリング： ユーティリティクラスにより、UI を迅速に開発できます
• レスポンシブ対応が組み込み： 初期状態でモバイルに対応しています
• 一貫したデザイン： HTML 内でデザインシステムを管理できます
• Claude Code の好み： AI によるコード生成の多くで Tailwind が使われています

最適な用途： 迅速なプロトタイピングとモダンな UI デザイン

代替案： プレーン CSS または styled-components（好みに応じて選択）

---

技術スタックの詳細

レイヤー	技術	月額費用	この選択の理由
フロントエンド	Next.js 14	無料（ホスティングに含まれます）	React のオールインワンフレームワークで、開発が迅速です
バックエンド	Next.js API Routes	無料（ホスティングに含まれます）	フロントエンドと同じコードベースにバックエンドのロジックを配置できます
データベース	PostgreSQL (Supabase)	$25	リレーショナルデータとマネージドサービスを利用できます
認証	Supabase Auth	含まれます	安全なユーザーログインとロールベースのアクセス制御を利用できます
ファイルストレージ	Supabase Storage	含まれます	検査用の写真をアップロードできます
ホスティング	Vercel	$20（Pro プラン）	Next.js をシームレスにデプロイできます
ドメイン	カスタムドメイン	$12/年（約$1/月）	クライアントのブランドを反映した URL を利用できます
メール	Resend または SendGrid	$0-10	トランザクションメール（通知）を送信できます
合計		約$46-56/月	中程度の価格帯で、拡張性があります

年間費用：約$552-672/年

---

このスタック向けの Claude Code プロンプト

1. プロジェクトの初期化

Create a Next.js 14 project with TypeScript, Tailwind CSS, and ESLint.
Use the App Router (not Pages Router).
Set up folder structure: /app, /components, /lib, /types, /public.

2. Supabase のセットアップ

Install Supabase client library.
Create a Supabase project and get the project URL and anon key.
Set up environment variables for NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY.
Create a Supabase client utility function in /lib/supabase.ts.

3. データベーススキーマ

In Supabase, create the following PostgreSQL tables:
- users (id, email, role, created_at)
- buildings (id, name, address, client_name, inspection_frequency, created_at)
- inspections (id, building_id, inspector_id, scheduled_date, status, notes, created_at)

Set up foreign key relationships:
- inspections.building_id → buildings.id
- inspections.inspector_id → users.id

Create row-level security (RLS) policies so users can only see their own data.

4. 認証

Implement Supabase authentication with email/password.
Create a login page at /login and signup page at /signup.
Add middleware to protect routes (redirect to /login if not authenticated).
Store user session in cookies for persistence.

5. ダッシュボードページ

Create a dashboard page at /dashboard.
Show today's inspections, upcoming inspections, and overdue inspections.
Use Supabase to fetch data with real-time subscriptions.
Style with Tailwind CSS - use cards and a clean layout.

6. 建物の管理

Create a page at /buildings that shows a list of all buildings.
Add search and filter functionality.
Create a form to add/edit buildings with fields: name, address, client_name, inspection_frequency.
Implement CRUD operations using Supabase.

7. 検査のスケジュール設定

Create an inspection scheduling page at /inspections/new.
Form fields: building (dropdown), inspector (dropdown), scheduled_date (date picker).
On submit, create a new inspection record in Supabase.
Show success notification and redirect to dashboard.

8. ファイルのアップロード

Add photo upload functionality to inspection forms.
Use Supabase Storage to handle file uploads.
Create a storage bucket called "inspection-photos".
Allow inspectors to upload multiple photos per inspection.
Display uploaded photos in a grid with lightbox functionality.

9. PDF レポートの生成

Install @react-pdf/renderer library.
Create a PDF template for inspection reports that includes:
- Company logo and branding
- Building and client information
- Inspection details and results
- Photos (if any)
Generate PDF on demand when user clicks "Download Report" button.

10. メール通知

Install Resend library for sending emails.
Create API route at /api/send-email.
Send email when:
- Inspection is scheduled (notify inspector)
- Inspection is completed (notify client)
Use email templates with dynamic data (building name, date, etc).

---

デプロイ手順

ステップ 1：GitHub にプッシュする

git init
git add .
git commit -m "Initial commit"
git remote add origin [your-github-repo-url]
git push -u origin main

ステップ 2：Vercel に接続する

1. vercel.com にアクセスして、サインアップします
2. 「Import Project」をクリックします
3. GitHub リポジトリを接続します
4. Vercel が Next.js を自動検出し、ビルド設定を構成します

ステップ 3：Vercel に環境変数を追加する

• NEXT_PUBLIC_SUPABASE_URL = [Supabase プロジェクトの URL]
• NEXT_PUBLIC_SUPABASE_ANON_KEY = [Supabase の anon キー]
• RESEND_API_KEY = [Resend の API キー]

ステップ 4：デプロイする

• Vercel は main ブランチへのプッシュごとに自動でデプロイします
• 本番環境の URL：your-project.vercel.app

ステップ 5：カスタムドメイン

• Vercel ダッシュボードで Settings → Domains に移動します
• クライアントのカスタムドメインを追加します（例：inspections.clientcompany.com）
• DNS 設定の手順に従います

デプロイにかかる合計時間： 10-15 分

---

代替案を使用する場合

PostgreSQL の代わりに MongoDB を使用する場合：

• ❌ データ構造が非常に変わりやすく、予測できない
• ❌ スキーマに極めて高い柔軟性が必要
• ❌ ネストされた JSON オブジェクトを大量に保存する

例： 多様なユーザー生成コンテンツを扱うソーシャルメディアアプリ

Supabase の代わりに Firebase を使用する場合：

• ❌ クライアントが Google のエコシステムを幅広く活用している
• ❌ Google Cloud との連携が必要
• ❌ Firestore のオフラインファースト対応モバイル SDK を利用したい

例： オフライン機能が必要なモバイルアプリ

Next.js の代わりに React + Express を使用する場合：

• ❌ バックエンドのロジックが非常に複雑（複雑なビジネスルールを含む）
• ❌ モバイルアプリとウェブの両方で利用する独立した API が必要
• ❌ チームがすでに Express に精通している

例： 複雑なビジネスロジックを持つ ERP システム

Vercel の代わりに Render/Railway を使用する場合：

• ❌ Next.js 以外のバックエンド（Django、Rails など）を使用する
• ❌ サーバー設定をより細かく制御する必要がある
• ❌ データベースとアプリを同じプラットフォームでホストしたい

例： Python/Django プロジェクト

---

スタックの複雑さのレベル

🟢 初心者向け（新しいソフトウェア開発者におすすめ）

スタック： Next.js + Supabase + Vercel + Tailwind 理由： 設定が最小限で、ドキュメントが充実しており、Claude Code で問題なく扱えます 最適な用途： B2B ソフトウェアプロジェクトの 80%

🟡 中級者向け

スタック： React + Node.js/Express + PostgreSQL + AWS/Railway 理由： より細かな制御ができ、フロントエンドとバックエンドを分離できます 最適な用途： バックエンドのロジックが複雑なプロジェクトや、既存のインフラストラクチャがあるプロジェクト

🔴 上級者向け（必要な場合を除き避けてください）

スタック： カスタムマイクロサービス + GraphQL + Kubernetes + AWS 理由： ほとんどのプロジェクトには過剰で、メンテナンスの負担も大きくなります 最適な用途： 大規模な処理能力が必要なエンタープライズシステム

ソフトウェア開発者向け： クライアントに特別な要件がない限り、🟢 初心者向けを選びましょう

---

技術スタックで避けるべき選択肢

よほどの理由がない限り、以下は避けてください。

❌ PHP/WordPress - 時代遅れで保守が難しく、Claude Code との相性もよくありません ❌ Ruby on Rails - 利用例が比較的少なく、Claude Code のサンプルも限られています ❌ Angular - React より複雑で、学習のハードルも高くなります ❌ MySQL - 最新のプロジェクトには PostgreSQL のほうが適しています ❌ 共有ホスティング - 遅く、信頼性に欠けるため、代わりにクラウドプラットフォームを使いましょう ❌ すべてをセルフホスト - 保守が大変になるため、マネージドサービスを使いましょう

---

スタック選びの簡単なおすすめ

シンプルな CRUD アプリ（基本的なデータ管理）：

• Next.js + Supabase + Vercel
• 費用：月額 $25-50
• 開発期間：2-3 週間

モバイルファーストのフィールドサービス：

• Next.js（レスポンシブ）+ Supabase + Vercel
• ネイティブモバイルアプリの前に、PWA（プログレッシブウェブアプリ）を検討しましょう
• 費用：月額 $25-50
• 開発期間：3-4 週間

複雑なプロジェクト管理：

• Next.js + Supabase + Vercel + 高度な機能（Stripe、Twilio、SendGrid）
• 費用：月額 $50-100
• 開発期間：6-8 週間

Eコマース / 顧客ポータル：

• Next.js + Supabase + Stripe + Vercel
• 費用：月額 $50-100（+ Stripe の手数料）
• 開発期間：4-6 週間

---

覚えておきましょう

最適な技術スタックの条件：

1. ✅ シンプル - 構成要素が少ないほど、バグも少なくなります
2. ✅ ドキュメントが充実している - Claude Code が効果的にサポートできます
3. ✅ マネージドサービス - 保守の手間が減り、開発に使える時間が増えます
4. ✅ 費用対効果が高い - ほとんどの B2B プロジェクトで月額 $100 未満
5. ✅ 実績がある - 最先端の技術ではなく、十分に実証された技術を使いましょう

プロジェクトの 80% におすすめするデフォルト構成： Next.js + Supabase + Vercel + Tailwind

このスタックはモダンで、AI との相性がよく、手頃な価格で拡張性もあります。

技術選びについて考えすぎるのはやめましょう。このスタックを使って素早く開発し、収益を上げましょう。