【基本を抑える_03】処理の流れ

判定処理の基本

判定処理は、判定を行い、判定結果によって、別の処理を行うために使います。

判定処理は「if」を使って条件を書きます。

let sample = 1;

// 条件「sampleが0より大きいか？」
if(sample > 0) {
  // 0より大きい場合の処理
  alert('0より大きいです');
}
else {
  // 0より大きくない場合の処理
  alert('0より大きくないです');
} 

上記の例の場合、sampleに1が入っているため、0より大きいと判定されます。

判定処理で条件を追加する時は、「else if」を使って条件を書きます。

let sample = 0;

// 条件で「else if」を使う例
if(sample > 0) {
  // 0より大きい場合の処理
  alert('0より大きいです');
}
else if (sample < 0) {
  // 0より小さい場合の処理
  alert('0より小さいです');
}
else {
  alert('値は0です');
} 

上記の例の場合、sampleに0が入っているため、0であると判定されます。

繰り返し処理の基本（for文）

繰り返し処理は、指定の回数、同じ処理を行う場合などに使用します。

繰り返し処理は「for」を使って条件を書きます。

// 3つの値を配列に入れる例
let total = 0;

for(let idx=1; idx <= 10; idx++) {
  total = total + idx;
}

alert(total);

上記の例の場合、１から10の値を足していき、合計を表示します。その合計は55です。

繰り返しの中で使われる値をわかりやすくイメージにしました。

繰り返しに関しては、

• 繰り返しの回数を保持する変数
• 繰り返しの条件
• 繰り返しごとに現在の繰り返し回数をカウント

の３つを設定します。

繰り返しの回数を保持する変数

繰り返しをする上では、

繰り返している回数を確認するための値が必要です。

この値は、繰り返しごとに値が変わるので、

「変数」として定義する必要があります。

そのため、

for(let idx = 1; idx <= 10; idx++) {
 :
}

この繰り返しの中で、

let idx = 1;

このように変数「idx」を定義して、

初期値として「1」を設定しています。

繰り返しの条件

繰り返しを行うということは、

条件がないと、無限に繰り返すことになってしまいます。

この「繰り返す条件」についても、

繰り返し処理として決めてあげる必要があります。

for(let idx = 1; idx <= 10; idx++) {
 :
}

この処理の中の

idx <= 10;

という部分が、

繰り返しの処理の条件になり、

変数「idx」が、10以下である場合に処理が行われます。

繰り返しごとに現在の繰り返し回数をカウント

繰り返しをしていく中で、

繰り返しの回数を変数で管理（上記の例では「idx」）しますが、

この値を繰り返しのたびに１を加えていく必要があります。

値のイメージとしては、

繰り返し１回目：変数「idx」は「1」
繰り返し２回目：変数「idx」は「2」
　：　　　　　　　　　：

このように、

繰り返しのたびに、

繰り返しの回数を保持している変数の値を増やしていきます。

これを

for(let idx = 1; idx <= 10; idx++) {
 :
}

この繰り返し処理の中で、

idx++

という形で、

繰り返しのたびに変数「idx」に対して、

１を加えていくという処理を行っています。

ここまで説明したfor文については、

繰り返し処理でよく使うことになるので、

しっかりと理解しておきましょう。

// 設定の順番
for(設定１;設定２;設定3) {
 　繰り返しで行う処理
}

// 設定の例
for(let idx = 1; idx <= 10; idx++) {
  // 繰り返しごとに変数「idx」の値をコンソールに表示
  console.log(idx);
}

繰り返し処理の基本（while文）

繰り返し処理としては、

「while」文という繰り返しの方法もあります。

この「while」を使うときは、

// 3つの値を配列に入れる例
let loop = 0;

while(loop < 3) {
  // コンソールに表示
  console.log(loop);

  // 繰り返しのたびに１を加える
　loop++;
}

このように書きます。

この結果は、

0
1
2

となり、

繰り返しの判定で使っている「loop」という値が、

３より小さい場合に繰り返されます。

イメージを図にすると

このようになります。

注意点として

• 繰り返しの条件に当てはまる場合、「無限」に繰り返される

ということが大切です。

条件が必ず終わるように確認してから実行しましょう。

参考サイト

この記事の内容は、

「初心者のためのWeb入門」

のサイトに記載があるので、

そちらを参考にしてください。

初心者のためのWeb入門（JSの基本）