javascriptの構成要素-条件式と繰り返し文-

目次

更新履歴

• 2020/10/14 7:30 コード例を修正
• 2020/10/02 7:30 break文とcontinue文のパートを加筆
• 2020/10/01 8:00 繰り返し文のセクションを加筆．タイトルを修正
• 2020/09/30 7:00 条件文のnot演算子部分を修正
• 2020/09/29 7:00 初回投稿

この記事の目的

• JavaScriptの関しての知識をまとめています．
• 参考サイトの内容を要約あるいは抜粋，それらの解釈を中心に書いています．
• 参考サイトの一部または全部の翻訳を含んでいます．
• コード上の明らかな間違いがありましたらコメントいただければ幸いです．

関連記事

• その1（立ち位置，主な機能，変数，数値と演算子）はこちら
• その2（文字列と配列）はこちら
• その4（関数）はこちら

条件文

if ... else 文

基本的な文構造は以下の通り．

    if ( condition1 ) {
        condition1が true の場合に実行されるコード
    }
    else if ( condition2 ) {
        condition1が false でcondition2が true の場合に実行されるコード
    }
    else {
        condition1 も condition2 も false の場合に実行されるコード
    }

if文として必須なのは最初の条件式のみで，else以下は条件次第．

    if ( condition1 ) {
        condition1が true の場合に実行されるコード
    }

if文は入れ子（ネスト）にすることができる．入れ子が深くなりすぎると条件判定が複雑になるので入れ子が3つ以上（以下の例は2つ）になる場合は条件を再考して入れ子が浅くなるようした方がよい．

 <input id="maxTemp" type = "text" >    

  <select id='weather' onchange="WeatherMessage()">
    <option value='晴れ'>晴れ</option>
    <option value='曇り'>曇り</option>
    <option value='雨'>雨</option>
    <option value='雪'>雪</option>
    </select>
  <p>
  </p>

    function WeatherMessage() {
        weather = document.getElementById('weather').value;
        maxTemperature = document.getElementById('maxTemp').value;
        para = document.querySelector('p');
        if (weather === '晴れ') {
          if (maxTemperature < 25) {
              para.textContent = `天気は晴れで，最高気温は${maxTemperature}度です．とても過ごしやすい1日になるでしょう．`;
          } else if (maxTemperature >= 35) {
              para.textContent = `天気は晴れで，最高気温は${maxTemperature}度です．熱中症に注意しましょう．`;
          }
        }
    }

• 1行でif文を書くことができるが，基本的には使わない方がよい．（改行やインデントする書き方の方が構造把握をしやすいため）

• 比較演算子は，等しいか判定する===,!===，大小関係を判定する<,>,<=,>=がある．

条件判定

条件判定(condition)の部分は，基本的にtrue，条件を満たさない場合のみfalseに変わると考えておくとよい．falseになるのは以下の場合．

• false（boolean型で条件を満たさない．6 < 3のような場合）
• undefined(値が存在しない，宣言されていない)
• null（「null」が代入されている）
• 0（二進数の「0」）
• NaN（非数．ゼロで割り算をしたり，平方根にマイナスが入っていたりする場合に発生）
• 空文字列 ('') （文字列型で文字列が入っていない．入力フォームで必須項目が入力されていない）

したがって，ある値がtrueであるか，存在するかを判定したい場合はその値を条件式に使うだけでよい．

let shopOpened = false; //営業時間前なのでお店は空いていない
let openState = '';
if (shopOpened) { // '=== true' を書かなくとも判定される．今回は「false」
  openState = 'open now';
} else {
  openState = 'closed'; //こちらが実行される
}
console.log(openState);

and, or, not演算子

複数の条件をすべて，あるいはいずれか満たす場合の記述はand(&&),or(||)演算子を使う．

    let myNum = 16384;
    if(myNum % 2 === 0 && myNum % 3 === 0) {
        console.log(`${myNum}は6の倍数です．`);
    }
    else if(myNum % 3 === 0){
         console.log(`${myNum}は3の倍数です．`);
    }
   else if(myNum % 2 === 0){
         console.log(`${myNum}は2の倍数です．`);
    }
       else {
         console.log(`${myNum}は2の倍数でも3の倍数でも6の倍数でもありません．`);
    }
    let isFriday = 'false';
    let isHoliday = 'true';
    if(isFriday || isHoliday) { //金曜日か休日であるので「true」
        console.log('飲みに行きましょう！'); 
    }

否定の条件を用いるならば，not(!)演算子を使う．論理関係が逆転するのでいつでも使い勝手が良いわけではなく，反対の条件時の処理が少ない場合に使えるとよい．

    let deviceState = false;
    let messageFromPower;
    // デバイス状態がオフ時の処理はオンを促すメッセージのみなので先に処理しておく方がわかりやすい
    if(!deviceState) { 
      messageFromPower = 'just please your device on.' 
      alert(messageFromPower);
      }
    else {
        // processes when device is on.
    }

switch 文

選択肢が複数あるような場合（与えられた数字の範囲で場合分けがあるなど）はswitch文を 使うとコード記述量が減らせる場合もある．

    let myScore = 75;
    switch (true){ //ここの値とcase内が比較されるので不等式を使う場合は「true」
        case (myScore >= 80 && myScore <= 100) :
            console.log('大変よくできました');
            break;
        case (myScore >= 60 && myScore < 80) :
            console.log('よくできました');
            break;
        case (myScore >= 0 && myScore < 60):
            console.log('次は頑張りましょう');
            break;
        default :
            console.log('範囲外の数字が入力されました．');
    }

三項演算子

選択肢が2つあり，そこから1つを選ぶような場合にこの演算子を使うとコードを節約できる． デバッグ時にtrue判定されているのかfalse判定なのかわからないなどの欠点もあるのでトグル的な切り替え（on/off）など選択肢が2つしかない単純な判定の場合に限る方がよい．

    para = document.querySelector('p');
    let isHoliday = false;
    let message = ( isHoliday ) ? '9時に起きましょう．' : '7時に起きましょう．'
    para.textContent = message;

参考サイト

条件式

繰り返し文

反復文，ループとも呼ばれ，ある一定回数同様の操作を繰り返すために用いられる構文．以下のような要素を持つ．

• カウンター: 条件式の対象となる値で，ループの開始時点で初期化される部分．let i = 0;のような使い方をされる．
• 条件: ループを続けるか止めるかを判断する部分．結果がtrue/falseになるような記述になる．i < a.length;のような使い方をされる
• イテレータ: カウンタの値を増加（あるいは減少）させる部分．i++のような使い方をされる．

条件判定が最終的にfalseにならなければ無限ループとなり，ブラウザの強制終了やクラッシュの原因となる．よって条件判定のセットは慎重に行う必要がある．

　ループの種類

forループ

もっとも標準的なループ．ループに必要な要素が最初にまとまっており，分かりやすく，記述ミスも少ない．

for (初期化処理; 条件; 最後の式) {
  // 実行するコード
}

let regionJapan = ['北海道','東北','関東','中部','近畿','中国','四国','九州','沖縄'];
let info = '日本は，';
const para = document.querySelector('p');
for (let i = 0; i < regionJapan.length; i++) {
    if (i === regionJapan.length - 1) {
        info += `${regionJapan[i]}の各地方に分かれます．`;
    } else {
        info += `${regionJapan[i]}, `;
    }
}
para.textContent = info; // 日本は，北海道, 東北, 関東, 中部, 近畿, 中国, 四国, 九州, 沖縄の各地方に分かれます．

whileループ，do...whileループ

whileループ

初期化処理がループ外に，イテレータ部分は中括弧が閉じる直前にある．条件が複雑になってくると使う場面が出てくる．

初期化処理
while (条件) {
  // 実行するコード
  最後の式
}

let regionJapan = ['北海道','東北','関東','中部','近畿','中国','四国','九州','沖縄'];
let info = '日本は，';
const para = document.querySelector('p');
let i = 0;
while ( i < regionJapan.length) {
if (i === regionJapan.length - 1) {
    info += `${regionJapan[i]}の各地方に分かれます．`;
} else {
    info += `${regionJapan[i]}, `;
}
i++;
}
para.textContent = info; //日本は，北海道, 東北, 関東, 中部, 近畿, 中国, 四国, 九州, 沖縄の各地方に分かれます．

do...whileループ

whileループとの違いは，実行するコードが条件式より先にあるのでループが最低でも1回は実行されること．1回は処理をしたい，1回処理することが大半で2回以上繰り返すことは少ない処理に有効．

初期化処理
do {
  // 実行するコード

  最後の式
} while (条件);

let regionJapan = ['北海道','東北','関東','中部','近畿','中国','四国','九州','沖縄'];
let info = '日本は，';
const para = document.querySelector('p');
let i = 0;
do {
    if (i === regionJapan.length - 1) {
        info += `${regionJapan[i]}の各地方に分かれます．`;
    } else {
        info += `${regionJapan[i]}, `;
    }
i++;
} while (i < regionJapan.length);
para.textContent = info; // 日本は，北海道, 東北, 関東, 中部, 近畿, 中国, 四国, 九州, 沖縄の各地方に分かれます．

break文とcontinue文

break文

ループの途中でそのループを抜けたい場合に用いる．ある値が見つかれば即終了したい，switch文でcaseから抜けるときなどに使用場面がある．

 <input id="station" type = "text" onchange="judgeStation()">
  <p>
<!-- ここに結果が格納される -->
    </p>

function judgeStation() {
　let nozomiStations = ['東京','品川','新横浜','名古屋','京都','新大阪'];
    　const para = document.querySelector('p');
    　const station = document.getElementById('station').value;

    　for (let i = 0; i < nozomiStations.length; i++) {
        　if (nozomiStations[i] === station) {
            　para.textContent = `${station}駅はのぞみ停車駅です.`;
            　break;
        　} else {
            　para.textContent = `${station}駅はのぞみ停車駅ではありません.`;
        　}
    　}
    }

continue文

ループの途中で抜ける文であるが，繰り返しの途中で残りの繰り返し分の処理をスキップしたい場合に用いる．ある条件を満たさないとわかった時点で残りの処理が不要な場合に使う．

  <input id="pref" type = "text" onchange='SearchPrefString()'> <!-- 「山」と入力-->
  <p>
  </p>

  function SearchPrefString(){
    const prefectures = ['北海道','青森','岩手','秋田','山形','福島','山梨','富山','和歌山','岡山','山口','宮崎','鹿児島','沖縄'];// 47都道府県名が格納されている．
    const para = document.querySelector('p');
    const partialPref = document.getElementById('pref').value;

    for (let i = 0; i <= prefectures.length; i++) {
        if (prefectures[i].indexOf(partialPref) === -1) { continue;}
        else {
            para.textContent += prefectures[i] + ' '; //山形，山梨，富山，和歌山，岡山，山口が出力される
        }
    }
  }

参考サイト

繰り返し文