JavaScriptでスターパターン（ひし形）をコンソールに出力する最も簡単な方法

本記事では、JavaScriptのコンソールにスターパターン（星形パターン）を出力するシンプルな方法を解説します。重要なポイントとして、今回はHTMLページや出力ウィンドウではなく、開発者ツールのコンソールに表示することを想定しています。まず、完成イメージとなるパターンを見てみましょう。

*
* *
* * *
* * * *
* * * * *
* * * * * *
* * * * *
* * * *
* * *
* *
*

星の数が1個から6個まで増えていき、その後ふたたび1個まで減っていく、いわゆる「ダイヤモンド型（ひし形）」のパターンです。

repeat()メソッドを使ったシンプルな実装例

文字列のrepeat()メソッドを利用すれば、わずか数行のコードでこのパターンを実現できます。

const star = "* ";
// lengthは最長行に含まれる星の数
const length = 6;
for (let i = 1; i <= (length * 2) - 1; i++) {
  const k = i <= length ? i : (length * 2) - i;
  console.log(star.repeat(k));
}

出力結果

このコードを実行すると、コンソールには冒頭で示した通りのパターンが出力されます。

*
* *
* * *
* * * *
* * * * *
* * * * * *
* * * * *
* * * *
* * *
* *
*

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

• repeat()メソッド： レシーバの文字列を、引数で指定した回数だけ繰り返した新しい文字列を返します。例えば"* ".repeat(3)は* * *を生成します。
• 三項演算子： 変数kは、ループカウンタiがlength以下の間はiそのものを、lengthを超えると(length×2)−iの値を取ります。これにより、星の数が増えてから減るという対称的な動作が実現されます。
• ループ範囲： 合計行数は(length×2)−1行となり、length=6の場合は11行が出力されます。

計算量について

このコードの時間計算量はO(length²)、空間計算量はO(1)です。各行の出力時に最大length回分の文字列コピーが発生するため、全体の処理量は行数と星の数の積に比例します。

別のアプローチ：ネストしたループで書く方法

repeat()メソッドを使わず、伝統的な二重ループでも同じパターンを描けます。

const length = 6;

// 上半分（増加）
for (let i = 1; i <= length; i++) {
  let row = "";
  for (let j = 1; j <= i; j++) {
    row += "* ";
  }
  console.log(row);
}

// 下半分（減少）
for (let i = length - 1; i >= 1; i--) {
  let row = "";
  for (let j = 1; j <= i; j++) {
    row += "* ";
  }
  console.log(row);
}

こちらの方法は処理の流れが直感的に理解しやすい一方、コード量は増えます。簡潔さを重視するならrepeat()メソッドを使った最初の実装がおすすめです。