読者です 読者をやめる 読者になる 読者になる

俺の食べログ

「グルメ」「仕事」「プログラミング」「趣味」について書いてます。

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

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

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

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

 

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

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

 

その問題はこちら。

 

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

これが答えとなる形ね。

f:id:buried_treasure:20160429084331p:plain

 

 

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

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

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

 

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

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

dotinstall.com

 

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

 

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

 

pythonで作ってもらいました。

わかりやすく丁寧に書かれています。

記事の作り方とかすごく参考になる!!

uranusora.hatenablog.com