開発・エージェント

フロントエンド/バックエンドとは

この記事の結論

フロントエンド/バックエンドとは、アプリを「利用者の端末で動く画面の側」と「サーバーで動くデータと処理の側」に分けて呼ぶ言い方です。
Webでは、ブラウザで動く HTML・CSS・JavaScript がフロントエンド、リクエストを受けてデータベースを読み書きし、返す中身を決める部分がバックエンドです。
入力チェックや秘密の鍵の扱いは、画面の側だけに任せられません。どちらの側の話かを分けて考えると、不具合の切り分けもAIへの依頼も速くなります（2026-09-26 時点の整理）。

ふろんとえんど／ばっくえんど

アプリを、利用者の端末で動く画面の側と、サーバーで動くデータと処理の側に分けて呼ぶ言い方です。

最終更新: 2026-09-26

フロントエンド/バックエンドとは（意味と読み方）

フロントエンド/バックエンドとは、アプリを「利用者の端末で動く画面の側」と「サーバーで動くデータと処理の側」に分けて呼ぶ言い方です。英語では Front-end／Back-end と書き、それぞれクライアントサイド、サーバーサイドとも呼ばれます。

MDN の「サーバーサイドの概要」は、ブラウザで走るコードの主な課題を、表示されるページの外観や動作を実現することだとしています。一方、サーバー側のコードで重視されるのは、リクエストに合わせて返す中身をどう選ぶかです。

2つの側は、HTTP のリクエストとレスポンスでつながっています。ボタンを押すと、ブラウザがサーバーへリクエストを送ります。サーバーは必要なデータをデータベースから取り出し、結果をレスポンスとして返します。ブラウザはそれを受け取って画面に表示します。

フロントエンドとバックエンドの比較（MDN の記述をもとに整理）
観点	フロントエンド	バックエンド
動く場所	利用者のブラウザ	サーバー
主な言語	HTML、CSS、JavaScript	PHP、Python、Ruby、C#、JavaScript（Node.js）など
主な仕事	画面の見た目と操作への反応	返す中身を決める、データの登録と取り出し
触れられる範囲	ブラウザの中。OSやファイルへの手出しは限られる	サーバーのOSを全面的に使える

2つの間で何をどの形で受け渡すかの取り決めがAPIです。受け渡しには JSON がよく使われます。

「保存ボタンを押しても一覧に出てこない」という不具合を、AIコーディングエージェントに直させる場面で考えます。依頼の前に、どちらの側の問題かを切り分けます。

切り分けたら「src/server/ の保存処理だけを直して。画面側のファイルは変えないで」のように、変えてよい範囲を依頼文に書きます。範囲が伝わると、関係のない画面のファイルまで書き換えられることを防げます。

誤解：入力チェックはフロントエンドでやれば足りる → 実際：MDN のクライアント側のフォーム検証の解説は、クライアント側の検証はセキュリティ対策とは考えられず、サーバー側でも同じように確かめるよう求めています。OWASP の入力検証チートシートも、JavaScript を切ったり通信を書き換えたりすれば画面側のチェックは回避できる、としています。
誤解：フロントエンドは見た目だけの担当 → 実際：入力の途中の状態、画面の切り替え、通信の待ち表示など、操作への反応を組み立てる処理もフロントエンドの仕事です。
誤解：JavaScript はブラウザ専用の言語 → 実際：Node.js を使えばサーバー側でも動きます。同じ言語で両側を書く構成も一般的です。

秘密の鍵は画面の側に置かない：ブラウザに届いたコードは、利用者が開発者ツールで読めます。外部サービスのAPIキーはバックエンドに置き、環境変数から読み込みます。
AIが生成した構成の置き場所を確かめる：生成されたコードが鍵をフロントエンド側のファイルに書き込んでいないか、差分で見ます。
両方を手元で動かすときはポートを確かめる：開発中は2つをlocalhostの別々の番号で動かすことが多く、画面から呼ぶ先の番号の取り違えがよく起きます。

Q1. フロントエンドとバックエンドとは何ですか？
アプリを、利用者の端末で動く画面の側と、サーバーで動くデータと処理の側に分けて呼ぶ言い方です。Webでは、ブラウザで動く部分がフロントエンド、リクエストを受けて返す中身を決める部分がバックエンドです。

Q2. 不具合がフロントエンドとバックエンドのどちらにあるか、どう見分けますか？
ブラウザの開発者ツールで通信を見ます。操作してもリクエストが出ていなければフロントエンド、エラーの応答が返っていればバックエンド、正常な応答なのに画面が変わらなければ再びフロントエンドを疑います。

Q3. 入力チェックはどちらで行えばよいですか？
両方です。画面の側のチェックは入力ミスをすぐ知らせるためのもので、回避できてしまいます。守りたいデータを扱う前には、サーバーの側でも同じ内容を確かめます。

Q4. APIキーはどちらに置けばよいですか？
バックエンドに置きます。ブラウザに届いたコードは利用者が読めるため、フロントエンドに書いた鍵は第三者に知られるおそれがあります。サーバー側で環境変数から読み込む形にします。