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

gas

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

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

papa【GAS】JavaScript基本② 〜 「データ型」について理解しよう

 

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

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

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

 

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

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

 

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

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

条件分岐_key

 

 

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

「条件分岐」を行うための基礎知識
  1. 真偽値(true, false)
  2. 比較演算子(<, >, <=, >=, ===, !==)
  3. 論理演算子(&&, ||, !)

 

 

「真偽値(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」となっています。「!=」と「!==」も同様です。

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

 

条件分岐_比較演算子

 

 

 

 

「論理」演算子(&&, ||, !)

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

「かつ」は「条件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)

 

条件分岐_論理演算子

 

 

注意

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より小さいです」と表示しています。

条件分岐_if文

 

 

 

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

条件分岐_if文2

 

 

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

 

 

「if...else」文

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

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

if (条件式) {

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

} else {

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

}

 

 

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

条件分岐_if_else文

 

 

 

「if...else if」文

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

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

if (条件式①) {

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

} else if (条件式②){

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

} else {

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

}

 

 

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

条件分岐_if_elseif_else文

 

 

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

 

 

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

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

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

条件分岐_switch文

 

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

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

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

switch (対象) {
 case 値① :

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

  break ;

 case 値② :

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

  break ;

 case 値③ :

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

  break ;

}

 

 

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

条件分岐_if_switch比較

 

 

 

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

条件分岐_if_switch比較

 

 

 

「break」がない場合

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

 

switch文_breakなし

 

 

 

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

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

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

条件分岐_switch文

 

 

 

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

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

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

条件分岐_switch

 

switch文_default

 

 

 

 終わりに

以上、「if」文、「switch」文による「条件分岐」についてお伝えしました。

条件分岐は必ずと言っていいほどGASで開発を行っていく場合に使用するものなのでしっかりと理解しておきましょう。

また、条件分岐は他のプログラミング言語でも必ず使用するものですし、同じような構文になっています。他の言語を学ぶ際にも理解が早まるでしょう。

次回は「for」文、「while」文による「繰り返し処理」についてお伝えします。

gas【GAS】JavaScript基本④ 〜 for文、while文で「繰り返し(ループ)」処理をしてみよう

 

 

以上となります。最後まで読んでいただきありがとうございました!