Claudeを使ってバックエンドを構築する方法？

従来のバックエンド開発は、広範なコーディング、インフラ管理、そして多大な開発リソースを必要とすることがよくあります。しかし、現代のバックエンド・アズ・ア・サービスプラットフォームを活用することで、このプロセスを劇的に簡素化することができます。 back4appは、ワークフローを加速するために設計された包括的なツールセットを提供することで、このプロセスを簡素化します。 これらのツールの一つは、 back4appのモデルコンテキストプロトコル（mcp）サーバー であり、自然言語のみを使用してclaudeのようなllmから完全なバックエンドを構築することができます。 このチュートリアルでは、back4app mcpサーバーを通じてclaudeを使用して、個人の支出トラッカーのバックエンドとユーザーインターフェース（ui）を構築し、back4appコンテナにデプロイする方法を学びます。 主なポイント このチュートリアルで構築されたライブの個人支出トラッカーを、 このリンク を使用して見ることができます。 claudeのプロンプトとmcpサーバーを使用して、数分でback4app上にバックエンドをスキャフォールドする方法を発見してください。 オーナー専用の書き込みを保護し、追加のインフラなしで月次サマリーを正確に保つcloud codeフックの実際の動作を確認してください。 claudeによって生成されたjavascript sdkを通じて、parse apiに接続するレスポンシブなフロントエンドを立ち上げる方法を学びます。 back4appコンテナを使用したワンクリックデプロイを探求し、運用オーバーヘッドゼロでgithubリポジトリを本番環境にプッシュします。 前提条件 このチュートリアルを進めるには、以下が必要です back4appアカウント。まだお持ちでない場合は、 無料でサインアップできます 。 システムにインストールされたclaudeデスクトップ。 バックエンド開発の基本的な概念に対する理解。 プロジェクト概要 個人経費トラッカー リアルタイムでclaudeがクエリを実行し、更新できる経費追跡バックエンドを構築します。 あなたの支出トラッカーは、カテゴリ別に支出を記録し、あなたの支出習慣の月次および年次の要約を提供します。 プロジェクトには4つのデータモデルがあります ユーザー このテーブルは、各人のアカウント資格情報と全体の月間支出限度額を保存します。フィールドには、メール、パスワード、月間予算、タイムスタンプが含まれます。 支出 このテーブルには、各購入が記録されます 日付、金額、カテゴリポインタ、および説明。 カテゴリ このテーブルは、支出をグループ化するためのユーザー定義ラベルを保存します。フィールドには、id、user id、name、およびタイムスタンプが含まれます。 月次要約 このテーブルは、ダッシュボードと予算チェックのための迅速な事前集計合計をキャッシュします。フィールドには、 user id , month , total spent , および timestamps 支出を記録するたびに、 beforesave cloud codeトリガーがその月のmonthlysummaryを見つけ（または作成し）、その合計を増加させ、月間予算から金額を差し引きます。 スキーマを視覚化するためのエンティティ関係図は次のとおりです これで、あなたが構築するものの大まかなアイデアが得られたので、次のセクションでは、back4app mcpサーバーをclaude desktopで設定し、このセクションで説明したアプリを作成するプロンプトを書き始めます。 back4appとclaude desktopの接続 back4app mcpサーバーをclaude desktopに接続するには、まずback4appアカウントキーが必要です。 それを取得するには、back4appアカウントにログインし、ユーザーダッシュボードでナビゲーションバーのドロップダウンをクリックし、 アカウントキー を選択します。 「 アカウントキー 」ページで、アカウントキーに名前を付け、生成されたキーをコピーして安全に保管してください。 次に、claudeデスクトップの設定ファイルを修正して、back4app mcpサーバーを含める必要があります。 デフォルトでは、claudeデスクトップの設定ファイルはシステムに存在しません。システムのclaudeデスクトップ設定に移動し、「 開発者 オプション」を選択し、「 設定を編集 」ボタンをクリックすることで設定ファイルを作成できます。または、「 このガイド 」に従うこともできます。 これにより、次の場所に設定ファイルが作成されます（すでに存在しない場合）： macos /library/application support/claude/claude desktop config json windows %appdata%\\\claude\\\claude desktop config json …そして、ファイルがファイルシステムに表示されます。 お好みのテキストエディタで設定ファイルを開き、以下の設定を追加してください。 { "mcpservers" { "back4app" { "command" "npx", "args" \[ " y", "@back4app/mcp server back4app\@latest", " account key", "\<account key>" ] } } } \<account key>をあなたのアカウントキーに置き換え、ファイルを保存してclaudeデスクトップを再起動してください。windowsマシンでこのチュートリアルを実行している場合は、コマンドキーの値をnpx cmdに変更してください。 これらの設定が整ったら、back4app mcpサーバーとclaudeデスクトップを使用してback4appバックエンドの構築を開始する準備が整いました。 claude desktopを使用したバックエンドの作成 前述のプロジェクトのバックエンドを作成するには、back4appで新しいアプリを作成し、そのアプリで適切なデータベーステーブルを作成する必要があります。 これをclaudeデスクトップとプロンプトを使用して実現できます。プロンプトは、claudeに「personal expense tracker」という新しいアプリケーションを作成し、必要なフィールド、ポインタ関係、デフォルト値、アクセス制御を持つ4つのmongodbクラス（ user、category、expense、monthlysummary）を定義し、費用が変更されるたびに月次サマリーを更新するcloud codeフックを埋め込み、未承認の書き込みをブロックし、ユーザーの重複したカテゴリ名を防ぐように指示する必要があります。 これを実現するためのプロンプトの例は以下に示されています create a new back4app app named “personal expense tracker” class \\\\ user email string, required, unique passwordhash string, required monthlybudget number, required, default 0 (smallest currency unit) add a unique index on email class category user pointer<\\\\ user>, required (owner) name string, required acl public read, owner write add a compound unique index on {user, name} class expense user pointer<\\\\ user>, required category pointer\<category>, optional amount number, required currency string (length 3), required, default “usd” spentat date, required note string, optional isdeleted boolean, required, default false acl public read, owner write add indexes on {user, spentat} and {user, isdeleted} class monthlysummary user pointer<\\\\ user>, required month date, required (store the first day of the month) totalspent number, required acl public read, owner write add a unique index on {user, month} cloud code 1\ aftersave on expense if isdeleted is false, upsert the matching monthlysummary row (month = first day of spentat) and increment totalspent by amount if an expense is soft deleted (isdeleted toggled to true), decrement totalspent accordingly 2\ beforesave on expense reject writes when the authenticated user is not equal to user 3\ beforesave on category enforce the per user unique {user, name} combination create all classes, fields, indexes, clps, and cloud code hooks exactly as specified プロンプトを送信すると、アプリを作成するなどの特定のタスクを実行するための許可を求める一連のポップアップがclaudeから届きます。 ポップアップは、新しいアプリを作成したりクラスを追加したりするなど、各潜在的に不可逆的なアクションを確認し、承認する機会を提供し、明示的な同意なしに何も展開、請求、または公開されないようにします。 これにより、偶発的な変更に対する保護が提供され、back4appリソースの管理を維持できます。 次に、claudeに一連のプロンプトを与えて、アプリにユーザー認証を実装します。これにより、トークンベースのサインアップとログインのcloud functionsを追加し、 userクラスへの公開アクセスを削除し、category、expense、monthlysummaryに対しては公開読み取りを維持し、所有者のみの書き込みを許可し、リクエストが認証されていない場合は書き込みを拒否するbeforesaveガードを作成します。各機能の例のプロンプトのリストは以下に示されています サインアップ update the back4app application “personal expense tracker” to include a cloud code function called signupuser inputs email, password, monthlybudget (optional, default 0) if a user with the same email already exists, throw an error otherwise create the user record with those values and return the session token このプロンプトはサインアップのクラウドコードを作成します。 ログイン update the back4app application “personal expense tracker” to include a cloud code function called loginuser inputs email, password call parse user login with those credentials and return the session token on success このプロンプトはクラウドコードの対応するログインを作成します。 クラスレベルの権限 update class level permissions for the personal expense tracker \ keep public read but owner only write on category, expense, and monthlysummary このプロンプトは、category、expense、monthlysummaryの所有者のみがそれを変更できることを保証します。 これらのプロンプトを実行すると、すべてのバックエンドロジックが完了します。次のセクションでは、バックエンドのフロントエンドを生成します。 フロントエンドの生成 claudeがあなたのback4appバックエンドを作成したので、スキーマとレスポンスがどのようなものかを記憶しています。 そのコンテキストを利用して、作成されたアプリのスキーマに一致するuiを作成するように依頼できます。 以下に例のプロンプトを示します generate a minimal frontend that matches the schema and implements all the functionality of the personal expense tracker on my back4app account and connect the frontend to the backend using the javascript parse sdk 完全なuiが得られるはずです。提供されたコードをvs codeのようなideにコピーし、コードをgithubにプッシュしてください。 次のセクションでは、back4appコンテナにフロントエンドをデプロイします。 back4appコンテナにアプリをデプロイする back4appコンテナを使用すると、dockerfileとgithubリポジトリを使ってアプリを簡単にデプロイできます。 back4appコンテナにアプリをデプロイするには、まずリポジトリにdockerfileを含める必要があります。以下のプロンプトを使用してclaudeに生成を依頼できます generate a docker file for the ui of my personal expense tracker または、以下に提供されたdockerfileを使用することもできます \# start from the official lightweight nginx alpine image from nginx\ alpine \# remove default content run rm rf /usr/share/nginx/html/ \# copy your static site (html, css, assets) into the container copy /src /usr/share/nginx/html/ \# expose port 80 expose 80 \# start nginx in the foreground cmd \["nginx", " g", "daemon off;"] dockerfileを追加してgithubにプッシュした後、back4appアプリのダッシュボードに移動し、 ダッシュボード ドロップダウンをクリックし、 webデプロイメントプラットフォーム オプションを選択します。 デプロイメントページで、「webアプリをデプロイ」ボタンをクリックし、デプロイしたいリポジトリへのback4appのアクセスを許可します。 デプロイしたいアプリを選択し、デプロイメントの詳細を入力して、「 デプロイ 」ボタンをクリックします。 ボタンをクリックするとデプロイプロセスが開始され、完了後にアプリのライブurlが取得できます。 このチュートリアルで作成したライブ個人経費トラッカーを、 このリンク で見ることができます。 結論 この記事では、back4app mcpサーバーとclaudeを使用して経費を追跡するアプリを構築し、その後back4appコンテナを使用してデプロイしました。 これは、アイデアからローンチまで最小限のオーバーヘッドでアプリを構築できるback4appのフルツールセットを示しています。 次のステップとして、定期的な経費テンプレート、csvインポート、または予算超過のプッシュ通知などの機能でプロジェクトを拡張できます。 これらのすべての強化は、同じback4appワークフローに自然にフィットします：claudeを使用して新しいクラスやcloud functionsを定義し、beforesaveフックでそれらを保護し、back4appコンテナを通じて更新を展開します。 このアプローチにより、ユーザーを中断させたり、ホスティングプロバイダーを変更したりすることなく、アプリを改善できます。