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

数字を使ったピラミッドを作成するJavaScriptのサンプルコードJS
この記事は約5分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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要素に表示する場合は、innerHTMLtextContentを使って実装してください。

●カスタマイズ方法

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

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

  1. ピラミッドの高さを変更する

    ピラミッドの高さを変更するには、for文の繰り返し条件を調整します。
const height = 7; // 任意の高さを指定
for (let i = 1; i <= height; i++) {
  console.log(" ".repeat(height - i) + "*".repeat(2 * i - 1));
}
  1. 空白文字を変更する

    空白文字を変更するには、ピラミッドの空白部分を生成する部分をカスタマイズします。
const spaceSymbol = "-"; // 任意の空白文字を指定
for (let i = 1; i <= 5; i++) {
  console.log(spaceSymbol.repeat(5 - i) + "*".repeat(2 * i - 1));
}
  1. 複数のシンボルを組み合わせる

    複数のシンボルを組み合わせてピラミッドを作成するには、シンボルを選択するロジックを追加します。
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文を使ってピラミッドを作成する方法がわかりましたね。