JavaScript Tips | 文字列ユーティリティ：整形 － スネークケース化

JavaScript JavaScript
スポンサーリンク

スネークケースってそもそも何か

まず言葉の整理からいきます。
「スネークケース（snake_case）」は、単語をアンダースコア _ でつなぎ、全部小文字で書くスタイルです。

"userName" → "user_name"
"UserID" → "user_id"
"createdAt" → "created_at"

バックエンド（特に DB カラム名や API の JSON キー）では、スネークケースがよく使われます。
一方、JavaScript の世界では userName のようなキャメルケースが主流です。
このギャップを埋めるために、「スネークケース化ユーティリティ」が必要になります。

何を「スネークケース」に変換したいのか

業務でよくあるのは、次のようなパターンです。

フロント側では userName というプロパティ名で扱っている。
でも、API に送るときは user_name で送りたい。
あるいは、DB のカラム名に合わせて created_at というキーで JSON を組み立てたい。

つまり、「内部ではキャメルケース」「外部インターフェースはスネークケース」という構造です。
このとき、プロパティ名やキー名を変換するために、
文字列をスネークケースにする小さな関数があると、とても楽になります。

スネークケース化の基本的な考え方

キャメルケース（userName）をスネークケース（user_name）にする流れを分解すると、こうなります。

大文字の手前にアンダースコア _ を挿入する。
全体を小文字にする。

例えば userNameId なら、

userNameId
user_Name_Id（大文字の前に _ を入れるイメージ）
user_name_id（全部小文字にする）

という変換です。

さらに、UserID のように先頭が大文字のケースもあります。
この場合は、先頭の _ を消してから小文字にする、という一工夫が必要です。

シンプルなスネークケース化ユーティリティ

実装例

初心者でも追いやすい形で書いてみます。

function toSnakeCase(value) {
  if (value == null) return "";

  const str = String(value).trim();

  if (str === "") return "";

  const withUnderscore = str
    // キャメルケースの大文字の前にアンダースコアを入れる
    .replace(/([a-z0-9])([A-Z])/g, "$1_$2")
    // 連続する大文字（例: "UserID"）にも対応
    .replace(/([A-Z])([A-Z][a-z])/g, "$1_$2");

  return withUnderscore
    .replace(/[\s\-]+/g, "_") // 空白やハイフンもアンダースコアに
    .toLowerCase();
}
JavaScript

やっていることを噛み砕いて説明します。

value == null（null / undefined）のときは空文字を返す。
String(value).trim() で文字列化し、前後の空白を削る。
([a-z0-9])([A-Z]) で「小文字 or 数字の直後の大文字」を見つけて、その間に _ を挟む。
([A-Z])([A-Z][a-z]) で「連続する大文字の切れ目」に _ を挟む（UserID → User_ID）。
空白やハイフンは _ にまとめる。
最後に toLowerCase() で全部小文字にする。

これで、キャメルケース・パスカルケース・スペース区切り・ハイフン区切りなど、
よくあるパターンはだいたいスネークケースに変換できます。

具体例で動きを確認する

キャメルケースからスネークケースへ

toSnakeCase("userName");        // "user_name"
toSnakeCase("userNameId");      // "user_name_id"
toSnakeCase("createdAt");       // "created_at"
JavaScript

JavaScript のプロパティ名を、そのまま DB カラム名っぽくできます。

パスカルケースからスネークケースへ

toSnakeCase("UserName");        // "user_name"
toSnakeCase("UserID");          // "user_id"
toSnakeCase("HTTPRequest");     // "http_request"
JavaScript

先頭が大文字でも、連続する大文字があっても、
それなりに自然なスネークケースになります。

スペース・ハイフン区切りからスネークケースへ

toSnakeCase("user name");       // "user_name"
toSnakeCase("user-name");       // "user_name"
toSnakeCase("  user  name  ");  // "user_name"
JavaScript

設定ファイルやラベルからキー名を作るときにも使えます。

業務での実用的な使いどころ

API に送るときだけキーをスネークケースにする

フロント内部ではキャメルケースで統一し、
API に送るときだけスネークケースに変換する、というパターンです。

function snakeizeKeys(obj) {
  const result = {};

  for (const key in obj) {
    const snakeKey = toSnakeCase(key);
    result[snakeKey] = obj[key];
  }

  return result;
}

const user = {
  userId: 1,
  userName: "Taro",
  createdAt: "2026-02-13T10:00:00Z",
};

const payload = snakeizeKeys(user);
// { user_id: 1, user_name: "Taro", created_at: "2026-02-13T10:00:00Z" }
JavaScript

こうしておけば、
「フロントはキャメルケース」「API はスネークケース」という世界をきれいに分離できます。

DB カラム名やログ出力の整形

ログや SQL を組み立てるときに、
プロパティ名からそのままカラム名を作りたいことがあります。

const column = toSnakeCase("createdAt"); // "created_at"
const sql = `SELECT ${column} FROM users`;
JavaScript

「命名規則の変換」をユーティリティに任せることで、
人間の手作業によるミスを減らせます。

設計として大事なポイント

「内部表現」と「外部表現」を分ける

一番大事なのは、
「内部ではキャメルケースで統一する」と決めてしまうことです。

そのうえで、

外部から入ってくるとき（API レスポンスなど）は「キャメルケース化」する。
外部に出ていくとき（API リクエスト・SQL・ログなど）は「スネークケース化」する。

というふうに、「入口」と「出口」で変換する設計にします。

これをやっておくと、

「このキーは user_name だっけ？ userName だっけ？」
「DB 側の名前とフロント側の名前がごちゃごちゃする」

といった混乱が一気に減ります。

変換をその場その場でやらない

悪いパターンは、使うたびにバラバラに変換することです。

toSnakeCase("userName");
toSnakeCase("userName");
toSnakeCase("userName");
JavaScript

どこで何が変換されているのか分からなくなります。

良いパターンは、

「外に出す直前」に一度だけスネークケース化する
それ以外の場所ではキャメルケースだけを使う

という流れにすることです。

小さな練習で感覚をつかむ

コンソールで、いくつか試してみてください。

toSnakeCase("userName");
toSnakeCase("UserName");
toSnakeCase("userNameId");
toSnakeCase("UserID");
toSnakeCase("  user name id  ");
toSnakeCase("user-name-id");
JavaScript

どういうルールでアンダースコアが入って、
最終的に全部小文字になっているかを目で確認すると、
「スネークケース化」の感覚がかなりつかめます。

そのうえで、自分のプロジェクトに

export function toSnakeCase(value) { ... }
JavaScript

を一つ置いて、
「API に出すキー名は必ずここを通す」
というルールにしてみてください。

それができた瞬間、あなたのコードは
「命名規則の違いに振り回される側」から
「自分たちのルールに正規化してから外と話す側」に、一段レベルアップします。

スポンサーリンク
タイトルとURLをコピーしました