Zenn
🍑

JS-スネーク/ケバブケースをローワーキャメルケースに一括変換する

2022/12/29に公開
JavaScript
TypeScript
API
Redux
frontend
tech

始めに

フロント側からAPIでデータを取得してフロント側で管理する際にプロパティ名がいまいち合わずにいちいち変換かけるのめんどくさいなぁということで、作成しましたので備忘です...
僕はAPIからレスポンス取得→ReduxStoreへ打ち込むまでの手順を減らすために使ってます。
※JavaScriptで記述しております

いきなりコード

Array,Objectを対象にObjectのキーを全てローワーキャメルケースに置換します。
再帰ぐるぐる回してネストが深くても変換してくれます。
こういう処理はいつも再帰ゴリゴリ書いちゃうのでもう少し綺麗にかけるようにしたいところ。

const TYPE_STRING = {
  OBJECT: "[object Object]",
  ARRAY: "[object Array]",
};

const toLowerCamel = (str) => {
  return str
    .toLowerCase()
    .replace(/([-_][a-z])/g, (group) =>
      group.toUpperCase().replace("-", "").replace("_", "")
    );
};

export const snakeCaseToLowerCamelCase = (obj) => {
  const toString = Object.prototype.toString;

  if (toString.call(obj) === TYPE_STRING.OBJECT) {
    // ObjectはキーをLowerCamelに変換する
    const result = {};
    Object.keys(obj).forEach((key) => {
      if (
        toString.call(obj[key]) === TYPE_STRING.OBJECT ||
        toString.call(obj[key]) === TYPE_STRING.ARRAY
      ) {
        result[toLowerCamel(key)] = snakeCaseToLowerCamelCase(obj[key]);
      } else {
        result[toLowerCamel(key)] = obj[key];
      }
    });
    return result;
  } else if (toString.call(obj) === TYPE_STRING.ARRAY) {
    // Arrayの時は内部のデータがObjectの場合は処理をかける
    const result = [];
    obj.forEach((item) => {
      if (toString.call(item) === TYPE_STRING.OBJECT) {
        result.push(snakeCaseToLowerCamelCase(item));
      } else {
        result.push(item);
      }
    });
    return result;
  } else {
    // Object以外はそのまま返す
    return obj;
  }
};

実行例

こんな感じで変換されます。

// before ====================
{
  test_name: "name",
  test_data: "data",
  test_list: [
    {
      test_id: 1,
      test_item: "item1",
    },
    {
      test_id: 2,
      test_item: "item2",
    },
  ],
};
  
// after ====================
{
  testName: "name",
  testData: "data",
  testList: [
    {
      testId: 1,
      testItem: "item1",
    },
    {
      testId: 2,
      testItem: "item2",
    },
  ],
};

最後に

そもそもインターフェイス定義の段階とか、バックエンド側の責務とか色々あるかもですが
結構便利そうなので使いやす。
TypeScriptではなくてすみません。

Discussion