『GAS 完全入門』基礎④ - ★☆☆

便利なGASレシピ集！に戻る場合は以下から

便利なGASレシピ集！ – [2019年最新版]

2019年5月22日

Contents

はじめに
1.関数リテラル
2.スコープ
- グローバル領域
- ローカル領域
3.クラスとインスタンス化

はじめに

今回のビジボットも、長期的にやっている『Google Apps Script 完全入門』を買って基礎入門③ ☆☆☆ – ビジボット』の続きを書いていきます！
今理解しようとしている部分がどんどん難しくなっているのは気のせいじゃないです。。（笑）
けど、理解できて使う様になっていくと人って簡単に覚えちゃうから不思議なんですよねぇ。。（笑）
継続って大事。GASって大事。スプレッドシートってすごく便利。。って改めて思いました。ほんと。

↓↓前回記事↓↓

『GAS 完全入門』基礎③ ★☆☆ – ビジボット

2019年2月27日

それでは早速始めていきます！

1.関数リテラル

GAS（JavaScript）にある、『関数リテラル』は通常の関数宣言とほぼ書式は同じですが、『関数名を記述しない』という点が特徴として挙げられます。
また、定義時点で名前を持たないという性質上、匿名関数だったり無名関数だったりとも呼ばれます。

関数リテラルで定義した関数は、変数に代入することができます。その代入式の事を『関数式』と言います。
関数式は変数への代入のため、ステートメントの末尾にセミコロン（;）が必要です。


/*-- -- -- -- -- -- -- -- bzbotを実行した場合 -- -- -- -- -- -- -- -- --*/
function bzbot(){
  callBzbot(); //変数に代入された関数（callBzbot）を呼び出す...①
  Logger.log('ビジボット'); //実行結果...④
}

var callBzbot = function(){ //呼び出された関数が実行される...②
  Logger.log('callビジボット'); //実行結果...③
};

/*-- -- -- -- -- -- -- -- myFunctionを実行した場合 -- -- -- -- -- -- -- -- --*/

function myFunction(){
  Logger.log('ビジボットのサイトPV数：' + bzbotPv(321,123) + 'もあったらいいな...'); //変数に代入された関数（bzbotPv）を呼び出す...①
  //引数で受け取った情報を計算してreturnする...④
}

var bzbotPv = function(x,y){ //呼び出された関数が実行される...②
  return x * y; //引数で受け取った情報を計算してreturnする...③
};

/*-- -- -- -- -- -- -- -- bzbotを実行した場合 -- -- -- -- -- -- -- -- --*/

function bzbot(){

callBzbot(); //変数に代入された関数（callBzbot）を呼び出す...①

Logger.log('ビジボット'); //実行結果...④

}

var callBzbot = function(){ //呼び出された関数が実行される...②

Logger.log('callビジボット'); //実行結果...③

};

/*-- -- -- -- -- -- -- -- myFunctionを実行した場合 -- -- -- -- -- -- -- -- --*/

function myFunction(){

Logger.log('ビジボットのサイトPV数：' + bzbotPv(321,123) + 'もあったらいいな...'); //変数に代入された関数（bzbotPv）を呼び出す...①

//引数で受け取った情報を計算してreturnする...④

}

var bzbotPv = function(x,y){ //呼び出された関数が実行される...②

return x * y; //引数で受け取った情報を計算してreturnする...③

};

ログ結果はこんな感じ。

ログ結果

/*-- -- -- -- -- -- -- -- bzbotを実行した場合 -- -- -- -- -- -- -- -- --*/
[19-02-28 01:27:18:198 JST] callビジボット
[19-02-28 01:27:18:199 JST] ビジボット
/*-- -- -- -- -- -- -- -- myFunctionを実行した場合 -- -- -- -- -- -- -- -- --*/
[19-02-28 01:33:26:599 JST] ビジボットのサイトPV数：39483もあったらいいな...

/*-- -- -- -- -- -- -- -- bzbotを実行した場合 -- -- -- -- -- -- -- -- --*/

[19-02-28 01:27:18:198 JST] callビジボット

[19-02-28 01:27:18:199 JST] ビジボット

/*-- -- -- -- -- -- -- -- myFunctionを実行した場合 -- -- -- -- -- -- -- -- --*/

[19-02-28 01:33:26:599 JST] ビジボットのサイトPV数：39483もあったらいいな...

これまでの関数定義は『関数名()』で呼び出しを行う事で、その関数の実行を行うというシンプルなものでしたが、関数を定義すると同時に実行する『即時関数』が存在します。

2.スコープ

GAS（JavaScript）には、記述をするフィールドでグローバル領域とローカル領域が分かれます。
グローバル関数の特徴は呼び出された関数よりも先に、グローバル領域に記述されたステートメントが実行されます。

グローバル領域

以下のコードを実行してみます。
呼び出しはmyFunction()を呼び出します。
すると、1番目、2番目、3番目という順番で呼び出しされます。
これは必ず呼び出された関数より先に呼び出されるグローバル領域の特性です。

var msg = 'ビジボット1番目';
Logger.log(msg);

function myFunction(){
  Logger.log('ビジボット3番目');
}

Logger.log('ビジボット2番目');

var msg = 'ビジボット1番目';

Logger.log(msg);

function myFunction(){

Logger.log('ビジボット3番目');

}

Logger.log('ビジボット2番目');

ログ結果はこんな感じ。

ログ結果

[19-03-04 00:29:04:664 JST] ビジボット1番目
[19-03-04 00:29:04:664 JST] ビジボット2番目
[19-03-04 00:29:04:665 JST] ビジボット3番目

[19-03-04 00:29:04:664 JST] ビジボット1番目

[19-03-04 00:29:04:664 JST] ビジボット2番目

[19-03-04 00:29:04:665 JST] ビジボット3番目

ローカル領域

グローバル領域に記述するとローカル領域でも活用する事ができます。
ローカル領域とは通常通りfunctionの中に記述するようなフィールドを指します。ローカル変数の特徴としては宣言した変数はローカル変数内でしか使えない特徴がありますが、グローバル領域に宣言していた変数はローカル変数の中でも使えます。

例えば以下のようにmyFunction()でも使えます。

var msg = 'ビジボット';
var no1 = 1;
var no2 = 2;
var no3 = 3;
Logger.log(msg + no1 + '番目');

function myFunction(){
  Logger.log(msg + no3 + '番目');
}

Logger.log(msg + no2 + '番目');

var msg = 'ビジボット';

var no1 = 1;

var no2 = 2;

var no3 = 3;

Logger.log(msg + no1 + '番目');

function myFunction(){

Logger.log(msg + no3 + '番目');

}

Logger.log(msg + no2 + '番目');

ログ結果はこんな感じ。

ログ結果

[19-03-04 00:37:58:130 JST] ビジボット1番目
[19-03-04 00:37:58:131 JST] ビジボット2番目
[19-03-04 00:37:58:131 JST] ビジボット3番目

[19-03-04 00:37:58:130 JST] ビジボット1番目

[19-03-04 00:37:58:131 JST] ビジボット2番目

[19-03-04 00:37:58:131 JST] ビジボット3番目

※グローバル領域への記述は必要最低限とし、特定のgsファイルの一番上のまとめますが、さまざまなプロジェクトで意図しないタイミングで呼び出されてしまったりとグローバル領域にステートメントを点在される事は可読性の面からもそこまで推奨されないみたいです

3.クラスとインスタンス化

簡単にオブジェクト指向について触れていきたいと思います。
まず、3人のプロフィールを作成すると想定して以下のコードを書いた場合、人数分の記述をしないといけません。

var Person = {
  name : 'ビジボット',
  age : 27,
  sex : 'man',
  msg : function(){
    return 'Hello ビジボット. 27 years old man'
  }
}

function myFunction(){
  Logger.log(Person.msg());
}

var Person = {

name : 'ビジボット',

age : 27,

sex : 'man',

msg : function(){

return 'Hello ビジボット. 27 years old man'

}

function myFunction(){

Logger.log(Person.msg());

}

ログ結果はこんな感じ。

ログ結果

[19-03-04 01:17:06:244 JST] Hello ビジボット. 27 years old man

1	[19-03-04 01:17:06:244 JST] Hello ビジボット. 27 years old man

そのため、人を量産できるための『ひな形』を作成します！（笑）
ひな形を作成してそこから生成されたオブジェクトを『インスタンス』と言います。

new演算子

ひな形からどうやってインスタンスを生成するか？ですが、以下方法でインスタンスを生成する事ができます。
まだこの時点では情報を渡していないので、できているものは『人っぽいもの』って表現が正しいかも？（笑）

var 変数 = new コンストラクタ名 (引数1,引数2,…)

コンストラクタ

ひな型からインスタンス化する際に、最初に呼び出される関数で、生成したオブエクトの初期化処理をしてくれるという役割を持ちます。
コンストラクタを定義する書式は通常の関数と同様で定義する事が可能です。

コンストラクタのイメージとしては、newで一度リフレッシュして宣言を行う感じですね。

var コンストラクタ名 = function (仮引数1,仮引数2,…){
//処理
}

※コンストラクタ名は通常の関数名と区別するために、先頭が大文字で始めるのが一般的です。

this

オブジェクトの『ひな形』を定義した際に、『人っぽいもの』に対して情報を渡していく必要があります。その際に使用するのが『thisキーワード』です。
ログ情報の『aaaa』を都度呼び出している事が確認できる。

//人という、『ひな形』を作成しておく
var Person = function(name,age,sex){
  //thisの後ろに付いている『name,age,sex』はそれぞれプロパティ情報
  this.name = name;
  this.age = age;
  this.sex = sex;
  Logger.log('aaaa');
};

//人に対して、プロパティ情報を与えていく
function myFunction(){
  //new演算子でインスタンス化、人の形を作成し、プロパティ情報を与える
  var person1 = new Person('ビジボット',27,'man');
  Logger.log(person1);
  
  //new演算子でインスタンス化、人の形を作成し、プロパティ情報を与える
  var person2 = new Person('ロボット',28,'woman')
  Logger.log(person2); 
}

//人という、『ひな形』を作成しておく

var Person = function(name,age,sex){

//thisの後ろに付いている『name,age,sex』はそれぞれプロパティ情報

this.name = name;

this.age = age;

this.sex = sex;

Logger.log('aaaa');

};

//人に対して、プロパティ情報を与えていく

function myFunction(){

//new演算子でインスタンス化、人の形を作成し、プロパティ情報を与える

var person1 = new Person('ビジボット',27,'man');

Logger.log(person1);

//new演算子でインスタンス化、人の形を作成し、プロパティ情報を与える

var person2 = new Person('ロボット',28,'woman')

Logger.log(person2);

}

ログ結果はこんな感じ。

ログ結果

[19-03-04 01:59:19:758 JST] aaaa
[19-03-04 01:59:19:758 JST] {sex=man, name=ビジボット, age=27.0}
[19-03-04 01:59:19:758 JST] aaaa
[19-03-04 01:59:19:759 JST] {sex=woman, name=ロボット, age=28.0}

[19-03-04 01:59:19:758 JST] aaaa

[19-03-04 01:59:19:758 JST] {sex=man, name=ビジボット, age=27.0}

[19-03-04 01:59:19:758 JST] aaaa

[19-03-04 01:59:19:759 JST] {sex=woman, name=ロボット, age=28.0}

次に、メソッドを持つ例です。
インスタンス化の際に受け取った引き取りを元に文字数を生成して、それをmsgメソッドの戻り値として返しています。

※メソッドとは、関数が格納されたプロパティの事を指します

プロトタイプ

//人という、『ひな形』を作成しておく
var Person = function(name,age,sex){
  //thisの後ろに付いている『name,age,sex』はそれぞれプロパティ情報
  this.name = name;
  this.age = age;
  this.sex = sex;
  Logger.log('aaaa');
  this.msg = function(){
    return 'Hello' + name + '.' + age + 'years old ' + sex;
  }
};

//人に対して、プロパティ情報を与えていく
function myFunction(){
  //new演算子でインスタンス化、人の形を作成し、プロパティ情報を与える
  var person1 = new Person('ビジボット',27,'man');
  //person1に戻ってきたmsgメソッドを指定する
  Logger.log(person1.msg());
  
  //new演算子でインスタンス化、人の形を作成し、プロパティ情報を与える
  var person2 = new Person('ロボット',28,'woman')
  //person2に戻ってきたmsgメソッドを指定する
  Logger.log(person2.msg());
}

//人という、『ひな形』を作成しておく

var Person = function(name,age,sex){

//thisの後ろに付いている『name,age,sex』はそれぞれプロパティ情報

this.name = name;

this.age = age;

this.sex = sex;

Logger.log('aaaa');

this.msg = function(){

return 'Hello' + name + '.' + age + 'years old ' + sex;

}

};

//人に対して、プロパティ情報を与えていく

function myFunction(){

//new演算子でインスタンス化、人の形を作成し、プロパティ情報を与える

var person1 = new Person('ビジボット',27,'man');

//person1に戻ってきたmsgメソッドを指定する

Logger.log(person1.msg());

//new演算子でインスタンス化、人の形を作成し、プロパティ情報を与える

var person2 = new Person('ロボット',28,'woman')

//person2に戻ってきたmsgメソッドを指定する

Logger.log(person2.msg());

}

ログ結果はこんな感じ。

ログ結果

[19-03-04 02:06:40:194 JST] aaaa
[19-03-04 02:06:40:195 JST] Helloビジボット.27years old man
[19-03-04 02:06:40:195 JST] aaaa
[19-03-04 02:06:40:196 JST] Helloロボット.28years old woman

[19-03-04 02:06:40:194 JST] aaaa

[19-03-04 02:06:40:195 JST] Helloビジボット.27years old man

[19-03-04 02:06:40:195 JST] aaaa

[19-03-04 02:06:40:196 JST] Helloロボット.28years old woman

プロトタイプ

ひな形とインスタンス化を活用する事によって、スクリプトの再利用や可読性、メンテナンス性は上がっていきます。
しかし、インスタンス化をする事でメモリ確保の容量問題がでてきます。

この問題を解決するのが『prototypeプロパティ』という仕組みです。
『prototypeプロパティ』はひな形から生成されたインスタンスから参照する事ができるという仕組みです。

//人という、『ひな形』を作成しておく
var Person = function(name,age,sex){
  //thisの後ろに付いている『name,age,sex』はそれぞれプロパティ情報
  this.name = name;
  this.age = age;
  this.sex = sex;
  Logger.log('aaaa');
  
};
  //personのprototypeプロパティにメソッドを追加
  Person.prototype.msg = function(){
  Logger.log('bbbb');
  return 'Hello' + this.name + '.' + this.age + 'years old ' + this.sex;
  };

//人に対して、プロパティ情報を与えていく
function myFunction(){
  //new演算子でインスタンス化、人の形を作成し、プロパティ情報を与える
  var person1 = new Person('ビジボット',27,'man');
  //person1に戻ってきたmsgメソッドを指定する
  Logger.log(person1.msg());
  
  //new演算子でインスタンス化、人の形を作成し、プロパティ情報を与える
  var person2 = new Person('ロボット',28,'woman')
  //person2に戻ってきたmsgメソッドを指定する
  Logger.log(person2.msg());
}

//人という、『ひな形』を作成しておく

var Person = function(name,age,sex){

//thisの後ろに付いている『name,age,sex』はそれぞれプロパティ情報

this.name = name;

this.age = age;

this.sex = sex;

Logger.log('aaaa');

};

//personのprototypeプロパティにメソッドを追加

Person.prototype.msg = function(){

Logger.log('bbbb');

return 'Hello' + this.name + '.' + this.age + 'years old ' + this.sex;

};

//人に対して、プロパティ情報を与えていく

function myFunction(){

//new演算子でインスタンス化、人の形を作成し、プロパティ情報を与える

var person1 = new Person('ビジボット',27,'man');

//person1に戻ってきたmsgメソッドを指定する

Logger.log(person1.msg());

//new演算子でインスタンス化、人の形を作成し、プロパティ情報を与える

var person2 = new Person('ロボット',28,'woman')

//person2に戻ってきたmsgメソッドを指定する

Logger.log(person2.msg());

}

ログ結果はこんな感じ。

ログ結果

[19-03-04 02:57:15:477 JST] aaaa
[19-03-04 02:57:15:478 JST] bbbb
[19-03-04 02:57:15:478 JST] Helloビジボット.27years old man
[19-03-04 02:57:15:479 JST] aaaa
[19-03-04 02:57:15:479 JST] bbbb
[19-03-04 02:57:15:479 JST] Helloロボット.28years old woman