Javascript paiza プログラミング

【paiza】N * N の九九表の出力 JavaScript編

はじめに

プログラミング学習サイト「paiza」には様々なコーディング問題が用意されています。今回は「N * N の 2 次元配列の表示」という問題を JavaScript で解いた方法について解説します。この問題は N×N の九九表（掛け算表）を出力するというシンプルながらも配列操作の基本を学べる良問です。

問題の概要

【n * n の 2 次元配列の表示】N * N の九九表の出力 JavaScript編（paizaランク C 相当）

問題の要件は次のとおりです：

  • 入力された整数 N に対して、N×N の掛け算表（九九表）を出力する
  • 各行の数値は半角スペースで区切る

例えば、N=3 の場合、以下のような出力になります：

1 2 3
2 4 6
3 6 9

解答コード

まずは解答コードを見てみましょう：

const n = parseInt(lines[0])
const arr = [...Array(n)].map((_, i) => [...Array(n)].map((_, p) => (i + 1)*(p + 1)))
arr.map((item) => console.log(item.join(" ")))

たった3行のコードですが、JavaScript の配列操作とモダンな文法をふんだんに使っています。一行ずつ丁寧に解説していきます。

コードの解説

1行目：入力値の取得と変換

const n = parseInt(lines[0])

この行では、入力された文字列（lines[0]）を整数に変換しています。parseInt 関数を使うことで、文字列を数値に変換できます。これにより、九九表のサイズ N が決まります。

2行目：二次元配列の生成

const arr = [...Array(n)].map((_, i) => [...Array(n)].map((_, p) => (i + 1)*(p + 1)))

この行が今回のコードの核心部分で、複数のテクニックを組み合わせています。

Array(n) と スプレッド構文 [...]

Array(n) は長さ n の配列を生成しますが、各要素は undefined です。この配列を直接 map メソッドで処理しようとすると、undefined の要素に対して処理が行われないという問題があります。

そこでスプレッド構文 [...Array(n)] を使うことで、undefined で埋められた長さ n の配列を新しい配列に展開します。これにより、map メソッドが各要素に対して確実に実行されるようになります。

二重の map による二次元配列の作成

[...Array(n)].map((_, i) => [...Array(n)].map((_, p) => (i + 1)*(p + 1)))

外側の map は行を生成し、内側の map は各行の列（セル）を生成します。

  • 外側の map の引数 (_, i) の i は行のインデックス（0から始まる）
  • 内側の map の引数 (_, p) の p は列のインデックス（0から始まる）
  • (i+1)*(p+1) で、実際の掛け算の値を計算（インデックスは0始まりなので1を足す）

アンダースコア _ は、使用しない引数（この場合は配列の各要素）を無視するための慣習的な書き方です。

この部分により、N×N の二次元配列 arr が完成します。例えば N=3 の場合、次のような配列になります：

[
  [1, 2, 3],  // (0+1)*(0+1), (0+1)*(1+1), (0+1)*(2+1)
  [2, 4, 6],  // (1+1)*(0+1), (1+1)*(1+1), (1+1)*(2+1)
  [3, 6, 9]   // (2+1)*(0+1), (2+1)*(1+1), (2+1)*(2+1)
]

3行目：結果の出力

arr.map((item) => console.log(item.join(" ")))

この行では、作成した二次元配列 arr の各行（item）を取り出し、join(" ") メソッドで要素をスペースで区切った文字列に変換してから console.log で出力しています。

join メソッドは配列の要素を指定した区切り文字（ここではスペース）で連結した文字列を返します。

まとめ

今回のコードは、JavaScriptの配列操作と関数型プログラミングの手法を使って、N×N の九九表を簡潔に表現しています。特に注目すべき点は：

  1. スプレッド構文と Array(n) を組み合わせた空配列の初期化
  2. map メソッドを二重に使った二次元配列の生成
  3. インデックスを利用した計算と変換

このようなコーディングスタイルは、多くのモダンなJavaScriptプロジェクトで見られ、コードの可読性と簡潔さを両立させています。

この記事が皆さんのJavaScript学習の参考になれば幸いです。他のプログラミング問題にも同様のテクニックを応用してみてください！

発展課題

さらに学習を深めたい方へ、いくつかの発展課題を提案します：

  1. reduce メソッドを使って同じ結果を得るコードを書いてみる
  2. 各セルの表示幅を揃えるように改良する（例：二桁の数字も右揃えにする）
  3. 九九表だけでなく、任意の計算（足し算、引き算など）に対応するように拡張する

これらの課題に取り組むことで、JavaScript の配列操作への理解がさらに深まるでしょう。

-Javascript, paiza, プログラミング
-,