初心者も安心！JavaScriptでピラミッドを作る7つの方法

はじめに

この記事を読めば、JavaScriptでピラミッドを作成する方法が身に付きます。

JavaScriptのfor文を使った7つのピラミッド作成方法を、サンプルコードとともに紹介していきます。

●JavaScriptのfor文とは

for文は、繰り返し処理を行うための制御構造です。

指定した回数だけ処理を繰り返すことができます。

○for文の基本

for文の基本構文は次のようになります。

for (初期化; 条件式; 更新) {
  処理;
}

●JavaScriptでピラミッドを作る方法

ここでは、JavaScriptでピラミッドを作成する7つの方法と、それぞれのサンプルコードを紹介していきます。

○サンプルコード1：基本的なピラミッドの作成

この例では、アスタリスク(*)を使って基本的なピラミッドを作成しています。

for (let i = 1; i <= 5; i++) {
  console.log(" ".repeat(5 - i) + "*".repeat(2 * i - 1));
}

○サンプルコード2：逆ピラミッドの作成

この例では、アスタリスク(*)を使って逆ピラミッドを作成しています。

for (let i = 5; i >= 1; i--) {
  console.log(" ".repeat(5 - i) + "*".repeat(2 * i - 1));
}

○サンプルコード3：左寄せピラミッドの作成

このコードでは、アスタリスク(*)を使って左寄せのピラミッドを作成しています。

この例では、左側に空白を入れずに、段数分のアスタリスクを表示しています。

for (let i = 1; i <= 5; i++) {
  console.log("*".repeat(i));
}

○サンプルコード4：右寄せピラミッドの作成

このコードでは、アスタリスク(*)を使って右寄せのピラミッドを作成しています。

この例では、左側に空白を挿入して、右寄せの形になるように表示しています。

for (let i = 1; i <= 5; i++) {
  console.log(" ".repeat(5 - i) + "*".repeat(i));
}

○サンプルコード5：数字を使ったピラミッドの作成

このコードでは、数字を使ってピラミッドを作成しています。

この例では、各段に対応する数字を表示しています。

for (let i = 1; i <= 5; i++) {
  console.log(" ".repeat(5 - i) + String(i).repeat(2 * i - 1));
}

○サンプルコード6：アルファベットを使ったピラミッドの作成

このコードでは、アルファベットを使ってピラミッドを作成しています。

この例では、各段に対応するアルファベットを表示しています。

for (let i = 1; i <= 5; i++) {
  const alphabet = String.fromCharCode(64 + i);
  console.log(" ".repeat(5 - i) + alphabet.repeat(2 * i - 1));
}

○サンプルコード7：カスタムシンボルを使ったピラミッドの作成

このコードでは、カスタムシンボルを使ってピラミッドを作成しています。

この例では、各段に対応するカスタムシンボルを表示しています。

const customSymbol = "#"; // 任意のシンボルを指定
for (let i = 1; i <= 5; i++) {
  console.log(" ".repeat(5 - i) + customSymbol.repeat(2 * i - 1));
}

●注意点と対処法

• ピラミッドの高さが大きくなると、画面に収まらなくなることがあります。適切なサイズに調整しましょう。
• コンソール上での表示だけでなく、HTML要素に表示する場合は、innerHTMLやtextContentを使って実装してください。

●カスタマイズ方法

ピラミッドをカスタマイズする方法はいくつかあります。

下記にいくつかのカスタマイズ方法を紹介します。

1. ピラミッドの高さを変更する
   
   ピラミッドの高さを変更するには、for文の繰り返し条件を調整します。

const height = 7; // 任意の高さを指定
for (let i = 1; i <= height; i++) {
  console.log(" ".repeat(height - i) + "*".repeat(2 * i - 1));
}

2. 空白文字を変更する
   
   空白文字を変更するには、ピラミッドの空白部分を生成する部分をカスタマイズします。

const spaceSymbol = "-"; // 任意の空白文字を指定
for (let i = 1; i <= 5; i++) {
  console.log(spaceSymbol.repeat(5 - i) + "*".repeat(2 * i - 1));
}

3. 複数のシンボルを組み合わせる
   
   複数のシンボルを組み合わせてピラミッドを作成するには、シンボルを選択するロジックを追加します。

for (let i = 1; i <= 5; i++) {
  let symbols = "";
  for (let j = 1; j <= 2 * i - 1; j++) {
    symbols += j % 2 === 0 ? "-" : "*"; // 偶数番目に"-"、奇数番目に"*"を表示
  }
  console.log(" ".repeat(5 - i) + symbols);
}

まとめ

この記事では、JavaScriptのfor文を使ってピラミッドを作成する方法を紹介しました。

サンプルコードを参考に、様々な形のピラミッドを作成することができます。

また、注意点やカスタマイズ方法も紹介しましたので、自分だけのオリジナルなピラミッドを作成してみましょう。

これで、JavaScriptのfor文を使ってピラミッドを作成する方法がわかりましたね。