JavaScriptで行数・列数・値を指定して2次元配列を構築する方法

JavaScriptでは、指定された入力に基づいて多次元配列を作成する関数が必要になることがあります。本記事では、行数・列数・初期値の3つのパラメータを受け取り、2次元配列を動的に生成する関数の実装方法を解説します。

関数の仕様

作成する関数は、以下の3つの引数を受け取ります。

• row: 配列に含まれるサブ配列（行）の数
• col: 各サブ配列に含まれる要素（列）の数
• val: 各要素に設定する値

例えば、入力が「2, 3, 10」だった場合、出力は次のようになります。

const output = [[10, 10, 10], [10, 10, 10]];

それでは、実際のコードを見ていきましょう。

実装例：二重ループを使った方法

const row = 2;
const col = 3;
const val = 10;

const constructArray = (row, col, val) => {
    const res = [];
    for(let i = 0; i < row; i++){
        for(let j = 0; j < col; j++){
            if(!res[i]){
                res[i] = [];
            };
            res[i][j] = val;
        };
    };
    return res;
};
console.log(constructArray(row, col, val));

出力結果

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

[ [ 10, 10, 10 ], [ 10, 10, 10 ] ]

コードの解説

この実装では、外側のループ（i）でサブ配列の個数分だけ繰り返し処理を行い、内側のループ（j）で各サブ配列に対して指定した値を順番に代入しています。

ポイントとなるのは if(!res[i]) の部分です。res[i] がまだ存在しない場合に空の配列で初期化してから値を設定することで、インデックスへの安全なアクセスを実現し、意図した通りの2次元配列を構築できます。

別の実装方法：Array.from を使った簡潔な書き方

よりモダンで簡潔に記述したい場合は、Array.from() と fill() メソッドを組み合わせる方法もおすすめです。

const constructArray = (row, col, val) =>
    Array.from({ length: row }, () => Array(col).fill(val));

console.log(constructArray(2, 3, 10));
// [ [ 10, 10, 10 ], [ 10, 10, 10 ] ]

こちらの方法では、Array.from({ length: row }, ...) で行数分の新しい配列を生成し、各要素を Array(col).fill(val) によって指定した値で埋めた配列に置き換えています。ループを書く必要がなく、コードの意図も読み取りやすくなります。

用途やチームのコーディング規約に応じて、二重ループによる明示的な実装と、Array.from() を使った宣言的な実装を使い分けるとよいでしょう。