LoginSignup
13
5

More than 1 year has passed since last update.

@katao_eng(かたお)

初心者による初心者のためのJavaScript基礎２【配列・条件分岐・繰り返し】

Last updated at Posted at 2022-07-23

目次

1. 配列
 1-1. 配列の宣言
 1-2. 要素の取得
 1-3. 要素の追加と削除
2. 条件分岐
 2-1. 比較演算子
 2-2. if文
 2-3. switch文
3. 繰り返し（ループ）
 3-1. for文
 3-2. while文
 3-3. break文とcontinue文
 3-4. forEachメソッド
4. JavaScript基礎シリーズ
5. 参考記事

1. 配列

配列とは複数の値を一つのデータのように扱うことができるデータ構造のことです。

配列の宣言

JavaScriptで配列を宣言する方法は2種類あります。

const students = ["Qii太郎", "Zenn次郎", "はてなブ郎"];
// 配列リテラル

const students = new Array("Qii太郎", "Zenn次郎", "はてなブ郎");
// 配列コンストラクタ

配列コンストラクタで数値を格納する際は注意が必要です。
配列コンストラクタでは、引数に一つの数値を渡すとその数の配列要素を作成することになります。

const scores = new Array(2);

console.log(scores); //出力結果 : [empty × 2]

配列を宣言する際は配列リテラルを使う方が無難です。

要素の取得

配列変数を指定すると配列全ての要素が取得されます。
また、lengthプロパティを使用すると要素の数が取得できます。

const students = ["Qii太郎", "Zenn次郎", "はてなブ郎"];

console.log(students);
// 出力結果 : Qii太郎,Zenn次郎,はてなブ郎

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

特定の要素を取得したい場合は要素番号を指定します。

console.log(students[0]); //出力結果 : Qii太郎
console.log(students[1]); //出力結果 : Zenn次郎
console.log(students[2]); //出力結果 : はてなブ郎

Point
要素番号は0から始まります

要素の追加と削除

要素を追加する場合はpushメソッドを使用します。

students.push("note四郎");

console.log(students);
// 出力結果 : Qii太郎,Zenn次郎,はてなブ郎,note四郎

要素の削除はdelete演算子を使用します。
気をつけたいのは削除しても完全に要素がなくなるわけではなく、要素が空になるということです。
（要素自体を削除する方法をコメント欄で教えていただきました）

delete students[3];

students.push("個人ブ郎");

console.log(students); //出力結果 : Qii太郎,Zenn次郎,はてなブ郎,,個人ブ郎
console.log(students.length); //出力結果 : 5
console.log(students[3]); //出力結果 : undefined
console.log(students[4]); //出力結果 : 個人ブ郎

delete演算子で削除しても要素がなくなるわけではなく、要素の数も変わりません。

2. 条件分岐

特定の条件に一致するかどうかで処理を分けることができます。
条件に一致することをtrue、一致しないことをfalseと表現します。
これを真偽値と言います。

真偽値
条件に一致　・・・　true
条件に不一致 ・・・　false

比較演算子

値を比較するときは比較演算子を使用します。

比較演算子 使用例 内容
< a < b aはbより小さいか
<= a <= b aはb以下か
> a > b aはbより大きいか
>= a >= b aはb以上か
=== a === b aとbは等しいか
!== a !== b aとbは等しくないか

JavaScriptでは値が等しいかどうかを比較する場合、==と===の2種類が存在します。

等価演算子と厳密等価演算子
==(等価演算子)　・・・　値 が一致するかどうか
===(厳密等価演算子)　・・・　値 と 型 が一致するかどうか

if文

if文は次のように記載します。

if (条件式) {
    // 条件式がtrueの時に実行される処理
    // （falseの時は処理されない）
}

if (条件式) {
    // 条件式がtrueの時に実行される処理
} else {
    // 条件式がfalseの時に実行される処理
}

if (条件式1) {
    // 条件式1がtrueの時に実行される処理
} else if (条件式2) {
    // 条件式1がfalseで条件式2がtrueの時に実行される処理
} else {
    // 条件式が全てfalseの時に実行される処理
}

プログラムは上から処理されていくので、上記のように記載した場合で条件式1と条件式2のいずれもtrueになる場合、条件式1の処理しか実行されません。
else ifは複数記載することもできます。

例
const age = 35;

if (age >= 40) {
console.log("年齢は40歳以上です。");
} else if (age >= 30) {
console.log("年齢は30代です。");
} else {
console.log("年齢は30歳未満です。");
}

// 出力結果 : 年齢は30代です。

switch文

switch文は複数の値の中から式に一致する値の処理を実行する記載方法です。
if文でも同様の記載はできますが、比較する値が多い場合はswith文の方が簡潔に記載することができます。

switch (式){
    case 値1:
        // 式が値1の時に実行される処理
        break;
    case 値2:
        // 式が値2の時に実行される処理
        break;
    case 値3:
        // 式が値3の時に実行される処理
        break;
    default:
        // 式の値がいずれのcaseとも一致しない場合に実行される処理
}

break文で処理が終了します。
if文と違ってbreak文がないとcaseと値が一致した以降の処理が全て実行されます。
また、該当する値がない場合はdefaultに記載した処理が実行されます。
該当する値がない場合に処理を何も実行させない場合はdefaultを省略することもできます。

例
const language = "Java";

switch (language){
    case "PHP":
        console.log("言語はPHPです。");
        break;
    case "Ruby":
        console.log("言語はRubyです。");
        break;
    case "Java":
        console.log("言語はJavaです。");
        break;
    default:
        console.log("言語が指定されていません。");
}

// 出力結果 : 言語はJavaです。

switch文についてはこちらの記事がとてもわかりやすかったです。
（Javaの記事ですが基本的なswitch文の書き方は同じです）

3. 繰り返し（ループ）

for文やwhile文を使用することで一定の回数や特定の条件下で同じ処理を繰り返すことができます。

for文

for文は次のように記載します。

for (初期化式; 条件式; 加算式) {
    // 繰り返し実行する処理
}

初期化式
for文の中で使用する変数の初期値を定義します。
ここで定義される変数はカウンタ変数とも呼ばれます。
慣習的にiを変数として使用することが多いですが任意の変数を使用できます。

条件式
何回繰り返すかを指定します。

加算式
処理後に変数をどのように増減させるかを指定します。

条件式がtrueの間、処理が繰り返されます。
カウンタ変数はfor文のループの中で使用できます。

例
for ( let i = 1; i <= 3; i++ ) {
    console.log(i + "回目の処理です。");
}

// 出力結果↓↓
// 1回目の処理です。
// 2回目の処理です。
// 3回目の処理です。

while文

while文は次のように記載します。

while (条件式){
    // 繰り返し実行する処理
}

for文と同じく条件式がtrueとなる間、処理を繰り返します。
for文と違い回数が決まっていない場合に使用します。
また、初期化式や加算式がないので、条件式の変化をwhile文の中で記載する必要があります。

例
let num = 0;

while (num < 3) {
    console.log(num);
    num++;
}

// 出力結果↓↓
// 0
// 1
// 2

break文とcontinue文

switch文でも使用しましたが、繰り返し処理でもbreak文が使用できます。

break
以降の処理は実行されず、ループ処理が終了

同様にcontinue文も使用することができます。

continue
以降の処理は実行されず、次のループへ

例
console.log(`3の倍数の時だけアホになります。\n100まで数えます。`);
let num = 0;

while (num < 100) {
    num++;
    if (num % 3 === 0) {
        console.log(`٩( ᐛ )${num}!`);
        continue;
        // これ以降の処理は実行されず次のループへ
    }
    console.log(num);
    if (num === 10) {
        console.log("やっぱり終わります。");
        break;
        // これ以降の処理は実行されずループ自体が終了
    }
}

// 出力結果↓↓
// 3の倍数の時だけアホになります。
// 100まで数えます。
// 1
// 2
// ٩( ᐛ )3!
// 4
// 5
// ٩( ᐛ )6!
// 7
// 8
// ٩( ᐛ )9!
// 10
// やっぱり終わります。

forEachメソッド

配列にforEachメソッドを使用することで、配列の要素を一つずつに対して繰り返し処理が実行されます。
次のように記載します。

配列.forEach(function(value){
    // 実行する処理
});

forEachメソッドの引数に関数（コールバック関数）を記載します。
関数については別の記事で説明していきます。
コールバック関数に引数を指定することで配列の要素が順に入ります。

例
const students = ["Qii太郎", "Zenn次郎", "はてなブ郎"];

students.forEach(function(student){
    console.log(student);
});

// 出力結果↓↓
// Qii太郎
// Zenn次郎
// はてなブ郎

コールバック関数には第2引数と第3引数を指定することもできます。

配列.forEach(function(value, index, array){
    // 実行する処理
});
第1引数 (value) 要素の値
第2引数 (index) 要素のインデックス
第3引数 (array) 配列
次のような使い方ができます。
例
const students = ["Qii太郎", "Zenn次郎", "はてなブ郎"];

students.forEach(function(student, i, students){
    console.log(`出席番号${i + 1}:${student}(全校生徒:${students})`);
});

// 出力結果↓↓
// 出席番号1:Qii太郎(全校生徒:Qii太郎,Zenn次郎,はてなブ郎)
// 出席番号2:Zenn次郎(全校生徒:Qii太郎,Zenn次郎,はてなブ郎)
// 出席番号3:はてなブ郎(全校生徒:Qii太郎,Zenn次郎,はてなブ郎)

students.forEach(function(student, i, students){
    if (students[i] === "Zenn次郎") {
        console.log(`本日の日直は${student}さんです。`);
    }
});

// 出力結果 : 本日の日直はZenn次郎さんです。

for文を使用しても同様の記載ができますが、存在しない要素に対しての処理が異なります。

const students = ["Qii太郎",, "はてなブ郎"];

students.forEach(function(student){
    console.log(student);
});

// 出力結果↓↓
// Qii太郎
// はてなブ郎

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

// 出力結果↓↓
// Qii太郎
// undefined
// はてなブ郎

forEachメソッドでは存在しない要素に対しては処理が実行されないが、
for文では存在しない要素に対しても処理が実行される

4. JavaScript基礎シリーズ

1. 変数
2. 配列・条件分岐・繰り返し　←今ここ

5. 参考記事

【初心者向け】JavaScriptの配列の基礎的な使い方！プログラミングに配列は必須！
【JavaScript入門】配列の使い方と操作まとめ（初期化・追加・結合・検索・削除）
【JavaScriptの条件分岐】if文の書き方/使い方 - サンプルコードとあわせて解説
【プログラミング基礎】スクラッチで真偽（True, False）を理解しよう！
条件分岐 · JavaScript Primer #jsprimer
【JavaScript入門】比較演算子の使い方まとめ (==/===/OR/AND)
【入門】JavaScriptのswitch文の書き方をサンプルコードで解説！
while文を使った繰り返し処理
Java | switch文を使った条件分岐
【JavaScriptの入門】繰り返し処理 -for文
【JavaScriptの入門】繰り返し処理 -while文
顔文字「٩( ᐛ )و」は馬鹿にしてるときに使う？
JavaScript | 配列の要素を順に取得する(forEach)
JavaScriptでforEachメソッドを使用する方法 | IT職種コラム

13
5
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
13
5