いにしえのフロントエンド入門

まずは、この連載の二人を紹介します。

バイブコーディング（Vibe Coding）は、OpenAI の創業メンバーの一人アンドレイ・カルパシーが2025年2月に名付けた言葉です。AI に自然な言葉で頼み、出てきたコードは細かく読まずに「雰囲気（バイブ）」で受け入れて進める作り方で、英国の Collins 辞典が2025年の「今年の言葉」に選ぶほど広まりました。このブログでも開発ガイドのVibe Coding覚書で取り上げています。この連載の「いにしえの」は、その正反対という意味です。

AI に頼めば速いのは事実です。それでも、この連載では手で書きます。理由は三つあります。

• AI が書いたコードにも、責任を持つのは人 ── 経費精算はお金を扱うシステム。合計の1円のずれや、入力チェックの抜けは、誰かがコードを読んで見つけなければならない。読めないコードは、確かめることも直すこともできない
• 土台は変わらない ── AI が書いても、React や Vue を使っても、最後にブラウザに渡るのは HTML・CSS・JavaScript。土台が分かっていれば、何が出てきても中身が見える
• いにしえの道具は、今も現役 ── 調査会社 W3Techs の集計では、2026年10月時点で jQuery は調査対象の Web サイトの約64.5% で使われ、Bootstrap は CSS フレームワークの中で約75% を占めます。社内の業務システムには、なおさら多く残っています

経費精算は、社員が立て替えたお金（電車代や出張のホテル代など）を会社に申請し、上司が承認し、経理が払い戻す仕組みです。登場人物と、申請が進む流れを図にしました。

この連載で作る機能を、ざっと並べるとこうなります。

守るべきルールもあります。開発ガイドのPlaywright 入門と実践でテストした経費精算ページと同じく、「合計が3万円以上なら領収書が必須」「未来の日付は申請できない」「ドル建ての明細は円に換算する」などです。ルールを画面で守らせる方法は、第9回で詳しく扱います。

1. 注文する（リクエスト） ── ブラウザが、URL が指すサーバーに「このページをください」と頼む
2. 届く（レスポンス） ── サーバーから HTML が届く。HTML の中に書かれた CSS や JavaScript のファイルも、続けて取りに行く
3. 読み解く ── HTML を読んで、ページの部品の木（DOM）を作る。CSS も読んで、見た目のルールの一覧（CSSOM）を作る。二つを合わせて、実際に画面に出す部品だけの木（レンダーツリー）にする
4. 配置する（レイアウト） ── 画面の幅に合わせて、それぞれの部品の位置と大きさを計算する
5. ぬる（ペイント） ── 文字や色を、画面の点（ピクセル）に描く

ここで大事なのが DOM です。JavaScript は、HTML のファイルそのものではなく、ブラウザの中にある DOM を書き換えて画面を変えます。書き換えるたびに④⑤がやり直されるので、むやみに書き換えると画面が重くなります。この話は第8回でもう一度出てきます。

フロントエンドの三つの言語は、体にたとえると分かりやすくなります。

百聞は一見にしかず。同じ申請フォームに、三つを順番に足してみました。

①の HTML だけでも、入力欄やボタンはちゃんと動きます。文字も打てるし、ボタンも押せる。ただ、見た目は素朴で、合計は 0 円のまま。②で CSS を足すと業務システムらしい見た目になりますが、計算はしてくれません。計算や、押したときの反応は JavaScript の仕事です。それぞれ、足したのはこんなコードです（抜粋）。

<!-- ① HTML：何があるか -->
<p>合計: <output id="total">0</output> 円</p>
<button type="button" id="send">申請する</button>

/* ② CSS：どう見えるか */
button { background: #c0392b; color: #fff; border-radius: 8px; }

// ③ JavaScript：どう動くか
document.querySelector('#send').addEventListener('click', () => {
  document.querySelector('#toast').hidden = false;
});

いまは読めなくて大丈夫です。HTML は第2〜3回、CSS は第4〜6回、JavaScript は第7〜10回で、一つずつ読めるようにしていきます。

「いにしえの」と名乗るからには、少しだけ昔話を。

• 1991年 ── CERN（欧州原子核研究機構）のティム・バーナーズ＝リーが、Web をインターネットで一般に公開。最初の Web サーバーは info.cern.ch
• 1994〜96年 ── ホーコン・ウィウム・リーが CSS を提案（1994年10月）。1996年12月に CSS1 が W3C の勧告になり、「見た目は HTML と分けて書く」という考え方が定まる
• 1995年 ── Netscape 社のブレンダン・アイクが、5月にわずか10日間で JavaScript の最初の試作を作る。12月に正式に発表
• 2006年 ── ジョン・レシグが jQuery を発表。ブラウザごとにバラバラだった書き方の違いを吸収し、一気に広まった
• 2011年 ── Twitter 社の二人（マーク・オットーとジェイコブ・ソーントン）が Bootstrap を公開
• 2021年 ── Bootstrap 5 が、それまで必要だった jQuery なしで動くようになる
• 2026年 ── 1月に jQuery 4.0 が約10年ぶりのメジャー版として登場（古い Internet Explorer 10 以前の対応を終了）。10月には Bootstrap 6 の最初のアルファ版も公開された

この連載では、執筆時点で安定版の Bootstrap 5.3 系と jQuery 4.0 系を使う予定です。

家を建てる前に間取り図を描くように、画面も作る前に設計図を描きます。まずは画面の一覧と、行き来の関係です。下の小さな字は、その画面を主に作る回です。

次に、いちばん大事な申請フォームを少し細かく描きます。こうした、色や飾りを省いて「どこに何を置くか」だけを描いた図をワイヤーフレームと呼びます。

設計図を描くと、作る前に気づけることがたくさんあります。たとえば「明細が10行を超えたらどう見せる？」「領収書は画像だけ？ PDF も？」「スマホで申請する人はいる？」。こうした問いを先に洗い出しておくと、作り直しが減ります。

必要な道具は三つだけ。どれも無料です。

そして、もう一つの大事な道具が、ブラウザに最初から入っている開発者ツール（DevTools）です。いわば、ページの「レントゲン」。この連載で毎回のように使います。

ファイルは、次のように役割ごとのフォルダに分けて置いていきます（今回作るのは index.html だけです）。

準備ができたら、最初のページを作りましょう。手順は5つです。

1. パソコンに keihi という名前のフォルダを作り、VS Code の「フォルダーを開く」で開く
2. index.html というファイルを作り、下のコードを書いて保存する（空のファイルで ! と打って Tab キーを押すと、ひな形が一瞬で出てきます）
3. 拡張機能 Live Preview を入れ、エディタ右上のプレビューボタン（または右クリックのメニュー）からプレビューを開く
4. 文字を書き換えて保存すると、プレビューも自動で変わることを確かめる
5. ブラウザで開いたら F12（Mac は Cmd + Option + I）で開発者ツールを開き、Elements タブで h1 を探してみる

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>経費精算システム</title>
</head>
<body>
  <h1>経費精算システム</h1>
  <p>ただいま建設予定地です。</p>
  <p>第2回から工事が始まります。</p>
</body>
</html>

ここで、わざと失敗してみましょう。</h1>（見出しの閉じタグ）を消して保存すると……。

開発者ツールの Elements タブで見ると、2つの段落が h1 の中に入ってしまっているのが分かります。「見た目がおかしいときは、まず Elements で木の形を確かめる」。これが、この連載で何度も使うデバッグの第一歩です。

最後に、これからの道のりです。各駅停車で、一駅ずつ進みます。

前半（第2〜10回）で三つの言語を一つずつ身につけ、後半（第11〜15回）でそれを組み合わせて、業務システムらしい機能を仕上げます。第14回で jQuery を扱うのは、自分で一度素の JavaScript で書いてからのほうが、jQuery が何を楽にしてくれるのかがよく分かるからです。