第 8 回 JavaScript の基本機能 おさらい if 文と for 文の組み合わせ、2重 for
JavaScript初心者がカスタマイズに必須の知識をより学べるよう、チュートリアルの内容を充実させてリニューアルしました。
リニューアル後のチュートリアルは次のページを参照してください。
はじめよう JavaScript
JavaScriptの基本機能のif文とfor文の理解度を深めるために、今回はその両方を使ったちょっとしたストレッチをしてみましょう。
以下のリンク先で実際に入力しながら試してみてください。
https://jsfiddle.net/kintone/x27p59nu/1/
記述ミスなどでうまく動作しないときのために、下の方にサンプル実行環境も用意していますので必要に応じて利用してください。
問題:四角を描く
アスタリスク(*
)を使ってコンソールに次のような四角を描いてみましょう。
|
|
ただし、結果はひとつの変数に格納し、console.log()
の使用は結果出力時の1回だけとします。次のような形式でトライしてください。
回答形式
|
|
次のようにconsole.log()
を何回も使って表示するのはNGです。
|
|
解法:四角を描く方法
ロジックを考える
コードを書く前に、上記の四角を表示するにはどういうことが必要なのかいったん整理しましょう。
どういう処理が必要なのか、次のように箇条書きで考えるとコードを書くときに悩むことが減るので、毎回整理してから書き始めるのをおすすめします。
10x10 のアスタリスクを表示する手順の考え方
- 100回アスタリスクを変数
result
に追加する。 - 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文を作ってみましょう。
|
|
次に、条件がtrueだった場合の処理ですが、今回はアスタリスクが10回追加された時、「1回改行をいれる」処理がしたいので、改行を意味する\n
を使います。
|
|
実際にコードを書く
上記を組み合わせると、次のようなコードになります。
for文でアスタリスクを変数result
に追加しながら、if文を使って改行も追加していきます。
|
|
サンプルの実行環境
https://jsfiddle.net/kintone/bg1ejpxk/2/
別解:for 文を 2 回使って解く
上記はfor文とif文を組みわせましたが、今回の例題に関しては二重でfor文を使うことでも四角を追加できます。
ロジックを考える
前述のロジックの考え方とは別に、次のような考え方もできます。
- 10回アスタリスクを変数
result
に追加して改行する。 - 1を10回繰り返す。
考えたロジックに基づいてコードを考える
1. 10 回アスタリスクを変数result
に追加して改行する
これを実現するためには、アスタリスクを10回追加するfor文のあと、改行をすればOKですね。
|
|
2. 1 を 10 回繰り返す
|
|
実際にコードを書く
上記のコードで実際に動作しますが、二重for文などを使う場合は、最初の繰り返しのための変数をi
、その次の変数をj
という風にしたほうがいいのでちょっとだけ修正します。
|
|
サンプルの実行環境
https://jsfiddle.net/kintone/a7zyjq8d/4/
まとめ
ここまで、慣れてないと難しい例題だったと思います。
しかし、for文とif文の組み合わせ、多重のforなどを扱えます。
JSカスタマイズの幅も飛躍的に広がるので、分からなかった場合は繰り返し練習してみましょう。
また、途中の「ロジックを考える」で説明したように、まずロジックを考えて少しずつプログラムを積み重ねるような感覚で考えていけば、難しそうなものも意外と簡単に解決できることがあります。
混乱してきたら、いったん冷静になってロジックを考え直してみましょう。