【for文】アスタリスク（＊）で作る菱形｜JavaScript

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

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

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

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

その問題はこちら。

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

これが答えとなる形ね。

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

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

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

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

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

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

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

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 ( k = 0; k < i; k++ ) {
ans = ans + hoshi;
}

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

||<

こんな形に至りました。

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

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

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

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

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

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

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

プログラミングを勉強するなら、独学で勉強していると悩むばかりで時間が過ぎてしまうので、すでに理解している人の近くで勉強すると習得が早いです。

自分の周りにプログラミングを理解している人がいないという場合はプログラミングスクールに通うのも良いでしょう。

オススメのプログラミングスクールを関連記事でまとめました。

よかったら読んでみて下さい。