HTMLの「隠れた名脇役」：ol要素の `reversed` 属性を使いこなす
フロントエンドの現場で、リストを扱うとき。無意識に `
- ` を選び、番号付きなら何も考えずに `
-
第5位：圧倒的な保守性
コンポーネント設計が洗練されると、夜もぐっすり眠れます。
-
第4位：型安全の恩恵
TypeScriptなしの生活には、もう戻れません。
-
第3位：レンダリング速度の追求
Lighthouseのスコアが100点を超えた時の快感は格別です。
-
第2位：チーム開発のコミュニケーション
コードは結局、人間が読むためのドキュメントです。
-
第1位：ユーザー体験への執着
これこそが、我々フロントエンドエンジニアの真骨頂です。
- ` を書いていませんか？
もちろんそれで動くし、ブラウザも文句は言いません。しかし、仕様の隅っこで静かに待機している「属性」を知っているかどうかで、マークアップの解像度は一段階上がります。今回は、HTML5から導入された `reversed` 属性について、実務的な視点で深掘りしてみましょう。
—
なぜ `reversed` 属性が必要なのか？
通常、`
- ` は「1, 2, 3…」と昇順でカウントアップします。しかし、実務では「カウントダウン形式のランキング」や「歴史的な年表の逆順表示」など、降順で番号を振りたいケースが稀によくあります。
ここで多くのエンジニアが陥る罠が、CSSの `counter-reset` で無理やり数字を操作したり、あるいはJavaScriptで動的にDOMを生成してインラインで `value` 属性を付与するという手法です。
これらは動かなくはないのですが、HTML本来のセマンティクス（意味論）から逸脱しています。「順序が重要であり、それが降順である」という事実は、マークアップの時点で宣言されるべきです。 そこで登場するのが `reversed` 属性です。
ブラウザはどう処理しているのか？
`reversed` 属性を付与すると、ブラウザのレンダリングエンジンは、最後の子要素から逆算して番号を振り直します。
面白いのは、属性単体で使うだけでなく、`start` 属性と組み合わせたときです。例えば、`start=”10″` と `reversed` を組み合わせれば、「10, 9, 8…」というように、任意の開始値からカウントダウンを開始できます。
この処理は、JavaScriptによる再計算コストを一切発生させません。ブラウザのネイティブ機能として実装されているため、パフォーマンス的にも非常に優秀です。
実践的なサンプルコード
以下は、ランキングやステップガイドを想定した、実務でそのまま使えるコード例です。CSSでの装飾も少し添えておきます。
アクセシビリティへの影響と注意点
ここからが重要です。`reversed` 属性は、スクリーンリーダーに対して「このリストは順序が逆転している」というセマンティクスを正しく伝えます。
JavaScriptで無理やり数字を書き換えた場合、DOM構造と見た目の整合性が取れず、読み上げ順序や数値の解釈でユーザーを混乱させるリスクがあります。HTML標準の属性を使うことは、「ブラウザと支援技術に正しい情報を渡す」という、フロントエンドエンジニアとしての誠実な選択なのです。
ただし、一点だけ注意してください。`reversed` はあくまで「番号（リストのマーカー）」の順序を操作するものです。もし、DOMの並び順そのものが「逆順である必要がある（例：DOMツリー上でも新しい記事が上に来るべき）」場合は、CSSの `flex-direction: column-reverse;` を併用するなどの工夫が必要です。
最後に
「`reversed` 属性なんて知らなくても仕事はできる」と思うかもしれません。しかし、こうした細かい仕様を拾い上げ、最適な手法を選択していく積み重ねが、バグの少ない、メンテナンス性の高いコードベースを構築します。
枯れた技術を使いこなすことこそ、プロのエンジニアの矜持です。ぜひ次の案件で、リストをマークアップする際に思い出してみてください。あなたの書くHTMLが、ほんの少しだけ、より正しく、より美しくなるはずです。
コメント