どれだけ気にかけているかに基づいてコードをハイライトする

ニキータ・プロコポフ氏の「誰もがシンタックスハイライトを間違っている」という記事を読んで、私は自分のコードがどのようにハイライトされているかについて、これまでほとんど考えたことがなかったことに気づきました。私はかなり基本的で、JetBrainsから完全に離れて以来、ずっとVSCodeのダークテーマのデフォルト設定を使っています。同じテーマと色に慣れすぎてしまい、長年それに盲目になっていました。 ニキータ氏の記事のこの部分は特に印象に残りました。 もう一つテストです。目を閉じて（まだダメです！この文を最後まで読んでください）、カラーテーマがクラス名に何色を使っているか思い出してみてください。 できますか？ 両方の質問に対する答えが「いいえ」なら、あなたのカラーテーマは機能的ではありません。それは心地よさを与えるかもしれませんが（安全だと感じる、ハイライトされていればおそらくコードだろう）、ツールとして使うことはできません。それは役に立たないのです。 解決策は何でしょうか？絶対的な最小限の色数にすることです。一度にすべて頭に入るほど少ない数です。 青がいくつか、別の青がいくつか、そして確かに紫も入っていることは知っています…でも、どれがどれだかはあまりはっきりとは分かりません。さて、彼らは私が覚えていないなら、それは私のテーマに色が多すぎるからだと言っています。では、色の少ない新しいテーマを作ってみましょう、それはどれほど難しいことでしょうか？ 私がどこに向かっているかはおそらく推測できると思いますが、ライトテーマを作ろうとすると、実際には非常に難しいことが判明しました！基本的に、白い背景とのコントラストを出すためには、ダークテーマの場合よりも色が暗くなる必要があります。暗い色は鮮やかさが少なく、知覚的なインパクトも小さくなります。 いじくり回した結果、このサイト（主に1ビットのアートスタイル）にふさわしいと感じるテーマを作るのが難しいことが分かりました。色が特定のセクションを目立たせるのに機能しなかったのではなく、それが物事を際立たせすぎたのです。 その経験から、私は考え始めました…そもそもコードはなぜハイライトされる必要があるのでしょうか？ だから、明白な答えは2つのことの組み合わせのようです。 コードを区別できるようにしたい（選択的注意） 視覚的に特定のコードを見つけたい（素早く特定する） 私はまだその前提に同意しますが、多くの実験の後、要素を目立たせ、特定可能にする方法を答えるためには、まずその処理を受けるべき要素は何かという問いに答えなければならないと結論付けました。私はその問いを頭の中で反芻させながら、同時にカラーテーマを機能させようと必死に壁にぶつかっていました。 このプロセスのこの時点で、私は見たライトテーマのどれも気に入っていませんでした。読みづらいか、単調すぎるかのどちらかでした（少なくともダークテーマの絶対的なインパクトと比較して）。 これはさらに考えさせられました…ハイライトはなぜ色である必要があるのでしょうか？ 色のコントラストを全く使わずに、トーンだけを使ってどこまでできるか試してみたらどうなるでしょうか？ 最初のステップは、すべてのカラーシンタックスを削除し、生の黒から白にすることです。 何もかも剥ぎ取られた 何もかも剥ぎ取られた /** プロパティ内のすべての値を待機し、元の型を保持する */ async function resolveProperties< const T extends Record<string, unknown>, >(properties: T): Promise<{ [K in keyof T]: Awaited<T[K]> }> { const entries = await Promise.all( Object.entries(properties).map(async ([key, value]) => [ key, await value, ] as const), ); return Object.fromEntries(entries) as { [K in keyof T]: Awaited<T[K]>; }; } うーん…わあ、本当に嫌いです。あまりにも平坦で、目が正しくナビゲートするために、すべての文字を個別に読む必要があるように感じます！散文とは異なり、通常は線形に読みますが、コードでは探索している関連要素に基づいて飛び回ります。これが、素早く特定できるという側面が重要な理由です！ ここに何らかのコントラストを戻す必要があります。 この投稿が永遠に続かないようにするために、私が遊び回った段階はすべてスキップして、最終結果だけをカバーします。 グレースケールハイライトの例 ハイライト付き /** プロパティ内のすべての値を待機し、元の型を保持する */ async function resolveProperties< const T extends Record<string, unknown>, >(properties: T): Promise<{ [K in keyof T]: Awaited<T[K]> }> { const entries = await Promise.all( Object.entries(properties).map(async ([key, value]) => [ key, await value, ] as const), ); return Object.fromEntries(entries) as { [K in keyof T]: Awaited<T[K]>; }; } ベーステキストは依然として黒から白ですが、これは焦点を合わせるための中心点が必要だからです。変数と関数の参照はベースラインのままです。なぜなら、それがコードの大部分であり、ほとんど何にでも特別な注意を払うことはできないからです。異なるのは、重要度の順です。 コメント：これらは、高レベルの説明（コードを読むよりも速い）と外部のコンテキスト（コードを読むだけでは分からない「なぜ」）を含んでいます。これは、大きなコードファイルの中で最もスキャンしやすいものです。 変数と関数の定義：何かを作成するとき、特にオブジェクト名が作成されているのをスキャンできるように、目立つようにすることが役立ちます。これは、何が起こっているかを理解するために、コード自体の最初のスキャンをサポートします。それらのいずれかをクリックすると、すべての出現箇所が表示されます。 コールスタックフロー：return、throw、yieldはすべて分岐終端であり、関数のスコープ内のコードが実行を停止または一時停止できる場所を示します。これらは構造的であり、視覚的に素早く見つけられるはずです。 一方で、一部の領域にもっと注意を払いたいのと同じように、他の領域にはあまり注意を払いたくないということに気づきました。 let、constのような一般的なキーワード：初期入力後は、ほとんど気にする必要がありません。これらはほとんど見えなくても、私にとっては何も違いはありません。 句読点：括弧、セミコロンのステートメント終端、コロン、カンマ：これらは言語が機能するために必要ですが、不適切に入力された場合を除いて、それほど意味のあるものではありません。これらはベーステキストよりもわずかに明るくすることで、視覚的に少し後退させます。 静的なハイライトの外側には、同じ単語やスコープ/括弧の特定のための動的なクリックベースのハイライトがあります。 アイデアは、ハイライトによって、読んでいるときに最も重要な部分の間を目がスキップできるようになり、意味的な部分に集中し、純粋に構文的な部分をスキップできるようになることです。それが十分な区別を提供して真の価値を提供するほど鮮明であるべきですが、私が注目していない部分が私の注目しているものから注意をそらさないほど微妙であるべきです。 コメントとより多くの制御フロー 制御フロー type Job = { id: string; label: string; enabled: boolean; }; async function* completedJobs(jobs: Job[]): AsyncGenerator<string> { for (const job of jobs) { if (!job.enabled) continue; // リクエストを遅延させるため、無効なジョブはサービスを呼び出さない const response = await fetch(`/api/jobs/${job.id}`); if (!response.ok) continue; const result = (await response.json()) as { status: "complete" | "failed"; message: string; }; if (result.status !== "complete") continue; yield `${job.label} (${job.id}): ${job.message}`; } } 全体として、何に注意を払いたいかを最適化するためにハイライトを調整することは、まさに何に注意を払いたいのかを理解するための非常に興味深い演習でした。 引用 申し訳ありませんが、誰もがシンタックスハイライトを間違っています ニキータ・プロコポフ 2025年10月15日 プロコポフ氏は、シンタックスハイライトはすべてを均等にハイライトするのではなく、最も重要なものを強調すべきだと主張しています。また、一般的なテーマよりもはるかにまばらにハイライトすることを提唱しています。「すべてがハイライトされているなら、何もハイライトされていない」（シンドロームのキュー）。