1. 導入：なぜコードの「背景情報」が重要なのか
プログラミングをしていると、「この関数はどこで使われているんだろう？」「この変数の型は何だっけ？」と、ソースコードの海で迷子になることはありませんか？通常、これを確認するには検索機能を使ったり、定義元にジャンプしたりと手間がかかります。
今回紹介する「CodeLens」と「Inlay Hints」は、そんなコードの背景情報（コンテキスト）を、コードの行間に自動的に表示してくれる機能です。これらを活用すれば、エディタを切り替えることなく、必要な情報を一瞬で把握でき、開発効率が飛躍的に向上します。
2. 基礎知識：CodeLensとInlay Hintsとは？
どちらも「エディタが解析した情報をコードの間に表示する機能」ですが、少し役割が異なります。
CodeLens（コードレンズ）
ソースコードの特定の行（クラスやメソッドの定義行など）の上に、「参照数」や「Gitの最終更新者」を表示する機能です。クリック可能なリンクになっていることが多く、そこから直接「参照先を探す」といったアクションへ繋げられます。
Inlay Hints（インレイヒント）
コードの「行間」や「変数名の横」に、静的解析によって推論された「型情報」や「引数名」をグレーの文字で表示する機能です。コード自体を書き換えるわけではなく、あくまで「表示だけ」してくれるため、読みやすさを損なわずに情報量を増やせます。
3. 実装/解決策：VS Codeでの設定方法
VS Codeでは、設定画面から簡単に有効化できます。
1. VS Codeを開き、左下の歯車アイコンから「設定」を選択します。
2. 検索窓に「CodeLens」と入力し、「Editor: Code Lens」にチェックを入れます。
3. 同様に「Inlay Hints」と入力し、「Editor > Inlay Hints: Enabled」を「on」に設定します。
これだけで、対応している言語（TypeScript, Rust, Goなど）では自動的に情報が表示され始めます。
4. サンプルプログラム：Inlay Hintsの恩恵を感じる例
例えば、TypeScriptで型推論を多用している場合、Inlay Hintsが強力に機能します。以下のコードをエディタに貼り付けてみてください。
// 下記のコードをTypeScriptファイルに貼り付けてみてください
// Inlay Hintsが有効であれば、変数や関数の横にグレーで型情報が表示されます
// 1. 引数の型や戻り値の型が自動的に表示されます
function calculateTotal(price: number, tax: number) {
return price (1 + tax);
}
// 2. 変数「result」の型が「number」であることがInlay Hintsで可視化されます
const result = calculateTotal(1000, 0.1);
// 3. オブジェクトのプロパティなども、どこから来た型か一目でわかります
const user = { name: “DevOps Engineer”, age: 30 };
console.log(user.name);
/
【解説】
上記のコードでは、明示的に型を書かなくても、
エディタが「この変数はnumber型だ」「この関数はstringを返す」と判断して
グレーの文字でヒントを出してくれます。
コードを汚さずに「型」を確認できるため、バグの混入を防ぐことができます。
/
5. 応用・注意点：現場で陥りやすい罠
非常に便利な機能ですが、いくつか注意点があります。
・情報の過多に注意：あまりに多くのヒントを表示しすぎると、コードが逆に読みづらくなることがあります。特にInlay Hintsは、自分にとって「推論結果が自信のないもの」だけを表示するよう設定を調整するのがコツです。
・Gitとの連携：GitLensなどの拡張機能を入れると、CodeLensの機能がさらに拡張され、「誰がいつこの行を変更したか」がソースコードの横に表示されるようになります。チーム開発では必須級の機能ですが、画面が狭いと圧迫感があるため、表示サイズを調整しましょう。
これらの機能は「コードを読むための補助輪」です。最初は違和感があるかもしれませんが、慣れると「ヒントがないエディタ」には戻れなくなるはずです。ぜひ今日から設定して、快適な開発環境を手に入れてください。
コメント