PHP と JavaScript 図解教材（イラスト＋超詳解）

Overview

HTML / CSS / JavaScript / PHP の役割

まずは、「誰が」「どこで」「何をしているのか」をざっくりイメージします。メニュー注文ページを例に、4つの役者の役割を整理します。

🖥️

ブラウザの中フロントエンド

HTML：ページの骨組み（見出し・文章・フォームなど）
CSS：見た目（色・余白・レイアウト）
JavaScript：動き・計算・入力チェック

イメージ： 画面そのものと、その場での「動き」を担当する世界。

← ユーザーが直接触っている場所

🗄️

サーバーの中バックエンド

PHP：フォームから送られたデータを受け取る
注文内容をチェックして保存したり、表示したりする
必要に応じてデータベースとやりとり

イメージ： 店の「裏側」で、記録・計算・管理をする世界。

← 店員・システム側の仕事

⬇︎⬇︎ ブラウザ ⇄ サーバーの会話 ⬇︎⬇︎

Scenario

メニュー注文ページでの「流れ」を図解

あなたのメニュー画面では、次のような流れが起きています。「JavaScript がやること」と「PHP がやること」を分けて見てみます。

STEP 1：ページを開く

ブラウザが menu.html を読み込み、 HTML と CSS で画面を描画し、JavaScript を読み込む。

STEP 2：数量を選ぶ

各メニューの数量を変えると、 JavaScript の keisan() が呼ばれ、合計金額を計算。

STEP 3：注文ボタンを押す

フォームが check.php に送信され、 PHP が注文内容を受け取り、処理・表示する。

ブラウザ側（JavaScript）リアルタイム計算

単価の配列 tanka[] を持っている
数量セレクトの値を読み取る
合計金額を計算して kingaku に表示

ここでのゴール： ユーザーが「今いくらになるか」をすぐに確認できるようにする。

サーバー側（PHP）注文の受け取り

$_POST["kazu1"] などで数量を受け取る
$_POST["table_No"] でテーブル番号を受け取る
合計金額や明細をサーバー側でも計算・確認できる

ここでのゴール： 「どのテーブルが」「何を」「いくつ」頼んだかを正確に記録する。

JavaScript

JavaScript：ブラウザの中で動く「電卓係」

あなたのコードの JavaScript 部分を、図解しながら読み解きます。まずは元のコードを整理して載せます。

メニュー画面の JavaScript（元コード）

"use strict";

let tanka = [0, 400, 450, 700, 300, 350, 200, 1000, 800, 250];

function keisan() {
  let goukei = 0;
  for (let i = 1; i <= 9; i++) {
    let kazu = Number(document.form1.elements["kazu" + i].value);
    goukei += tanka[i] * kazu;
  }
  document.form1.elements["kingaku"].value = goukei;
}

// 単価を画面に表示
for (let i = 1; i <= 9; i++) {
  document.getElementById("tanka" + i).textContent = tanka[i];
}

function resetForm() {
  document.form1.reset();
  document.form1.elements["kingaku"].value = "";
}

① 単価の配列データの置き場

tanka = [0, 400, 450, ...] は、「メニュー1〜9の単価」を番号で管理するための箱です。

tanka[1] → 1品目の単価
tanka[2] → 2品目の単価
0番目はダミー（使わない）

                  ポイント：  
                  「メニュー番号」と「配列のインデックス」を揃えると、for 文で回しやすい。
                

② 合計金額を計算する関数 keisan()

for (let i = 1; i <= 9; i++) で 1〜9 品目を順番に処理
"kazu" + i で kazu1〜kazu9 を順番に参照
数量 × 単価を足し合わせて goukei に入れる
最後に kingaku の input に合計を代入

                  ポイント：  
                  HTML の name 属性（kazu1 など）と  
                  JavaScript の文字列結合（"kazu" + i）を対応させている。
                

③ 単価を画面に書き込む DOM 操作

tanka1〜tanka9 という id を持つ span を取得
textContent に単価を代入して表示

                  ポイント：  
                  HTML 側には数字を書かず、JavaScript から流し込む設計にすることで、  
                  単価変更があったときに「配列だけ直せばよい」状態になっている。
                

④ フォームをリセットする resetForm()

document.form1.reset() でフォーム全体を初期状態に戻す
そのあと、kingaku だけ空文字にしておく

                  ポイント：  
                  「取り消す」ボタンにこの関数を紐づけることで、  
                  ユーザーがいつでも「最初の状態」に戻せる。
                

※ ここまでが「ブラウザの中だけで完結する処理」。サーバーにはまだ何も送っていません。

PHP

PHP：サーバー側で注文を受け取る「受付係」

次に、フォームの action="check.php" で呼ばれる PHP 側を、シンプルなサンプルコードと図解でイメージしてみます。

check.php のイメージ（サンプル）

<?php
// 1. フォームから送られてきた値を受け取る
$tableNo = $_POST["table_No"] ?? "";
$kingaku = $_POST["kingaku"] ?? "";

// メニューの数量を配列にまとめる
$kazu = [];
for ($i = 1; $i <= 9; $i++) {
    $key = "kazu" . $i;
    $kazu[$i] = isset($_POST[$key]) ? (int)$_POST[$key] : 0;
}

// 2. サーバー側でも合計金額を再計算（安全のため）
$tanka = [0, 400, 450, 700, 300, 350, 200, 1000, 800, 250];
$serverTotal = 0;
for ($i = 1; $i <= 9; $i++) {
    $serverTotal += $tanka[$i] * $kazu[$i];
}

// 3. 結果を画面に表示（本番では DB 保存などもここで行う）
?>
<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>注文内容の確認</title>
</head>
<body>
  <h1>注文内容の確認</h1>
  <p>テーブル番号：<?= htmlspecialchars($tableNo, ENT_QUOTES, "UTF-8") ?></p>
  <p>合計金額（サーバー計算）：<?= $serverTotal ?> 円</p>
</body>
</html>

① フォームデータを受け取る $_POST

$_POST["table_No"] → テーブル番号
$_POST["kazu1"]〜$_POST["kazu9"] → 各メニューの数量
$_POST["kingaku"] → ブラウザ側で計算した合計金額

                  ポイント：  
                  フォームの name 属性と同じ文字列で受け取る。  
                  ここがズレると、PHP は値を受け取れない。
                

② サーバー側でも再計算する理由信頼性

JavaScript は「ユーザー側」で動くので、改ざんされる可能性がある
本当に正しい金額かどうかは、サーバー側で再計算した方が安全
そのため、PHP でも $tanka と $kazu から合計を出す

                  ポイント：  
                  「見せる金額」は JS、「最終決定」は PHP という役割分担が理想。
                

※ 実際のシステムでは、このあとデータベースに保存したり、オーダー一覧画面（show.php）に渡したりします。

Compare

JavaScript と PHP の違いを「感覚」でつかむ

最後に、JavaScript と PHP の違いを、「どこで」「いつ」「何のために」動くのかという視点で整理します。

JavaScript（フロントエンド）

動く場所：ブラウザの中
タイミング：ページを開いたあと、ユーザーの操作に応じて何度も動く
主な役割：画面の動き、リアルタイム計算、入力チェック
例：数量変更 → 合計金額を即座に更新

PHP（バックエンド）

動く場所：Web サーバーの中
タイミング：フォーム送信やページリクエストのたびに動く
主な役割：データの受け取り、保存、ビジネスロジック、HTML の生成
例：注文内容を受け取り、DB に保存して、確認画面を出す

JavaScript は「今この画面での体験」、PHP は「システム全体としての記録と処理」

Apply

この図解を、あなたのメニュー画面に重ねてみる

ここまでの図解を、最初に提示してくれたメニュー画面に重ねると、次のような「心の中の図」が描けるようになります。

1. HTML / CSS のイメージ

メニューのカード（画像・名前・単価・数量セレクト）は「骨組み＋見た目」
グリッドレイアウトや余白は CSS が担当

2. JavaScript のイメージ

単価配列 tanka[] は「メニュー表の裏側の価格表」
keisan() は「レジで合計を計算する人」
数量を変えるたびに、その人が暗算して合計欄を書き換えているイメージ

3. PHP のイメージ

check.php は「キッチンに伝票を渡す係」
どのテーブルが何を何個頼んだかを受け取り、記録する
本番では、ここで「オーダー状況（show.php）」に反映される

          まとめ：  
          今あなたが作っているメニュー画面は、すでに
          「フロントエンド（JavaScript）」と「バックエンド（PHP）」の  
          典型的な連携パターンになっています。  
          この図解を頭の中に置きながらコードを読むと、  
          「あ、ここはブラウザの仕事」「ここはサーバーの仕事」と  
          役割がはっきり見えてきます。
        