2018/12/17更新

[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、機械学習、などの技術トピックを発信をしていきます。「プログラミングで困ったその時の、解決の糸口に!」そんな目標でブログを書き続けています。ぜひ、本ブログのRSSTwitterをフォローして貰えたら嬉しいです ^ ^

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





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。