【JavaScript】文字列の各文字を順番に大文字にした配列（メキシカンウェーブ）を作成する方法

はじめに

本記事では、JavaScriptで「文字列の各文字を1つずつ順番に大文字へ変換し、その結果を配列として返す」関数の実装方法を解説します。この処理は、スタジアムで行われるように文字が波のように大文字になっていくことから、メキシカンウェーブと呼ばれることもあります。

やりたいこと

たとえば、次のような文字列が与えられたとします。

const str = 'edabit';

この場合、出力は以下のようになります。つまり、先頭から順に1文字だけ大文字化された文字列が、配列の要素として並びます。

const output = ["Edabit", "eDabit", "edAbit", "edaBit", "edabIt", "edabiT"];

このように、6文字の文字列からは6つの要素を持つ配列が生成されます。各要素では、元の文字列の中でその位置の文字だけが大文字になっています。

コード例

まず、文字列の指定位置の文字を置き換えるための replaceAt メソッドを String.prototype に追加し、それを使ってウェーブ状の配列を生成する関数 createEdibet を定義します。

const str = 'edabit';

// 指定したインデックスの文字を置き換えるメソッド
const replaceAt = function(index, char){
    let a = this.split("");
    a[index] = char;
    return a.join("");
};
String.prototype.replaceAt = replaceAt;

// 各文字を順番に大文字化した配列を作成する関数
const createEdibet = word => {
    let array = word.split('');
    const res = array.map((letter, i) => {
        let a = word.replaceAt(i, letter.toUpperCase());
        return a;
    });
    return res;
}

console.log(createEdibet(str));

このコードをコンソールで実行すると、次の出力が得られます。

[ 'Edabit', 'eDabit', 'edAbit', 'edaBit', 'edabIt', 'edabiT' ]

コードの解説

replaceAt メソッドの仕組み

replaceAt は、対象の文字列を split("") で1文字ずつの配列に分解し、指定インデックスの要素を新しい文字で上書きしてから、join("") でもとの文字列に再結合しています。

createEdibet 関数の流れ

1. word.split('') で文字列を文字ごとの配列に変換します。
2. map() を使い、各文字とそのインデックス i を取得します。
3. letter.toUpperCase() で現在の文字を大文字にし、replaceAt(i, ...) で元の文字列の該当位置のみを置き換えます。
4. 生成された文字列を順に配列へ格納し、最終的な結果として返します。

補足：String.prototype を使わない書き方

組み込みオブジェクトのプロトタイプを拡張したくない場合は、以下のように関数内で完結させることもできます。

const mexicanWave = word => {
    return word.split('').map((_, i) =>
        word.slice(0, i) + word[i].toUpperCase() + word.slice(i + 1)
    );
};

console.log(mexicanWave('edabit'));
// [ 'Edabit', 'eDabit', 'edAbit', 'edaBit', 'edabIt', 'edabiT' ]

こちらの方法では slice() を使って前後の部分文字列を結合しているため、グローバルなプロトタイプを汚染せずに済みます。状況に応じて使い分けるとよいでしょう。