【JavaScript入門】JavaScriptの繰り返し文と配列の使い方を学ぼう

はじめに

「JavaScript入門」は、プログラミングを始めたい方、JavaScriptを勉強したい方向けにJavaScriptの基礎と実践を学ぶシリーズです。

初めての方は、まずこちらからお読みください。

【JavaScript入門】はじめに

本章では、JavaScriptの繰り返し文と配列の使い方について学びます。

for文、for of文、forEach文を使って配列を扱う方法を見ていきます。

本題に入る前に、繰り返し文と配列の使い方を理解するためにこちらを確認しておきましょう。

サンプルコードをダウンロードしよう

次のリンクから、サンプルコードをダウンロードしてください。

サンプルコードをテキストエディタで開いてみよう

「Visual Studio Code」から、先ほどダウンロードしたファイルから「008 繰り返し文と配列」を選択して開いてみましょう。

開くと次のような画面になります。

サンプルコードをChromeで開いてみよう

サンプルコードの「スタート」の「index.html」をChromeで開いてみましょう。

繰り返し文と配列

以前の章で、繰り返し文と配列について学びました。

【JavaScript入門】JavaScriptの繰り返し文を学ぼう – for文 –

【JavaScript入門】JavaScriptの配列を学ぼう

本章では、この二つを組み合わせた使い方を解説したいと思います。

配列は 複数の値をまとめて扱うことのできるデータの型 でしたね。

繰り返し文とは、同じ処理を繰り返すため の文です。

配列と繰り返し文を使用するとプログラムを効率的に書くことができます。

具体的に見てみましょう。

曜日をコンソールに表示してみよう

例えば、1週間の曜日をコンソールに表示するプログラムを書いてみましょう。

単純に変数を使うと次のように書くことができます。

const sunday = "日曜"
const monday = "月曜"
const tuesday = "火曜"
const wednesday = "水曜"
const thursday = "木曜"
const friday = "金曜"
const saturday = "土曜"
console.log(sunday)
console.log(monday)
console.log(tuesday)
console.log(wednesday)
console.log(thursday)
console.log(friday)
console.log(saturday)

実行した結果

日曜
月曜
火曜
水曜
木曜
金曜
土曜

コンソールに曜日を表示することができました。

しかし、あまり効率の良い書き方ではありませんね。

変数が7個もありますし、console.log も7回書いています。

繰り返し文と配列で書き直す

では、このコードを繰り返し文と配列を使って書き直してみましょう。

配列を作る

まずは、配列を作りましょう。

この7個の変数を配列にまとめます。

const sunday = "日曜"
const monday = "月曜"
const tuesday = "火曜"
const wednesday = "水曜"
const thursday = "木曜"
const friday = "金曜"
const saturday = "土曜"

配列でまとめると、次のようになります。

const weekdays = ["日曜","月曜","火曜","水曜","木曜","金曜","土曜"]

「weekdays」という変数に曜日を入れています。

さて、曜日をまとめることができました。

次は、console.log を見てみましょう。

const weekdays = ["日曜","月曜","火曜","水曜","木曜","金曜","土曜"]
console.log(sunday)
console.log(monday)
console.log(tuesday)
console.log(wednesday)
console.log(thursday)
console.log(friday)
console.log(saturday)

インデックス番号を使って配列の要素を取り出して書くと、次のようになります。

const weekdays = ["日曜","月曜","火曜","水曜","木曜","金曜","土曜"]
console.log(weekdays[0])
console.log(weekdays[1])
console.log(weekdays[2])
console.log(weekdays[3])
console.log(weekdays[4])
console.log(weekdays[5])
console.log(weekdays[6])

これで曜日をコンソールに出すことができました。

しかし、console.log の数が減っていませんね。

これを解決するために「for文」を使いましょう。

for文を使う

for文を使って、console.log を一つにまとめましょう。

次のようにしてfor文を書いてみます。

const weekdays = ["日曜","月曜","火曜","水曜","木曜","金曜","土曜"]
for (let i = 0; i < 7; i++) {
  console.log(weekdays)
}

console.log を一つにすることができました。
しかし、このままではコンソールに曜日は出てきません。

なぜなら、console.log は、「weekdays」の変数を出力しているからです。

曜日を表示するには、配列の要素を インデックス番号を指定して取り出してあげる 必要があります。

const weekdays = ["日曜","月曜","火曜","水曜","木曜","金曜","土曜"]
for (let i = 0; i < 7; i++) {
  console.log(weekdays[0])
}

配列にインデックス番号「0」を指定しました。
しかし、これでは「日曜」の値しか取れません。

weekdays[0] // 日曜

では、どのようにして全てのインデックス番号を指定するのでしょうか。

全てのインデックス番号を指定するには、for文の「i」変数を使うことができます。

for文の「i」変数は、そのループの中で0から6までの数値が代入されます。

その数値を配列のインデックスの番号に合わせれば、うまいこと曜日を取得できそうです。

const weekdays = ["日曜","月曜","火曜","水曜","木曜","金曜","土曜"]
for (let i = 0; i < 7; i++) {
  console.log(weekdays[i])
}

各ループの値の変化は次のようになります。

実行結果は次のようになります。

日曜
月曜
火曜
水曜
木曜
金曜
土曜

配列の要素の数を使おう

最後に、for文の条件に書いてある「7」を配列の数に書き換えてみましょう。

for (let i = 0; i < 7; i++) {
  console.log(weekdays[i])
}

繰り返す処理は、配列の数だけ行えばいいので length を使って書き換えることができます。

for (let i = 0; i < weekdays.length; i++) {
  console.log(weekdays[i])
}

繰り返し文と配列で書き直した結果

これで完成です。

最終的に、次のようなコードになりました。

const weekdays = ["日曜","月曜","火曜","水曜","木曜","金曜","土曜"]
for (let i = 0; i < weekdays.length; i++) {
  console.log(weekdays[i])
}

以前のコード比べるとだいぶスッキリしましたね。

以前のコード：

const sunday = "日曜"
const monday = "月曜"
const tuesday = "火曜"
const wednesday = "水曜"
const thursday = "木曜"
const friday = "金曜"
const saturday = "土曜"
console.log(sunday)
console.log(monday)
console.log(tuesday)
console.log(wednesday)
console.log(thursday)
console.log(friday)
console.log(saturday)

繰り返し文と配列で書き直してみよう

では、実際に同じように繰り返し文と配列で書き直してみましょう。

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「繰り返し文と配列で書き直してみよう」と記述がされています。

その真下に、次のように書いてください。

// 繰り返し文と配列で書き直してみよう
const tokyo = "東京"
const newyork = "ニューヨーク"
const london = "ロンドン"
const sydney = "シドニー"
const honkon = "香港"
const seoul = "ソウル"
const paris = "パリ"
console.log(tokyo)
console.log(newyork)
console.log(london)
console.log(sydney)
console.log(honkon)
console.log(seoul)
console.log(paris)


const cities = ["東京", "ニューヨーク", "ロンドン", "シドニー", "香港", "ソウル", "パリ"]
for(let i = 0; i < cities.length; i++) {
  console.log(cities[i])
}

Chromeのコンソールで確認すると、次のように出力されているのが分かります。

for of文

繰り返し文と配列を組み合わて使う方法を見てきました。

実は、for文よりも、もっと便利に使える構文があります。

それは、「for of文（フォーオブ文）」です。

for of文を使うと、for文のように条件を指定しなくても配列の数だけループを回してくれます。

for of文の書き方

for of文のフォーマットは次のようになります。

for (要素 of 配列かオブジェクト) {
  繰り返しで使う処理
}

「要素」には、配列の要素がループごとに一つずつ入ります。

実際にコードで見てみましょう。

for of文は次のように書きます。

const weekdays = ["日曜","月曜","火曜","水曜","木曜","金曜","土曜"]
for (let day of weekdays) {
  console.log(day)
}

各ループの値の変化は次のようになります。

for文よりもスッキリして書くことができました。

forEach文

実は、開発の現場だとfor文を使うことはあまりありません。

その代わりに、forEach文という構文がよく使われます。

forEach文の方が使う頻度が多い ので覚えておきましょう。

forEach文の書き方

forEach文のフォーマットは次のようになります。

配列かオブジェクト.forEach((要素) => {
  繰り返しで使う処理
})

for of文と同じように、「要素」には、配列の要素がループごとに一つずつ入ります。

実際にコードで見てみましょう。

forEach文は次のように書きます。

const weekdays = ["日曜","月曜","火曜","水曜","木曜","金曜","土曜"]
weekdays.forEach((day) => {
  console.log(day)
})

各ループの値の変化は次のようになります。

for of文とforEach文を書いてみよう

では、実際にfor of文とforEach文を書いてみましょう。

サンプルコードの「スタート」フォルダの「index.js」を開いてみましょう。

「for of文とforEach文を書いてみよう」と記述がされています。

その真下に、次のように書いてください。

// for of文とforEach文を書いてみよう
// for of文
console.log("for of文で書きます！")
for (let city of cities) {
  console.log(city)
}

// forEach文
console.log("forEach文で書きます！")
cities.forEach((city) => {
  console.log(city)
})

Chromeのコンソールで確認すると、次のように出力されているのが分かります。

まとめ

本章では、JavaScriptの繰り返し文と配列の使い方について学びました。

最後にもう一度、重要なことを確認しましょう。

次章は、JavaScriptのオブジェクトについて解説します。