「とりあえずタグで囲む」は卒業しよう。``タグで期間（Duration）を正しく構造化する技術
現場でコードレビューをしていると、日付や時間の扱いにおいて「見えればいい」という実装にたびたび遭遇します。特に`
今回は、単なる日付指定だけでなく、「期間（Duration）」を正しく表現するための`に焦点を当てます。アクセシビリティや機械可読性（マシンリーダビリティ）を意識した、一歩先の実装スキルを身につけましょう。
—
なぜ `` タグを使うのか？
ブラウザや検索エンジン（Googleボットなど）にとって、テキストの「2023年10月1日」は、単なる文字列です。しかし、`
特に今回のテーマである「期間（Duration）」は、ISO 8601という規格に基づいた表記が必要です。これを正しくマークアップすることで、スクリーンリーダーの読み上げ精度が向上し、検索結果のスニペットにリッチな情報として反映される可能性も高まります。
—
期間（Duration）を表現する `P` 記法
期間を表すには、ISO 8601の「Durationフォーマット」を使います。
`P`（Period）から始まり、`Y`（年）、`M`（月）、`D`（日）、`T`（Time）、`H`（時）、`M`（分）、`S`（秒）を組み合わせて記述します。
例えば、「2時間30分」なら `PT2H30M` となります。
実践的なマークアップ例
以下のコードは、動画の長さやイベントの所要時間などを記述する際にそのまま使えるベストプラクティスです。
再生時間:
ワークショップ所要時間:
なぜこれが「現場の正解」なのか？
1. マシンリーダビリティ: `datetime` 属性にISO 8601フォーマットを記述することで、スクレイピングツールや検索エンジンが、人間が見ているテキストと切り離して「数値としての期間」を正しく解釈できます。
2. アクセシビリティ: スクリーンリーダーによっては、この属性値を読み解くことで、「3時間」というテキストをより正確にユーザーへ伝えることが可能です。
3. メンテナンス性: 表示用のテキスト（「1時間15分30秒」）と、データとしての時間（`PT1H15M30S`）を分離できるため、例えば「国際化対応（i18n）」で表示言語が変わっても、データ構造を維持したまま開発が可能です。
—
期間の指定における注意点：ブラウザの挙動と罠
現場でよくある失敗が、「開始日時から終了日時までの期間」を、単に `datetime` 属性へ計算して入れてしまうことです。
`
キャンペーン期間:
から
まで
このように、「期間（Duration）」と「範囲（Range）」を混同しないことが、セマンティックなHTMLを書くための大きな分岐点になります。
—
シニアからのアドバイス：実装の「引き出し」を増やす
実務では、JavaScriptで動的に生成した日付を表示することも多いでしょう。その際、`textContent` だけでなく、必ず `setAttribute(‘datetime’, isoString)` をセットする癖をつけてください。
もし、より複雑なスケジュール管理画面などを構築しているなら、`
「動けばいい」コードから「正しく構造化された」コードへ。たったこれだけの意識の差が、数年後の保守フェーズや、SEOの結果において大きな差となって返ってきます。
明日からのコーディングで、ぜひ `
コメント