レッスン2：始めるために必要なノーコードスタック

このレッスンのロックを解除するには、まず「レッスン1：AIウェブアプリとは何か、そしてなぜ今それが重要なのか」を完了してください。前のレッスンに戻る

はじめに

コードを一行も書く前に、モダンなウェブアプリケーションが実際に何で構成されているかを理解する必要があります。ノーコードツールを使ったとしても、AIを搭載したすべてのウェブアプリは依然として同じ4つのビルディングブロックから構築されています。ユーザーがアプリを見て操作するフロントエンド、すべてを繋ぐロジックを処理するバックエンド、情報を保存するデータベース、そしてアプリに知的能力を与えるAIモデルAPIです。これらのピースがどう組み合わさるかを理解することで、適切なツールを選び、不要なものに無駄なお金を使うことを避けられます。

4つのカテゴリの説明

アプリを作るのは家を建てるようなものだと考えてください。フロントエンドは人々が目にするもの——壁、窓、ドア、塗装です。バックエンドは壁の裏に隠された配管や配線です。データベースは大切なものをすべて保管する収納庫です。AIモデルAPIは質問に答えたりコンテンツを生成したりするためにオンデマンドで雇う有能なアシスタントです。

フロントエンドは通常、Webflow、Glide、あるいはBubbleやSoftrに内蔵されたデザインツールのようなビジュアルビルダーで構築されます。ボタン、フォーム、画像などのコンポーネントをドラッグ＆ドロップで配置します。HTMLやCSSを手書きする必要はありません。

バックエンドはビジネスロジックが存在する場所です。BubbleやMake（旧称Integromat）などのノーコードツールを使えば、「ユーザーがこのボタンをクリックしたら、あの処理を行う」というワークフローを作成できます。これらのワークフローはAPIを呼び出したり、メールを送信したり、データベースを更新したり、AIモデルを起動したりできます。

データベースはアプリのデータが格納される場所——ユーザーアカウント、フォーム送信内容、商品リスト、チャット履歴など——です。ほとんどのノーコードプラットフォームにはデータベースが内蔵されていますが、より柔軟性が必要な場合は、Airtable、Supabase、Google Sheetsなどの外部データベースを利用することもできます。

AIモデルAPIはアプリを知的にする要素です。OpenAI、Anthropic、Google Geminiなどのサービスは、APIを通じてモデルを公開しています。アプリはプロンプト（質問や指示）を送信し、応答を受け取ります。Bubble、Make、ZapierなどのツールにはこれらのAPI用の組み込みコネクタがあるため、通常は自分でAPIコードを書く必要はありません。

ノーコードスタックの4つのカテゴリ（フロントエンド、バックエンド、データベース、AIモデルAPI）を示す図——データの流れを示す矢印で繋がる

具体的な例で見る連携の仕組み

顧客レビュー要約ツールを作りたいと想像してください。ユーザーが50件のレビューをテキストボックスに貼り付け、ボタンをクリックすると、アプリが3つの箇条書き要約を返します。このアプリで各ピースがどう機能するかを見てみましょう。

フロントエンドは、テキストボックス、「要約」ボタン、要約が表示される領域があるウェブページです。

バックエンドワークフローは、ボタンがクリックされたときに起動します。テキストボックスからテキストを取得し、AIモデルAPIに送信し、応答を待ち、要約をフロントエンドに戻します。

データベースはここでは任意ですが、使用量を追跡したり後でユーザーに課金したりするために、各要約リクエストを保存しておくこともできます。

AIモデルAPIは50件のレビューを受け取り、「これらのレビューを3つの箇条書きに要約してください」のようなプロンプトで処理し、結果を返します。

以下は、どのノーコードビルダーでも表現できる、プレーンな擬似コードで書かれたワークフローロジックの簡略版です：

javascript

when buttonClicked:
  reviews = input.textBox.value
  prompt = "Summarize in 3 bullets: " + reviews
  summary = callAI(prompt)
  output.textArea.value = summary

ワークフローが英語の文のように読めることに注目してください。これがノーコードの本質です——何が起こるべきかを記述すれば、プラットフォームがどう実現するかを考えてくれます。

レビュー要約ツールの例のフロー図——ユーザーがテキストを貼り付ける → フロントエンドがそれを捕捉 → バックエンドがAI APIに送信 → AIが要約を返す → バックエンドがフロントエンドに要約を表示

スタック選択におけるよくある間違い

初心者が最も多く犯す間違いは、アーキテクチャを理解する前にツールを選んでしまうことです。各ツールが自分のアプリで実際に何をするかを知らないうちに、5つの異なるプラットフォームにサインアップしてしまいます。要件がどのカテゴリ——フロントエンド、バックエンド、データベース、AI API——に属するかをまず書き出してから、その枠にフィットするツールを探してください。

もう一つのよくある間違いは、あるプラットフォームがすでにニーズをカバーしているのに別々のツールに支払うことです。例えばBubbleはフロントエンド、バックエンド、データベースをすべて一か所で処理します。内蔵オプションがユースCaseに対して制限が厳しすぎたり高価すぎたりする場合にのみ外部ツールを追加してください。

3つ目の間違いはAPIコストを無視することです。AIモデルAPIへの呼び出しにはすべてお金がかかります。通常は1回あたり数セントですが、積み重なっていきます。同じデータを繰り返しAIに送信しないようなデータベースとワークフロー構造を選びましょう。

まとめ

すべてのAIウェブアプリ——ノーコードかどうかにかかわらず——は4つのパーツで構成されています：フロントエンド、バックエンド、データベース、そしてAIモデルAPI。フロントエンドツールはユーザーが見るものをデザインします。バックエンドツールはユーザーが操作したときに何が起こるかを定義します。データベースはアプリの情報を保存します。AIモデルAPIはオンデマンドで知性を提供します。要件がどのカテゴリに属するかを理解すれば、適切なノーコードツールを選ぶことがずっと簡単になります。次のレッスンでは、推奨する特定のプラットフォームでアカウントを作成し、初めて動作する画面を構築します。