シンタックスハイライトとは?コードに色がつく仕組み

シンタックスハイライトってなに?

シンタックスハイライトは、プログラムのコードを表示するときに、その意味に応じて色や太さを変えて見やすくする機能のことです。「シンタックス(syntax)」は文法、「ハイライト」は目立たせること。つまり「文法に沿って色分けする」という意味になります。

たとえば同じコードでも、文字が全部真っ黒で並んでいるのと、文字列だけ赤、キーワードだけ青、コメントだけグレー、というふうに色分けされているのとでは、読みやすさがまるで違います。実際、色がない状態のコードを長時間眺めていると、どこが命令でどこが単なる文字なのか見分けるだけで疲れてきます。

教科書のマーカーに近い

イメージとしては、教科書に引く蛍光マーカーが近いです。人名は黄色、年号はピンク、重要語は緑……と色を決めておくと、あとから見返したときに「ここは年号の話だな」と一瞬で目に入ってきます。シンタックスハイライトは、これをエディタが自動でやってくれるものだと思ってください。しかも人間と違って引き忘れがありません。

どんなふうに色分けされるのか

言語やテーマによって配色は変わりますが、だいたい次のような要素が区別されます。

要素	なにを表すか
キーワード	if for function など、言語にあらかじめ用意された予約語
文字列	クォートで囲まれた文字の並び
数値	数字として扱われる部分
コメント	プログラムとして実行されない説明書き
関数名・変数名	自分や他人が名前をつけた部分

この色分けは「見た目をきれいにするため」だけのものではありません。間違いに気づくための仕組みでもあります。

ミスが色で見える

よくあるのが、文字列を囲むクォートの閉じ忘れです。"こんにちは のように閉じるクォートを打ち忘れると、そこから先のコードがぜんぶ「文字列の色」になってしまいます。色がなければ気づくまで時間がかかりますが、画面が急に真っ赤になれば「あ、どこかでクォートを閉じ忘れたな」とすぐわかります。

コメントの書き方を間違えたときも同じで、本来コードのはずの行がグレーになっていれば、そこが実行されない状態になっていることに目で気づけます。慣れてくると、色の「違和感」だけでバグを見つけられるようになります。

どこで目にするもの?

コードを扱うツールの多くが、なんらかの形でシンタックスハイライトを持っています。

• コードエディタ(VS Codeなど)の編集画面
• ターミナル上でコードを表示したとき
• ブログや技術記事に貼られたコードブロック
• チャット形式のAIツールが返してくるコード

色の組み合わせ方は「テーマ」と呼ばれ、暗い背景に明るい文字のダークテーマ、白背景のライトテーマなど、好みで切り替えられるのが一般的です。どのテーマがいいかは完全に好みで、目が疲れにくい配色を探して延々と設定をいじり続ける人もいます(そして結局デフォルトに戻ってきたりします)。

言語ごとにルールが違う

色分けのルールは言語ごとに用意されています。JavaScriptのキーワードとPythonのキーワードは違いますし、同じ記号でも意味が変わることがあるからです。だからエディタでファイルを開いたとき、拡張子(.js や .py など)を手がかりに「この言語として色をつける」と判断しています。

たまに新しく作ったファイルに色がつかないことがありますが、たいていは拡張子がついていないか、エディタがその言語を認識できていないだけです。ファイル名を正しくつけ直すと、ぱっと色が乗ります。

覚えておきたいこと

シンタックスハイライトは、コードの動作そのものには一切影響しません。色がついていようといまいと、プログラムは同じように動きます。あくまで人間が読むための補助です。

とはいえ、読みやすさは作業の速さと正確さに直結します。コードを書き始めたばかりの頃こそ、色分けのある環境で作業したほうが、文法の構造を目で覚えやすくなります。「キーワードはこの色」という感覚が身についてくると、初めて見る言語でもコードの骨格がなんとなく掴めるようになってきます。