🧑‍💻 プログラミングラボ

概要

Web開発は「情報を正しく構造化 (HTML)」「見やすく装飾 (CSS)」「動作・連携を実装 (JavaScript)」「データ保存や認証 (サーバー/PHP 等)」の組み合わせで成り立ちます。本ページでは現場で使える実装と考え方を、最小の仕組みから段階的に整理します。

  • 設計: URL 設計 / 画面遷移 / API 設計 / セキュリティ方針
  • 実装: HTML セマンティクス / レイアウト / Fetch/JSON / 認証 / バリデーション
  • 運用: ログ / 監視 / パフォーマンス / SEO / アクセシビリティ改善

基本

最低限おさえる 10 点

  1. セマンティック HTML（<main>, <nav>, 見出し階層）
  2. レスポンシブ（meta viewport, flex/grid）
  3. フォームとバリデーション（required, pattern + JS 追加検証）
  4. Fetch API による JSON 取得と描画
  5. アクセシビリティ（ラベル/代替テキスト/キーボード操作）
  6. SEO 基本（title/description/構造化見出し）
  7. パフォーマンス（画像最適化/遅延読込）
  8. セキュリティ（エスケープ/CSRF/HTTPS/CSP）
  9. バージョン管理（git フロー / PR レビュー）
  10. エラーハンドリング（UI とサーバー両方）

基礎

フォーム投稿（PHP + フロントバリデーション）

contact.php（抜粋）
<?php
// contact.php — フォーム受信
$errors = [];
$name = trim($_POST['name'] ?? '');
$email = trim($_POST['email'] ?? '');
$message = trim($_POST['message'] ?? '');
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
  if ($name === '') $errors['name'] = 'お名前は必須です。';
  if (!filter_var($email, FILTER_VALIDATE_EMAIL)) $errors['email'] = 'メール形式が不正です。';
  if ($message === '') $errors['message'] = 'メッセージを入力してください。';
  if (!$errors) {
    // TODO: 保存やメール送信など
    http_response_code(200);
    echo json_encode(['ok' => true]);
    exit;
  }
  http_response_code(422);
  echo json_encode(['ok' => false, 'errors' => $errors]);
  exit;
}
?>
フロント（HTML/JS）サンプル
フォーム + JS
<form id="contactForm" novalidate>
  <label>お名前<input name="name" required></label>
  <label>メール<input name="email" type="email" required></label>
  <label>内容<textarea name="message" required></textarea></label>
  <button>送信</button>
</form>
<script>
const f = document.querySelector('#contactForm');
f.addEventListener('submit', async (e)=>{
  e.preventDefault();
  const fd = new FormData(f);
  const res = await fetch('contact.php', { method:'POST', body:fd });
  const data = await res.json();
  if(data.ok){ alert('送信しました'); f.reset(); }
  else{ alert('エラー: '+ JSON.stringify(data.errors)); }
});
</script>

JSON を fetch して描画

news.json を読み込み
<ul id="news"></ul>
<script>
(async ()=>{
  try{
    const res = await fetch('/data/news.json');
    const items = await res.json();
    const ul = document.getElementById('news');
    items.slice(0,5).forEach(it=>{
      const li = document.createElement('li');
      li.innerHTML = `<time datetime="${it.date}">${it.date}</time> `+
        `<a href="${it.url}">${it.title}</a>`;
      ul.appendChild(li);
    });
  }catch(e){ console.error(e); }
})();
</script>

応用

  • API 設計（REST/GraphQL）と OpenAPI からの型生成
  • 画像最適化（自動 WebP/AVIF, loading=lazy）
  • CSP/CSRF/SameSite Cookie、Rate Limit、ログ監査
  • CI/CD（テスト → ビルド → デプロイ → ヘルスチェック）
  • アクセシビリティ自動テスト（axe、Lighthouse CI）

発展

  • エッジ/サーバーレス（CDN KV, Edge Functions, D1/PlanetScale）
  • リアルタイム（WebSocket/SSE）、オフライン（Service Worker）
  • マイクロフロントエンド、モノレポ（Nx/Turbo）
  • 計測の体系化（RUM/合成/バックエンド/APM、SLI/SLO）

仕事の現場

ロール主な責務主要アウトプット
PM/PO要件定義・優先順位・ロードマップPRD/Backlog
Webエンジニア実装/レビュー/テスト/パフォーマンス画面/API/ドキュメント
デザイナー情報設計/ビジュアル/アクセシビリティデザインシステム
QA受け入れ/回帰/自動化テスト計画・結果
Sec脆弱性診断/運用ルール脆弱性対応報告

現場チェックリスト

  • PR にテンプレ（目的/変更点/テスト観点/影響）
  • エラーログ基盤（構造化ログ + 相関 ID）
  • 機密情報の秘匿（.env / Secret Manager / KMS）
  • パフォーマンス予算（画像/JS サイズ上限）

知っておくといい

知識

  • HTTP/ブラウザの仕組み、キャッシュ、Cookie と SameSite
  • レンダリング/イベントループ、レイアウト/ペイント/合成
  • ネットワーク（DNS/HTTPS/HTTP/2,3）

技能

  • 要件から UI/URL 設計に落とす設計スキル
  • バグ再現・切り分け・最小再現の作成
  • ロギング/トレース/プロファイリングの読み方

用語

  • CSR — Client Side Rendering。ブラウザで JS により描画する方式。
  • SSR — Server Side Rendering。サーバーで HTML を生成して返す方式。
  • SSG — Static Site Generation。ビルド時に静的 HTML を生成する方式。
  • SPA — Single Page Application。ページ遷移を JS で制御する単一ページアプリ。
  • アクセシビリティ — 誰もが利用できる Web を目指す考え方と実装。WAI-ARIA など。
  • Core Web Vitals — LCP / CLS / INP などの UX 指標。
  • CSP — Content Security Policy。XSS を軽減するためのセキュリティヘッダ。
  • HTTP/2, HTTP/3 — 最新の転送プロトコル。多重化、ヘッダ圧縮、QUIC等で高速化。

例

例1: アコーディオン（詳細）

クリックで開閉（WAI-ARIA 不要のネイティブ要素）

ネイティブの <details> はアクセシブルで制御も容易です。

コピー対象 
<details>
<summary>クリックで開閉（WAI-ARIA 不要のネイティブ要素）</summary>
<p>ネイティブの <code><details></code> はアクセシブルで制御も容易です。</p>
</details>

例2: クリップボードへコピー

コピー対象 
console.log('Hello Web Dev');

例3: シンプルなルーティング（PHP）

router.php（超簡易）
<?php
$path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
switch($path){
  case '/': require 'pages/home.php'; break;
  case '/contact': require 'pages/contact.php'; break;
  default: http_response_code(404); echo 'Not Found';
}
?>

より具体的に

  • このページをテンプレに、各トピック（HTML/CSS/JS/SEO/Performance/Security）へ詳細分岐
  • ニュースを JSON から自動更新（本番は CMS or API 化）
  • チェックリストを CI で自動検証（Lighthouse CI / axe / PHPUnit）

最新情報