【GAS】JavaScript基本③ 〜 if文、switch文で「条件分岐」をしてみよう

みなさんこんにちは。zak-papaです。

前回は「データ型」についてお伝えしました。「文字列型」や「数値型」などいくつか種類がありましたね。

そして、GASのための「JavaScript」シリーズ第3弾は、「条件分岐」です。日本語でいう「もし⚫︎⚫︎なら⚪️⚪️」のことですね。

プログラミングは「上から順に実行」されていくものですが、処理の途中で条件によって分岐したい場面も出てくると思います。そのような場合の処理方法として「if文」、「switch文」があります。

今回は「条件分岐」の処理方法として上記2つの使い方について見ていきましょう。

　◆「GASのためのJavaScript」シリーズ

【GAS】JavaScript基本① 〜基本的な「書き方」や「変数」を理解しよう
【GAS】JavaScript基本② 〜「データ型」について理解しよう
【GAS】JavaScript基本③ 〜 if文、switch文で「条件分岐」をしてみよう
【GAS】JavaScript基本④ 〜 for文、while文で「繰り返し（ループ）」処理をしてみよう
【GAS】JavaScript基本⑤ 〜複数の値を扱う「配列」「オブジェクト」を理解しよう

「条件分岐」に必要な基礎知識を覚えよう

まずは、新しいスプレッドシートを開いて「スクリプトエディタ」のタイトルと関数を変更しておきましょう。

「条件分岐」を行う前提となる基礎知識として、以下3つのことをまずは覚えておきましょう。順に説明していきます。

「条件分岐」を行うための基礎知識

真偽値（true, false）
比較演算子（<, >, <=, >=, ===, !==）
論理演算子（&&, ||, !）

「真偽値（true, false）」

まずは、「真偽値（true, false）」です。

こちらは説明するまでもないかもしれませんが、「正しい（真）」or 「正しくない（偽）」の2つのことですね。

条件分岐の処理を行う際は、この「真偽値」によって処理を分けることになるのでまずは頭に入れておきましょう。

「比較」演算子（<, >, <=, >=, ===, !==）

続いて「比較演算子」です。こちらも数学でやりましたね。比較演算子とは「2つの値を比較するための記号」であり、下記のようなものがあります。

比較演算子	意味	例
<	左辺が右辺より小さい（true）	100 < 200（true） 100 < 50 （false）
>	左辺が右辺より大きい（true）	100 > 200（false） 100 > 50 （true）
<=	左辺が右辺以下である（true）	100 <= 200（true） 100 <= 50 （false）
>=	左辺が右辺以上である（true）	100 >= 200（false） 100 >= 50 （true）
===	左辺と右辺が等しい（true）	100 === 100 （true） 100 === '100'（false）
!==	左辺と右辺が等しくない（true）	100 !== 100 （false） 100 !== '100'（true）

最後の2つの「===」「!==」は見慣れない比較演算子かもしれませんね。数学では「=」1つで「左辺と右辺が等しい」ということでしたが、「変数」のところで説明したようにJavaScriptでは「=」1つは「値の代入」を意味しましたね。

「==」と「===」、「!=」と「!==」の違いについて

実は「==」「!=」という演算子もあります。これらの違いは「データ型」まで含めて比較するかどうかという違いです。

下記を見てみましょう。「100（数値型）」と「'100'（文字列）」を比較しており、1つ目の「==」はデータ型は含めず比較しているため「True」となっており、2つ目の「===」はデータ型まで含めて比較しているため「false」となっています。「!=」と「!==」も同様です。

データ型まで含めずに比較した場合、意図しない結果を引き起こす可能性があります。なので、「===」「!==」を使って厳密に比較した方が良いでしょう。

コピペ用コードはこちら

function myIf() {　   
 
  Logger.log(100 == '100');   // true
  Logger.log(100 === '100');  // false
  
  Logger.log(100 != '100');   // false
  Logger.log(100 !== '100');  // true
  
}

function myIf() {　

Logger.log(100 == '100'); // true

Logger.log(100 === '100'); // false

Logger.log(100 != '100'); // false

Logger.log(100 !== '100'); // true

}

「論理」演算子（&&, ||, !）

続いて「論理演算子」です。論理演算子は、日本語でいう「かつ」「または」のように「複数の条件」を組み合わせるときに使用します。また、条件式の真偽値を「反転」させる論理演算子もありますので順に見ていきます。

「かつ」は「条件1 && 条件2」のように「&&」で表し、複数の条件がすべてtrueならtrueとなります。
「または」は「条件1 || 条件2」のように「||」で表し、複数の条件のうち1つでもtrueならtrueとなります。
「反転」は「! (条件式)」のように「!」で表し、条件式の真偽値を反転させます。

論理演算子	意味	例
&& (かつ)	左辺と右辺の「どちらも」（true）	xが20のとき x > 15 && x < 30（true） x < 15 && x < 30（false）
\|\| (または)	左辺と右辺の「どちらか」（true）	xが20のとき x < 15 \|\| x < 30（true） x > 25 \|\| x > 30（false）
! (反転)	条件式の真偽を反転	xが20のとき ! (x < 15)（true） ! (x < 30)（false）

コピペ用コードはこちら

function myIf() {　   
 
  var x = 20;
  
  Logger.log(x > 15  &&  x < 30);  // true
  Logger.log(x < 15  &&  x < 30);  // false
  
  Logger.log(x < 15  ||  x < 30);  // true
  Logger.log(x > 25  ||  x > 30);  // false
  
  Logger.log(! (x < 15));  // true
  Logger.log(! (x < 30));  // false
  
}

function myIf() {　

var x = 20;

Logger.log(x > 15 && x < 30); // true

Logger.log(x < 15 && x < 30); // false

Logger.log(x < 15 || x < 30); // true

Logger.log(x > 25 || x > 30); // false

Logger.log(! (x < 15)); // true

Logger.log(! (x < 30)); // false

}

注意

1つ目の「15より大きいかつ 30より小さい」は「x > 15 && x < 30」のように書きますが、
「15 < x < 30」と書くことはできないので注意しましょう。

「if」文で条件分岐をしてみよう

基礎知識が身についたところで「if」文による条件分岐を見ていきましょう。

「if」文

「if」文の書き方について見ていきます。
「if」の後ろの（）に「条件式」を書き、それが「成り立つ」場合の処理を波括弧{ }の間に書きます。

1行で全て書くこともできますが、コードが見にくくなるため一般的には下記のように「改行」をし、さらにインデント（半角スペース2つ分）を加えて記載します。tabキーを1回押すと、半角スペース2つ分インデントすることができます。また、{}のあとはセミコロンは不要です。

if (条件式) {

　条件式が「true」の場合に実行する処理

}

実際に「ログ」に出力してみます。
変数xに100を代入しています。（）の中の条件式では、「x < 200（xが200より小さければ）」となっており、その条件式が「true」のときに「xは200より小さいです」と表示しています。

コピペ用コードはこちら

function myIf() {　   
 
  var x = 100;
  
  if (x < 200) {
    Logger.log('xは200より小さいです');  // 条件式がtrueの場合の処理
  }
  
}

function myIf() {　

var x = 100;

if (x < 200) {

Logger.log('xは200より小さいです'); // 条件式がtrueの場合の処理

}

変数xが「300」のときはどのようになるでしょうか。
この場合は条件式を満たさないため処理は実行されないことになります。

コピペ用コードはこちら

function myIf() {　   
 
  var x = 300;
  
  if (x < 200) {
    Logger.log('xは200より小さいです');  // 条件式がfalseのため実行されない
  }
  
}

function myIf() {　

var x = 300;

if (x < 200) {

Logger.log('xは200より小さいです'); // 条件式がfalseのため実行されない

}

条件式を満たさない場合も何かしら処理をしたい場合があると思います。その場合の書き方もあるため次に見てみましょう。

「if...else」文

条件式を満たさない場合（false）の処理について見ていきましょう。日本語でいうと「もし⚫︎⚫︎なら⚪️⚪️、そうでなければ△△」となり、「△△」の部分の書き方のことです。

先ほどの式に「else」を加えて、波括弧{ }の間に条件式を満たさなかった場合の処理を記載します。

if (条件式) {

　条件式が「true」の場合に実行する処理

} else {

　条件式が「false」の場合に実行する処理

}

先ほどは何もログに出力されませんでしたが、今回はちゃんと出力されましたね。

コピペ用コードはこちら

function myIf() {　   
 
  var x = 300;
  
  if (x < 200) {
    Logger.log('xは200より小さいです');  // 条件式がtrueの場合の処理
  } else {
    Logger.log('xは200より大きいです');  // 条件式がfalseの場合の処理
  }
  
}

function myIf() {　

var x = 300;

if (x < 200) {

Logger.log('xは200より小さいです'); // 条件式がtrueの場合の処理

} else {

Logger.log('xは200より大きいです'); // 条件式がfalseの場合の処理

}

「if...else if」文

最後に、「複数」の条件式を使って処理を行う場合について見ていきます。日本語でいうと「もし⚫︎⚫︎なら⚪️⚪️、そうでなくもし◼︎◼︎ならば◻︎◻︎、いずれでもなければ△△」となり、青いマーカーの部分の書き方のことです。

先ほどの「if」と「else」の文の間に「else if」をいれることでいくらでも条件式を追加することができます。書き方は次の通りです。

if (条件式①) {

　条件式①が「true」の場合に実行する処理

} else if (条件式②){

　条件式②が「true」の場合に実行する処理

} else {

　全ての条件式が「false」の場合に実行する処理

}

変数xが「200」のときに、下記では2つ目の条件式が「true」となるため「xは200と等しいです」とログに出力されます。

コピペ用コードはこちら

function myIf() {　   
 
  var x = 200;
  
  if (x < 200) {
    Logger.log('xは200より小さいです');  // 条件式①がtrueの場合の処理
  } else if (x === 200) {
    Logger.log('xは200と等しいです');   // 条件式②がtrueの場合の処理
  } else {
    Logger.log('xは200より大きいです');  // 全ての条件式がfalseの場合の処理
  }
  
}

function myIf() {　

var x = 200;

if (x < 200) {

Logger.log('xは200より小さいです'); // 条件式①がtrueの場合の処理

} else if (x === 200) {

Logger.log('xは200と等しいです'); // 条件式②がtrueの場合の処理

} else {

Logger.log('xは200より大きいです'); // 全ての条件式がfalseの場合の処理

}

以上、「if」文による条件分岐でした。3パターンを使いこなせるようになりましょう。

「switch」文で条件分岐をしてみよう

「if」文の3つ目のパターン（if...else if...）で条件式を「複数」追加する方法がありました。同じことを「switch」文でもできるのでこちらも見ていきましょう。「switch文」で書き換えるとシンプルで読みやすいコードになります。

今回は条件を変えて「天気」バージョンで見てみます。「①晴れ」「②曇り」「③雨」で条件分岐を行ってみたいと思います。

「switch...case...break」文①

「switch」文の書き方について見ていきます。
「switch」の後ろの（）に「対象」を書き、「case」の後に「値」と「処理」を記載します。そして最後に「break」を記載することで1つの流れになっています。

「case」のあとは「:(コロン)」、「break」のあとは「;（セミコロン）」なので注意しましょう。

switch (対象) {
　case 値① :

　　値①の場合に実行する処理

　　break ;

　case 値② :

　　値②の場合に実行する処理

　　break ;

　case 値③ :

　　値③の場合に実行する処理

　　break ;

}

「switch」文の実際のコードを見る前に、先ほど説明した「if...else if」文でまずは記述してみましょう。次のようになります。
※どれにも当てはまらない場合の「else」は今回は省略しています。

コピペ用コードはこちら

function myIf() {　   
 
  var weather = '晴れ';
  
  if (weather === '晴れ') {
    Logger.log('会社に傘を持っていかない');
  } else if (weather === '曇り') {
    Logger.log('会社に折り畳み傘を持っていく');
  } else if (weather === '雨') {
    Logger.log('会社に傘を差していく');
  }
  
}

function myIf() {　

var weather = '晴れ';

if (weather === '晴れ') {

Logger.log('会社に傘を持っていかない');

} else if (weather === '曇り') {

Logger.log('会社に折り畳み傘を持っていく');

} else if (weather === '雨') {

Logger.log('会社に傘を差していく');

}

上記の「if...else if」文を「switch」文で記述するとこのようになります。どちらも正常にログに出力されましたね。

コピペ用コードはこちら

function mySwitch() {　   
 
  var weather = '晴れ';
  
  switch (weather) {
    case '晴れ':
      Logger.log('会社に傘を持っていかない');
      break;
    case '曇り':
      Logger.log('会社に折り畳み傘を持っていく');
      break;
    case '雨':
      Logger.log('会社に傘を差していく');
      break;
  }
  
}

function mySwitch() {　

var weather = '晴れ';

switch (weather) {

case '晴れ':

Logger.log('会社に傘を持っていかない');

break;

case '曇り':

Logger.log('会社に折り畳み傘を持っていく');

break;

case '雨':

Logger.log('会社に傘を差していく');

break;

}

「break」がない場合

「break」は、現在のブロックから「脱出」するために必要な命令で、「break」がないと後ろに続く「case」が全て実行されてしまいますので入れ忘れないようにしましょう。

コピペ用コードはこちら

function mySwitch() {　   
 
  var weather = '晴れ';
  
  switch (weather) {
    case '晴れ':
      Logger.log('会社に傘を持っていかない');
    case '曇り':
      Logger.log('会社に折り畳み傘を持っていく');
    case '雨':
      Logger.log('会社に傘を差していく');
  }
  
}

function mySwitch() {　

var weather = '晴れ';

switch (weather) {

case '晴れ':

Logger.log('会社に傘を持っていかない');

case '曇り':

Logger.log('会社に折り畳み傘を持っていく');

case '雨':

Logger.log('会社に傘を差していく');

}

「switch...case...break」文②

では、複数の条件で「同じ処理」をしたい場合（例えば、「雨」と「雪」の場合はどちらも「傘を差して会社にいく」という処理）はどうしたら良いでしょうか。

この場合は、下記のように「case」を続けて書くことで同じ処理が実行されます。

コピペ用コードはこちら

function mySwitch() {　   
 
  var weather = '雪';
  
  switch (weather) {
    case '晴れ':
      Logger.log('会社に傘を持っていかない');
      break;
    case '曇り':
      Logger.log('会社に折り畳み傘を持っていく');
      break;
    case '雨':
    case '雪':  // 2つ続けて書く
      Logger.log('会社に傘を差していく');
      break;
  }
  
}

function mySwitch() {　

var weather = '雪';

switch (weather) {

case '晴れ':

Logger.log('会社に傘を持っていかない');

break;

case '曇り':

Logger.log('会社に折り畳み傘を持っていく');

break;

case '雨':

case '雪': // 2つ続けて書く

Logger.log('会社に傘を差していく');

break;

}

「switch...case...break...default」文

最後はどれにも当てはまらない場合を見ていきましょう。その場合は「case」ではなく「default」の後にどれにも当てはまらない場合の処理を記載します。

「対象」が「台風」のときはどれにも当てはまらないため、「default」の後に記載されている処理が実行されます。
「case」と同様「default」のあとも「:(コロン)」が必要になりますので忘れないようにしましょう。

コピペ用コードはこちら

function mySwitch() {　   
 
  var weather = '台風';
  
  switch (weather) {
    case '晴れ':
      Logger.log('会社に傘を持っていかない');
      break;
    case '曇り':
      Logger.log('会社に折り畳み傘を持っていく');
      break;
    case '雨':
    case '雪':
      Logger.log('会社に傘を差していく');
      break;
    default:  // どれにも該当しない場合
      Logger.log('家で待機する');
      break;
  }
  
}