【for文】アスタリスク(*)で作る菱形|JavaScript

スポンサーリンク

【for文】アスタリスク(*)で作る菱形|JavaScript

この記事はJavaScriptの勉強を始めたばかりの僕が書いた記事です。

多少間違いがあったとしても、生暖かい目で見て下さい。

最近、JavaScriptというものを勉強し始めた。

Console.logすら、パッとでてこない僕が、こんな問題を解くことになった。

その問題はこちら。

JavaScriptのfor文を使って菱形を作りなさい

これが答えとなる形ね。

f:id:buried_treasure:20170615121618p:plain

問題を見た瞬間、「こんなんどうやって作るんだよ!!!」という気持ちになった。

とりあえず、JavaScript自体をあまり理解していないので、

ドットインストールをまず、見ることにした。

ドットインストールのJavaScript入門

とりあえずこれを見ました。

http://dotinstall.com/lessons/basic_javascript_v2

 

ドットインストールを見た結果、思いついた答えがこちら。

JavaScriptで作る菱形の解答例①

コンソールログを5連打で作りました。

まぁでもこれだと、for文を使っていないので、ダメです。

>||

console.log(”    *    “);
console.log(”  *****  “);
console.log(“*********”);
console.log(”  *****  “);
console.log(”    *    “);

||<

ここからJavaScriptの理解を深めるために、

何度か、ドットインストールを見直しました。

そして考えて、

ドットインストールさんから教わったことを駆使して作ったのがこちらです。

JavaScriptで作る菱形の解答例②

「配列」と「for文」を使って作りました。

>||

var array =[

(”    *    “),
(”  *****  “),
(“*********”),
(”  *****  “),
(”    *    “)

];

for (i = 0; i < array.length; i++) {

var value = array[i];

window.console.log(value);

}

||<

これだと、邪道だと思いながら作った。

問題を作った人が要求しているのは、

数字を少し変えるだけで、菱形の大きさを変えることのできる答えを求めている。

ここから、さらに考えてみました。

「javascript 菱形」、「javascript for文 菱形」など色々と調べてみました。

こういう記事とかが出てきました。

~菱形を描くJavascript~ ソフトウェア基礎演習Ⅱ

http://www.ie.u-ryukyu.ac.jp/~e075725/works/wuki/diamond/

これがおそらく答えなんだろうかど、

文字ばかりで読む気失せる。

もっと簡単に書かれている記事はないのか?と探す。

宿題プログラミング for文で三角形 パターン3

http://syukupro.blog.fc2.com/blog-entry-13.html

これぐらい簡単に書かれていると、わかりやすいんですけど、

これjavascriptではなさそう・・・

他にも記事をいくつか見て、

菱形を作るのに必要なことがいくつかわかった。

菱形を作るのに必要な技術

・上の三角形を作る

*

*****

********

・下の三角形を作る

********

*****

*

・for文の中にfor文を入れるということを駆使して作ること

色々と調べて、for文の中にfor文って、入るのかよと驚いた!!!

これらを駆使して色々と試行錯誤した上でできた答えがこちら。

JavaScriptで作る菱形の解答例③

この答えは、コンソールを見ながら調整して作った。

>||

var i,
j,
k,
l,
space,
hoshi,
ans;

space = ” “; //空白が1つ入っています
hoshi = “*”;

for (j = 0; j < 3; j++) {

for (i = 3; 0 < i – j; i–) {

space = space + ”  “; //空白が2つ入っています

}

ans = space + hoshi + space;
console.log(ans);
hoshi = hoshi + “****”;
space = ” “; //空白が1つ入っています

}

space = ”   “;  //空白が3つ入っています
hoshi = “*”;

for (k = 0; k < 1; k++) {

for (l = 1; 0 < l – k; l–) {
hoshi = hoshi + “****”;
}

space = space + ”  “; //空白が2つ入っています
ans = space + hoshi + space;
console.log(ans);
hoshi = “*”;
}

スポンサーリンク

space = space + ” “; //空白が2つ入っています
ans = space + hoshi + space;
console.log(ans);

||<

ここからもう少し綺麗になるだろうと、

色々いじった結果、辿り着いたのがこちらです。

JavaScriptで作る菱形の解答例④

>||

var hoshi = ‘*’,
space = ‘ ‘,
ans = ”,
i, j, k, l;

l = 0;

for ( i = 1; i <= 9; i += 4 ) {
ans = ”;

for ( j = (4-l); j > 0; j — ) {
ans = space + ans;

}

for ( k = 0; k < i; k++ ) {
ans = ans + hoshi;
}

l += 2;
console.log(ans);

}

i = 0;
j = 0;
k = 0;
l = 2;

for ( i = 5; i >= 0; i -= 4 ) {
ans = ”;

for ( j = 0; j < l; j ++ ) {
ans = space + ans;
}

for ( k = 0; k < i; k++ ) {
ans = ans + hoshi;
}

l += 2;
console.log(ans);

}

||<

こんな形に至りました。

菱形を書くだけでもすごく苦労した。

この課題をやって重要だと思ったこと

・よくわからない記事が出てきても、とにかくコードを書くこと

「javascript 菱形」などで調べて、わかりにくい記事が出てきたとしても、

とりあえずコードを書いてみることは大事だと思いました。

コードを書くことによって理解が深まる。

悩んで時間だけが過ぎていくのを待っても答えは出てこない。

この問題をやってくれた人がいた

ブログで取り上げてもらいました。

素人の僕にはよくわからないけど、

コード綺麗だわ。俺より、圧倒的に。

これ模範回答だわ。

JavaScriptで菱形を書こうとしている人はこれを見た方が良い。

moyasystemengineer.hatenablog.com

この人、マジで良い人。

コードも参考になるし、

「コードはGistに埋め込み」ところとか感謝しかない。

ブログにコードを書きたい人は参考になると思うので、

ぜひみた方が良いと思います。

僕も参考にします。

ibeckuu.hatenablog.com

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA