Interactive

推奨する技術スタック

Claudeは指示されればどんな言語・フレームワークの組み合わせでも動くコードを書きます。ただし人間が読んで直せる状態を保つには、選択肢を絞る必要があります。弊社では次の組み合わせを標準にしています。他の組み合わせが間違いというわけではなく、統一によってレビューと引き継ぎのコストを下げています。

Cloudflareを土台に、データ、処理、画面の層が積み重なる弊社の標準構成

ホスティングとサーバー: 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に説明してもらってから判断します。

参考資料