概要

この記事では、JavaScriptの繰り返し処理と配列・オブジェクトについて、超基本的な知識をメモ的にまとめています。
自分用の備忘録なのであしからず。

繰り返し処理

繰り返し処理とは、ある処理を条件を満たしている場合に繰り返し実行するという処理です。

この記事では、JavaScriptの繰り返し処理で代表的なwhile文とfor文についてまとめていきます。

while文

**「while文」**は繰り返し処理を行う方法の一つです。

while文の構文は次のようになっています。

index.js

while (条件式) {
  処理
}

条件式がtrueの間だけ{ }内の処理が繰り返し実行されます。{ }の後ろに;は必要ありません。

気を付ける点としては、処理内で必ず値を更新することです。値の更新を忘れてしまうと、条件式がfalseになることなく、永遠に処理が繰り返されてしまいます。

この無限ループは、パソコンに大きな負荷がかかってしまうので、必ず値の更新を忘れないようにしましょう。

while文を用いて、10から0までカウントダウンするプログラムを書いてみます。

index.js

let number = 10;
while (number >= 0) {
    console.log(number);
    number--;
}
//出力結果 : 10から0までが表示される

具体例をみていきます。

まず、let number = 10;で変数を定義します。

次にwhileのブロックになります。

条件式であるnumber >= 0でnumberが0より大きいか判定しています。最初は、10が代入されているので、trueとなりwhileブロックの処理が実行されます。

whileブロックの処理には、コンソールにnumberの値を表示する処理と**numberから1を引いて値を更新する処理**が書かれています。

これらの処理を終えると、またwhileブロックの先頭に戻り、条件式でnumberと0を比較します。numberには値が更新されて9が代入されているので、条件式はtrueとなり、また処理が行われます。

これを条件式がfalseになるまで繰り返します。

最終的には、numberが-1になった時、条件式がfalseとなるので、処理は実行されず繰り返しが終わります。

for文

**「for文」**も繰り返し処理を行うための方法の一つです。

できることはwhile文と変わりませんが、コードをシンプルに書くことができます。

構文は以下のようになっています。

index.js

while (条件式) {
  処理
}

for文では( )の中に「変数の定義」「条件式」「変数の更新」を;で区切って書きます。

先ほどwhile文で書いたカウントダウンをfor文で書いてみます。

index.js

for (let number = 10; number >= 0; number--) {
    console.log(number);
}
//出力結果 : 10から0までが表示される

while文と比べるとだいぶスッキリしていると思います。コードを見ていきましょう。

forの()の中を見ていきましょう。まず、let number = 10で変数を定義しています。
次に、number >= 0という条件式が書かれています。
最後に、number--で変数の値を更新しています。

コードの流れとしては、変数が定義されると、条件式を満たしているか判定されます。trueであれば、forブロックの処理が実行されます。例の場合だと、コンソールにnumberを出力します。
その後、numberは更新され、再度条件を満たしているか判定されます。

これを条件を満たさなくなるまで繰り返します。

最終的には、numberが-1になった時、条件式がfalseとなるので、処理は実行されず繰り返しが終わります。

配列

複数の値をまとめて扱う際には、「配列」を用います。
[値1, 値2, 値3]のように[]の中に値を,で区切って書きます。配列に入っている値を「要素」と呼びます。

配列は一つの値なので、定数に代入することができます。配列を代入する定数名は一般的に複数形にします。

配列が代入された定数を出力すると、配列がコンソールに出力されます。

コードを見てみましょう。

index.js

const players = ['Messi', 'Pique', 'deJong'];
console.log(players);
//出力結果 : ['Messi', 'Pique', 'deJong']

const numbers = [2, 3, 5, 7];
console.log(numbers);
//出力結果 : [2, 3, 5, 7]

このように、配列が入った定数をコンソールに出力すると、配列がそのまま出力されます。

配列の要素の取得

配列の要素にはそれぞれ「インデックス番号」が割り振られています。
インデックス番号は0から始まるので、一つ目の要素が0ということになります。

このインデックス番号を用いることで配列の要素を取得することができます。
配列[インデックス番号]と書きます。

具体的なコードをみてみましょう。

index.js

const players = ['Messi', 'Pique', 'deJong'];

console.log(players[0]);
//出力結果 : Messi

console.log(players[2]);
//出力結果 : deJong

このようにインデックス番号で指定した要素のみが、コンソールに出力されます。

配列の要素の更新

インデックス番号を用いて、要素に値を代入することでその要素を更新することができます。

index.js

const players = ['Messi', 'Pique', 'deJong'];

console.log(players[2]);
//出力結果 : deJong

//インデックス番号2の要素の値を更新する
players[2] = 'Sergio';
console.log(players[2]);
//出力結果 : Sergio

コードを見ていきましょう。

配列に3つの要素が入っています。

まず、console.log(players[2]);で3つ目の要素をコンソールに出力します。
次に、players[2] = 'Sergio';で要素の値を更新します。
もう一度、console.log(players[2]);で出力すると、出力結果が変わっていますね。

このように、値を更新することができます。

ここで、一つ疑問が生じます。
constで定義した値って更新できなかったんじゃないの？
そうです。constで定義した値を更新することはできなかったはずです。

実は、constで定義した値というのは、不変ということではありません。
constで定義した値は変数識別子が再代入できないというのが正しい解釈です。
つまり、配列を定義した定数は、配列自体が変わらなければ中身を変えてもいいということです。

そのため、先程の例でplayers = [Coutinho, Dembele, Fati]というように配列自体を再代入しようとした場合には、エラーが生じます。
大事なところなので、しっかり理解しておきたいところです。

繰り返し処理で配列を出力する

配列の要素が多くなると、全ての配列の要素を出力したいときに一つ一つ出力していくのは大変です。

そこで、for文を用いて配列の要素を取り出してみましょう。

index.js

const players = ['Messi', 'Pique', 'deJong'];

for (let i = 0; i < 3; i++) {
    console.log(players[i]);
}
//Messi
//Pique
//deJong

コードを見ていくと、まず定数を宣言し、配列を代入しています。
その次に、for文を書いています。

注目したいのは、console.log(players[i]);というように、インデックス番号にfor文で定義した変数を使っている点です。
このように、インデックス番号に変数用いてfor文で繰り返し処理をすることで各要素を出力することができます。

length

lengthは配列の要素数を取得する際に使われます。

**配列.length**とすることで、配列の要素数を取得することができます。

具体例を見てみましょう。

index.js

const players = ['Messi', 'Pique', 'deJong'];

console.log(players.length);
//出力結果 : 3

このように、配列.lengthの出力結果は、配列の要素数になります。

lengthを用いて、先ほどの繰り返し処理の条件式を書き直してみます。

index.js

const players = ['Messi', 'Pique', 'deJong'];
for (let i = 0; i < players.length; i++) {
    console.log(players[i]);
}
//Messi
//Pique
//deJong

コードで変わった部分は、for文の条件式のところです。
i < players.lengthとすることで、要素数だけ繰り返し処理を行うことができます。

オブジェクト

「オブジェクト」は、配列と同じく複数のデータをまとめて扱う際に用います。
オブジェクトは、それぞれの値にプロパティと呼ばれる名前をつけて管理します。

オブジェクトは以下のように書きます。

index.js

//オブジェクト
{プロパティ1: 値1, プロパティ2: 値2}

オブジェクトは{ }で囲みます。プロパティと値の間は:でつなぎます。プロパティと値はセットで一つの要素とみなされるので、それぞれのセットは配列と同じように,で区切ります。

オブジェクトも配列と同様に定数に代入することができ、出力するとオブジェクトがコンソールに表示されます。

具体例を見てみましょう。

index.js

const playerData = {name: 'Messi', team: 'FC Barcelona'};

console.log(playerData);
//出力結果 : {name: 'Messi', team: 'FC Barcelona'}

このように、オブジェクトを代入した定数を出力すると、オブジェクトがそのまま出力されます。

オブジェクトの値の取得

オブジェクトの値は、オブジェクト.プロパティ名とすることで取り出すことができます。
配列のインデックス番号がプロパティ名になった感じです。

オブジェクトの値を取り出すコードをみてみましょう。

index.js

const playerData = {name: 'Messi', team: 'FC Barcelona'};

console.log(playerData.name);
//出力結果 : Messi

このように、オブジェクトの中からプロパティがnameである値を取り出すことができました。

オブジェクトの値の更新

オブジェクトも配列と同じように、プロパティ名を使って更新することができます。
オブジェクト.プロパティ名 = 新しい値と書きます。

先程の例のplayerDataのnameの値を更新してみましょう。

index.js

const playerData = {name: 'Messi', team: 'FC Barcelona'};

console.log(playerData.name);
//出力結果 : Messi

playerData.name = 'Leo Messi';
console.log(playerData.name);
//出力結果 : Leo Messi

コードをみていきます。

まず、定数playerDataを宣言し、オブジェクトを代入します。
console.log(playerData.name);でプレイヤーの名前を出力します。
プレイヤーの名前をやっぱりフルネームに変更しようということで、playerData.name = 'Leo Messi';として値を更新します。
再度console.log(playerData.name);を出力すると、出力されるプレイヤーの名前が変わっています。

オブジェクトの場合も、配列と同じようにconstで定義していてもオブジェクトの中身は更新が可能です。

オブジェクトを要素にもつ配列

配列の中にオブジェクトをコンマで区切って書くことで、オブジェクトを要素とした配列を作ることができます。
各要素が長くなるので、要素ごとに改行します。

オブジェクトは配列の一要素なのでインデックス番号が割り振られています。インデックス番号を用いることで、特定の要素を取り出すこともできます。

また、配列の中のオブジェクトの値を取り出すには、プロパティ名を用います。
配列[インデックス番号].プロパティ名のように書くことで特定の値を取り出すことができます。

具体例を見てみましょう。

index.js

//オブジェクトが要素に入った配列を定義する
const playerData = [
    {name: 'Messi', uniformNumber: 10},
    {name: 'Pique', uniformNumber: 3},
    {name: 'deJong', uniformNumber: 21}
];

//配列を出力する
console.log(playerData);
//[
//  { name: 'Messi', uniformNumber: 10 },
//  { name: 'Pique', uniformNumber: 3 },
//  { name: 'deJong', uniformNumber: 21 }
//]

//配列の中のオブジェクトを出力する
console.log(playerData[0]);
//{ name: 'Messi', uniformNumber: 10 }

//配列の中のオブジェクトの中の値を出力する
console.log(playerData[0].name);
//Messi

今回の記事でまとめていることの、組み合わせですね。特に難しいとこをはないと思います。

undefined

配列の存在しないインデックス番号の要素や、オブジェクトの存在しないプロパティの要素を取得しようとすると、undefinedと出力されます。
undefinedは特別な値で、値が定義されていないことを意味しています。

index.js

const playerData = [
    {name: 'Messi', uniformNumber: 10},
    {name: 'Pique', uniformNumber: 3},
    {name: 'deJong', uniformNumber: 21}
];

//存在しないインデックス番号の要素を取り出そうとしてみる
console.log(playerData[5]);
//undefined

//存在しないプロパティの値を取り出そうとしてみる
console.log(playerData[1].team);
//undefined

JavaScriptでは、値が存在しなくてもプログラムが動いてしまうので、注意が必要です。

配列やオブジェクトを組み合わせる

実際には、配列やオブジェクトを組み合わせて使います。
配列の要素をオブジェクトにしたり、オブジェクトの値を配列にしたりすることができます。

index.js

const playerData = {
    barcelona: [
        {name: 'Messi', uniformNumber: 10},
        {name: 'Pique', uniformNumber: 3},
        {name: 'deJong', uniformNumber: 21},
        {name: 'Sergio', uniformNumber: 5}
    ],
    realMadrid: [
        {name:'Ramos', uniformNumber: 4},
        {name:'Hazard', uniformNumber: 10}
    ]
};

このように、配列やオブジェクトを組み合わせることで、大量のデータも管理できるようになります。

まとめ

今日まとめたことを組み合わせて、「背番号△△ : 選手名」と繰り返し処理で出力するプログラムを書いてみました。

index.js

onst playerData = {
    barcelona: [
        {name: 'Messi', uniformNumber: 10},
        {name: 'Pique', uniformNumber: 3},
        {name: 'deJong', uniformNumber: 21},
        {name: 'Sergio', uniformNumber: 5}
    ],
    realMadrid: [
        {name:'Ramos', uniformNumber: 4},
        {name:'Hazard', uniformNumber: 10}
    ]
};

console.log('FC Barcelonaの選手紹介')
for (i = 0; i < playerData.barcelona.length; i++) {
    console.log(`背番号 ${playerData.barcelona[i].uniformNumber} : ${playerData.barcelona[i].name}`);
}

// FC Barcelonaの選手紹介
// 背番号 10 : Messi
// 背番号 3 : Pique
// 背番号 21 : deJong
// 背番号 5 : Sergio

こんな感じですね。
自分で手を動かしてみると理解が深まるので、オブジェクトの中身を自分の好きなものに置き換えてやってみると楽しいですよ。

最後まで読んでいただいてありがとうございます。ではまた。

概要

目次

繰り返し処理

while文

for文

配列

配列の要素の取得

配列の要素の更新

繰り返し処理で配列を出力する

length

オブジェクト

オブジェクトの値の取得

オブジェクトの値の更新

オブジェクトを要素にもつ配列

undefined

配列やオブジェクトを組み合わせる

まとめ