2026年、CSSがJavaScriptの仕事を奪い始めた：random()とGap Decorationsで変わる開発現場
CSSが「動的」を手に入れた日
2026年5月、Webプラットフォームに2つの重要な機能が追加された。CSSのrandom()関数とGap Decorationsである。これらは単なる装飾的な新機能ではなく、CSSとJavaScriptの役割分担そのものを変える可能性を秘めている。開発者は「CSSでどこまで表現すべきか」という線引きを再考する必要に迫られる。
random()：スタイルにランダム性を持ち込む
random()関数は、CSSの値としてランダムな数値を生成する。例えば、color: rgb(random(0, 255), random(0, 255), random(0, 255)) と書けば、要素ごとに異なる色が自動的に割り当てられる。従来、これと同等の効果を得るにはJavaScriptでDOMを操作し、インラインスタイルを設定する必要があった。
実装のポイントは、疑似乱数ではなく、CSSのカスタムプロパティと組み合わせて「コンテキストに応じた一貫性」を保てる点だ。random(--seed)のようにシード値を指定すれば、同じシードに対して同じ値が返る。これにより、ページ読み込みごとに固定されたランダムなデザインを、JavaScript無しで生成できる。
開発現場での使いどころ
- プロトタイピング段階でのダミーデータ可視化（色やサイズのばらつきをCSS任せに）
- A/Bテストのような実験的UIでの条件分岐（スタイルシートだけで複数パターンを生成）
- ゲーム要素のあるランディングページ（パーティクルや装飾のランダム配置）
ただし、本番サイトでアクセシビリティやブランド統一性が要求される場合、闇雲に使うのは危険だ。ランダムな色はコントラスト比を担保できないため、random()とcolor-contrast()を組み合わせる実装が推奨される。
Gap Decorations：グリッドとフレックスを「装飾」で拡張
Gap Decorationsは、GridやFlexboxのgap領域に線や模様を描画する機能だ。従来、グリッドのセル間に区切り線を入れるには、擬似要素やボーダーを各アイテムに設定する必要があった。Gap Decorationsを使えば、gap-rule: solid 2px #333 のように直接指定でき、コード量が大幅に減る。
特に重要なのは、random()と組み合わせた場合の可能性だ。例えば、ギャップの太さや色をランダムにすれば、各セル間の区切りにばらつきを持たせられる。これにより、グリッドレイアウトでありながら、有機的で手作業のような印象をCSSだけで実現できる。
実務上の注意点
Gap Decorationsは現在、Chrome 120以降で実験的に利用可能だが、FirefoxとSafariでは未実装だ。クロスブラウザ対応を考えるなら、現時点では段階的な導入を検討すべき。プログレッシブエンハンスメントの考え方で、Gap Decorationsをサポートしないブラウザにはフォールバックとして従来の擬似要素スタイルを残す設計が実用的だ。
CSSとJavaScriptの境界線が曖昧になる
random()とGap Decorationsの登場は、CSSが「静的なスタイル定義」から「動的な振る舞いの一部」へと進化している証拠だ。特に、状態管理の領域でCSSがJavaScriptを侵食し始めている。
例えば、これまでユーザーのインタラクションに応じてスタイルを変えるには、JavaScriptでクラスをトグルする必要があった。しかし、CSSの:has()とrandom()を組み合わせれば、特定の状態でのみランダムな装飾を適用するといった処理が、CSS単独で完結する。JavaScriptの役割は「イベントリスナーの登録」と「CSSカスタムプロパティの更新」だけに縮小できる。
移行コストと落とし穴
一番の落とし穴は「デバッグの難しさ」だ。ランダムな値が出力されるCSSは、ブラウザのDevToolsで値の追跡が困難になる。特に、シード値を使わない単純なrandom()はページごとに値が変わるため、再現性のあるバグ修正が難しい。開発時はrandom(--debug-seed)のように固定シードでテストし、本番環境でのみシードを省略する運用が現実的だ。
また、パフォーマンス面では、random()を大量の要素に使うと再計算コストが増える。CSSはレイアウトスレッドで計算されるため、JavaScriptのメインスレッドに影響を与えない利点はあるが、1000要素以上にランダム値を割り当てると、描画がカクつく可能性がある。スタイルの再計算範囲を限定するために、contain: layout styleを適切に設定する必要がある。
次に来るもの
W3Cの議論を見ると、CSSにrandom()に続いてconditional()関数やcounter()の拡張も検討されている。つまり、CSSが「計算」と「条件分岐」を正式に持つ時代が近い。将来的には、テーマ切り替えやダークモードの判定すらCSSだけで完結し、JavaScriptはAPI呼び出しとデータ加工に専念するようになるかもしれない。
開発者が今すべきことは、新しいCSS機能を「単なる飾り」ではなく「振る舞いの一部」として捉え直すことだ。CSSファイルにロジックを分散させる前に、チーム内で「CSSにどこまで責任を持たせるか」のガイドラインを決めておくことを推奨する。さもなければ、CSSのファイルが肥大化し、メンテナンス不能なスパゲッティコードと化すだろう。
参照
この記事を書いた人
理人と理子
ギフプロのブログを運営している理人（リト）と理子（リコ）です！理は知性を表す漢字でもあるので、AIを連想させる名前にしてもらいました。ブログの内容はAIで作成しているところもありますが、読者の方にとって有意義な情報になるように完全自動化ではなく、人の目も通して作成しています！