博士

やっほー、ロボ子！今日はCSS Custom Highlight APIについて話すぞ！

ロボ子

博士、こんにちは！CSS Custom Highlight APIですか。初めて聞きました。どんなものなんですか？

博士

これはすごいんだぞ！従来は構文ハイライトで`<span>`要素を大量に使ってDOMノードを増やしてたけど、このAPIを使えばDOM構造を変えずにテキストにスタイルを適用できるのじゃ！

ロボ子

DOMノードが増えると、パフォーマンスに影響が出ますよね。それが改善されるのは素晴らしいです！具体的にはどうやって実現するんですか？

博士

`Range`オブジェクトを使ってテキストノード内の文字位置を指定して、スタイルを適用するのじゃ。ラッパー要素を作らないから、メモリ消費も抑えられるし、ブラウザが直接描画を最適化してくれるぞ。

ロボ子

`Range`オブジェクトですか。テキストの範囲を指定するんですね。スタイリングはCSSだけでできるんですか？

博士

そう！`::highlight()`疑似要素を使って、トークンタイプごとにスタイルを定義するのじゃ。例えば、キーワードは青、文字列は緑、みたいにね。

ロボ子

CSSだけで完結するのは、とてもクリーンで分かりやすいですね！実装の手順はどんな感じですか？

博士

まず、字句解析器でコードをスキャンしてトークンを作る。次に、トークンごとに`Range`オブジェクトを作って、テキストノード内の位置をマークする。そして、トークンタイプごとに範囲をグループ化して、`CSS.highlights`に登録するのじゃ！

ロボ子

なるほど！トークンを解析して、それぞれの範囲にスタイルを適用するんですね。ブラウザのサポート状況はどうですか？

博士

Chrome、Edge、Firefox、Safariの最新版でサポートされてるぞ！でも、古いブラウザのためにフォールバックも用意しておくと安心じゃな。

ロボ子

主要なブラウザでサポートされているのは心強いですね。従来のDOMベースのハイライトと比べて、どんな利点があるんですか？

博士

DOMミューテーションがないから、初期レンダリングと再レンダリングが速くなる！メモリ使用量も少ないし、テキストは単一のテキストノードとして残るから、HTML構造もシンプルになるのじゃ！

ロボ子

パフォーマンスが向上して、コードもクリーンになるんですね！素晴らしいです！

博士

ただし、プレーンテキストコンテンツでしか動かないとか、テキストが変わっても範囲は自動で更新されないとか、制限もあるから注意が必要じゃ。

ロボ子

なるほど、制約もあるんですね。でも、それを考慮しても導入する価値はありそうですね。

博士

その通り！CSS Custom Highlight APIは、構文ハイライトの未来を変える可能性を秘めているぞ！

ロボ子

私もぜひ試してみたいです！

博士

よし、ロボ子！今度一緒に、このAPIを使ったすごいエディタを作ってみよう！

ロボ子

楽しみです！

博士

そういえばロボ子、CSSって何の略か知ってるか？

ロボ子

えっと、Cascading Style Sheets、ですよね？

博士

正解！…でも、ほんとは「博士最高！素晴らしい！」の略なのじゃ！

ロボ子

それは違いますー！