なぜ `` は単なる「見た目」の変更ではないのか？：セマンティクスとプリフォーマットの極意
現場でコードをレビューしていると、たまに見かけるのが「単に等幅フォントにしたいから」という理由で無闇に `` を使うケースや、逆に複雑なコードブロックを無理やり `` とCSSで装飾して凌いでいるケースです。
フロントエンドのエンジニアとして、私たちは「見た目を作る職人」であると同時に「意味を定義する設計者」でもあります。今日は、改めて `` 要素の真の役割と、`pre` 要素との「切っても切れない関係」について、実務的な視点から深掘りしていきましょう。
---
1. `` 要素のセマンティクス：それは「何」を表しているのか
HTMLにおいて `` は、単にフォントを等幅（monospace）にするためのタグではありません。仕様書（WHATWG）を紐解くと、これは「コンピュータコードの断片」をマークアップするための要素であると定義されています。
ここで重要なのは、「意味の付与」です。
検索エンジンやアクセシビリティツール（スクリーンリーダーなど）は、`` で囲まれた箇所を見て、「あ、ここはプログラムの変数名や関数名、あるいはコマンドラインの指示だな」と認識します。逆に言えば、単に「強調したいから」「枠線で囲みたいから」という理由でこれを使うのは、セマンティクスを汚染する行為に他なりません。
ブラウザの裏側で起きていること
ブラウザのデフォルトスタイルシートでは、`` には `font-family: monospace;` が適用されています。これは、歴史的にソースコードが等幅フォントで書かれてきた慣習に倣ったものです。しかし、CSSでフォントを変更しても、その「コードである」というセマンティックな情報は失われません。これが、CSSだけで装飾した `` との決定的かつ残酷な差です。
---
2. `` と ` ` の「結婚」
単一行のコード（例えば `const a = 1;`）なら `` だけで十分ですが、複数行にわたるブロックコードはどうでしょうか。ここで登場するのが `` です。
`` は Preformatted Text（整形済みテキスト） の略。HTMLソース上の改行やスペースをそのままブラウザに描画させるための要素です。
なぜ `` とネストさせるのか？
ベストプラクティスは、`` の中に `` を入れる構成です。
- `
`：空白や改行を維持して、ブロック全体を整形する。
- `
`：その中身が「コンピュータコードである」というセマンティクスを付与する。
この役割分担を理解していないと、後々「スクリーンリーダーがコードブロックを認識してくれない」「シンタックスハイライターのライブラリがうまく動かない」といったトラブルに直面することになります。
---
3. 実践：現場で使える「綺麗な」コードブロックの書き方
実務では、単にタグで囲むだけでなく、ユーザーが読みやすく、かつコピーしやすい設計が求められます。以下に、モダンなサイトでも通用する、セマンティクスを意識したマークアップ例を提示します。
// 良いコードは、意図が明確である
function greet(name) {
const message = `Hello, ${name}!`;
console.log(message);
return message;
}
greet('Frontend Developer');
---
4. シニアからのアドバイス：さらなる一歩先へ
実務でこの構成を扱う際、以下の2点に注意すると、一段上のクオリティを担保できます。
1. HTMLエスケープを忘れない: `` 内に `
` や `
コメント