バイブコーダーのためのシステムアーキテクチャ：シニアエンジニアガイド

10年の経験を持つシニアソフトウェアエンジニアが、r/ClaudeAIに、ゼロからClaude Codeを使ってアプリ開発を学ぶならどう取り組むかについて投稿しました。彼のアドバイスは、コードから始めるな、ということ。最高レベル、つまりシステムアーキテクチャから始めよ、というのです。

4つのコンポーネント

この投稿では、あらゆるアプリケーションを4つの層に分解しています：

• フロントエンド — ユーザーが見るもの（ウェブサイト、モバイルアプリなど）
• バックエンド — アプリの主要なロジックとルール
• データベース — データが保存される場所
• 配管 — すべてをつなぎ、機能させる仕組み

著者が配管に焦点を当てる理由は、Claude CodeのようなAIエージェントはフロントエンド、バックエンド、データベースを簡単に雛形化できるが、明示的に要求しない限り配管をスキップしてしまうからです。

配管：答えるべき4つの質問

1. すべての要素はどのように通信するのか？

フロントエンド、バックエンド、データベースはそれぞれ別個のもので、メッセージをやり取りします。ほとんどのアプリケーションでは、これはAPIを介して行われます。APIは、フロントエンドがバックエンドにデータを要求するためのドアのようなものです（例：「このユーザーの注文をください」）。他の方法もありますが、最初に注目すべきはAPIです。

2. どこで動作し、どのようにオンラインになるのか？

アプリをラップトップからインターネットに公開するには、以下が必要です：

• ホスティング — アプリが実際に実行され、世界中からアクセスできる場所（サーバー）。
• ドメインとDNS — カスタムアドレス（yourapp.com）と、それをサーバーに結びつける仕組み。
• デプロイ — コードを取得し、ユーザーが安全に利用できる形で公開するパイプライン。
• 環境変数とシークレット — パスワードやAPIキーをコード内に置かずに保管する場所。これでよく問題が起きます。

3. 誰が許可され、安全か？

著者が絶対にスキップしないでほしいと懇願する部分です。Vibe Codingでは、気づかないうちに安全でないものを出荷してしまう危険があります。この投稿では、既存の方法（ゼロから作るのではなく）を示唆しています。おそらく、認証フレームワーク、OAuth、JWT、またはマネージドIDプロバイダーなどです。ただし、元の投稿ではこれらの解決策が存在することに触れているだけです。

重要なポイント

この投稿が強調するのは、これらの配管の概念を名前で知っていることが、週末のおもちゃと、実際の人々がデータやお金を預けてもいいと思えるものとの違いを生むということです。上記の4つの質問に自分のアプリで答えられれば、あなたは現在出荷しているほとんどのVibe Coderより先を行っています。