CSSの世界へようこそ。フロントエンドの迷宮を歩き続けてきた私から、今日は少し不思議で、でも知ると手放せなくなる「`:scope`（スコープ）」という魔法の杖についてお話しします。
CSSを学び始めると、誰もが一度は「特定の場所だけを狙い撃ちしたいのに、なぜか関係ないところまでスタイルが当たってしまう！」という壁にぶつかりますよね。そんな時、この`:scope`は、まるで「ここから先だけを見てね」と指し示すコンパスのような役割を果たしてくれます。
—
そもそも「`:scope`」って何者？
日常の風景で例えてみましょう。
あなたは大きなショッピングモールにいます。「カフェを探して」と誰かに頼んだとき、モール全体を探し回るのは大変ですよね。でも、「この『2階のフロア』という範囲の中で、カフェを探して」と言われたらどうでしょう？ ぐっと探しやすくなりますよね。
プログラミングの世界でも同じです。「ページ全体から特定の要素を探す」のではなく、「特定の親要素の中だけで、対象を探す」。この「範囲の起点」を指定してくれるのが`:scope`なんです。
JavaScriptで使うと「真価」を発揮する
実は、`:scope`はCSSファイルの中に書くよりも、JavaScriptの`querySelector`と組み合わせて使う場面が圧倒的に多いです。
例えば、以下のようなHTML構造があるとします。
ここで、「リストAの中にあるアイテムだけ」をJavaScriptで取得したいとします。
// リストAの箱を特定します
const listA = document.querySelector(‘#shopping-list-a’);
// listAを起点にして、その中にある「.item」を探す
// この時、:scopeを使うことで「listAの中にあるもの」と明示できます
const items = listA.querySelectorAll(‘:scope > .item’);
items.forEach(item => {
console.log(item.textContent); // りんご、みかん と表示されます
});
この `:scope > .item` という書き方。直訳すると「自分自身（listA）の直下にある .item を見つけてね」という意味になります。これを使わずに `listA.querySelectorAll(‘.item’)` と書くと、もしリストAの中にさらに別のリストが入っていた場合、意図しない深い階層のアイテムまで拾ってしまうことがあります。
`:scope`を使うことで、「ここが境界線だよ！」と明確に境界を引けるようになるんです。
—
初学者がつまずきやすいポイント
「えっ、でもCSSファイルにそのまま書いても動かないの？」と疑問に思うかもしれません。実は、CSS単体（スタイルシート）で `:scope` を使うと、少し挙動が直感的ではありません。
現時点のCSS仕様では、`:scope` は「スタイルを適用する範囲のルート」を指しますが、それが「ドキュメント全体（`:root`と同じ）」を指してしまうことが多いため、「ただのクラス指定と何が違うの？」と混乱しやすいのです。
ですから、最初はこう覚えておいてください。
- CSSファイルで使う時はまだ少しクセがある（気にしなくてOK！）
- JavaScriptでDOM操作をする時に、「ここを起点にするよ！」と宣言するための最強のキーワード
そう、今は「JavaScriptで要素を探すときの、頼もしいガイド役」として仲良くなっておけば十分です。
—
最後に：迷ったときは「基準」を思い出して
プログラミングやマークアップの現場では、複雑なHTMLが絡み合って、どこに何があるか分からなくなることがよくあります。そんな時、`:scope` を使って「今、自分はどこを基準に操作しているのか」をコードで表現してあげてください。
そうすることで、あなたの書いたコードは誰が見ても「どこからどこまでを操作対象にしているか」が一目瞭然になります。それは、未来の自分や、一緒に働く仲間への最高の手紙になるはずです。
最初は難しく感じるかもしれませんが、大丈夫。まずは `querySelectorAll` の中で「`:scope > クラス名`」と書いて、自分の思い通りに要素が取れたときの「やった！」という感覚を味わってみてください。
CSSの旅はまだ始まったばかり。一つひとつ、道具の使い方を覚えていきましょうね。またいつでも聞きに来てください。
コメント