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

固定リンクがコピーされました

（kintone エバンジェリスト）

問題：四角を描く

固定リンクがコピーされました

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

 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 のアスタリスクを表示する手順の考え方

100回アスタリスクを変数resultに追加する。
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`に改行を追加する

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

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/

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

固定リンクがコピーされました

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

ロジックを考える

固定リンクがコピーされました

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

10回アスタリスクを変数resultに追加して改行する。
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); // 結果表示

実際にコードを書く

固定リンクがコピーされました

上記のコードで実際に動作しますが、二重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/

まとめ

固定リンクがコピーされました

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

旧：はじめよう JavaScript