フロントエンドとバックエンド
すべてのアプリの 2 つの半分
⏱ 想定 ~4 分
01 · 読む
ほとんどのソフトウェアは 2 つに分かれます。フロントエンド(前端)と バックエンド(後端) です。
フロントエンド はあなたが見て、触れるものすべて —— ボタン、メニュー、アニメーション、テキスト、画像。あなたのブラウザやスマホで動きます。
バックエンド は裏側で起きているもの —— パスワードの照合、決済処理、データベースの検索、メールの送信。どこかのサーバーで動きます。
レストランをイメージしてください。フロントエンドは客席エリア(お客さんが座って、メニューを見て、食事をする)で、バックエンドはキッチン(料理を作り、注文を管理し、在庫を見張る)です。お客さんはキッチンを見ることはありませんが、本当の仕事はすべてそこで行われます。
ポイントまとめ
- フロントエンド = ユーザーが見て、操作できるもの( HTML 、 CSS 、 JavaScript )
- バックエンド = ユーザーには見えないロジックやデータ処理(サーバー、データベース、 API )
- 両者は常に会話しています —— フロントエンドがリクエストを送り、バックエンドがレスポンスを返します
- 片方を専門にするエンジニアもいれば、両方をやる「フルスタック」エンジニアもいます
02 · ドラッグ分類
それぞれの項目を、アプリの正しい側にドラッグしてください。これはフロントエンドですか、それともバックエンドですか？
（このセクションはインタラクティブです — JavaScript を有効にしてください。）
03 · 対応づけ
それぞれの例を、アプリのどちらの部分が担当するかと結びつけてみましょう。
（このセクションはインタラクティブです — JavaScript を有効にしてください。）
04 · クイズ
パスワードを入力して「ログイン」を押すとき、あなたのパスワードは実際にはどこで検証されていますか？
- あなたのブラウザ(フロントエンド)で
- アドレスバーで
- サーバー(バックエンド)で
- スマホの OS で
⚠ 全機能のインタラクティブ体験には JavaScript が必要です。JavaScript を有効にして再読み込みしてください。
※ このサイトは独立した教育プロジェクトで、Anthropic の公式製品ではありません。Claude™ は Anthropic, PBC の商標です。