« ^ »
[WIP]

コードハイライトについて考える

所要時間: 約 3分

プログラム等のテキストを表示する際、白い背景に黒い文字で全て表示されていると、どの部分が、どんな意味を持っているのかを、目で見て判断する事は難しい。シンプルなプログラムであれば難しくないものも、中規模や大規模のソフトウェアである場合や、複雑なアルゴリズムが組み込まれている場合には、テキストの理解やエラーの発見が難しくなる。そのため、プログラムの見やすさを向上させるために、プログラムの構文や意味に基づいて特定の要素やキーワードを目立たせるように表示する。このような機能はコードハイライトやシンタックスハイライトと呼ばれる。ここでは総じてこのような機能をコードハイライトと呼ぶ事にする。たとえば、予約語や変数、関数名などは異なる色やスタイルで強調表示され、視覚的な情報を提供する。これにより、コードの構造や意図を素早く把握しやすくなり、開発者が効率的にプログラムを作成およびデバッグすることができる。

コードハイライトは、様々な部分で様々な方法で実装されている。テキストエディタの1つの機能として実装されているものや、スタンドアロンなプログラムとして実装されテキストを入力すると、ハイライトされた状態のテキストを返すといったようなものもある。コードハイライトの機能を誰がどのような環境で使いたいのかといった要求によって異なる。

Webページでは、いくつかの方法でコードハイライトを実現できる。1つ目はサーバー側でコードハイライトしたいテキストを事前に処理しその結果をクライアント側に返すという方法だ。これはサーバーサイドレンダリングするようなシステムで使用できる。PythonではPygmentsというライブラリがあり、それを組み込む事でコードハイライトを実現できる。静的サイトジェネレータHugoの場合、Chromaというライブラリによって、コードハイライトしHTMLを出力できる。

2つ目はクライアントサイドで実現する方法が考えられる。サーバーサイドでは何も処理せず、その部分がどのような言語で記述されているのかという事だけを指定しておく。クライアントサイドは、その記述に従って表示にハイライトを付けていく。例えばhighlight.jsやprism.jsは、この方法となる。両者ともにJavaScriptでクライアント側で動作するため、JavaScriptの動作しないブラウザでは機能しないが、サーバー側で実行するコードハイライトの処理をクライアント側に押し付ける事ができる。これは効果的なサーバー側の負荷軽減にはならないと思うが、コードハイライティングの責任をクライアント側に持たせる事ができるという利点はある。