推奨する技術スタック
Claudeは指示されればどんな言語・フレームワークの組み合わせでも動くコードを書きます。ただし人間が読んで直せる状態を保つには、選択肢を絞る必要があります。弊社では次の組み合わせを標準にしています。他の組み合わせが間違いというわけではなく、統一によってレビューと引き継ぎのコストを下げています。
ホスティングとサーバー: Cloudflare
Cloudflareは、Webサイトの配信、サーバー処理(Workers)、データベース(D1)、ファイル保存(R2)を一つのアカウントで扱えます。弊社では、契約先やアカウントを増やさずに一箇所で完結させるため、小規模から中規模の製品までCloudflareに寄せます。
押さえておきたいのは、Cloudflareのダッシュボードが「今動いているものの実体」だという点です。Claudeがコードを変更しても、デプロイしなければ利用者には反映されません(環境の分離)。
フロントエンド: Next.js
Next.jsは、画面の表示とサーバー処理を同じプロジェクトで書けるReactベースのフレームワークです。弊社では、画面とAPIを別リポジトリへ分けるほど規模が大きくない製品で、Next.jsを標準にしています。
UI部品: shadcn/ui と Tailwind CSS
shadcn/uiは、ボタンやダイアログなどの部品のコードをプロジェクトへ直接コピーして使うライブラリです。部品本体が手元にあるため、見た目と挙動を読んで直せる状態を保てます(土台となるBase UIなどの依存は追加されます)。弊社ではUI部品の起点に選んでいます。新しいプロジェクトの雛形はshadcn/uiのcreateから、Next.jsとBase UIの組み合わせで作ります(新しく作る)。
Tailwind CSSは、見た目をクラス名の組み合わせで指定する仕組みです。別ファイルのCSSを行き来せず、コンポーネントの中で見た目と構造を一緒に読めるため、Claudeが生成したコードもそのまま人間が確認しやすくなります。
サーバー側の処理: Hono
Honoは、APIサーバーを書くための軽量なフレームワークです。様々な実行環境で動き、特にCloudflare Workersと相性が良い道具です。弊社では、Next.jsのAPI機能だけで済まない独立したAPIサーバーが必要になった時にHonoを選びます。
データベースとの接続: Drizzle
Drizzleは、TypeScriptの型とデータベースのテーブル構造を対応づけるORMです。SQLを直接書く場合と比べて、存在しないカラムを指定するようなミスをコードを書いている段階で検出できます。実際のデータベースとの一致はmigrationの適用で保ちます(構造の観点)。弊社では、Cloudflare D1と組み合わせて使います。
APIの設計: RESTful API
弊社では、独自の設計方針を持ち込むより、URLとHTTPメソッドで操作を表現するRESTfulな設計を標準にしています。GraphQLのような別の設計思想を否定するものではなく、学習コストと引き継ぎのしやすさを優先した選択です。
コードの構造: DDD(ドメイン駆動設計)
DDD(Domain-Driven Design)は、業務のルールをコードの中心に置き、データベースや外部サービスへの依存をその外側に配置する設計の考え方です。弊社では、業務ルールが複雑になりやすい製品で、ルールの変更が画面やデータベースの都合に引きずられないようDDDの考え方を採用します。小規模なLP(ランディングページ。1ページ完結の宣伝ページ)や単純なフォームには、この構造を持ち込みません。
開発環境の統一: vp(vite-plus)
vp(vite-plus)は、lintやformatなど開発中に繰り返し使うコマンドをまとめたツールです。プロジェクトごとに設定を書き直す手間を減らすため、新しく作る製品ではvpを標準にしています。導入済みの既存リポジトリは、使用中のツールをそのまま維持し、無理に揃えません。このツールを直接触る場面は少なく、Claudeが変更後の検査に使っている、という理解で十分です。
このページから持ち帰ること
スタックの中身をすべて判断できる必要はありません。最低限持ち帰るのは、弊社の標準スタックがあるという事実と、Claudeと製品を作る時はこの標準を使うよう伝える、という一点です。
弊社の標準スタック(Cloudflare、Next.js、shadcn/ui、Tailwind CSS)で作って
標準と違う技術を使いたい理由がある場合は、その理由をClaudeに説明してもらってから判断します。