クラウドシステム詳細まとめHTML

1. Webシステムの全体像

Webシステムでは、画面を作る技術と、サーバーで処理する技術、データを保存する技術が連携します。

ブラウザ（HTML / CSS / JavaScript） ⇄ HTTP通信 ⇄ PHP ⇄ PDO / SQL ⇄ MySQL

技術	担当	例
HTML	内容と構造	見出し、表、フォーム
CSS	見た目	色、余白、配置
JavaScript	ブラウザ内の動き	クリック処理、入力確認、非同期通信
PHP	サーバー側の処理	フォーム受信、DB操作、JSON生成
MySQL	データの保存・検索	SELECT、INSERT、UPDATE、DELETE

試験では「どこで動くか」を区別します。JavaScriptは主にブラウザ、PHPとMySQLはサーバー側です。

2. HTML - ページの構造

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ページタイトル</title>
</head>
<body>
  <h1>見出し</h1>
  <p>本文です。</p>
</body>
</html>

タグ	役割	覚える属性
`a`	リンク	`href`
`img`	画像	`src`、`alt`
`table / tr / th / td`	表	行とセルの関係
`ul / ol / li`	箇条書き・番号付きリスト	リスト項目はli
`form`	入力値を送信	`method`、`action`
`input`	入力欄	`type`、`name`、`value`

フォームの重要点

<form method="post" action="save.php">
  <label>名前 <input type="text" name="name"></label>
  <button type="submit">送信</button>
</form>

name属性がPHP側の配列キーになります。上の例は$_POST['name']で受け取ります。

3. CSS - 見た目と配置

セレクタ

p { color: black; }          /* タグセレクタ */
.notice { color: blue; }    /* classセレクタ */
#main { width: 800px; }      /* idセレクタ */

ボックスモデル

content → padding（内側余白）→ border（枠線）→ margin（外側余白）

プロパティ	意味
`width / height`	幅・高さ
`display`	表示形式。block、inline、flex、gridなど
`position`	配置方法。relative、absolute、fixed、stickyなど
`flex`	要素を一方向に並べる
`grid`	行と列で配置する
`@media`	画面幅などに応じてスタイルを変更

4. JavaScript・jQuery - ブラウザの動き

変数・条件分岐・繰り返し

const colors = ['red', 'blue', 'green'];
for (const color of colors) {
  if (color === 'red') {
    console.log('赤です');
  }
}

DOMとイベント

document.querySelector('#button').addEventListener('click', () => {
  document.querySelector('#result').textContent = 'クリックされました';
});

// jQueryの場合
$('#button').on('click', function () {
  $('#result').text('クリックされました');
});

jQueryメソッド	役割
`.text()`	文字列を取得・設定
`.html()`	HTMLを取得・設定
`.val()`	フォーム値を取得・設定
`.append()`	末尾へ要素を追加
`.on('click', ...)`	クリックイベントを登録

5. PHP - サーバー側の基本

<?php
$name = '山田';              // 変数
$colors = ['red', 'blue'];   // 配列

foreach ($colors as $color) {
    echo $color;
}

function greet($name) {
    return 'こんにちは、' . $name;
}
?>

連想配列

$student = [
    'id' => 1,
    'name' => '山田'
];
echo $student['name'];

PDOのPDO::FETCH_ASSOCで取得する1行も、列名をキーにした連想配列です。

HTMLへ安全に表示

echo htmlspecialchars($name, ENT_QUOTES, 'UTF-8');

入力された文字をそのままHTMLへ出すと、スクリプトを埋め込まれる危険があります。出力時に変換します。

6. フォーム・GET・POST・Cookie・Session

GETとPOST

項目	GET	POST
データの場所	URLのクエリ文字列	リクエスト本文
URL表示	される	されない
ブックマーク	条件ごと保存できる	できない
主な用途	検索・絞り込み・参照	登録・更新・ログイン

POSTはURLに出ないだけで、暗号化ではありません。機密情報の通信にはHTTPSが必要です。

Null合体演算子

$name = $_POST['name'] ?? '';

$_POST['name']が存在し、nullでなければその値、そうでなければ空文字になります。送信前のUndefined array key警告を避けられます。空文字や0は存在する値なので、そのまま返されます。

CookieとSession

	Cookie	Session
保存場所	ブラウザ	サーバー
設定・開始	`setcookie()`	`session_start()`
読み取り	`$_COOKIE`	`$_SESSION`
用途	設定保存など	ログイン状態など

7. SQL・データベースの基本

テーブル作成と制約

CREATE TABLE students (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(100) NOT NULL,
  email VARCHAR(255) UNIQUE,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

制約	意味
`PRIMARY KEY`	行を一意に識別する主キー
`AUTO_INCREMENT`	番号を自動で増やす
`NOT NULL`	NULLを禁止
`UNIQUE`	重複を禁止
`DEFAULT`	省略時の初期値
`FOREIGN KEY`	別テーブルのキーとの関係を保つ

CRUD

INSERT INTO students (name) VALUES ('山田');
SELECT id, name FROM students ORDER BY id;
UPDATE students SET name = '田中' WHERE id = 1;
DELETE FROM students WHERE id = 1;

Create INSERT、Read SELECT、Update UPDATE、Delete DELETEです。

8. PDO接続とCRUDの詳しい流れ

接続

$dsn = 'mysql:host=localhost;dbname=sample;charset=utf8mb4';
$user = 'root';
$password = '';

try {
    $dbh = new PDO($dsn, $user, $password);
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    exit('データベース接続に失敗しました');
}

SELECT - 一覧表示

$stmt = $dbh->query('SELECT ID, NAME FROM colors');
$list = $stmt->fetchAll(PDO::FETCH_ASSOC);

foreach ($list as $rec) {
    echo htmlspecialchars($rec['NAME'], ENT_QUOTES, 'UTF-8');
}

query() → fetchAll() → foreach

INSERT - 追加

$name = $_POST['name'] ?? '';
$sql = 'INSERT INTO colors (NAME) VALUES (:name)';
$stmt = $dbh->prepare($sql);
$stmt->bindValue(':name', $name, PDO::PARAM_STR);
$stmt->execute();
$lines = $stmt->rowCount();

UPDATE - 更新

$sql = 'UPDATE colors SET NAME = :name WHERE ID = :id';
$stmt = $dbh->prepare($sql);
$stmt->bindValue(':name', $name, PDO::PARAM_STR);
$stmt->bindValue(':id', $id, PDO::PARAM_INT);
$stmt->execute();

DELETE - 削除

$sql = 'DELETE FROM colors WHERE ID = :id';
$stmt = $dbh->prepare($sql);
$stmt->bindValue(':id', $id, PDO::PARAM_INT);
$stmt->execute();

UPDATEとDELETEはWHEREを忘れると全行が対象になります。対象IDを確認してから実行します。

PDOの用語集

命令	役割	ポイント
`query()`	SQLを直接実行	外部入力を含まない固定SQL
`prepare()`	SQLを実行前に準備	プレースホルダを使用
`bindValue()`	値と型を結び付ける	文字列はPARAM_STR、整数はPARAM_INT
`execute()`	準備したSQLを実行	成功時はtrue
`fetch()`	結果を1行取得	whileで1件ずつ処理できる
`fetchAll()`	結果を全行取得	foreachで一覧表示
`rowCount()`	影響行数	INSERT・UPDATE・DELETE向け

SELECT件数を知る場合は、$list = $stmt->fetchAll(...)の後にcount($list)を使います。

9. 条件検索・LIKE・JOIN

部分一致検索

$text = $_POST['text'] ?? '';
$sql = 'SELECT ID, NAME FROM colors WHERE NAME LIKE :text';
$stmt = $dbh->prepare($sql);
$stmt->bindValue(':text', '%' . $text . '%', PDO::PARAM_STR);
$stmt->execute();
$list = $stmt->fetchAll(PDO::FETCH_ASSOC);

検索値	意味
`'red'`	redと一致
`'red%'`	redで始まる
`'%red'`	redで終わる
`'%red%'`	redを含む

JOIN

SELECT tc.name AS maker_name,
       s.name AS series_name,
       m.name AS model_name,
       m.price, m.quantity
FROM models m
JOIN toycompanies tc ON m.toy_id = tc.id
LEFT JOIN series s ON m.series_id = s.id
WHERE m.name LIKE :search;

INNER JOIN：左右の表で対応する行だけ残す。
LEFT JOIN：左表の行はすべて残し、右表に対応がなければNULL。
AS：列名やテーブル名に別名を付ける。
ON：どの列同士を対応させるか指定する。

10. Ajax・JSON

Ajaxはページ全体を再読み込みせず、JavaScriptからサーバーと通信する方法です。JSONはそのデータ交換によく使われます。

イベント発生 → AjaxでPHPを呼ぶ → PHPがDB検索 → JSONを返す → JavaScriptがDOM更新

PHP側

$stmt = $dbh->query('SELECT ID, NAME FROM colors');
$colors = $stmt->fetchAll(PDO::FETCH_ASSOC);
header('Content-Type: application/json; charset=UTF-8');
echo json_encode($colors);

JavaScript側

fetch('colors.php')
  .then(response => response.json())
  .then(colors => {
    colors.forEach(color => {
      console.log(color.NAME);
    });
  })
  .catch(error => console.error(error));

命令	変換
`json_encode()`	PHPの配列・値 → JSON文字列
`json_decode()`	JSON文字列 → PHPの値
`JSON.parse()`	JSON文字列 → JavaScriptの値
`JSON.stringify()`	JavaScriptの値 → JSON文字列

11. 画像アップロード

通常のフォーム

<form method="post" enctype="multipart/form-data">
  <input type="file" name="upload" accept="image/*">
  <button type="submit">送信</button>
</form>

$file = $_FILES['upload'];
if ($file['error'] === UPLOAD_ERR_OK && is_uploaded_file($file['tmp_name'])) {
    move_uploaded_file($file['tmp_name'], $savePath);
}

$_FILESのキー	内容
`name`	元のファイル名
`tmp_name`	一時保存先
`size`	バイト数
`type`	ブラウザ申告のMIMEタイプ
`error`	アップロードエラー番号

FileReaderとBase64

JavaScriptのFileReader.readAsDataURL()はファイルをData URLとして読み、プレビューなどに利用できます。Base64はバイナリデータを文字列で表す方式ですが、元データよりサイズが増えます。

12. メール送信・QRコード

メール

SMTPはメール送信に使うプロトコルです。PHPMailerではSMTPサーバー、認証情報、暗号化方式（TLS）、ポート（例：587）、送信元、宛先、件名、本文を設定します。

$raw = file_get_contents('php://input');
$data = json_decode($raw, true);

if (!filter_var($data['email'] ?? '', FILTER_VALIDATE_EMAIL)) {
    exit('メールアドレスが不正です');
}

QRコード

入力文字列やURLをQR生成処理へ渡します。URLのパラメータとして値を渡す場合はurlencode()で安全な形式に変換します。

SMTPパスワード、DBパスワード、秘密鍵などは、HTMLやソースコードへ直接書かず、安全な設定場所で管理します。

13. セキュリティ対策

危険	内容	基本対策
SQLインジェクション	入力値でSQLを不正操作	`prepare()`と`bindValue()`
XSS	入力されたスクリプトを画面で実行	`htmlspecialchars()`
不正アップロード	危険なファイルや巨大ファイルを送信	サイズ・MIME・拡張子・保存先を検証
認証情報の漏えい	パスワードや秘密鍵の公開	ソースや共有Driveへ置かない
不正な入力	形式外のメール・数値など	`filter_var()`や型・範囲の検証

「入力時に検証」「DBにはプレースホルダ」「HTML出力時にエスケープ」を分けて覚えます。

14. 試験前の最終確認

HTML・CSS・JavaScript・PHP・MySQLの役割を説明できる。
GETとPOST、CookieとSessionの違いを説明できる。
$_POST['name'] ?? ''の意味を説明できる。
固定SELECTのquery → fetchAll → foreachを書ける。
入力値ありのprepare → bindValue → executeを書ける。
INSERT・SELECT・UPDATE・DELETEのSQLを書ける。
rowCount()を使う場面とSELECTでの注意を説明できる。
LIKEの%の位置による違いを説明できる。
INNER JOINとLEFT JOINの違いを説明できる。
PHP配列とJSON、JavaScriptの間の変換を説明できる。
画像アップロードのフォーム設定と$_FILESを説明できる。
SQLインジェクションとXSSの対策を書ける。

まず流れを覚える → コードを読む → 何も見ずに書く → テストHTMLで確認