GASのV8ランタイムで使えるECMAScript構文のまとめ

くら

V8 ランタイムの概要 | Apps Script | Google for Developers

結構前に公式よりお知らせがありました「V8ランタイムの対応」

今回はこのV8ランタイムで使えるECMAScript構文をまとめてみました！

これが書けるとこんなメリットがあります。

V8ランタイムのメリット！！

let と const の使い分けで、変数を間違ってしまう可能性を減らすことできます。
アロー関数で無名関数を短く表現することができます。
Class構文を使うことで、同じモノの設計を繰り返し使う時に便利！
Class構文でコードが見やすくなる！
Class構文は見た目がかっこいい！
分割代入で、複数の変数に代入する時に1行で書けるようになる！
テンプレート文字列で、ダブルクォーテーションやシングルクォーテーションを打つ量が減ります！
テンプレート文字列で、『\n』を使わずに、改行を表すことができます！
デフォルト引数で、デフォルト値を指定することで、処理を簡略化することができます！

くら

それでは各構文を紹介していきます！

こんな人にむけた記事です。

簡単な書き方を理解して、きれいなコードを書きたい！
便利な機能を使いこなして、効率よくしたい！

V8ランタイムを有効にする
【新機能①】ECMAScript構文
まとめ

V8ランタイムを有効にする

新しい機能を使う前に、V8ランタイムを有効にします。

やり方はとても簡単です！

メニューの実行 > Chrome V8 を搭載した新しい Apps Script ランタイムを有効にする

と選択するだけです！

実行 > Chrome V8 を搭載した新しい Apps Script ランタイムを有効にするを選択

【新機能①】ECMAScript構文

ECMAScript構文とは？

ECMAScript略してESって呼ばれます。JavaScriptを使用したサービスで使われる一般的な構文です。

GASのJavaScriptは古いものでした。。。

それでは実際に使える構文を見ていきましょう。

let と const

まず最初に、

いままで変数を宣言してきた var は使わないようにしましょう。

時代は let と const です。それでは使い方を見ていきます。

letは再宣言が不可能な宣言です

function let_sample() {
  let test = "サンプル";
  test = "OK";
  let test = "NG";
}

GASで保存する時点で以下のエラーとなります。

SyntaxError: Identifier 'test' has already been declared（行 4、ファイル「sample.gs」）

再代入はできますが、4行目の再宣言が不可能なためです。

constは再宣言と再代入が不可能な宣言です

function const_sample() {
  const test = "サンプル";
  test = "NG";
}

GASで実行しようとすると以下のエラーとなります。

TypeError: Assignment to constant variable.at const_sample(sample:3:8)

3行目の再代入が不可能なためです。

また、再宣言も

function const_sample() {
  const test = "サンプル";
  const test = "NG";
}

GASで保存する時点で以下のエラーとなります。

SyntaxError: Identifier 'test' has already been declared（行 3、ファイル「sample.gs」）

3行目の再宣言が不可能なためです。

ちなみに var は再宣言も再代入も可能な宣言です

function var_sample() {
  var test = "サンプル";
  test = "OK";
  var test = "OK";
}

let と constを使うメリット

これが使うメリット！

let と const の使い分けで、変数を間違ってしまう可能性を減らすことできます。
コードを見る人にとって、読みやすくなります。

アロー関数

アロー関数は今までの無名関数の書き方より短いコードで表現することができます。

その名の通り => 矢を使ってコードを書きます。

今までの書き方

// 従来の無名関数
function arrow_before_sample() {
  var addText = function (text) {
  return text + "サンプル";
  };
  console.log(addText("サンプル"));
  // サンプルサンプルというログが出力
}

アロー関数での書き方

// アロー関数
function arrow_after_sample1() {
  let addText = (text) => {
  return text + "サンプル";
  };
  console.log(addText("サンプル"));
  // サンプルサンプルというログが出力
}

function の代わりに => が使われています。

また、アロー関数は条件によってさらに簡単に表現することができます。

関数が1文の場合、{…}とreturnが省略できます

アロー関数での書き方

// アロー関数
function arrow_after_sample1() {
  let addText = (text1,text2) => {
  return text1 + text2 + "サンプル3";
  };
  console.log(addText("サンプル1","サンプル2"));
  // サンプル1サンプル2サンプル3というログが出力
}

さらに簡単にした書き方

// 関数が1文の場合、{...}とreturenが省略できます
function arrow_after_sample2() {
  let addText = (text1,text2) => text1 + text2 + "サンプル3";
  console.log(addText("サンプル1","サンプル2"));
  // サンプル1サンプル2サンプル3というログが出力
}

このように簡単なコードで表現できます！

関数が1文で引数が1つの場合、{…}とreturnと(…)が省略できます

アロー関数での書き方

// アロー関数
function arrow_after_sample1() {
  let addText = (text) => {
  return text + "サンプル";
  };
  console.log(addText("サンプル"));
  // サンプルサンプルというログが出力
}

さらに簡単にした書き方

// 関数が1文で引数が1つの場合、{...}とreturenと(...)が省略できます
function arrow_after_sample2() {
  let addText = text => text + "サンプル";
  console.log(addText("サンプル"));
  // サンプルサンプルというログが出力
}

さらにシンプルになりましたね！

アロー関数は this の値を束縛します。。。？

this についていろいろ書かれており、整理できたら追記します。

くら

this を使うようなコードを書いたことないよ。。。

アロー関数を使うメリット

これが使うメリット！

無名関数を短く表現することができます。

Class構文

今回のアップデートでClassが使えるようになりました！

JavaScriptのClassはこちらの記事が参考になりました！

JavaScript初心者にclassを伝える - Qiita

初めにこの記事ではJavascriptのclassについてザックリですが解説します。多くの初心者にとってclassは「何だこれ？？？」と躓くポイントだと思います。（実際、自分も最初眺めた時は意…

実際にClass構文を使わない場合と使った場合で比べてみます。

Classを使わないで実装する場合

function class_sample_before() {
  let persons = [];

  persons[0] = {
    firstName: "田中",
    lastName: "太郎",
    height: 165,
    weight: 65,
    bmi: getBMI(165, 65),
    standardWeight: getStandardWeight(165, 65),
  };

  persons[1] = {
    firstName: "木村",
    lastName: "花子",
    height: 150,
    weight: 45,
    bmi: getBMI(150, 45),
    standardWeight: getStandardWeight(150, 45),
  };

  console.log(persons);
}

function getBMI(height, weight) {
  return Math.round(weight / (((height / 100) * height) / 100));
}

function getStandardWeight(height, weight) {
  return Math.round((((height / 100) * height) / 100) * 22);
}

Classを使って実装した場合

function class_sample_after() {
  class Person {
    constructor(firstName, lastName, height, weight) {
      this.firstName = firstName;
      this.lastName = lastName;
      this.height = height;
      this.weight = weight;
      this.bmi();
      this.standardWeight();
    }

    bmi() {
      this.bmi = Math.round(
        this.weight / (((this.height / 100) * this.height) / 100)
      );
    }

    standardWeight() {
      this.standardWeight = Math.round(
        (((this.height / 100) * this.height) / 100) * 22
      );
    }
  }

  let persons = [];
  persons[0] = new Person("田中", "太郎", 165, 65);
  persons[1] = new Person("木村", "花子", 150, 45);
  console.log(persons);
}

どっちのコードも同じ結果を返します。

 [ { firstName: '田中',
    lastName: '太郎',
    height: 165,
    weight: 65,
    bmi: 24,
    standardWeight: 60 },
  { firstName: '木村',
    lastName: '花子',
    height: 150,
    weight: 45,
    bmi: 20,
    standardWeight: 50 } ]

2人のみのデータを格納するだけなので、コード量は変わりませんが、

これが10人、100人と増えた場合どうなるでしょう。。。

Classを使えば、こんなシンプルに書くことができます！

persons[0] = new Person("田中", "太郎", 165, 65);
persons[1] = new Person("木村", "花子", 150, 45);
persons[2] = new Person("鈴木", "潤", 160, 55);
persons[3] = new Person("佐々木", "次郎", 170, 80);
persons[4] = new Person("中村", "かおり", 150, 45);

Class構文を使うメリット

これが使うメリット！

同じモノの設計を繰り返し使う時に便利！
コードが見やすくなる！
見た目がかっこいい！

分割代入

配列やオブジェクトを複数の変数に分割して代入できます。

配列の分割代入

従来の方法

function before() {
  let array = [1, 2, 3];
  let x = array[0];
  let y = array[1];
  let z = array[2];
  // ログに『1 2 3』と出力
  console.log(x, y, z);
}

分割代入を使った方法

function after() {
  let array = [1, 2, 3];
  let [x, y, z] = array;
  // ログに『1 2 3』と出力
  console.log(x, y, z);
}

オブジェクトの分割代入

従来の方法

function before() {
  let data = {a: 12, b: false, c: 'blue'};
  let a = data.a;
  let c = data.c;
  // ログに『12 'blue'』と出力
  console.log(a, c);
}

分割代入を使った方法

function after() {
  let data = {a: 12, b: false, c: 'blue'};
  let {a, c} = data;
  // ログに『12 'blue'』と出力
  console.log(a, c);
}

分割代入を使うメリット

これが使うメリット！

複数の変数に代入する時に1行で書けるようになる！
コードが見やすくなります！

テンプレート文字列

``（バッククオート）で文字列を囲むと、${}で変数を展開できます。

従来の方法

function before() {
  let first = '田中';
  let last = '太郎';
  let name =　'Hi ' + first + ' ' + last + '.';
  // ログに『Hi 田中 太郎.』と出力
  console.log(name);
}

テンプレート文字列を使った方法

function after() {
  let first = '田中';
  let last = '太郎';
  let name =　`Hi ${first} ${last}.`;
  // ログに『Hi 田中 太郎.』と出力
  console.log(name);
}

テンプレート文字列を使うメリット

これが使うメリット！

ダブルクォーテーションやシングルクォーテーションを打つ量が減ります！

デフォルト引数

読んで字のごとくです。関数にデフォルト引数を指定できます。

従来の場合

function before() {
  // ログに『hello world!』と出力
  hello()
}

function hello(greeting, name) {
  greeting = greeting || "hello";
  name = name || "world";
  console.log(greeting + " " + name + "!");
}

デフォルト引数を使う場合

function after() {
  let hello =
  function(greeting="hello", name="world") {
    console.log(greeting + " " + name + "!");
  }
  // ログに『hello world!』と出力
  hello();
}

デフォルト引数を使うメリット

これが使うメリット！

デフォルト値を指定することで、処理を簡略化することができます！

複数行の文字列

``（バッククオート）で文字列を囲むと、改行をそのまま表すことができます！

従来の方法

function before() {
  let multiline = "This string is sort of\n"
  + "like a multi-line string,\n"
  + "but it's not really one.";
  console.log(multiline);
}

『\n』を使わない方法

function after() {
  let multiline = `This on the other hand,
  actually is a multi-line string,
  thanks to JavaScript ES6`;
  console.log(multiline);
}

これが使うメリット！