JavaScriptでハイフン区切りの文字列をキャメルケースに変換する方法

ハイフン区切りの文字列をキャメルケースに変換する

JavaScriptでは、ハイフン（-）で単語が区切られた文字列（ケバブケース）をキャメルケースに変換したい場面がよくあります。たとえば、CSSのプロパティ名を扱うときや、APIから受け取ったデータのキー名を整形するときなどです。

変換のイメージ

次のようなハイフン区切りの文字列があるとします。

const str = 'this-is-an-example';

この文字列をキャメルケースに変換すると、期待される出力は次のようになります。

const output = 'thisIsAnExample';

つまり、ハイフンを取り除き、2番目以降の各単語の頭文字を大文字にすればよいわけです。

実装コード

split()、map()、join() を組み合わせると、シンプルに実装できます。

const str = 'this-is-an-example';
const changeToCamel = str => {
    let newStr = '';
    newStr = str
    .split('-')
    .map((el, ind) => {
        return ind && el.length ? el[0].toUpperCase() + el.substring(1)
        : el;
    })
    .join('');
    return newStr;
};
console.log(changeToCamel(str));

コードの解説

• split('-')：文字列をハイフンで分割し、['this', 'is', 'an', 'example'] という配列を作ります。
• map()：各単語に対して処理を行います。インデックス ind が0より大きい場合（＝最初の単語以外）、先頭文字を toUpperCase() で大文字に変換します。
• ind && el.length：インデックスが0でないこと、かつ要素が空文字でないことを確認しています。これにより、連続したハイフンや先頭・末尾のハイフンが含まれる文字列にも安全に対応できます。
• join('')：加工済みの配列を結合し、1つの文字列に戻します。

出力結果

コンソールには次のように表示されます。

thisIsAnExample

正規表現を使った別のアプローチ

replace() と正規表現を組み合わせれば、さらに簡潔に書くこともできます。

const changeToCamel = str =>
  str.replace(/-([a-z])/g, (_, char) => char.toUpperCase());

console.log(changeToCamel('this-is-an-example')); // thisIsAnExample

この正規表現は「ハイフンの直後にある小文字1文字」にマッチし、その文字を大文字へ置き換えます。ハイフン自体もマッチの一部として消費されるため、結果から自動的に取り除かれます。

まとめ

ケバブケースからキャメルケースへの変換には、split() → map() → join() の流れを使う方法と、replace()＋正規表現を使う方法の2通りが代表的です。どちらも短いコードで実用的なパフォーマンスを発揮するので、可読性やプロジェクトのコーディングスタイルに合わせて選択しましょう。