オブジェクトのキーを小文字に変換する

はじめに

この実験では、JavaScript を使用してオブジェクトのすべてのキーを小文字に変換する方法を学びます。このテクニックは、オブジェクトのキーの大文字小文字が一貫していない可能性のある異なるソースからのデータを扱う際に特に有用です。

このタスクを達成するために、いくつかの JavaScript メソッドを利用します。

• オブジェクトからすべてのキーを取得するための Object.keys()
• データを新しいオブジェクトに変換するための Array.prototype.reduce()
• 文字列を小文字に変換するための String.prototype.toLowerCase()

この実験の終わりまでに、オブジェクトの値を保持しながら、任意のオブジェクトのキーを小文字に変換できる再利用可能な関数を作成できるようになります。

JavaScript のオブジェクトについて理解する

オブジェクトのキーを小文字に変換する前に、JavaScript のオブジェクトとは何か、そしてどのように操作するかを理解しましょう。

JavaScript では、オブジェクトはキーと値のペアの集合です。キーは文字列（またはシンボル）で、値は他のオブジェクトを含む任意のデータ型になります。

まずは Node.js の対話型シェルを開きましょう。

1. WebIDE でターミナルを開きます。
2. node と入力し、Enter キーを押します。

これで Node.js のプロンプト (>) が表示され、直接 JavaScript コードを入力できるようになります。

大文字小文字が混在したキーを持つ単純なオブジェクトを作成しましょう。

const user = {
  Name: "John",
  AGE: 30,
  Email: "john@example.com"
};

このコードを Node.js のプロンプトに入力し、Enter キーを押します。オブジェクトを表示するには、単に user と入力して Enter キーを押します。

user;

以下の出力が表示されるはずです。

{ Name: 'John', AGE: 30, Email: 'john@example.com' }

ご覧の通り、このオブジェクトのキーはさまざまな大文字小文字のスタイルが混在しています。次のステップでは、これらのキーにアクセスして小文字に変換する方法を学びます。

オブジェクトのキーにアクセスする

オブジェクトのキーを変換する前に、それらにアクセスする方法を理解する必要があります。JavaScript では Object.keys() メソッドが提供されており、これはオブジェクトのすべてのキーを含む配列を返します。

Node.js の対話型シェルで、以下を試してみましょう。

Object.keys(user);

以下のような出力が表示されるはずです。

[ 'Name', 'AGE', 'Email' ]

では、toLowerCase() メソッドを使用して各キーを小文字に変換してみましょう。map() メソッドを使って各キーを変換することができます。

Object.keys(user).map((key) => key.toLowerCase());

出力は以下のようになります。

[ 'name', 'age', 'email' ]

素晴らしい！すべてのキーが小文字に変換された配列ができました。ただし、これらの小文字のキーと元の値を持つ新しいオブジェクトを作成する必要があります。このために、次のステップで reduce() メソッドを使用します。

進む前に reduce() メソッドについて理解しましょう。このメソッドは、配列の各要素に対してリデューサー関数を実行し、単一の出力値を返します。

以下は reduce() の簡単な例です。

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

sum;

出力は 10 になり、これは配列内のすべての数値の合計です。reduce() メソッドの 0 はアキュムレーターの初期値です。

小文字変換関数の作成

オブジェクトのキーにアクセスする方法と reduce() メソッドの使い方がわかったので、オブジェクトのすべてのキーを小文字に変換する関数を作成しましょう。

Node.js の対話型シェルで、以下の関数を定義します。

const lowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    acc[key.toLowerCase()] = obj[key];
    return acc;
  }, {});
};

この関数が何をするかを分解してみましょう。

1. Object.keys(obj) は入力オブジェクトのすべてのキーを取得します。
2. .reduce() はこれらのキーを新しいオブジェクトに変換します。
3. 各キーについて、アキュムレーターオブジェクト (acc) に新しいエントリを作成します。
   • key.toLowerCase() を使ってキーを小文字に変換します。
   • 入力オブジェクトから元の値 (obj[key]) を取得します。
4. アキュムレーターの初期値として空のオブジェクト {} から始めます。
5. 最後に、アキュムレーターを返します。これが小文字のキーを持つ新しいオブジェクトです。

では、先ほど作成した user オブジェクトでこの関数をテストしてみましょう。

const lowercaseUser = lowerizeKeys(user);
lowercaseUser;

以下の出力が表示されるはずです。

{ name: 'John', age: 30, email: 'john@example.com' }

完璧です！すべてのキーが小文字になりました。

この関数が正しく動作することを確認するために、別の例を試してみましょう。

const product = {
  ProductID: 101,
  ProductName: "Laptop",
  PRICE: 999.99
};

lowerizeKeys(product);

出力は以下のようになるはずです。

{ productid: 101, productname: 'Laptop', price: 999.99 }

この関数は、さまざまなキーの大文字小文字スタイルを持つ異なるオブジェクトに対して正しく動作します。

特殊ケースの処理

私たちの関数は単純なオブジェクトに対してはうまく動作しますが、より複雑なケースはどうでしょうか？いくつかの特殊ケースを調べ、私たちの関数がそれらをどのように処理するかを見てみましょう。

空のオブジェクト

まず、空のオブジェクトでテストしてみましょう。

lowerizeKeys({});

出力は空のオブジェクトになるはずです。

{}

ネストされたオブジェクトを持つオブジェクト

オブジェクトにネストされたオブジェクトが含まれている場合はどうでしょうか？試してみましょう。

const nestedObject = {
  User: {
    Name: "John",
    Contact: {
      EMAIL: "john@example.com",
      PHONE: "123-456-7890"
    }
  }
};

lowerizeKeys(nestedObject);

出力は以下のようになります。

{ user: { Name: 'John', Contact: { EMAIL: 'john@example.com', PHONE: '123-456-7890' } } }

最上位のキー User のみが小文字に変換され、ネストされたオブジェクト内のキーは変更されていないことに注意してください。

ネストされたオブジェクトを処理するには、すべてのオブジェクトを再帰的に処理するように関数を修正する必要があります。拡張版を作成しましょう。

const deepLowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    const value = obj[key];
    // Check if the value is an object and not null
    const newValue =
      value && typeof value === "object" && !Array.isArray(value)
        ? deepLowerizeKeys(value)
        : value;

    acc[key.toLowerCase()] = newValue;
    return acc;
  }, {});
};

この拡張版の関数は以下のように動作します。

1. 各値がオブジェクトであり（配列でも null でもない）、それがネストされたオブジェクトであるかどうかを確認します。
2. もしそうであれば、そのネストされたオブジェクトに対して自身を再帰的に呼び出します。
3. そうでなければ、元の値を使用します。

ネストされたオブジェクトでこれをテストしてみましょう。

const deepLowerizedObject = deepLowerizeKeys(nestedObject);
deepLowerizedObject;

これで、ネストされたオブジェクト内のすべてのキーも小文字に変換されたことが確認できるはずです。

{ user: { name: 'John', contact: { email: 'john@example.com', phone: '123-456-7890' } } }

素晴らしい仕事です！ネストされたオブジェクトを処理できる高度な関数を作成しました。

再利用可能なモジュールの作成

動作する関数ができたので、他のプロジェクトにインポートできる再利用可能な JavaScript モジュールファイルを作成しましょう。

まず、Ctrl+C を 2 回押すか、.exit と入力して Enter キーを押して、Node.js の対話型シェルを終了します。

次に、プロジェクトディレクトリに object-utils.js という名前の新しいファイルを作成します。

1. WebIDE で、左側のファイルエクスプローラーパネルに移動します。
2. プロジェクトディレクトリ内で右クリックし、「New File」を選択します。
3. ファイル名を object-utils.js とします。
4. 以下のコードをファイルに追加します。

/**
 * Converts all keys of an object to lowercase
 * @param {Object} obj - The input object
 * @returns {Object} A new object with all keys in lowercase
 */
const lowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    acc[key.toLowerCase()] = obj[key];
    return acc;
  }, {});
};

/**
 * Recursively converts all keys of an object and its nested objects to lowercase
 * @param {Object} obj - The input object
 * @returns {Object} A new object with all keys in lowercase (including nested objects)
 */
const deepLowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    const value = obj[key];
    // Check if the value is an object and not null
    const newValue =
      value && typeof value === "object" && !Array.isArray(value)
        ? deepLowerizeKeys(value)
        : value;

    acc[key.toLowerCase()] = newValue;
    return acc;
  }, {});
};

// Export the functions
module.exports = {
  lowerizeKeys,
  deepLowerizeKeys
};

次に、モジュールが正しく動作することを確認するためのテストファイルを作成しましょう。test.js という名前の新しいファイルを作成します。

1. WebIDE で、左側のファイルエクスプローラーパネルに移動します。
2. プロジェクトディレクトリ内で右クリックし、「New File」を選択します。
3. ファイル名を test.js とします。
4. 以下のコードをファイルに追加します。

// Import the functions from our module
const { lowerizeKeys, deepLowerizeKeys } = require("./object-utils");

// Test with a simple object
const user = {
  Name: "John",
  AGE: 30,
  Email: "john@example.com"
};

console.log("Original object:");
console.log(user);

console.log("\nObject with lowercase keys:");
console.log(lowerizeKeys(user));

// Test with a nested object
const nestedObject = {
  User: {
    Name: "John",
    Contact: {
      EMAIL: "john@example.com",
      PHONE: "123-456-7890"
    }
  }
};

console.log("\nNested object:");
console.log(nestedObject);

console.log("\nNested object with lowercase keys (shallow):");
console.log(lowerizeKeys(nestedObject));

console.log("\nNested object with lowercase keys (deep):");
console.log(deepLowerizeKeys(nestedObject));

では、テストファイルを実行しましょう。

node test.js

以下のような出力が表示されるはずです。

Original object:
{ Name: 'John', AGE: 30, Email: 'john@example.com' }

Object with lowercase keys:
{ name: 'John', age: 30, email: 'john@example.com' }

Nested object:
{
  User: {
    Name: 'John',
    Contact: { EMAIL: 'john@example.com', PHONE: '123-456-7890' }
  }
}

Nested object with lowercase keys (shallow):
{
  user: {
    Name: 'John',
    Contact: { EMAIL: 'john@example.com', PHONE: '123-456-7890' }
  }
}

Nested object with lowercase keys (deep):
{
  user: {
    name: 'John',
    contact: { email: 'john@example.com', phone: '123-456-7890' }
  }
}

おめでとうございます！オブジェクトのキーを小文字に変換する関数を持つ再利用可能な JavaScript モジュールを成功させて作成しました。このモジュールは、あなたの JavaScript プロジェクトにインポートできます。

まとめ

この実験では、JavaScript でオブジェクトのキーを小文字に変換する方法を学びました。以下のことを行いました。

1. JavaScript のオブジェクトとそのキーへのアクセス方法を調べました。
2. Object.keys() メソッドを使用して、オブジェクトからすべてのキーを取得しました。
3. reduce() メソッドを利用してオブジェクトを変換しました。
4. オブジェクトのすべてのキーを小文字に変換する関数を作成しました。
5. 関数を拡張して、ネストされたオブジェクトを再帰的に処理できるようにしました。
6. 両方の関数を持つ再利用可能な JavaScript モジュールを作成しました。

これらのテクニックは、オブジェクトのキーの大文字小文字が一貫していない可能性のある異なるソースからのデータを扱う際に役立ちます。作成した関数は、データを正規化し、扱いやすくするのに役立ちます。

以下のような関数を追加することで、これらのユーティリティをさらに拡張することができます。

• オブジェクトのキーを大文字に変換する
• キーを camelCase または snake_case に変換する
• キーまたは値の条件に基づいてオブジェクトをフィルタリングする
• オブジェクトの等価性を深く比較する

オブジェクトとその操作を続けて練習し、JavaScript プログラミングのスキルを向上させましょう。