第 8 回 JavaScript の基本機能 おさらい if 文と for 文の組み合わせ、2重 for

著者名: 村濱 一樹 (External link) (kintone エバンジェリスト)

目次

information

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

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

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

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

問題:四角を描く

アスタリスク(*)を使ってコンソールに次のような四角を描いてみましょう。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
**********
**********
**********
**********
**********
**********
**********
**********
**********
**********

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

回答形式

1
2
3
4
5
6
let result = ''; // 結果格納用変数

// 処理内容
// ここでresult変数に値をいれていく

console.log(result); // 最後に結果をコンソールに表示。

次のように console.log() を何回も使って表示するのは NG です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
console.log('**********');
console.log('**********');
console.log('**********');
console.log('**********');
console.log('**********');
console.log('**********');
console.log('**********');
console.log('**********');
console.log('**********');
console.log('**********');

解法:四角を描く方法

ロジックを考える

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

10x10 のアスタリスクを表示する手順の考え方
  1. 100 回アスタリスクを変数 result に追加する。
  2. 10 回アスタリスクを追加したあとには変数 result に改行を追加する。

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

1. 100 回アスタリスクを変数 result に追加する

これについては「アスタリスクを追加する」という処理を 100 回繰り返すので、繰り返しの for 文が使えそうです。
100 個のアスタリスクを追加する for 文は次のようになりますね。

1
2
3
4
5
6
7
let result = '';

// 変数resultにアスタリスクを 100 回追加(補足参照)
for (let i = 1; i <= 100; i++) {
  result += '*'; // 「+=」を使うことでresultの末尾に'*'を追加できます。
}
console.log(result); // 結果表示
補足

以前の章では for 文内の処理に index 変数の i をつかっていましたが、今回のように「何回目のループか」というのを処理に使う必要がなければ、index 変数を使う必要はありません。

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

まず、いまアスタリスクが何回追加されたのかを確認するために、 剰余演算子(%(External link) を使います。
剰余演算子(%)は割り算をした時の「余り」を求めることができます。

i を 5 で割った時の余りを求める場合は、次のように書きます。

1
i % 5

今回のようにアスタリスクが 10 回追加されたのを確認したい場合は、 変数 i を 10 で割りその余りが 0 だと、アスタリスクが 10 回追加されたと分かります。
10 で割った時の余りが 0 の条件式は、次のようになります。=== は左右が等しいという意味です。

1
i % 10 === 0

上記を踏まえて、「変数 i を 10 で割ったあまりが 0 の場合(10…20…30…などの 10 の倍数)、つまり 10 回アスタリスクが追加されたら、~する」という if 文を作ってみましょう。

1
2
3
if (i % 10 === 0) {
  // 条件が成り立つときの処理
}

次に、条件が true だった場合の処理ですが、今回はアスタリスクが 10 回追加された時、「1 回改行をいれる」処理がしたいので、改行を意味する \n を使います。

1
2
3
if (i % 10 === 0) {
  result += '\n'; // 改行を追加。「+=」を使うことでresultの末尾に改行を追加できます。
}

実際にコードを書く

上記を組み合わせると、次のようなコードになります。
for 文でアスタリスクを変数 result に追加しながら、if 文を使って改行も追加していきます。

1
2
3
4
5
6
7
8
let result = '';
for (let i = 1; i <= 100; i++) {
  result += '*'; // 変数resultにアスタリスクを100回追加
  if (i % 10 === 0) {
    result += '\n'; // 10...20...30...回目のときに改行
  }
}
console.log(result);
サンプルの実行環境

https://jsfiddle.net/kintone/bg1ejpxk/2/ (External link)

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

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

ロジックを考える

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

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

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

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

これを実現するためには、アスタリスクを 10 回追加する for 文のあと、改行をすれば OK ですね。

1
2
3
4
5
6
7
let result = '';
for (let j = 1; j <= 10; j++) {
  result += '*'; // 10回アスタリスクを追加
}
result += '\n'; // 改行する

console.log(result); // 結果表示
2. 1 を 10 回繰り返す
1
2
3
4
5
let result = '';
for (let i = 1; i <= 10; i++) {
  // ここに1.の処理を入れる
}
console.log(result); // 結果表示

実際にコードを書く

上記のコードで実際に動作しますが、2 重 for 文などを使う場合は、最初の繰り返しのための変数を i、その次の変数を j という風にしたほうがいいのでちょっとだけ修正します。

1
2
3
4
5
6
7
8
let result = '';
for (let i = 1; i <= 10; i++) {
  for (let j = 1; j <= 10; j++) {
    result += '*'; // 10回アスタリスクを追加
  }
  result += '\n'; // 改行する
}
console.log(result); // 結果表示
サンプルの実行環境

https://jsfiddle.net/kintone/a7zyjq8d/4/ (External link)

まとめ

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