キャメルケース→スネークケース変換にhumpsを使う

はじめに

私がジョインしている小〜中規模のプロジェクトにおいて、Vue3とTypeScriptをフロントエンドに、そしてRailsをバックエンドに使用しています。

この組み合わせで、一つの課題がありました。それは、フロントエンドからバックエンドへのデータのやりとりで、キーの形式の違いです。具体的には、JavaScriptではキャメルケースを、一方Railsではスネークケースを標準的に使用します。

この問題を解決するために、'humps'ライブラリを使用することで、送信される各キーをスネークケース形式に自動的に変換し、Rails側で適切に解釈できるようにすることが可能になりました。

この記事では、そのプロセスと解決策について説明します。

補足
humpsはJavaScriptオブジェクトのキーをキャメルケースとスネークケースの間で変換するためのライブラリです。たとえば、Railsから返されるJSONオブジェクトのキーがスネークケース（first_name）で、それをJavaScriptで使いやすいキャメルケース（firstName）に変換するときに使われます。

例えは下記のような使い方です。

var humps = require('humps')

var obj = {
  attr_one: 'foo',
  attr_two: 'bar'
}

console.log(humps.camelizeKeys(obj))
// Outputs: { attrOne: 'foo', attrTwo: 'bar' }

humpsの使い方

インストールコマンド

%　npm install humps

#typeScript使用したプロジェクトのため
% npm install --save @types/humps

ドキュメントもおいておきます。

humpsを利用する

Vue3のプロジェクトで使用しました。

import humps from "humps";

//フォームデータに追加
for (const [key, value] of Object.entries(postData)) {
   formData.append(`post[${humps.decamelize(key)}]`, value as string);
}

基本的な使い方

humpsパッケージの公式npmページから引用

humps.camelize('hello_world') // 'helloWorld'
humps.decamelize('fooBar') // 'foo_bar'
humps.decamelize('fooBarBaz', { separator: '-' }) // 'foo-bar-baz'

オブジェクトキー

var object = { attr_one: 'foo', attr_two: 'bar' }
humps.camelizeKeys(object); // { attrOne: 'foo', attrTwo: 'bar' }

まとめと参照リソース

humpsの公式npmページでは、パッケージの詳細な説明からインストール方法、使用例まで見ることができます。さらに、パッケージのバージョン履歴や依存関係、そして他の開発者からどれほど利用されているかを示すダウンロード数までが見られます。

もし記事の内容がおかしい場合や疑問があれば、公式のページを訪れてみてください。
それでは。Happy coding!