Day 1.5: プレ開発テックスタックガイド

テックスタックガイド

プロジェクトを作る際の技術選定の参考情報です。 Day 2の「何を作るか」の相談や、事前のSlackチャンネルでメンターがアドバイスします。


サーバー・ホスティング

プロジェクトの用途に応じて、適切なホスティングサービスを選びましょう。

会社の業務用プロジェクト

業務で使うツールは、会社のセキュリティポリシーに準拠したサービスを選択してください。

サービス特徴適した用途
Herokuセットアップが簡単、日本語ドキュメントあり社内ツール、プロトタイプ
Google Cloud Platform (GCP)高い信頼性、豊富な機能本格的な業務システム
Vercelフロントエンド特化、デプロイが簡単Webアプリ、ダッシュボード
AWS最も豊富なサービス大規模システム

個人プロジェクト

個人で作るツールには、無料枠のあるサービスがおすすめです。

サービス無料枠特徴
VercelHobby プラン(無料)Next.js との相性抜群、簡単デプロイ
GCP Always Free毎月一定量まで無料永続的な無料枠、幅広いサービス
Cloudflare Pages無料静的サイト・Webアプリ向け
Railway月$5分の無料クレジットHerokuの代替として人気
Render無料枠ありシンプルな構成向け

推奨テックスタック

Flagshipでの推奨構成

Flagshipでは、サーバーサイド処理を伴うアプリケーションにNest.jsを基盤として使用しています。

レイヤー技術理由
バックエンドNest.js (TypeScript)構造化されたアーキテクチャ、TypeScript標準
フロントエンドNext.js / ReactVercelとの相性、豊富なエコシステム
データベースPostgreSQL信頼性、Supabaseとの連携
ORMPrisma型安全、マイグレーション管理

用途別の推奨構成

フロントエンドのみ(静的サイト・SPA)

Next.js + Vercel

サーバーサイドの処理が不要な場合は、これだけで十分です。

サーバーサイド処理あり

Next.js (フロント) + Nest.js (API) + PostgreSQL

認証、データベース操作、外部API連携が必要な場合はこの構成。

シンプルなスクリプト・自動化

Python

データ処理、ファイル操作、定期実行タスクに最適。


AIと相性の良い言語・フレームワーク

Claude Codeと一緒に開発する際、以下の言語・フレームワークは特に相性が良いです。

高相性

言語/FW理由
Pythonシンプルな構文、豊富なライブラリ、AI/ML分野で標準
TypeScript型情報があるためClaudeが正確なコードを生成しやすい
Next.js構造が明確、ドキュメントが豊富
Reactコンポーネント単位で指示しやすい

相性が良い理由

  1. ドキュメントの豊富さ: Claudeの学習データに多くのサンプルコードが含まれている
  2. 構文のシンプルさ: 複雑な記法が少なく、生成されたコードが読みやすい
  3. 型情報: TypeScriptのように型があると、Claudeがより正確なコードを生成できる
  4. コミュニティの大きさ: エラーの解決策や best practice が見つかりやすい

相性が難しい場合

以下の場合は、より詳細な指示が必要になることがあります:

  • 新しすぎるフレームワーク: 2024年以降にリリースされた新機能
  • ニッチな言語・ライブラリ: ドキュメントが少ないもの
  • 複雑な設定: Webpack/Viteの細かい設定など

データベース推奨

PostgreSQL を推奨する理由

ワークショップでは PostgreSQL をデータベースとして推奨します。

選定理由:

  1. 信頼性: 長年の実績、エンタープライズでの採用実績
  2. 機能の豊富さ: JSON型、全文検索、地理情報など多彩な機能
  3. Supabaseとの連携: 無料で始められるBaaS(Backend as a Service)
  4. AI対応: pgvectorによるベクトル検索(RAG構築に便利)
  5. 学習コスト: SQLの標準に近く、他のDBへの移行も容易

Supabase のおすすめ

Supabase は PostgreSQL をベースにした BaaS で、以下の機能が無料で使えます:

機能説明
DatabasePostgreSQL データベース(500MB まで無料)
Authユーザー認証(メール、OAuth対応)
Storageファイルストレージ(1GB まで無料)
Realtimeリアルタイムデータ同期
Edge Functionsサーバーレス関数

始め方:

  1. Supabase でアカウント作成
  2. プロジェクトを作成(リージョンは東京推奨)
  3. 接続情報をコピーしてアプリに設定

その他のデータベースオプション

DB用途特徴
SQLiteローカル開発、小規模ツールファイルベース、セットアップ不要
MongoDBドキュメント型データスキーマレス、JSONそのまま保存
Firebaseモバイルアプリリアルタイム同期、Google連携

技術選定で迷ったら

メンターに相談

Day 2の「何を作るか」の相談時に、メンターがアドバイスします。 事前にSlackチャンネルで相談いただくこともできます。

相談時に伝えていただきたいこと:

  • 何を作りたいか: ツールの目的と機能
  • 用途: 業務用 or 個人用
  • 利用者: 自分だけ or チームで使う
  • 期間: 一時的 or 長期運用

シンプルに始める

最初は複雑な構成を避け、シンプルに始めましょう:

  1. まずはフロントエンドだけで動くものを作る
  2. データベースが必要になったら Supabase を追加
  3. サーバーサイド処理が必要になったら API を追加

段階的に機能を追加していくのが、Claude Codeとの開発で最も効率的です。


次のステップ

技術選定が決まったら、サンプルテンプレート集から似たプロジェクトを参考にしてみましょう。