やあ。最近、フォーム周りの実装で「未入力項目のバリデーション表示、またJavaScriptで無駄に判定書いてない？」と後輩のコードを覗き見しては、そっと肩を叩くのが日課になっているシニアエンジニアの私だ。
君も経験があるはずだ。バックエンドから渡された要件定義書に「必須項目には赤字で『必須』と大きく表示してください。未入力のまま送信ボタンを押したらエラー枠を出してください」と平然と書かれているあの絶望感を。昔なら、要素に `required` 属性を付与した上で、JavaScriptのイベントリスナーをゴリゴリ書き、`class` を付けたり外したりしてスタイリングを制御していたはずだ。
だが、現代のCSSをナメてもらっては困る。
ブラウザのネイティブ機能とCSSの擬似クラスを正しく手懐ければ、JavaScriptの力を借りずとも、宣言的に、かつ圧倒的に美しくフォームの状態を制御できる。その代表格が、今回スポットを当てる `:required` 擬似クラス だ。
今日は、この `:required` がブラウザの裏側でどう動いているのか、そして実務の現場でどう使い倒すべきか、私の知見をすべて授けよう。
—
1. `:required` 擬似クラスとは何か？（仕様の核心）
一言で言えば、`:required` は HTMLの `required` 属性を持つフォーム要素（``、`