` `の`value`属性を使いこなす：数値の制御から見えるブラウザの「計算」という概念
フロントエンドエンジニアの皆さん、普段何気なく使っている`
- `タグ、そしてその中の`
- `タグ。リストの番号を途中で変えたいとき、わざわざCSSの`counter-reset`や`counter-increment`を書いていませんか？
もちろん、デザイン要件が複雑であればCSSカウンタは最強の武器です。しかし、マークアップの構造自体で番号を制御できる「ネイティブな手段」を忘れてはいけません。今回は、`
- `タグにひっそりと存在する`value`属性について、現場の知見を交えて掘り下げていきます。
—
`value`属性は「ただの数字」ではない
HTML仕様における`value`属性は、順序付きリスト（`
- `）の中で、その項目が持つ「数値」を明示的に指定するためのものです。
- `を見つけると、内部的にカウンタを走らせます。通常、最初の`
- `は`1`から始まり、次へ行くたびに`+1`されます。
ここで`value=”5″`という属性を与えると、ブラウザはその項目を「5」と認識するだけでなく、「ここから先の番号も、この5を起点にインクリメントせよ」という命令として解釈します。つまり、`value`属性は単なるスナップショットではなく、リストの「連番の再定義」を行っているのです。
—
実践コード：実務で遭遇する「連番の飛び」を制御する
例えば、FAQやステップ形式のUIで、途中で別の要素を挟んだり、セクションを分割した状態で番号を継続させたいケースはよくあります。
- ステップ1：環境構築
- ステップ2：ライブラリのインストール
※ ここまでで初期設定は完了です。ここからは応用編に入ります。
- ステップ3：コンポーネントの作成
- ステップ4：状態管理の実装
なぜこれが重要なのか
「CSSでやればいいのでは？」という声が聞こえてきそうですが、アクセシビリティの観点で考えてみてください。スクリーンリーダーはHTMLのセマンティクスを読み取ります。CSSで無理やり番号を表示させると、読み上げ順序や数値の解釈が混乱するリスクがありますが、`value`属性を使えば「DOMとして正しい数値」をブラウザが認識してくれるため、支援技術との相性が圧倒的に良いのです。
—
注意すべき挙動：`value`は「上書き」ではなく「始点」
ここで一つ、現場でハマりやすい罠を共有します。
`value`属性は、その項目以降の番号をすべて書き換えます。例えば、5番目に`value=”10″`を指定すると、6番目の項目は自動的に`11`になります。これを理解していないと、「あれ、番号が飛んだ！」とデバッグに時間を溶かすことになります。
綺麗な実装のためのサンプルコード
以下の例は、特定の条件下で番号をスキップしつつ、後続を正しく維持するパターンです。
- 基本機能の実装
- 重要：外部APIとの連携
- 最終テスト
—
シニアエンジニアからのアドバイス
実務において、技術選定の基準は「どれだけ賢いコードを書けるか」ではなく、「どれだけメンテナンス性が高く、ブラウザの仕様に素直に従っているか」です。
- 単純な番号制御なら： HTMLの`value`属性（または`
- `の`start`属性）を使う。
- デザイン的に数字を装飾したいなら： CSSカウンタと組み合わせる。
- 意味論（セマンティクス）を優先するなら： まずはHTML属性で制御できないか検討する。
この思考プロセスを癖にしてください。「CSSでゴリ押しする前に、HTMLに標準機能がないか調べる」。この一歩があるだけで、あなたの書くコードの堅牢性は格段に上がります。
さて、次はどの属性の「裏の顔」を暴いていきましょうか？また現場でお会いしましょう。
ブラウザが裏側でやっていること
ブラウザは`
- `の中に`
コメント