[JavaScript] 変数名について、キャメルケースとスネークケースの相互変換を行う方法

こんにちは、@yoheiMuneです。
サーバーとのAPI連携を実装していると、APIでのやりとりではスネークケース（例：user_name）を使い、JavaScript内の変数ではキャメルケース（例：userName）を使うことが多くあります。その際の変換を行う処理を、ブログに書いておきたいと思います。

目次

スネークケース → キャメルケース（文字列）

スネークケースからキャメルケースに変換する場合、以下の関数を使うと実現できます。

// スネークケースからキャメルケースに変換（文字列）.
function toCamelCase(str) {
  return str.split('_').map(function(word,index){
    if (index === 0) {
      return word.toLowerCase();
    }
    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
  }).join('');
}

// 実際に使ってみる.
toCamelCase('user_name')

// 結果 : 'userName'

スネークケース → キャメルケース（オブジェクト）

オブジェクトのプロパティ名を一括で修正する実装も、利用シーンが多くて便利です。

// スネークケースからキャメルケースに変換（オブジェクト）.
function toCamelCaseObject(obj) {
  const result = {}
  Object.keys(obj).forEach(key => {
    result[toCamelCase(key)] = obj[key]
  })
  return result
}

// 実際に使ってみる.
toCamelCaseObject({
    user_id : 1,
    user_name : 'Yohei'
})

// 結果 : { userId: 1, userName: 'Yohei' }

キャメルケース → スネークケース（文字列）

逆に、キャメルケースからスネークケースに変換する方法です。

// キャメルケースからスネークケースに変換（文字列）.
function toUnderscoreCase(str) {
  return str.split(/(?=[A-Z])/).join('_').toLowerCase()
}

// 実際に使ってみる.
toUnderscoreCase('userName')

// 結果 : 'user_ame'

キャメルケース → スネークケース（オブジェクト）

オブジェクトのプロパティを一括変換するのも便利です。

// キャメルケースからスネークケースに変換（オブジェクト）.
function toUnderscoreCaseObject(obj) {
  const result = {}
  Object.keys(obj).forEach(key => {
    result[toUnderscoreCase(key)] = obj[key]
  })
  return result
}

// 実際に使ってみる.
toUnderscoreCaseObject({
    userId : 1,
    userName : 'Yohei'
})

// 結果 : { user_id: 1, user_name: 'Yohei' }

最後に

これらの変換はライブラリを入れても出来るのですが、それだけのためにライブラリ入れるのもな〜と思う時には便利です。時々使っています。

API側で、キャメルケースでレスポンスを返してくれることもありますが（Djangoなどはそれ用のプラグインもある）、多くの場合は、スネークケースでの変数名のやりとりをするので、今回の実装を使う機会は多いです。

最後になりますが本ブログでは、Python、フロントエンド、PHP、サーバー、インフラ、Swift、Node.js、Java、Linux、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に！」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSやTwitterをフォローして貰えたら嬉しいです ^ ^

最後までご覧頂きましてありがとうございました！