はじめようJavaScript第8回 JavaScriptの基本機能 おさらい if文とfor文の組み合わせ・2重for

JavaScript 初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
   リニューアル後のチュートリアルは次のページを参照してください。
   はじめよう JavaScript

（著者：kintone エバンジェリスト 村濱 一樹）

JavaScriptの基本機能である、if文とfor文の理解度を深めるために、今回はその両方を使ったちょっとしたストレッチをしてみましょう。

ぜひ、以下のリンク先で実際に入力しながら試してみてください。
https://jsfiddle.net/kintone/x27p59nu/1/

※記述ミスなどでうまく動作しないときのために、下の方にサンプル実行環境も用意していますので必要に応じてご利用ください。

四角を描く

アスタリスク（＊）を使ってコンソールに下記のような四角を描いてみましょう。

ただし、結果は一つの変数に格納し、console.log()の使用は結果出力時の1回だけとします。下記のような形式でトライしてください。

・回答形式

・下記のようにconsole.logを何回も使って表示するのはNG

ロジックを考える

コードを書く前に、上記の四角を表示するにはどういうことが必要なのか一旦整理しましょう。
どういう処理が必要なのか、下記の様に箇条書きで考えるとコードを書くときに悩むことが減るので、
毎回整理してから書き始めるのをおすすめします。

・10x10のアスタリスクを表示するには...

1. 100回アスタリスクを変数 result に追加する
2. 10回アスタリスクを追加したあとには変数 result に改行を追加する

考えたロジックに基づいてコードを考える

1. 100回アスタリスクを変数 result に追加する
   これについては「アスタリスクを追加する」という処理を100回繰り返すので、繰り返しができるfor文が使えそうです。100個のアスタリスクを追加するfor文は下記のようになりますね。 ※補足：以前の章ではfor文内の処理にindex変数 i をつかっていましたが、今回の様に「何回目のループか」というのを処理に使う必要がなければ、index変数を使う必要はありません。
2. 10回アスタリスクを追加したあとには変数 result に改行を追加する
   まず、いまアスタリスクが何回追加されたのかを確認するために、剰余演算子(%)を使います。
   剰余演算子(%)は割り算をした時の「余り」を求めることができます。
   ・iを5で割った時の余りを求める場合 今回のようにアスタリスクが10回追加されたのを確認したい場合は、
   変数 i を10で割って、その余りが0だと、いまアスタリスクが10回追加されたということが分かります。
   ・10で割った時の余りが0の条件 (===は左右が等しいという意味 上記を踏まえて、「変数 i が 10 で割ったあまりが0の場合(10..20..30..などの10の倍数の場合)、つまり、10回アスタリスクが追加されたら、～する」というif文を作ってみましょう。
   ・条件を入れたif文　 次に、条件がtrueだった場合の処理ですが、今回はアスタリスクが10回追加された時、「一回改行をいれる」処理がしたいので、改行を意味する\n を使います。　

実際にコードを書く

上記を組み合わせると、下記のようなコードになります。for文でアスタリスクを変数 result に追加しながら、if文を使って改行も追加していきます。
※サンプル実行環境： https://jsfiddle.net/kintone/bg1ejpxk/2/

別解: for文を二回使って解く

上記はfor文とif文を組みわせましたが、今回の例題に関しては二重でfor文を使うことでも四角を追加できます。

ロジックを考える

前述のロジックの考え方とは別に、下記のような考え方もできます。

1. 10回アスタリスクを変数 result に追加して改行する
2. 1.を10回繰り返す。

考えたロジックに基づいてコードを考える

1. 10回アスタリスクを変数 result に追加して改行する
   これを実現するためには、アスタリスクを10回追加するfor文のあと、改行をすればOKですね。　
2. 1.を10回繰り返す。　

実際にコードを書く

上記のコードで実際に動作しますが、2重for文などを使う時は、やはり最初の繰り返しのための変数は i, その次は j という風にしたほうがいいのでちょっとだけ修正します。
※サンプル実行環境：https://jsfiddle.net/kintone/a7zyjq8d/4/

まとめ

ここまで、慣れてないと難しい例題だったと思います。しかし、for文とif文の組み合わせ、多重のforなどを扱えるようになります。JSカスタマイズの幅も飛躍的に広がるので、分からなかった場合は繰り返し練習してみましょう。
また、途中の「ロジックを考える」にあるように、まずロジックを考えて、少しずつプログラムを積み重ねるような感覚で考えていけば、難しそうなものも意外にに簡単にできるようになったりします。
混乱してきたら、一旦冷静になってロジックを考え直してみましょう。

<<第7回 JavaScriptの基本機能 繰り返し処理をする、for文 その2 〜配列を使ってみよう〜  | 第9回 JavaScriptの基本機能 関数を使う その1 >>