【テクニカル・上級編】ol要素（順序付きリスト）の基本構造 – HTML実践ガイド

—

1. マーカー生成の裏側とレンダリング負荷

`

` の最大の強みは、リストマーカー（1, 2, 3…）がブラウザのネイティブ機能として生成される点にあります。これに対し、CSSの `::before` 擬似要素で連番を振る手法は、一見モダンに見えますが、実はレンダリングコストと管理コストのトレードオフが発生します。

レンダリングへの影響

ブラウザエンジン（BlinkやWebKit）は、`

` のマーカーを `list-item` ボックスの一部として最適化します。一方、`counter-increment` を多用すると、DOMの変更に伴い頻繁な再計算（リフロー）がトリガーされるリスクがあります。特に数千件規模のリストを動的に操作する場合、ネイティブの `
` はレイアウト計算のオーバーヘッドをブラウザ側にオフロードできるため、パフォーマンス上の優位性があります。

—

2. TypeScriptによる厳格な型安全とDOM操作の落とし穴

ReactやVueといったフレームワークを愛用していると、ついつい `

` と `
• ` だけで済ませがちです。しかし、順序が意味を持つデータ（ステップガイドや優先順位付きタスク）において `
  ` を使わないことは、セマンティクス上の損失だけでなく、型安全の観点からも推奨されません。

  以下は、TypeScriptで型安全を担保しつつ、動的にリストを生成する際のベストプラクティスです。

  /

  • リストアイテムの厳格な型定義
  • フロントエンドのデータ層とDOMの整合性を保つ

  /
  interface OrderedListItem {
  id: string;
  content: string;
  priority: number;
  }

  // リストレンダリングのためのロジック
  const renderList = (items: OrderedListItem[]) => {
  const ol = document.createElement(‘ol’);

  // start属性で順序の開始値を制御可能（ページネーション時に便利）
  ol.setAttribute(‘start’, ‘1’);

  items.forEach((item) => {
  const li = document.createElement(‘li’);
  // アクセシビリティのためにデータ属性を付与
  li.dataset.id = item.id;
  li.textContent = item.content;
  ol.appendChild(li);
  });

  return ol;
  };

  —

  3. 非同期更新における「競合」をどう捌くか

  大規模なWebアプリケーションにおいて、APIから受け取ったデータを順序通りに表示する際、最も恐ろしいのは「非同期処理の完了順序」と「DOMの更新順序」の不一致です。

  特に `

  ` を使う場合、`type=”1″` や `reversed` 属性を動的に変更する際は注意が必要です。ブラウザはこれらの属性変更をDOMツリーのレイアウト再計算のトリガーと見なします。

  回避策：Keyの管理と仮想DOMの最適化

  React等の仮想DOMライブラリを使う場合、`

  1. ` には必ず一意な `key` を付与してください。これを行わないと、リストの途中で要素が追加・削除された際、ブラウザはDOMを再利用できず、リスト全体のマーカーを再描画することになり、不要なリペイントを引き起こします。

     // 悪い例: インデックスをKeyにするのは、リストの順序が変動する場合にはNG
     // {items.map((item, index) =>

  2. {item.text}

  )}

  // 良い例: 一意なIDを使用し、メモ化を行う
  const ListItem = React.memo(({ content }: { content: string }) => (

  3. {content}

  ));

  —

  4. エッジケース：CSSカウンタとの混在とアクセシビリティ

  時折、`

  ` のデフォルトスタイルを消して、CSSカウンタで独自の装飾を施す設計を見かけます。ここで注意すべきは、スクリーンリーダーへの影響です。

  `list-style: none` を適用しても、ブラウザは依然としてその要素を「リスト」として解釈し続けます。しかし、CSSカウンタで生成した文字は、読み上げソフトによっては正しく順序として認識されない場合があります。

  プロの選択：
  本当にネイティブのマーカーがデザインに合わない場合は、`::marker` 擬似要素を使ってください。これは CSS の仕様で「リストマーカーを直接スタイルする」ために設計されたものであり、アクセシビリティを損なうことなく、モダンなデザインを実現できる唯一の解法です。

  / marker擬似要素を使ったモダンなスタイリング /
  ol li::marker {
  color: #3b82f6;
  font-weight: bold;
  font-family: ‘Inter’, sans-serif;
  }

  —

  結論：枯れた技術の再評価

  `

  ` 要素は、決して時代遅れの遺物ではありません。むしろ、ブラウザの内部挙動を理解し、パフォーマンスとアクセシビリティの均衡点を探る上級エンジニアにとって、これほど信頼性の高い道具はないのです。

  「なぜこのタグを使うのか？」という問いに対し、パフォーマンス、型安全性、そしてアクセシビリティの3点から明確に答えられること。それこそが、技術選定における「妥当性」という名の職人芸ではないでしょうか。

  次回のコンポーネント設計時には、ぜひ一度 `div` や `ul` で囲う前に、それが「順序」を持つべきものなのかを自問してみてください。その小さな決断が、堅牢なアプリケーションへの第一歩となります。