【TypeScript】オブジェクトのvalueからkey名を取得する方法

2021年12月25日

記事内に広告を含みます

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

こんにちは！たぬきうどんです！

私は2018年に非IT業界から未経験でエンジニアに転職し、現在までエンジニアとして働いています。

この記事ではTypeScriptのオブジェクトのvalueからkey名を取得する方法について紹介します。

はじめに
実装
おわりに…

はじめに

TypeScriptでコード書いているときに、あるオブジェクトにおいて、valueからkey名を取得したいことはありませんか？

例えば、以下のような色名をkeyにカラーコードをvalueにとっているようなオブジェクトがあったときに、valueであるカラーコードからkeyである色名を取得したいということがあるかと思います。

TypeScript

type ColoCodeType = {
  black: string;
  red: string;
  blue: string;
  limeGreen: string;
  indigo: string;
};

const colorCode: ColoCodeType = {
  black: "#000000",
  red: "#ff0000",
  blue: "#0000ff",
  limeGreen: "#32cd32",
  indigo: "#4b0082",
};

今回はオブジェクトのvalueからkey名を取得する方法を紹介します。

実装

TypeScript

function getKeyNameByValue<T>(obj: T, matchingValue: string): string {
  let keyName = "";

  for (const [key, value] of Object.entries(obj)) {
    if (value === matchingValue) {
      keyName = key;
      break;
    }
  }
  return keyName;
};

Object.entries()はオブジェクトが持つ文字列をKeyとした列挙可能なプロパティの組み合わせ[key, value]からなる配列を返すメソッドです。

参考Object.entries() – JavaScript | MDN– JavaScript リファレンス – MDN Web Docs – Mozilla

型等は適宜変えてください。

上記のメソッドを実行した場合の例を以下にあげます。

TypeScript

type ColoCodeType = {
  black: string;
  red: string;
  blue: string;
  limeGreen: string;
  indigo: string;
};

const colorCode: ColoCodeType = {
  black: "#000000",
  red: "#ff0000",
  blue: "#0000ff",
  limeGreen: "#32cd32",
  indigo: "#4b0082",
};


function getKeyNameByValue(obj: ColoCodeType, colorCode: string): string {
  let keyName = "";

  for (const [key, value] of Object.entries(obj)) {
    if (value === colorCode) {
      keyName = key;
      break;
    }
  }
  return keyName;
};
 
const keyName = getKeyNameByValue(colorCode, "#4b0082");
console.log(keyName);

実行結果はindigoとなります。