フロントエンドとバックエンドの違い：何が違うのか？

フロントエンドは、アプリのうちブラウザ上で動く部分です。利用者が見てクリックするページ、ボタン、フォーム、アニメーションがこれにあたります。バックエンドは、利用者には見えないサーバー上で動く部分です。データを保存して取り出し、ビジネスルールを適用し、誰が何をできるかを確認し、決済やメールなどの外部サービスと連携します。両者はAPIを通じてやり取りし、データベースと合わせて「フルスタック」のアプリを構成します。

AIで作るときに重要な理由

AIビルダーにアプリを説明するとき、意識しているかどうかにかかわらず、実は両方の部分を同時に説明しています。「お客様が枠を予約できる」と伝えれば、予約フォーム（フロントエンド）、どの枠が空いているかのルール（バックエンド）、予約を保存する場所（データベース）が必要になります。

この役割分担を知っておくと、実務で次の3つに役立ちます。

1. セキュリティ。 フロントエンドの内容は、利用者が見ても書き換えても止められません。ルールや秘密情報はバックエンドに置く必要があります。
2. デバッグ。 「ボタンが反応しない」と「ボタンは反応するが何も保存されない」では原因の場所が違います。どちらの症状かを伝えれば、AIが原因をより早く見つけられます。
3. ホスティングとコスト。 フロントエンドだけのサイトは安価で簡単に公開できます。バックエンドは稼働させる場所が必要で、料金や、利用がないときのアプリの動作に影響します。

日常の例えで考える

レストランで考えてみましょう。

フロントエンドはダイニングルームです。メニュー、テーブル、内装、注文を取る店員がこれにあたります。客向けに作られていて、客はそのすべてを見て触れられます。

バックエンドは厨房と事務所です。料理をする料理人、在庫置き場、レジ、割引の決まりを管理する店長がこれにあたります。客が中に入ることはなく、入れるべきでもありません。

APIは両者をつなぐ受け渡し口です。決まった形式で注文を出し、料理を受け取るカウンターにあたります。データベースは在庫の保管場所であり、注文台帳です。

客は注文票を書き換えることができます（フロントエンドは客の管理下にあります）。しかし、厨房が何を作り、いくら請求するかは厨房が決めます。だからこそ、重要なチェックは奥側に置くべきなのです。

各側の役割

フレームワークによっては、この境界があいまいになります。たとえばNext.jsでは、1つのプロジェクトにブラウザ用のコードとサーバー用のコードを同時に含められます。それでも考え方は変わりません。常に「この部分はどこで動くのか？」を問えばよいのです。

具体例：クラスの予約

ヨガクラスを予約するときに何が起こるかを、手順ごとに見てみましょう。

手順4と6に注目してください。入力内容は2回チェックされています。フロントエンドでのチェックは即座のフィードバックのためのもので、実際に効力を持つのはバックエンドでのチェックです。悪意のある利用者はフロントエンドを完全に迂回できるからです。

よく使われる用語の説明

アプリにバックエンドは必要ですか？

よくある間違いと誤解

• 秘密のキーをフロントエンドに置くこと。 ブラウザの開発者ツールを開けば誰でも見えてしまいます。AIで作られたアプリで最も多く、深刻な間違いです。
• ルールをフロントエンドだけで強制すること。 管理者以外には「削除」ボタンを隠しても保護にはなりません。バックエンドが要求を拒否する必要があります。
• バックエンドは「データベースだけ」だと思うこと。 データベースはデータを保存するだけです。誰が読み書きできるか、そしてどのように扱うかを決めるのがバックエンドです。
• JavaScriptはフロントエンドのものだと思うこと。 JavaScriptとTypeScriptは、Node.jsを使えばサーバー上でも動きます。
• 間違った側を疑うこと。 ページの見た目は正しいのにデータがおかしい場合、問題の多くはバックエンドかデータベースにあり、デザインではありません。
• 作りすぎること。 ポートフォリオにカスタムのバックエンドは不要です。追加すればコストと動く部品が増えるだけです。

AIビルダーに頼むとよいこと

• 「このアプリのどの部分がブラウザで動き、どの部分がサーバーで動くのか？」
• 「APIキーはすべてバックエンドに移し、環境変数から読み込むようにしてください。」
• 「フォームの入力は、ブラウザだけでなくサーバー側でも検証してください。」
• 「予約を削除できるのは管理者だけになるよう、バックエンドで強制してください。」
• 「ページの表示は正常ですがデータが保存されません。バックエンドのログでリクエストを確認してください。」
• 「これは単純なマーケティングサイトなので、必要になるまでバックエンドは作らずフロントエンドだけにしてください。」

Mythexにおけるフロントエンドとバックエンド

新しいMythexのプロジェクトは、Vite、React、TypeScript、Tailwindで作られたフロントエンドから始まります。アプリにバックエンドが必要になると、エージェントがそれを追加します。また、同じプロジェクト内でNode、Python（FastAPI）、C#、Javaで書かれた独立したAPIを、フロントエンドと並べて動かすよう頼むこともできます。プレビューでは、Webサイトと APIサーバーを切り替えて確認でき、公開するとその両方がデプロイされます。必要に応じて、データベースとファイルストレージも追加されます。両方の部分が公開後どこで動くかについては、Webホスティングのガイドで説明しています。また、マルチサービスアプリについてはドキュメントをご覧ください。フルスタックの例を手早く見たい場合は、アプリテンプレートが役立ちます。

よくある質問