[ノンプロ研]GAS初級講座8期DAY2補講制御構文

どうも。つじけ（tsujikenzo）です。このシリーズでは、2021年2月から始まりました「ノンプロ研GAS初級講座8期」について、講座内では伝えきれなかったことなどを、全8回でお届けします。今日は第3回です。

前回のふりかえり
「順次」とは
条件分岐
繰り返し
まとめ
このシリーズの目次

前回のふりかえり

前回は「はじめてのGAS、変数、演算、データ型」についてでした。「1日1回スクリプトエディタを開く。」「毎日30分はGASを触る。」などの習慣付けはできていますでしょうか。

[ノンプロ研]GAS初級講座8期DAY1補講はじめてのGAS、変数、演算、データ型

どうも。つじけ（tsujikenzo）です。このシリーズでは、2021年2月から始まりました「ノンプロ研GAS初級講座8期」について、講座内では伝えきれなかったことなどを、全8回でお届けします。前回のふりかえり前回は「事前課題...

今回は「制御構文」です。いよいよ「プログラミングをしてる！」という実感がわくところですね。

今日のアジェンダ

「順次」とは
条件分岐
繰り返し

「順次」とは

解釈（かいしゃく）する

「順次」とは、プログラムが上から順番に一行ずつ実行されるということです。

ですが、「実行」のまえに、実は「解釈」という工程があります。これは、コードを保存するときに行われていると考えると分かりやすいです。

以下のように、セミコロンではなく、コロン:をステートメントの末尾に書いてしまった場合は、構文エラー:SyntaxErrorを表示してくれます。

プログラムは実行される前に、プロジェクト全体を「解釈」します。エラーと仲良くなれるきっかけになるかもしれませんので、覚えていて損はないと思います。

「順次」で気を付けるポイント

変数を「定義」する位置が、変数を「呼び出す」位置より後に書かれていてはエラーを起こしてしまいます。

実行ログでは、エラーが起きている行数を教えてくれますので、原因究明に役に立ちます。

Day3で習う「関数」については、この通りではありません。関数はプロジェクトのどこにでも記述することができます。（詳しくはDay3）

比較演算子

値の型も含めて、左辺と右辺が「厳密に型まで等しいかを判定」する比較演算子は「===」です（イコール3つ）。「型は一致しなくても、値が一致していればOK」という場合は「==」（イコール2つ）を使うことができます。

前回習ったtypeof演算子を使って確認してみましょう。

const x = 10;
const y = '10';

console.log(typeof x, typeof y); //number, string
console.log(x === y); //false
console.log(x == y); //true

しかしながら、コーディングガイドラインなどでは、比較演算子は「===」で統一することが多いです。何か特別な理由があるときだけ「==」を使うようにした方がよいでしょう。

論理演算子のショートサーキット

読み方のおさらいをしておきましょう。

＆＆・・・アンパサンド（かつ）
｜｜・・・パイプライン（または）
！・・・・エクスクラメーション（否定）

JavaScriptの論理演算子の左辺は、「短絡評価（ショートサーキット）」と呼ばれる判定を行います。

パイプラインの場合はまず左辺を評価し、左辺がtrueの場合はその値を、falseの場合は右辺を返すという仕組みになっています。実際にコードを書いてみるとわかりやすいかもしれません。

console.log(10 % 3 === 0 || '左辺はfalseだったようですね'); //'左辺はfalseだったようですね'

左辺は「10 % 3 === 0」です。10を3で割ったあまりは1なので、0ではありません。左辺を評価した結果はfalseです。なので、右辺の値をログ出力します。

これは、2辺だけではなく、複数の値を評価することができます。下記のような処理を実行してみましょう。

console.log(10 % 3 === 0 || 10 % 3 === 0 || '左辺はfalseだったようですね'); //'左辺はfalseだったようですね'
console.log(10 % 3 === 0 || 10 % 3 === 1 || '左辺はfalseだったようですね'); //true

条件分岐

公式リファレンスを確認してみよう

if文による条件分岐の公式リファレンスはこちらです。（if…elseの項を参照ください）

文と宣言 - JavaScript | MDN

JavaScript アプリケーションは、適切な構文で書かれた文から構成されます。ひとつの文が数行に渡る場合もあります。また複数の文それぞれがセミコロンで区切られていれば 1 行となる場合もあります。そのキーワードはひとつではなく、キーワードのグループとなっています。

公式リファレンスは、はじめは少しとっつきにくい印象があるかもしれません。しかし、慣れてくると正式なことが簡潔に書いているので、わからないことがあったら公式リファレンスを読む習慣をつけることをおススメします。

if文はまずconditionを評価することからスタートします。そして、評価の結果がtrueならstatement1を実行する、という流れです。

ワンライナー記法

コードを１行で書くことを「ワンライナー記法」と呼びます。短く書くことが「なんとなくプログラマっぽくてカッコイイ」という感覚をもつこともあるかもしれませんが、あくまで「読みやすいコード」になるように気を付けるべきです。

if文は、ワンライナーで書くことができます。その際は処理のブロックスコープ{}を省略することができます。末尾にセミコロンが必要になるので忘れないようにしましょう。

if (1 < 10) console.log('1は10より大きい'); //'1は10より大きい'

暗黙の型変換

条件分岐や制御構文の条件式、またはログ出力する際の丸カッコ()内など、様々な場面で暗黙の型変換が行われます。講座でお伝えしたのは暗黙の（真偽値への）型変換でした。

ログ出力と前回習った論理演算子で、暗黙の（真偽値への）型変換を体験してみましょう。

console.log(0); //0
console.log(!0); //true
console.log('');
console.log(!''); //true
console.log(!('foo' * 10)); //NaNを否定するとtrue

いかがでしょうか。数値型は値が0かNaNだとfalseを返しますが、それ以外の場合はtrueを返します。

console.log()で0を否定!するとtrueが返っていますね。（ちなみにRubyでは0がtrueなのでプログラミング言語によってtrueの考え方が違います。）

Switch文

if文の条件式はブール値を評価、処理を行うかどうかを判定していました。switch文では条件式にあたる部分に「式」を書き、その式の答えが「case節の値と一致すれば処理を行う」という流れになります。

break;はcase節を抜ける役割を果たします。あえてbreakを置かずにOR演算子のような働きをもたせることもできます。

const expr = 'Papayas';
switch (expr) {
  case 'Oranges':
    console.log('Oranges are $0.59 a pound.');
    break;
  case 'Mangoes':
  case 'Papayas':
    console.log('Mangoes and papayas are $2.79 a pound.');
    // expected output: "Mangoes and papayas are $2.79 a pound."
    break;
  default:
    console.log(`Sorry, we are out of ${expr}.`);
}

同様に、breakを置かずに一定の条件を満たせば残りの処理を行う「フォールスルー」という手法もありますのでご紹介させていただきます。

  // const level = 'prefecture';
  const level = 'city';

  let address = '';
  switch (level) { 
    case 'prefecture':
      address += '北海道';
    case 'city':
      address += '札幌市';
    case 'town':
      address += '中央区';
  }
  console.log(address) //'札幌市中央区';

繰り返し

講座ではこのようにお伝えしました。

公式リファレンス

公式リファレンスを確認しておきましょう。

for - JavaScript | MDN

for 文は、括弧で囲みセミコロンで区切った 3 つの引数と、続いてループ内で実行される文（ふつうはブロック文）から成るループを構成します。

処理の流れは、

initializationを1度だけ評価（初期化）する
conditionを評価する
statementを実行する
final-expressionを評価する（増減式であることがほとんどです）

です。

４つそれぞれ評価（処理）をしていますので、ステートメントの終わりを表すセミコロン;で区切られているのが理解できますでしょうか。

このfor文の流れを、1つずつ箇条書きにすることをおススメします。機会があったら一度ゆっくりと絵にかいたり矢印を書いたりして取り組んでみてください。while文も同様です。

for文の詳しい解説はこちらの記事にも書きましたので、ご参考いただければと思います。

[GAS]for文とは何か（歴史編）

どうも。つじけ（tsujikenzo）です。今日は『for文とは何か（歴史編）』です。まとめというかちょっとした考察になってしまったかもしれません。”ちょっとした”というのは本気でfor文のことを書くと本が一冊書けてしまうからです。この...

ネストされているイテレータの処理

カウント変数の「i」と「j」のネストはさまざまな例えができると思いますが、「時計の長針と短針のような関係」というのが私のお気に入りです。

[i=0,j=0]の次は
[i=0,J=1]
[i=0,J=9]が終わると以降

[i=1,J=0]
[i=1,J=1]
[i=1,J=9]

カウンタ変数が「i」の理由は「index, iterator, integer」など諸説あります。

if文とfor文の覚え方

「目や手が慣れるまでコードを書き続けましょう」というしかないのですが、私が受講生のときは、

if( ){ }はこうで、
for( ; ; ){ }はこう、

と寝る前に唱え続けました💦

後は、if文とfor文の書き方をお家の人に、ペットに、ぬいぐるみに話しかけたりアウトプットすることを心がけましょう。長期記憶として脳に定着させることができます。

まとめ

以上で、「制御構文」についてでした。初級者の登竜門である「FizzBuzz問題」も登場しましたね。覚えることと「問題を解く」という学習が始まった感じがします。

次回は「関数・配列」です。お楽しみに。