JavaScriptの 繰り返し(ループ)処理 について学習します。

この繰り返し処理は、例えば「クラスの全員の名前を表示させたい」場合や、「全員のテストの点数を合計したい」場合など、まとまったデータを1つずつ参照する場合に使用します

配列について

Array(配列)

一つの変数に複数の値をリスト形式に集めたもの

値である文字列数値真偽値などを一つのカテゴリーで複数集めたものを配列といいます。

例えば、カレーライスに必要な材料というカテゴリーで「お肉、にんじん、たまねぎ、じゃがいも、ルー、水、油」というを配列を作成してみましょう。

配列を使えば、中身のデータを先頭から末尾まで繰り返し(ループ)処理を実行し、データに対して同じ処理を実行することや、数値の合計を計算するといったことができるようになります。

配列は、文字列や数値、真偽値と同じく値の型(Array)となります。

配列の作り方とデータの取り出し方


// 空の配列を変数に代入します
const array = [];
// 空の配列をコンソールに出力します
console.log(array);

// カレーの材料を格納した配列を変数に代入します
const curry = ['お肉', 'にんじん', 'たまねぎ', 'じゃがいも', 'ルー', '水', '油'];
// 配列をコンソールに出力します
console.log(curry);

// 配列の中身のデータ数をコンソールに出力します
console.log(curry.length); // 7

// 配列の先頭をコンソールに出力します
console.log(curry[0]); // お肉

// 配列の末尾のデータをコンソールに出力します
console.log(curry[curry.length - 1]); // 油

// 'たまねぎ' を '玉ねぎ' に変更します
curry[2] = '玉ねぎ';
                

配列の操作

配列には様々な操作を行える関数が定義されています。この関数を使用することで、値を追加したり、削除したりなど多くの操作を行うことができます。


// 配列の最後に新しいデータを追加します
curry.push('お米');
// 配列の最後のデータを削除します
curry.pop();

// 配列の先頭に新しいデータを追加します
curry.unshift('お米');
// 配列の先頭のデータを削除します
curry.shift();
                

for文について

for loop processing by JS(for文のループ処理)

for文 は繰り返し処理を行うためのものです。for文 には次のような機能があります。

  • カウンター: ループの最初に、初期化される値を宣言します。
  • 終了条件: ループが終了する 条件 を設定します。
  • イテレーター: ループごとの最後に行われる処理です。主に カウンター で宣言した値を増加(インクリメント)させます。

つまり、カウンター で設定した値を イテレーター で増加させて 終了条件 に達するとループを終了する、というような処理になります。

ループが何回行われるか予め分かっている場合 配列の反復処理 などでは for文 を使用します。

for文の構文

for ( カウンター ; 終了条件 ; イテレーター ) {
    繰り返し処理
}
                

for文の使い方

次は、100回繰り返すループ処理の例です。


// 0 から 99 まで繰り返す処理
for ( let i = 0 ; i < 100 ; i++ ) {
    console.log(i);
}
                

次の例では、先程作成した curry配列の中身を全て表示させてみます。
2番目のループ処理ではカレーに必要な材料について配列の中からデータを取り出し、文字列に連結しています。

カレーの材料を全てコンソールに出力する処理
for ( let i = 0; i < curry.length; i++ ) {
    console.log(curry[i]);
}
// お肉
// にんじん
// たまねぎ
// じゃがいも
// ルー
// 水
// 油

let text = 'カレーに必要な材料は、';
for ( let i = 0; i < curry.length; i++ ) {
    text += curry[i];
    // 最後のデータの後には'、'を付けない
    if( i !== curry.length - 1 ) {
        text += '、';
    }
}
text += 'です';
console.log(text); // カレーに必要な材料は、お肉、にんじん、玉ねぎ、じゃがいも、ルー、水、油です
                

無限ループの例


// * 実行しないでください
// 終了条件が常に true(真)であるため、ループし続けてしまいます
for(let i = 0; true; i++) {
    console.log('無限ループです');
}
                

breakcontinue

for文 では break を使うことで、ループを終了することができます。また、 continue を使えば、処理を中断して次のループに移行することができます。

breakcontinue の例


// 数値が格納された配列を作成します
const numberList = [23, 56, 2, 5, 0, 45, 6];

// ----------
// 例: 配列内にある 数値 0 のインデックス番号を調べたい場合
// ----------
// index を宣言し -1 で初期化します
let index = -1;
for(let i = 0; i < numberList.length; i++) {
    if(numberList[i] === 0) {
        // 0 が見つかったので index に i を代入し、 break でループ処理を抜けます
        index = i;
        break;
    }
}
console.log('数値0のindex番号は ' + index + ' です' ); // 数値0のindex番号は 4 です

// ----------
// 例: 配列内の 偶数 をコンソールに出力したい場合
// ----------
for(let i = 0; i < numberList.length; i++) {
    // 数値を 2で割った余り が 0 であれば、変数に true、そうでなければ false を代入します
    const isEvenNumber = numberList[i] % 2 === 0;
    // 偶数でなければ continue でこの後の処理をスキップして次のループに移行します
    if( !isEvenNumber ) {
        continue;
    }
    console.log(numberList[i] + ' は偶数です');
}
// 56 は偶数です
// 2 は偶数です
// 0 は偶数です
// 6 は偶数です
                

while文について

for文と異なり、ループが何回行われるか分からない場合は while文 を使用します。

そのため必要なものは、ループが終了する条件 のみとなります。

while文の構文

while ( 終了条件 ) {
    繰り返し処理
}
                

while文の例

以下の例は、0から19までの乱数が代入される変数 r に 定数 x と同じ値が入るまでループを行う処理です。


const x = 7;
let r = -1, i = 0;
while ( r !== x ) {
    r = Math.floor(Math.random() * Math.floor(20));
    i++;
}
console.log( i + ' 回目で ' + x + ' が代入されました' );
                

for文と同じく、breakcontinue を使用することができます。

また、for文と異なり無限ループになってしまう危険性も高いので使い方には気を付けてください。

課題

ドラえもんに出てくるキャラクター5人の名前で配列を作成し、インデックス番号が3番のデータをコンソールに表示するプログラムを作成してください。

課題1で作成した配列のインデックス番号 2番と3番 のデータを入れ替えて インデックス番号が3番 のデータをコンソールに表示するプログラムを作成してください。

配列内の  の数を数えてコンソールに表示するプログラムを作成してください。

const gennders = ['男', '女', '女', '女', '男', '女', '男', '男', '女', '男', '女'];
// ここからコーディング
                
ウォーリーを探せ!配列内の ウォーリーのインデックス番号 をコンソールに表示するプログラムを作成してください。

const wallys = ['ウーフ', 'ウェンダ', 'しろひげ', 'ウォーリー', 'オドロー', 'ウォーリー親衛隊'];
const wally = 'ウォーリー';
// ここからコーディング