どうも。つじけ(tsujikenzo)です。このシリーズでは、2021年9月から始まりました「ノンプロ研GAS中級講座6期」について、全7回でお届けします。
ごあいさつ
誠に光栄なことに、「GAS中級講座5期」に続き、 GAS中級講座6期講師 を拝命しました。
このブログでは、講座中で伝えきれなかった内容や、もう少し深掘りしたい内容などを、2週間に一度更新します。講座の復習などに活用いただけると幸いです。
スケジュール
今回の、GAS中級講座6期のスケジュールは、以下を予定しております。
- 09/14(火)スコープと関数
- 09/28(火)クラス
- 10/12(火)組み込みオブジェクト
- 10/26(火)Script Services 1
- 11/09(火)Script Services 2
- 11/23(火)HTTP通信・API
- 12/07(火)卒業ライトニングトーク大会
講座期間中は、下記のようなスケジュールで進みます。(スケジュールはあくまで参考程度にお考えください)
スケジュール | 内容 |
---|---|
講座一週間前 | テキスト公開 |
講座当日 | 課題発表 |
講座後(1~3日程度) | 動画UP |
講座後(一週間程度) | 解答発表 |
講座一週間前 | テキスト公開 |
受講スタイルは自由ですが、私の経験上、なるべく予習して、講座当日は質問やTweetができるようにした方がよいでしょう。
中級講座は 2週に一度開催 ですので、長距離走になります。
そんな辛い長距離走ですが、講座は学習のペースメーカー になりますので、ぜひ習慣化を意識して、この期間はGAS漬けになりましょう。
12/07(火)の卒業LT大会 なんて、とても先のことのように思えますが、あっという間です。クリスマスは必ずきます。
講師、TA、ホスト、受講生6期のみなさん全員で、楽しく学んでいければと思いますので、よろしくお願いいたします。
今日は、Day1で 「スコープと関数」 についてお届けします。
今日のアジェンダ
- スコープ
- 関数
スクリプトエディタの準備
起動時エラー
スクリプトエディタを立ち上げたにも関わらず、起動しない現象はまだ続いているようです。
このようなときは、待機してもリロードしても解決しません。解決策として、別のウインドウ(タブ)を用意して、スクリプトエディタの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の呼び出し順について、以下のように確認できます。
- 関数を実行した同プロジェクト内の、スクリプトファイル順の上からグローバル領域を実行する (今回はコード.gsには何も書かれていません)
- スクリプトファイルを下に降りてきて、グローバル領域があれば実行する
- 最下部まで他のスクリプトファイル内のグローバル領域も実行し続ける
- 実行した関数内のローカル領域を実行する
デバッガ
ブレークポイントのショートカットキーは [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の検索の仕方がわからないジャンルで、まして、どこかで習ったりするものでもありません。
講座でもその辺を意識してお届けしたいと思います。
次回は、 「クラス・ライブラリ」 をお届けします。