JavaScriptを使用した星の出力練習

Question

こんにちは。
星の出力練習を通してJavaScriptの書き方を練習しています。

現在、以下のような星の羅列をしたいのですが、書き方に行き詰まったので質問いたしました。

★☆★☆★
☆★☆★☆
★☆★☆★
☆★☆★☆
★☆★☆★

上記の形に寄せるため、以下のようなコードを書きました。

　　　　　<script>
for(var i=1; i<6; i++){
for(var a=1; a<6; a++){
if(a % 2 == 1)
{document.write("★");}
else{document.write("☆")};
};
document.write("<br>");
};
</script>

これだと、下記のようになります。

★☆★☆★
★☆★☆★
★☆★☆★
★☆★☆★
★☆★☆★

そこで、変数i=2,4（または偶数指定）のときに、変数a=奇数のときの処理を書けばいいのかな？
と思ってfor文とif文のネストを試行錯誤しましたが、エラーがでました。
条件式の間違いも含めて、アドバイスをいただけますと幸いです。
よろしくお願いします。

Answer 1

1つのfor文でやってみるのはいかがでしょうか。
・１行につき5つの星を表示するので、iの値が5で割れる場合に改行する。
・iの値が偶数か奇数か判定する。

Comments

[kuma_129]

XNXSXMXR さま
ご回答ありがとうございました！
ひとつのfor文で書くことも可能だったのですね！
ずっと行と列で考えていたので、新たな発見ができました。
今後もよろしくお願いします。

Answer 2

XNXSXMXRさんの回答でコーディングしてみました。

for(var i=1; i<=25; i++){
  if(i % 2 == 1) {
    document.write("★");
  } else {
    document.write("☆")
  };
  if(i % 5 == 0) {
    document.write("<br>")    
  };  
};

同じ考え方ですが、三項演算子を使うと下記のようによりシンプルに記述できます。

for(var i=1; i<=25; i++){
  document.write(
    (i % 2 ? "★" : "☆")
    + (i % 5 == 0 ? "<br>" : "")
  );
};

Comments

[kuma_129]

hatena19 さま

実際にコーディングしていただきありがとうございます！
for文ひとつでとてもシンプルでわかりやすい形で表せて感動しました。
今後ともよろしくお願いします。

Answer 3

こんにちは

全部で25個ある星印に以下のような順番を付けます。

• 1行目の一番左の星： 0 番目
• その右の星： 1番目

・・・

• 1行目の一番右の星： 4番目
• 2行目の一番左の星： 5番目

・・・

• 5行目の一番右の星： 24番目

そうすると、 j (0≦ j ≦ 24)番目の星について

• j が奇数ならば ☆
• j が偶数ならば ★

を出力すればよいことになります。

j が奇数である if条件は

if (j % 2 === 1) { // i が奇数の場合

ですが、j % 2 の値は 0か1しかないので、上記の === 1 は省略できて

if (j % 2) { // i が奇数の場合

と書けます。
以下は上記の考え方を元にしたコードです。

for (var i = 0; i < 5; i++) {
  for (var a = 0; a < 5; a++) {
    const j = i * 5 + a;
    if (j % 2) {
      document.write("☆");
    } else {
      document.write("★")
    };
  };
  document.write("<br>");
};

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/GRgpeyO?editors=1010

追記

上記の回答に記載した、

• 星に 0以上24以下の番号を付け、その番号の変数を j とする。

という考え方を使うと以下のようにも書けます。

const NUM_LINES = 5, // 行の数
  NUM_PER_LINE = 5, // 一行に含まれる星の数
  NUM_ALL = NUM_LINES * NUM_PER_LINE; // 全ての星の数


[...Array(NUM_ALL)].forEach((_, j) => {
  document.write(`${j % 2 ? '☆':'★'}${(j+1) % NUM_PER_LINE ? '' : '<br />'}`);
});

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/PowPLaR?editors=1010

追記2

上記に書いた、

• 1行目一番左の星から、最後の行の一番右の星まで、0 から始まる通し番号を付け、その番号の奇偶で☆と★とを出し分ける。

という考え方だと、一行に含まれる星の数を1個増やして 6 にすると（どの行も★始まりになって、）意図した結果にならなくなります。一行の星の数が任意の個数でも対応できるようにするには、上記のような全ての星の通し番号で判定するのではなく、iと a を使って、以下のようにします。

  const NUM_PER_LINE = 5; // 一行に含まれる星の数
    
  for(var i = 0; i < 5; i++) {
    for(var a = 0; a < NUM_PER_LINE; a++) {
      if(i % 2 === a % 2) {
        document.write("☆");
      }
      else { 
        document.write("★")
      };
    };
    document.write("<br>");
  };  

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/JjoYVjN?editors=1010

上記で、 NUM_PER_LINE を 6 に変えても望ましい結果が得られます。

追記3

考え方の違う案をもう一つ挙げます。
一行に星を5個出力する場合であれば、まず初めに、2つの文字列、"★☆★☆★" と "☆★☆★☆" とを作っておいて、これらの2つを交互に出力すれば望む結果が得られます。
以下、そのサンプルです。

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/VwYvNzd?editors=1010

参考になれば幸いです。

Comments

[jun68ykt]

コメントから補足しますが、

i % 2 と a % 2 とが等しいか？等しくないか？

によって ☆と★を出し分けるという回答を最も早く提示されたのは、FoyLandさんです。

[kuma_129]

jun68ykt さま

様々なパターンのご回答を提示していただきありがとうございました。
書いたこともないようなコードがたくさんあって、勉強になりました。
ひとつひとつ検証してみようと思います！
今後ともよろしくお願いします。

[jun68ykt]

どういたしまして。
> 勉強になりました。
とのことで、よかったです????

Answer 4

星用のカウンターを付けます。

var counter = 0;

for(var i=1; i<6; i++){
  for(var a=1; a<6; a++){
    if(counter % 2 == 1) {
      document.write("★");
    } else { 
      document.write("☆")
    };
    counter++;
  };
  document.write("<br>");
};

Comments

[kuma_129]

madone99 さま
ご回答いただきありがとうございました！
カウンターをつける、ということを知らなかったので調べました。
シンプルなコードで解決して勉強になりました。
今後ともよろしくお願いします。

Answer 5

if(a % 2 == i % 2)
条件文をこのように書き換えてみてください。

Comments

[kuma_129]

FoyLand さま

ご回答ありがとうございました。
条件文を書き換えて試行錯誤した結果、正しい形にできました！
今後ともよろしくお願いします。

Answer 6

実際には console.log を document.write に変更してください。
start.js

mode = 0;
stars = ["★", "☆"];
for(var i = 1; i < 6; i++) {
  line = "";
  for(var a = 1; a < 6; a++) {
    line += stars[mode % 2];
    mode += 1;
  }
  console.log(line + "<br>");
}

実行例

Comments

[kuma_129]

katoy さま
ご回答ありがとうございました！
いろんなコードのバリエーションで表現できるのですね。
またひとつ考え方が広がりました。