[ノンプロ研]GAS中級講座6期Day1 スコープと関数]

GAS

どうも。つじけ(tsujikenzo)です。このシリーズでは、2021年9月から始まりました「ノンプロ研GAS中級講座6期」について、全7回でお届けします。

ごあいさつ

誠に光栄なことに、「GAS中級講座5期」に続き、 GAS中級講座6期講師 を拝命しました。

このブログでは、講座中で伝えきれなかった内容や、もう少し深掘りしたい内容などを、2週間に一度更新します。講座の復習などに活用いただけると幸いです。

スケジュール

今回の、GAS中級講座6期のスケジュールは、以下を予定しております。

  1. 09/14(火)スコープと関数
  2. 09/28(火)クラス
  3. 10/12(火)組み込みオブジェクト
  4. 10/26(火)Script Services 1
  5. 11/09(火)Script Services 2
  6. 11/23(火)HTTP通信・API
  7. 12/07(火)卒業ライトニングトーク大会

講座期間中は、下記のようなスケジュールで進みます。(スケジュールはあくまで参考程度にお考えください)

スケジュール内容
講座一週間前テキスト公開
講座当日課題発表
講座後(1~3日程度)動画UP
講座後(一週間程度)解答発表
講座一週間前テキスト公開

受講スタイルは自由ですが、私の経験上、なるべく予習して、講座当日は質問やTweetができるようにした方がよいでしょう。

中級講座は 2週に一度開催 ですので、長距離走になります。

そんな辛い長距離走ですが、講座は学習のペースメーカー になりますので、ぜひ習慣化を意識して、この期間はGAS漬けになりましょう。

12/07(火)の卒業LT大会 なんて、とても先のことのように思えますが、あっという間です。クリスマスは必ずきます。

講師、TA、ホスト、受講生6期のみなさん全員で、楽しく学んでいければと思いますので、よろしくお願いいたします。

今日は、Day1で 「スコープと関数」 についてお届けします。

今日のアジェンダ

  1. スコープ
  2. 関数

スクリプトエディタの準備

起動時エラー

スクリプトエディタを立ち上げたにも関わらず、起動しない現象はまだ続いているようです。 

このようなときは、待機してもリロードしても解決しません。解決策として、別のウインドウ(タブ)を用意して、スクリプトエディタのURLを貼り付けます。

起動したら元のウィンドウは閉じて構いません。 

標準エディタとハイコントラストテーマ

みなさんプログラマと言えば黒い画面を想像するかもしれません。

GASの標準エディタにも背景色を黒にする 「ハイコントラストテーマ」 が用意されています。

[F1] キーで コマンドパレット を開き、 「ハイ」 と日本語で検索して出てくる 「ハイコントラストテーマへの切り替え」 をクリックします。 

このような見た目です。 

かくいう私も、背景色を黒にして使っていましたが、今は白に戻しました。

一番の理由は、シンタックスハイライトの配色が、1色(コメントアウトを区別する)多いからです。

標準エディタ 

標準エディタのハイコントラストテーマ 

拡張機能によるダークモード 

また変えるかもしれませんが、お好きなエディタを選択しましょう。

打ってはならない

初級講座で「打ってはならない」という約束を習ったと思います。

標準エディタの 候補の入力機能 を使って、できるだけ手打ちすることを避けましょう。

その他にも必須スキルが、辞書ツールの活用です。PCに付属の標準辞書ツールはぜひ活用しましょう。

受講中はTweetも大事です。私は、ハッシュタグをIME辞書ツールに登録したりします。 

コーディングに関する辞書ツールは「PhraseExpress」というソフトがオススメです。

たとえば、なかなか覚えられないドキュメンテーションコメントのひな形は、「docm」で呼び出すようにしています。 

みなさんも、今後、何万時間と入力するコードたちです。ぜひ最適化して効率UPしていきましょう。

スコープ

初級講座でならったconst/let宣言は、再代入するしないで決めていました。

しかし、const/let宣言の最大の関心事は、変数がどのような適用範囲(スコープ)を生成するか です。

宣言関数スコープ(function)生成ブロックスコープ({})生成
無し××
var×
let
const
関数の仮引数
この表はぜひメモしておきましょう。

スクリプトファイルの実行順

スクリプトファイルは、 スクリプトファイルメニューの上から順 に実行されます。試しに、[01.gs] ファイルを下に移動して、myFunction1_01を実行すると、 「ReferenceError: msg is not defined」 というエラーが出ます。 

これは、[01_02.gs] に書かれている変数[msg]が、まだ定義されていないからです。 

さらに、 演習1-01 では、console.logの呼び出し順について、以下のように確認できます。

  1. 関数を実行した同プロジェクト内の、スクリプトファイル順の上からグローバル領域を実行する (今回はコード.gsには何も書かれていません)
  2. スクリプトファイルを下に降りてきて、グローバル領域があれば実行する
  3. 最下部まで他のスクリプトファイル内のグローバル領域も実行し続ける
  4. 実行した関数内のローカル領域を実行する 

デバッガ

ブレークポイントのショートカットキーは [Ctrl +B] です。 

ブレークポイントが置かれた行は、実行する前に止まります。

この時点では、変数xの中身はわからないけども、「ローカル領域に書かれている」というのが確認できます。 

ステップをすすめると、変数xに値が格納されることを確認できます。デバッガの詳細は割愛しますが、中級では使ってみましょう。 

スコープの歴史

もともとは、JavaScriptには、 グローバルスコープ と 関数スコープ しか存在しませんでした。ローカルスコープといえば、関数スコープのことでした。

そこに ES6 から ブロックスコープ が導入されたため、ローカルスコープは 「関数スコープ」 と 「ブロックスコープ」 の2種類となりました。

グローバル領域に書くコード

グローバル領域には、コードを書いてはいけないわけではありません。

毎回実行されて問題のないもの、重複記述すると冗長なものをグローバル領域に置いたりします。

また、グローバル領域に書かれていることを明示する為に、 「アッパースネーク記法」 で書くようにしています。

  • UPPER_SNAKE_CASE
  • lower_snake_case
  • UpperCamelCase
  • lowerCamelCase
const FOLDER_ID = 'フォルダID';
const SS_ID = 'スプレッドシートID';

function myFunction1() {
  // FOLDER_IDを使った処理
  // SS_IDを使った処理
}

function myFunction2() {
  // FOLDER_IDを使った処理
  // SS_IDを使った処理
}

スコープチェーン

GASには、「いちばん内側のスコープが優先される」という鉄則があります。

function myFunction2_9_04() {

  const num = 0;

  {
    const num1 = 1;

    {
      const num2 = 2;
      console.log(num1); //1
      console.log(num); //0
    };

  };

}

まず、自分自身が書かれている同スコープ内に、変数定義があるかさがします。

もし、存在しなければ、ひとつ上のスコープを参照します。それでも無ければさらに上のスコープを参照します。

最終的には、グローバル領域を参照 します。 

この、変数宣言がなければ、スコープを1つ外側に参照しにいく仕組みを、スコープチェーンといいます。

関数

アロー関数の省略記法

アロー関数の省略記法は、覚えてしまえば怖くありません。仲良くしましょう。

function myFunction1_98() {

  //引数がひとつの時はカッコを省略できる
  const getFullName = name => {

    const fullName = name + '様';

    return fullName;

  };

  console.log(getFullName('soichiro'));


  //引数がない時はカッコを省略できない
  const getToday = () => {

    const today = new Date();

    return today;

  };

  console.log(getToday());

  //1ライナーで書けるときは、retrurnと{}を省略できる
  const getMyBirthday = bd => new Date(bd);

  const birthDay = '1980/04/29';
  console.log(getMyBirthday(birthDay));

}

メソッド定義には、アロー関数は使いませんのでご注意ください。

参照渡しと値渡し

講座では、 「関数の引数のやりとりにおける参照渡しと値渡し」 をご紹介しましたが、もうちょっと理解したいという方の為に、 「変数に代入するときの型の違い」 を用いてご説明します。

関数のときと同じように、参照渡しと値渡しの要となるのは 「データ型」 です。以下のコードを実行してみましょう。

//プリミティブ型
function byVal(){

 let x, y;
 x = 10;
 y = x;
 x = 100;

 console.log(y); //10
}


//オブジェクト
function byRef(){

 let arr, arr2;
 arr = ['hoge'];
 arr2 = arr;
 arr.push('fuga');

 console.log(arr2); //['hoge', 'fuga']
}

なぜこのような挙動になるのかは、講座内でお伝えしました。

メモリアドレスの参照先に  が割り当てられているのか、配列のような、 参照先 が割り当てられているのか、の違いです。

業務アプリケーションの開発と保守を楽にする書き方

今回は、初級講座から上がってきた人が多いと思います。

初級で培った経験を生かすためにも、ぜひ中級講座で意識してほしい点が3つあります。

  • ペアプロ
  • リーダブルコード
  • それでも実務を意識する

今日はペアプロについてです。

ノンプロ研ペアプロ

ぜひ、ノンプロ研ペアプロにチャレンジしてみましょう。

ノンプログラマーは、業務アプリケーションの「企画・実装・保守」を自分一人でまかないがちです。

ノンプロ研ペアプロは、コードを書くだけでなく、業務アプリケーションの要件定義をするところからスタートします。

「こんなことがやりたい」というネタはみなさんあると思いますが、「まずあれと、これと、それを自分で学習してみてから」と思いがちですよね。

しかし、コミュニティ内にも 「同じことやりたいと思ってました!」 というメンバーがいるはずです。

業務アプリケーション作成について、他のメンバーのアイディアや、先輩のアドバイスを聞くと 「すべての領域の学習を終わらせなくていい」 ということに気付きます。

業務効率化が100%だとすると、ペアプロが終わったころには、20~50%くらいは達成できるものです。ばあいによっては、80%くらいのツールが完成したりします。

もし、100%を目指すなら、まず50%のツールを完成させて、空いた時間を残りの50%をやっつけるための学習にあてればいい のです。

ぜひ、チャレンジしてみましょう。

まとめ

以上で、「スコープと関数」をお届けしました。

スコープと関数を理解することは、「よく使うコードのパーツ化ってどうやるんだろ」とか、「コードの管理ってどうやるんだろ」という課題解決に役立ちます。

これらの課題は、Googleの検索の仕方がわからないジャンルで、まして、どこかで習ったりするものでもありません。

講座でもその辺を意識してお届けしたいと思います。

次回は、 「クラス・ライブラリ」 をお届けします。

このシリーズの目次

  1. [ノンプロ研]GAS中級講座6期Day1 スコープと関数
  2. [ノンプロ研]GAS中級講座6期Day2 クラス・ライブラリ
  3. [ノンプロ研]GAS中級講座6期Day3 組み込みオブジェクト
  4. [ノンプロ研]GAS中級講座6期Day4 ScriptServices1
  5. [ノンプロ研]GAS中級講座6期Day5 ScriptServices2
  6. [ノンプロ研]GAS中級講座6期Day6 HTTP通信・API
タイトルとURLをコピーしました