【JavaScript】キャメルケースの文字列をスペース区切りで分割する方法

問題

キャメルケース（camelCase）で書かれた文字列 str を、第1引数（唯一の引数）として受け取るJavaScript関数を作成する必要があります。

この関数は、入力された文字列の各単語の間に半角スペースを挿入して分割し、新しい文字列として構築して返すものとします。

たとえば、関数への入力が次の場合を考えてみましょう。

入力：

const str = 'thisIsACamelCasedString';

出力：

const output = 'this Is A Camel Cased String';

解決策：コード例

以下がその実装コードです。

const str = 'thisIsACamelCasedString';
const breakCamelCase = (str = '') => {
    const isUpper = (char = '') => char.toLowerCase() !== char.toUpperCase() && char === char.toUpperCase();
    let res = '';
    const { length: len } = str;
    for(let i = 0; i < len; i++){
        const el = str[i];
        if(isUpper(el) && i !== 0){
            res += ` ${el}`;
            continue;
        };
        res += el;
    };
    return res;
};
console.log(breakCamelCase(str));

出力結果：

this Is A Camel Cased String

コードの解説

このコードの仕組みを順番に見ていきましょう。

1. 大文字判定用のヘルパー関数 isUpper

isUpper は、渡された1文字が大文字かどうかを判定する関数です。toLowerCase() !== toUpperCase() という条件で「その文字がアルファベットであること」を確認し、さらに元の文字が大文字化した文字と一致する場合に true を返します。これにより、数字や記号などが誤って大文字と判定されるのを防いでいます。

2. 文字列を1文字ずつ走査して連結

for ループで文字列を先頭から1文字ずつ確認し、結果を格納する変数 res に順次連結していきます。

3. 大文字の直前にスペースを挿入

現在の文字が大文字で、かつ先頭文字ではない場合（i !== 0）、その文字の直前に半角スペースを付けて連結します。先頭の大文字にはスペースを付けないことで、this のような最初の単語が正しく処理されます。

別のアプローチ：正規表現を使った簡潔な実装

正規表現を利用すれば、同じ処理をもっと短く書くこともできます。

const breakCamelCase = (str) =>
  str.replace(/([A-Z])/g, ' $1');

console.log(breakCamelCase('thisIsACamelCasedString'));
// => "this Is A Camel Cased String"

この実装では、すべての大文字 [A-Z] を検出し、その前にスペースを追加した形（' $1'）へ置換しています。

ただしこの方法には注意点があります。先頭が大文字の文字列（PascalCase）に対しては、先頭にもスペースが挿入されてしまいます。そのようなケースに対応する場合は、trim() を組み合わせるか、小文字と大文字の境界のみを対象とする /([a-z])([A-Z])/g のパターンを使用するとよいでしょう。