はじめに
この記事を読めば、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
を使って実装してください。
●カスタマイズ方法
ピラミッドをカスタマイズする方法はいくつかあります。
下記にいくつかのカスタマイズ方法を紹介します。
- ピラミッドの高さを変更する
ピラミッドの高さを変更するには、for文の繰り返し条件を調整します。
const height = 7; // 任意の高さを指定
for (let i = 1; i <= height; i++) {
console.log(" ".repeat(height - i) + "*".repeat(2 * i - 1));
}
- 空白文字を変更する
空白文字を変更するには、ピラミッドの空白部分を生成する部分をカスタマイズします。
const spaceSymbol = "-"; // 任意の空白文字を指定
for (let i = 1; i <= 5; i++) {
console.log(spaceSymbol.repeat(5 - i) + "*".repeat(2 * i - 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文を使ってピラミッドを作成する方法がわかりましたね。