やあ、こんにちは。Webの広大な世界へようこそ。
フロントエンドの深淵を覗き込んでいると、「なぜか画面がカクつく」「ちょっとした修正でページ全体が再計算されて重くなる」なんていう壁に、必ず一度はぶつかるよね。
今日は、そんな悩めるエンジニアの皆さんに、ブラウザを「少しだけ楽にさせる」魔法の言葉、`contain` プロパティについてお話ししよう。
—
そもそも、ブラウザは「おせっかいな完璧主義者」なんです
ブラウザが画面を描画するとき、彼らは常に「全体を見渡そう」とするんだ。
例えば、ページの一番下にある小さなアイコンの色を一つ変えたとする。するとブラウザは律儀に、「この変更がページ全体のレイアウトに影響しないかな？」と、上から下まで全部チェックし直そうとするんだよ。
これを「リフロー（再レイアウト）」と呼ぶんだけど、ページが複雑になればなるほど、このチェック作業はブラウザにとって重労働になる。
「おーい、そのアイコンのことは、その周りだけで処理してくれよ！」と言いたくならない？
それを実現するのが `contain` プロパティなんだ。
—
`contain` は「箱の中に閉じ込める魔法」
`contain` は、DOMの特定の範囲に対して「ここから外には影響出さないから、君は中だけで完結してていいよ！」とブラウザに指示するプロパティだ。
例えるなら、巨大なショッピングモール（ページ全体）の中に、独立した小さな専門店（特定の要素）を作るようなものだよ。専門店の改装工事をしても、モール全体の設計図を書き直す必要はないよね？
主要な値と、その「役割」
`contain` にはいくつか指定できる値があるけれど、まずは代表的なものを押さえておこう。
- `layout`: 「この中身の配置が変わっても、外側のレイアウトには一切関係ないよ」という宣言。
- `paint`: 「この中身は、はみ出して表示されることはないよ。外側を描画する際、この中をわざわざ覗き込まなくていいよ」という宣言。
- `size`: 「この要素の大きさは、中身に関係なく決まっているよ（固定だよ）」という宣言。
- `content`: `layout` と `paint` を両方適用する、一番よく使うセットだね。
—
実践！コードで見てみよう
例えば、チャットアプリのメッセージ一覧や、ニュースフィードのような「後から要素が増える場所」に使うと効果てきめんだ。
.message-box {
/
この箱の中での変更は、外に漏らさない！
ブラウザよ、余計な再計算をしなくていいぞ。
/
contain: content;
border: 1px solid #ccc;
padding: 10px;
}
こんにちは！今日はいい天気ですね。
—
使いこなすための「ちょっとした注意点」
ここまで聞くと「じゃあ全部の要素に `contain` をつければ最強じゃない？」と思うかもしれない。でも、それはちょっと待って。
`contain` を使うということは、ブラウザに対して「この中身のことは気にしないでいい」と強制的にルールを敷くことなんだ。もし、その要素からはみ出して表示させたい影（box-shadow）や、絶対配置（position: absolute）の要素が外側にある場合、`contain` を使うとそれらが切り取られて見えなくなってしまうことがある。
これは「バグ」じゃなくて、「指定通りに中身を閉じ込めた」結果なんだ。
だから、「この要素は完全に独立していても問題ないかな？」という視点を、常に忘れないでほしい。
—
最後に：ブラウザと仲良くなろう
Webのパフォーマンス改善というと、何か難しいアルゴリズムを組まないといけないと思われがちだよね。でも、実はこうやって「ブラウザが働きすぎて疲れないように、境界線を引いてあげる」という、ちょっとした気遣いの積み重ねが、一番の近道だったりするんだ。
最初は難しく感じるかもしれないけれど、まずは小さな要素一つから `contain: content;` を試してみて。ブラウザが少しだけ軽やかに動いてくれるのを感じられたら、君はもう、立派なブラウザのアーキテクトの入り口に立っているよ。
大丈夫、一つずつ焦らずに。
また分からないことがあったら、いつでも聞きに来てね。君のコードが快適に動くのを、応援しているよ。
コメント