キャメルケースのkeyのオブジェクトを簡単生成！humpsを使う（ts対応）

2020.10.09

humpsを使う
プロジェクトに追加
humpsを利用する
humpsの使い方

スネークケースのオブジェクトを簡単にキャメルケースのkeyに変換したオブジェクトを作れる、npmパッケージの humps。

例えば以下のように

// 変換前
const obj = {
  users: [
    {
      id: 1,
      first_name: "taro",
      last_name: "tanaka"
    }
  ],
  created_at: "2020/10/09",
}

↓

// humpsを使って変換後
const obj = {
  users: [
    {
      id: 1,
      firstName: "taro",
      lastName: "tanaka"
    }
  ],
  createdAt: "2020/10/09",
}

APIから取ってきたJSONはスネークケースを使ったkey名の事が多いですが、jsではキャメルケースを使って変数名を定義する事の方が多いイメージです。

そのため**「APIのレスポンス（keyがスネークケース）」 → 「keyをキャメルケースのオブジェクト」にしたいような場合にとても重宝**します。

humpsを使う

プロジェクトに追加

humps はしっかりTypeScriptに対応しています。

ただし、 @types/humps も導入する必要がある点に注意です。

# jsのみの場合
$ yarn add humps
 
# TypeScriptの場合は追加で @types も
$ yarn add @types/humps

humpsを利用する

今回はvue(Nuxt)のプロジェクトで試します。

基本的な利用方法はReactやAngular、Node.jsを使う環境であれば基本同じで import してhumpsのメソッドを使うだけ

import humps from 'humps'
 
export default {
  mounted() {
    const obj = {
      users: [
        {
          id: 1,
          first_name: 'taro',
          last_name: 'tanaka'
        }
      ],
      created_at: '2020/10/09'
    }
    console.log(humps.camelizeKeys(obj))
  }
}

これで先程のようなキャメルケースに変換された後の値が console.log で出力されます

// 変換後
{
  users: [
    {
      id: 1,
      firstName: "taro",
      lastName: "tanaka"
    }
  ],
  createdAt: "2020/10/09",
}

DevToolsで確認

humpsの使い方

humps はシンプルながらに強力で、オブジェクトだけではなく文字列を変換する事も出来ます。（公式的にはそちらが先に紹介されているのでメインの使い方はそっちかな）

公式の参考文をそのまま引用

humps.camelize('hello_world') // 'helloWorld'
humps.decamelize('fooBar') // 'foo_bar'
humps.decamelize('fooBarBaz', { separator: '-' }) // 'foo-bar-baz'
domchristie/humps: 🐫 Underscore-to-camelCase converter (and vice versa) for strings and object keys in JavaScript.より引用

{ separator: '-' } を使う事でケバブケースにも簡単に対応する事が出来ますね！

それ以外にも関数を渡す事も出来て特定の場合のみ変換する、という事もお手の物！！

humps.camelizeKeys(obj, function (key, convert) {
  return /^[A-Z0-9_]+$/.test(key) ? key : convert(key);
});
humps.decamelizeKeys(obj, function (key, convert, options) {
  return /^[A-Z0-9_]+$/.test(key) ? key : convert(key, options);
});

domchristie/humps: 🐫 Underscore-to-camelCase converter (and vice versa) for strings and object keys in JavaScript.より引用