「その文字列、本当に存在しますか？」TypeScriptの `keyof` で防ぐ「見えないバグ」の正体
現場でコードを書いていて、こんなヒヤリとした経験はないだろうか。
const user = { name: “Alice”, age: 30 };
// 開発者「とりあえずプロパティ名を手打ちで渡す関数を作ろう」
function getProperty(obj: any, key: string) {
return obj[key];
}
console.log(getProperty(user, “nmae”)); // undefined が返るけど、誰も気づかない
これ、JavaScriptなら日常茶飯事だが、TypeScriptを使っているなら「敗北」だ。`”nmae”` というタイポに気づかず、実行時のブラウザ上で `undefined` に悩まされる。
今回は、この「文字列の海」で溺れないための最強の武器、`keyof` を使ったプロパティ制約について、現場の知見を交えて深掘りしていく。
—
`keyof` は単なる「文字の羅列」ではない
`keyof` を使うと、オブジェクトのキーを「文字列」ではなく「そのオブジェクトが持つキーの型（ユニオン型）」として抽出できる。
type User = {
name: string;
age: number;
};
// これにより、UserKeys は “name” | “age” という型になる
type UserKeys = keyof User;
ここが重要なポイントだ。`keyof` が生成するのは単なる文字列型ではない。「そのオブジェクトに許容される値の集合」という制約そのものだ。
実務で使う「型安全なゲッター」の実装
では、先ほどの `getProperty` を、`keyof` を使って「コンパイル時に死ぬコード」に書き換えてみよう。
/
- T: オブジェクトの型
- K: T のキーのうちのどれか (keyof T)
/
function getProperty
return obj[key];
}
const user = { name: “Alice”, age: 30 };
// 正常系
const name = getProperty(user, “name”); // string 型として推論される
// 異常系: コンパイルエラー！
// Argument of type ‘”nmae”‘ is not assignable to parameter of type ‘”name” | “age”‘.
// getProperty(user, “nmae”);
このコードの美しさは、`T[K]` というルックアップ型にある。`key` を指定した時点で、戻り値が `string` なのか `number` なのか、TypeScriptが勝手に推論してくれる。これぞ、我々フロントエンドエンジニアがTypeScriptに求める「型安全の極致」だ。
—
ブラウザの裏側で何が起きているのか？
ここまで読んで「便利なのは分かったけど、結局JSにコンパイルされるんでしょ？」と思ったかもしれない。その通り。コンパイル後のJSには型情報は一切残らない。
しかし、なぜこの仕組みが重要なのか。それは「開発体験（DX）」と「実行時エラーの未然防止」に尽きる。
ブラウザのJavaScriptエンジンは、存在しないプロパティにアクセスしても「エラー」とは言わず、静かに `undefined` を返す。これがフロントエンドの複雑な状態管理においては致命的なバグの温床になる。
- 型がない場合: `undefined` が UI の深い階層まで伝播し、どこでエラーが起きたか分からなくなる。
- `keyof` がある場合: コードを書いている最中にエディタが赤線を引いて教えてくれる。「お前、そこに存在しないキーを叩こうとしているぞ」と。
この「フィードバックループの速さ」こそが、大規模開発を支える真の原動力なんだ。
—
現場で即戦力になる「ちょっとした応用テクニック」
実務では、単一のオブジェクトだけでなく、動的にキーを扱いたいシーンも多いはずだ。例えば、Reactのフォームライブラリやデータテーブルのライブラリを作る時だ。
// オブジェクトの値をすべて加工して返す関数
function pluck
return items.map((item) => item[key]);
}
const users = [
{ id: 1, name: “Alice” },
{ id: 2, name: “Bob” }
];
// id だけを抽出したい時も、型安全に守られる
const ids = pluck(users, “id”); // number[]
まとめ：TypeScriptを「ただの制約」と捉えるな
`keyof` を使いこなすことは、単に「バグを減らす」以上の意味がある。それは、「自分以外の誰か（あるいは未来の自分）がそのコードを触る時に、迷わせないための地図を描くこと」だ。
型定義がしっかりしていると、`getProperty` や `pluck` を使う側は、ドキュメントを読まなくても「どのキーが使えるか」がエディタの補完で一目瞭然になる。
「文字列でいいじゃん」と言って `string` 型で妥協するのは簡単だ。だが、その数行の妥協が、半年後の大規模リファクタリングで巨大な技術負債となって君の首を絞めることになる。
今日から、オブジェクトのキーを扱う時は `keyof` を使う。この小さな習慣が、君の書くコードを、そして君自身を、より高みへと押し上げるはずだ。さあ、エディタに戻ってリファクタリングを始めようか。
コメント