高速なウェブアプリの構築：現代開発者のためのガイド

これは、特にAI駆動開発の現代において、何が最も効果的であるかについての私の個人的な発見に基づく非常に意見の分かれる記事です。これは、私がspendobudget.comやclaycon.appのような成功したSaaSウェブアプリを構築するために使用したまさにそのスタックです。あなたの経験は異なるかもしれませんが、これらのツールとアプローチは、迅速なウェブアプリケーション開発のために一貫して結果を出してきました。また、このスタックで新しいプロジェクトを簡単に始めることができるボイラープレートリポジトリも作成しました。

はじめに

AIは、私たちがソフトウェアを構築する速度を根本的に変えました。かつては数週間かかっていたものが、今では数日または数時間で達成できます。しかし、この加速には隠れた罠があります。強力な基盤と適切なアーキテクチャがなければ、その速いペースは、最終的に従来の開発よりもあなたを遅くさせるほどの技術的負債の負担を生み出す可能性があります。鍵は、単に速いツールを選ぶことだけではありません。人間とAIの両方にとってエルゴノミックなコードベースを設計することです。クリーンなパターン、予測可能な構造、そしてよく整理されたコードは、あなたの生活を楽にするだけでなく、AIの支援を劇的に効果的にし、物事を壊さずに速く進むことを可能にします。

IDE：Cursor

Cursorは、AI支援を念頭に置いてゼロから構築されているため、私の頼りになるIDEになりました。これにより、最もエルゴノミックなDXが実現します。Cursorのエージェントは、あなたのコードベースを理解し、役立つ提案をすることにも非常に優れています（特に、.mdcルールを使用して良いコンテキストを提供した場合）。

フルスタックソリューション：Next.js + サーバー関数

Next.jsは、フルスタックのReactアプリケーションのゴールドスタンダードであり続けており、その最大の利点の1つは、LLMがReactとNext.jsのパターンに非常に優れていることです。サーバー関数は、タイプセーフなクライアントサーバー通信を提供し、単純な操作のための別のAPIルートを排除し、組み込みの読み込み状態を持つ自動シリアル化を含みます。長時間実行される操作については、私はInngestを利用します。長時間実行される関数は、通常、サーバーレスアプリの最大の弱点ですが、Inngestはバックグラウンドジョブと複雑なワークフローを非常に簡単に管理できるようにします。

認証については、Clerkが私の頼りになるソリューションです。セットアップが非常に簡単で、複雑な認証フローをすべてすぐに処理し、LLMはそのパターンについてよく訓練されているため、AI支援開発に最適です。

スケールするプロジェクト構造

プロジェクトが成長するにつれて速度を維持するためには、よく整理されたフォルダ構造が不可欠です。以下は、私がNext.jsアプリケーションに最適だと見出した構造です。

├── app/
│   ├── (auth)/
│   ├── layout.tsx
│   └── page.tsx
├── components/
│   └── ui/
├── core/
│   ├── post.core.ts
│   ├── like.core.ts
│   └── user.core.ts
├── db/
│   ├── user.db.ts
│   ├── post.db.ts
│   └── schema/
│       └── user.schema.ts
├── lib/
│   ├── utils.ts
│   ├── openai/
│   └── stripe/
├── prompts/
├── public/
└── types/
    ├── post.type.ts
    └── user.type.ts

主要なディレクトリの説明：

この構造は、関連するコードをまとめながら、関心の分離を明確に維持します。core/ディレクトリは特に強力で、ビジネスロジックを一元化し、アプリケーションの異なる部分でテストと再利用を容易にします。

データベース：Drizzle ORM + Neon PostgreSQL

Drizzle ORMは、優れた型推論とデータベースを抽象化しないSQLライクな構文を持つTypeScriptファーストのORMです。軽量でパフォーマンスが高く、ランタイムのオーバーヘッドがゼロです。Neonは、ゼロまでスケールし、優れたコールドスタートパフォーマンスと異なる環境のためのデータベースブランチングを提供するサーバーレスPostgreSQLを提供します。

支払い：Stripe

Stripeは、使いやすいTypeScript SDKを提供する最も広く使用されている支払い処理業者です。サブスクリプションのためにStripeを統合する際には、Theoのアプローチに従うことをお勧めします：Theo's Guide to staying sane while implementing Stripe

スタイリング：shadcn/uiエコシステム

shadcn/uiは、重いパッケージのインポートの代わりにコピー＆ペーストアプローチでコンポーネントライブラリを革命的に変えました。Tailwind CSSとRadix UI上に構築されており、優れたアクセシビリティ、完全なカスタマイズ制御、そして依存関係地獄なしで90％のユースケースをカバーします。活発なエコシステムは、追加のコンポーネント、テーマ、ツールを常に提供しています。

デプロイメント：Vercel

Vercelは、Next.jsアプリケーションをデプロイするための自然な選択です。個人開発者やサイドプロジェクトに最適な寛大な無料枠を提供しており、Proプランでさえほとんどのユースケースにとって非常に寛大です。デプロイプロセスはシームレスです。GitHubリポジトリを接続すると、すべてのプッシュがブランチのプレビューURLとともに自動的にデプロイされます。プラットフォームは、エッジ関数、サーバーレス関数、静的アセットを簡単に処理します。

なぜこのスタックが2025年に機能するのか

この組み合わせが優れているのは、エンドツーエンドのTypeScript、最適化されたパフォーマンス、単純なアプリケーションから複雑なアプリケーションへのスケーラビリティ、AIフレンドリーなパターン、そして大規模で活発なコミュニティを持つ cohesive なエコシステムを提供するためです。鍵は、LLMによってよりよく理解される傾向があるため、よく文書化され、大規模なコミュニティを持つツールを選択することです。

ボイラープレート

このスタックで簡単に始めることができるボイラープレートリポジトリを作成しました。READMEの指示に従うだけで、すぐに立ち上げて実行できます。

また、Cursorのエージェントを使用する際の私の発見をまとめたCursorのguidelines.mdファイルも確認できます。これにより、エージェントがプロジェクトを理解しやすくなります。

連絡先