2025.06.17

バイブコーディング特化の結論構成【2025年6月時点】

tl;dr

結論としては、バイブコーディングに特化した技術スタックはこちらです。

はじめに

「バイブコーディング（Vibe Coding）」とは、AIに自然言語で指示を出すことでコード生成を行い、仕様よりも“ノリ”や直感を重視して開発を進める新しいスタイルのソフトウェア開発手法です。

この新しい開発スタイルに特化したときに技術選定がどう変わるかを考えてみました。

なぜフルスタックTypeScriptなのか

バイブコーディングの最大のポイントは、AIに文脈をすべて渡せる状態を保つことです。 TypeScriptで統一することで、

  • 型情報をフロントエンドとバックエンドで共通化できる
  • 変数名や関数名の命名規則が統一される
  • TypeScriptは文献や事例が豊富でコード生成の品質が高い

というメリットがあります。 また、モノレポ構成により、UI・API・型定義・データモデルが1つのリポジトリで完結します。 これにより、AIはプロジェクト全体の構造を一度に把握できるようになり、生成されるコードの品質を上げることができます。 例えば、フロントエンドの変更に合わせてAPIの修正も自動で提案してくれるといった開発体験が得られます。

フロントエンド

フレームワーク

フロントエンドのフレームワークはNext.js（App Router）を推奨します。生Reactと比べると設定することが少なく、また、RemixやReact Routerには振り回されたくないので素直にNext.jsに乗っかっておきます。 App Routerを推奨しますが、Page Routerでも問題ありません。 Next.jsのバージョンが新しすぎるとAIが間違った実装をするのでNextの最新情報は自分でキャッチアップしておきましょう。

React以外の選択肢としてはVue.jsやSvelteがありますが、事例の豊富さはAIのコード品質に直結するので、ここではReactを選んでおきたいです。

スタイリング

Tailwind CSS + shadcn/uiの組み合わせを推奨します。

筆者は今までTailwindは否定派でした。templateにスタイルを書くとHTMLとCSSの責務が分離できず、可読性も低いですし、なにより他人が書いたTailwindはメンテしたくありません。 しかし、バイブコーディングするなら、次の理由でTailwind CSSが適していると思います。

  • クラス単位での明示: スタイルが直接見えるため、AIが意図を理解しやすい
  • HTML/CSS/JSの一体化: 1つのファイルで完結し、文脈が分断されない
  • 豊富な学習データ: Tailwindの事例が多く、AIの生成品質が高い

なにより、自分で書かないなら可読性も保守性も優先度が下がります。 おおまかなUIの実装はバイブコーディングできますが、細部までこだわりたいときは最終的に自分で書くことがあります。CSSの知識や理解は引き続き必要だと感じました。

コンポーネントの挙動や振る舞いはTailwindだけでは実装しづらいため、コンポーネントライブラリとしてshadcn/uiを併用します。

選ばないもの

逆にバイブコーディングに特化するなら以下の選択肢は選ばないと思います。

  • CSS Modules: ファイルが分離され、AIが文脈を把握しにくい
  • Chakra UIやMantineなどのコンポーネントライブラリ: 独自のシステムで、AIが適切なpropsを推論しにくい

自分で実装するなら筆者は引き続きNative CSS派ではあるものの、バイブコーディングすることも見据えるとTailwind CSSを採用する場面が増えてくるかもしれません😭

バックエンド

フレームワーク

バックエンドのフレームワークはHonoを推奨します。

  • TypeScriptファーストの設計: 型推論が優秀で、AIがリクエスト/レスポンスの型を正確に理解できる
  • 自前実装が少ない: ミドルウェアやユーティリティが豊富で、車輪の再発明を避けられる
  • 軽量でシンプル: 複雑な設定が不要で、AIが理解しやすい構造
  • Web Standards準拠: モダンなWeb APIに準拠しており、学習データも豊富

Expressでも問題ありませんが、Expressに比べると、TypeScriptとの相性が良いこと、自前で設定することの少なさ、フレームワークが提供している機能の多さでHonoを選びたくなります。

データモデリング

データのモデリングはエンジニアが自身で行った上で、ORMにはPrismaを推奨します。

  • スキーマファーストアプローチ: schema.prismaファイルがデータ構造の唯一の真実となる
  • 型安全性: TypeScriptとの完璧な連携で、コンパイル時にエラーを検出
  • AIとの親和性: スキーマが明確に定義されているため、AIがデータ構造を正確に理解できる
  • 豊富な学習データ: Prismaの事例が多く、AIの生成品質が高い

スキーマ定義さえしっかりしていれば、CRUDの実装やクエリの生成は任せても大丈夫でしょう。

APIのI/F定義

API設計もエンジニアが引き続き担当した方がよいと思います。Zodでリクエスト/レスポンスのスキーマ定義を行ってから実装に入りましょう。 ビジネスロジックやデータフローをAIにがんばって伝えるなら自分で書いてしまった方が速くVibeに乗れます。

インフラ

バイブコーディングにおけるインフラ選択のポイントは、AIが状況を把握しやすい構成にすることです。 筆者の好みでGCPで説明しますが、AWSでも大丈夫です。

  • CLIで構成が確認・設定できる: gcloud config list などのコマンドでAIが現在の設定を把握でき、IAMなどもCLIから設定可能
  • 設定がコード化されている: terraformファイルで構成が明示的

また、コツとしてREADMEに以下を明記しておくことが重要です：

  • デプロイ手順とコマンド
  • 環境変数の設定方法
  • インフラ構成の概要
  • 各サービスの役割

これにより、AIがプロジェクトの全体像を理解し、適切なインフラ関連の提案が出てきます。

全体的な実装方針

AIのコンテキストウィンドウを意識した設計

次のことに気をつけて実装を進めるとコード生成の品質を高められると思います。

  • 関数の責務を明確にし、ファイルを小さく分割
  • モジュールやユーティリティのパッケージ化
  • ファイル名や関数名、docstringの整備
  • 余計なファイルや責務の混在を避ける

AIのコンテキストウィンドウには制限があります。無駄なファイルや曖昧な構造は、AIの理解を阻害する要因になります。 また、1ファイルあたりの行数を減らすことで消費されるトークンも節約することができます。

Linter・Formatterの設定

静的解析ツールとしてESLint、Prettier、Code Spell Checker（CSpell）を設定しておきたいです。 バイブコーディングにおいて、これらのツールは単なる品質管理ツールではなく、AIの生成品質を向上させる仕組みとして機能します。 BiomeよりもESLintをおすすめする理由としては、ESLintの方がルールを細かく設定できることが挙げられます。ESLintは設定コストがデメリットとして挙げられますが、初期投資として「1回だけ頑張ってガチガチに設定する」価値は十分あると思います。 また、タイポやスペルミスを防ぐことでAIが変数名やコメントを理解しやすくなるため、スペルチェッカーも合わせて入れておきましょう。

AIに任せない方がよいこと

データのモデリングやAPI設計、アーキテクチャは引き続きエンジニアが担当した方がよいと思います。逆に、これらのルールを決めたら、あとはAIがコードを書いた方が速いかもしれません。

デザインや世界観にこだわりがあるときに、UIやデザインの厳密な実装はまだ自分で書いた方が速いと感じました。

さいごに

これまでの技術選定では、開発するアプリケーションに向いているフレームワークや、チームメンバーの経験や社内の事例がある言語が選ばれてきたと思います。パフォーマンス要件や学習コストなども判断基準に入っていたでしょう。なにより、エンジニアが書きたい・書いていて楽しい言語やフレームワークを選びたいと思ってきました。

しかし、バイブコーディングに特化するなら、AIが生成するコードの品質がより高くなる技術選定をしたくなります。 具体的には、

  • AIによる補完精度
  • 文脈（コンテキスト）の伝達しやすさ
  • 型情報の一貫性
  • 構造の理解しやすさ

が判断軸になってきます。

歴史的にはRailsやPHP、Pythonで作られたアプリケーションが多く、サーバーサイドに適した言語は他にもあります。「結局フロントエンドとバックエンドで分業するのに、わざわざTypeScriptで統一して開発する意味がない」という意見も多く、サーバーサイドTSは否定派が多かったように見えます。

しかし、ここにきてTypeScriptを選ぶ明確な理由が出てきたと感じます。 モノレポ構成でフロントエンドからバックエンドまでTypeScriptで統一して書くことで、AIが解釈しやすく、コード生成の品質を高めることができます。

モノレポ × TypeScript × Next.js × Tailwind CSS × Hono × Zodが現代のカバマンダガルドと言えるでしょう。 カバマンダガルド