🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

6回答

8446閲覧

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

kuma_129

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

2クリップ

投稿2019/12/08 07:18

こんにちは。
星の出力練習を通して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文のネストを試行錯誤しましたが、エラーがでました。
条件式の間違いも含めて、アドバイスをいただけますと幸いです。
よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答6

0

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

投稿2019/12/08 07:31

XNXSXMXR

総合スコア239

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kuma_129

2019/12/08 11:51

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

0

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

js

1for(var i=1; i<=25; i++){ 2 if(i % 2 == 1) { 3 document.write("★"); 4 } else { 5 document.write("☆") 6 }; 7 if(i % 5 == 0) { 8 document.write("<br>") 9 }; 10};

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

js

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

投稿2019/12/08 08:09

編集2019/12/08 17:12
hatena19

総合スコア34073

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kuma_129

2019/12/08 12:05

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

0

ベストアンサー

こんにちは

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

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

・・・

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

・・・

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

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

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

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

j が奇数である if条件は

javascript

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

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

javascript

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

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

javascript

1for (var i = 0; i < 5; i++) { 2 for (var a = 0; a < 5; a++) { 3 const j = i * 5 + a; 4 if (j % 2) { 5 document.write("☆"); 6 } else { 7 document.write("★") 8 }; 9 }; 10 document.write("<br>"); 11};

追記

上記の回答に記載した、

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

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

javascript

1const NUM_LINES = 5, // 行の数 2 NUM_PER_LINE = 5, // 一行に含まれる星の数 3 NUM_ALL = NUM_LINES * NUM_PER_LINE; // 全ての星の数 4 5 6[...Array(NUM_ALL)].forEach((_, j) => { 7 document.write(`${j % 2 ? '☆':'★'}${(j+1) % NUM_PER_LINE ? '' : '<br />'}`); 8});

追記2

上記に書いた、

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

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

javascript

1 const NUM_PER_LINE = 5; // 一行に含まれる星の数 2 3 for(var i = 0; i < 5; i++) { 4 for(var a = 0; a < NUM_PER_LINE; a++) { 5 if(i % 2 === a % 2) { 6 document.write("☆"); 7 } 8 else { 9 document.write("★") 10 }; 11 }; 12 document.write("<br>"); 13 };

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

追記3

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

参考になれば幸いです。

投稿2019/12/08 07:45

編集2019/12/08 13:40
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jun68ykt

2019/12/08 09:07

コメントから補足しますが、 i % 2 と a % 2 とが等しいか?等しくないか? によって ☆と★を出し分けるという回答を最も早く提示されたのは、FoyLandさんです。
kuma_129

2019/12/08 12:03

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

2019/12/08 12:07

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

0

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

javascript

1var counter = 0; 2 3for(var i=1; i<6; i++){ 4 for(var a=1; a<6; a++){ 5 if(counter % 2 == 1) { 6 document.write("★"); 7 } else { 8 document.write("☆") 9 }; 10 counter++; 11 }; 12 document.write("<br>"); 13};

投稿2019/12/08 07:32

madone99

総合スコア1857

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kuma_129

2019/12/08 11:55

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

0

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

投稿2019/12/08 07:38

FoyLand

総合スコア72

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kuma_129

2019/12/08 12:00

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

0

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

node

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

実行例
イメージ説明

投稿2019/12/08 16:56

katoy

総合スコア22324

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kuma_129

2019/12/15 05:45

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問