こんにちは、Reiです。
プログラミングの大きな特徴のひとつは、
同じ処理を何度も自動で実行できることです。
例えば、
- データを順番に処理する
- 配列の中身を1つずつ確認する
- 条件に合うデータだけ取り出す
といった処理です。
こうした処理を実現するのが「繰り返し（ループ）」 です。
JavaScriptにはいくつかの書き方がありますが、
まずは基本となる書き方から整理していきましょう！
基本の繰り返し「 for文 」
最も基本的な繰り返し処理が for文 です。
for文は、
「決まった回数だけ処理を繰り返す」
ときによく使われます。
for文は次の形で書きます。
for (初期値; 条件; 更新) {
繰り返したい処理
}
まず最初に 初期値 が実行され、
繰り返しの回数を数えるための変数を用意します。
次に 条件 が確認され、
この条件が true の場合だけ、{ } の中に書いた「繰り返したい処理」が実行されます。
そして1回の処理が終わると
更新によってカウント用の変数の値が変化します。
この流れを繰り返しながら、
条件が false になったときにループが終了します。
コードサンプルで理解を深める
for (let i = 0; i < 5; i++) {
console.log(`${i}回目のループです`);
}
このコードでは、次の順番で処理が進みます。
① let i = 0 （初期値）
まず、カウント用の変数 i を 0 でスタートします。
② i < 5 （条件）
「i が 5 より小さいか」を確認します。
③ { } の中の処理を実行 （繰り返したい処理）
条件が true の場合、処理が実行されます。
④ i++ （更新）
処理が終わると i の値を 1 増やします。
そして、再び②の条件に戻ります。
この流れを繰り返し、
②の条件である i が 5以上になったときにループが終了します。
なぜ let を使うの？
for (let i = 0; i < 5; i++)
ここでは let を使っています。
理由は、ループの中で i の値が次のように変わるからです。
1回目のループ → i = 0
2回目のループ → i = 1
3回目のループ → i = 2
4回目のループ → i = 3
5回目のループ → i = 4
このように、i の値は繰り返すたびに更新されます。
const は値を変更できないため、
このような用途では let を使う必要があるのです！
配列を順番に処理する「 for…of 」
配列の要素を
1つずつ順番に取り出して処理したいときはfor...of がよく使われます。
for…of は次の形で書きます。
for (const 変数 of 配列) {
繰り返したい処理
}
of の後ろに 配列 を書くと、
その配列の要素が先頭から順番に取り出されます。
取り出された要素は、
for の中で指定した変数に代入され、
その値を使って処理を実行することができます。
コードサンプルで理解を深める
const users = ["田中", "佐藤", "鈴木"];
for (const user of users) {
console.log(`${user}さん、こんにちは！`);
}
このコードでは、次の順番で処理が進みます。
① 配列の最初の要素を取り出す
user = “田中”
② { } の中の処理を実行
田中さん、こんにちは！
③ 次の要素を取り出す
user = “佐藤”
④ { } の中の処理を実行
佐藤さん、こんにちは！
⑤ 次の要素を取り出す
user = “鈴木”
⑥ { } の中の処理を実行
鈴木さん、こんにちは！
このように、配列の要素が順番に user に代入され、
そのたびに処理が実行されます。
配列の要素をすべて処理すると、
ループは自動的に終了します。
for文で書くとどうなる？
同じ処理は for文 でも書くことができます。
const users = ["田中", "佐藤", "鈴木"];
for (let i = 0; i < users.length; i++) {
console.log(`${users[i]}さん、こんにちは！`);
}
ただしこの書き方では、
users.length（配列の要素の数）users[i]（配列の i 番目の要素）
を用いて書く必要があり、自分で配列の要素数やインデックスを管理しながら処理を描かなければなりません。
そのため、
配列の要素を順番に処理する場合は
for…of を使うとコードが読みやすくなります。
なぜ const を使うの？
for (const user of users)
ここでは const を使っています。
理由は、ループの中で値を書き換えないからです。
user には毎回新しい値が入りますが、
その1回の処理の中では変更しません。
そのため、安全性の高い const を使うのが一般的です。
配列操作をスマートにする「 map 」
JavaScriptでは、配列を扱うときに
map というメソッドがよく使われます。
mapは、
配列のすべての要素に同じ処理を行い、新しい配列を作る
という働きをします。
map は次の形で書きます。
const 新しい配列 = 配列.map((要素) => 処理)
map を使うと、
配列の要素を1つずつ取り出しながら
指定した処理を実行することができます。
そして処理した結果を集めて、
新しい配列を作ります。
コードサンプルで理解を深める
const numbers = [1, 2, 3];
const doubled = numbers.map((num) => num * 2);
このコードでは、次の順番で処理が行われます。
① 配列の最初の要素を取り出す
num = 1
② 指定された処理を実行
1 × 2 → 2
③ 結果を新しい配列に追加する
④ 次の要素を取り出す
num = 2
⑤ 指定された処理を実行
2 × 2 → 4
⑥ 結果を新しい配列に追加する
このような処理を、
配列の要素がなくなるまで繰り返します。
すべての処理が終わると、
[2, 4, 6]
という 新しい配列 が作られます。
それが doubled に格納されます。元の numbers は変更されません。
for文で書くとどうなる？
同じ処理を for文で書くと次のようになります。
const numbers = [1, 2, 3];
const doubled = [];
for (let i = 0; i < numbers.length; i++) {
doubled.push(numbers[i] * 2);
}
このように
新しい配列を作って追加する処理が必要になります。
map を使うと、
よりスマートに書くことができるのです！
条件に合う要素を取り出す「 filter 」
配列の中から
条件に合う要素だけを取り出したいときはfilter を使います。
filterは、
条件に合う要素だけで新しい配列を作る
というメソッドです。
filter は次の形で書きます。
const 新しい配列 = 配列.filter((要素) => 条件)配列の要素を1つずつ取り出しながら、
指定した条件を確認します。
そして、
条件を満たした要素だけを集めて
新しい配列を作ります。
コードサンプルで理解を深める
const ages = [12, 25, 18, 30, 15];
const adults = ages.filter((age) => age >= 20);
このコードでは、次の順番で処理が行われます。
① 配列の最初の要素を取り出す
age = 12
② 条件を確認
12 >= 20 → false
③ 条件を満たさないため追加しない
④ 次の要素を取り出す
age = 25
⑤ 条件を確認
25 >= 20 → true
⑥ 条件を満たているため、新しい配列に追加する
このような処理を、
配列の要素がなくなるまで繰り返します。
すべての処理が終わると、
[25, 30]
という新しい配列が作られ、それが adults に格納されます。
for文で書くとどうなる？
const ages = [12, 18, 25, 30, 15];
const adults = [];
for (let i = 0; i < ages.length; i++) {
if (ages[i] >= 20) {
adults.push(ages[i]);
}
}
for文でも同じ処理は書けますが、
・ループを書く
・条件を書く
・配列に追加する
といった処理が必要になります。
そのため、
配列から条件に合うデータを取り出す場合は
filter を使うとコードをシンプルに書くことができるのです。
元のデータを壊さない考え方
JavaScriptでは、
元のデータを直接変更しない
という考え方がよく使われます。
これを イミュータビリティ（不変性） と呼びます。
実は、これまで紹介した
map や filter もこの考え方に沿っているのです。
これらのメソッドは、
元の配列を変更せず、結果をまとめた 新しい配列 を作る仕組みになっています。
まとめ
ここまで、JavaScriptの 繰り返し処理と配列操作 を見てきました。
＼＼ 今回のまとめ ／／
・ for文は「決まった回数の繰り返し」を行う基本の書き方
・ for…of は配列の要素を順番に処理できる
・ map は配列のすべての要素を加工する
・ filter は条件に合う要素だけを取り出す
・ 元のデータを変更せず、新しい配列を作るイミュータビリティが大切
繰り返し処理を使いこなせるようになると、
大量のデータを効率よく扱えるようになります。
JavaScriptでは、配列とループはとても重要な組み合わせです。
少しずつコードを書きながら、
処理の流れを体で覚えていきましょう！
コメント