こんにちは！Webの世界へようこそ。
ブラウザという「魔法の箱」が、どうやって私たちが書いたコードを綺麗な画面に仕立て上げているのか。その舞台裏を覗き込むのは、とてもエキサイティングな冒険ですよね。
今日は、フロントエンドの現場で「ここを制する者はパフォーマンスを制する」と言われる奥義、`contain`プロパティについてお話しします。
—
ページが重くなる「ドミノ倒し」の正体
まず、ブラウザが画面を描くとき、実はすごく「律儀」な性格であることを知っておいてください。
例えば、Webページの中にある小さなボタンの色をCSSで変えたとします。するとブラウザは律儀に、「この変更の影響は、ページ全体のどこまで及ぶかな？」と、画面の端から端まで一生懸命チェックしに行くんですよ。
これがページの一部を変えただけなのに、ページ全体を再計算してしまう「リフロー（再配置）」や「リペイント（再描画）」の正体です。まるで、一箇所を直そうとすると部屋中の家具を動かさなきゃいけないような、もどかしい状況ですね。
CSS `contain` は「レンダリングの防波堤」
ここで登場するのが `contain` です。
これを一言で言うなら、「この箱の中だけで完結していいよ」とブラウザに伝える境界線です。
イメージしてみてください。大きな図書館（Webページ）があります。ある一冊の本を整理整頓（再計算）するとき、図書館全体を走り回るのではなく、「この本棚の中だけ片付ければOK！」とあらかじめ決めておく。これこそが `contain` の役割です。
`contain` が守ってくれる3つの防波堤
`contain` は主に3つの「分離」を教えてあげることができます。
1. layout（レイアウト）: この箱の中の要素が大きさを変えても、箱の外のレイアウトには影響させないよ。
2. paint（ペイント）: この箱の外に、箱の中身がはみ出して描画されることはないよ。
3. style（スタイル）: この箱の中で起きたCSSの変化は、箱の外には伝播しないよ。
実践！コードで見てみよう
例えば、更新頻度が高い「チャットのメッセージ欄」や「複雑なウィジェット」がある場合、そこに `contain` をかけてあげるだけで、ブラウザの負担は劇的に軽くなります。
.chat-widget {
/ レイアウトとペイントの計算範囲を、この箱の中に限定するよ /
contain: layout paint;
/ 高さや幅をあらかじめ指定しておくと、より効果的です /
width: 100%;
height: 400px;
overflow: auto;
}
このコードを書くことで、ブラウザは「ああ、この `.chat-widget` の中身が変わっても、外側のレイアウト計算はしなくていいんだね！」と理解してくれます。これで画面全体の動作がスッと軽くなるわけです。
—
「とりあえず全部」は禁物ですよ
ここまで読むと「じゃあ、すべての要素に `contain` を付ければ爆速になるのでは？」と思うかもしれません。でも、そこは少しだけ立ち止まりましょう。
`contain` は「境界線を作る」という強力な魔法です。あまりに細かく境界線を引いてしまうと、今度はブラウザが「どこまでが独立していて、どこからが繋がっているのか」を管理する手間が増えてしまいます。
「独立して動く大きな塊（ウィジェット、サイドバー、モーダルなど）」にだけピンポイントで使ってあげるのが、一番の近道です。
最後に：ブラウザと仲良くなろう
最初は難しく感じるかもしれませんが、「ブラウザは頑張り屋さんすぎて、つい余計なことまで計算しちゃう」と想像してみてください。
`contain` を使うことは、そんな頑張り屋のブラウザに「ここは大丈夫だよ、安心してね」と声をかけてあげるような優しさなんです。
最初は完璧に理解できなくても大丈夫です。まずは「動的なパーツの親要素に、試しに `contain: content;` を入れてみる」という実験から始めてみてください。あなたのWebサイトが、少しだけ軽やかになってくれるはずです。
何か分からないことがあったら、いつでもまた聞きに来てくださいね。あなたの開発ライフが、もっと楽しくなりますように！
コメント