GoogleAppsScript で classの継承をするには「順番」が大事だった

# 背景

GoogleAppsScript がV8エンジン対応になって、class構文でextendsが使えるようになったけど、**ファイルの読み込み順によっては使えない** という話を聞いたので調査してみました。

# 問題点の確認

```js:コード.gs
class AAA {
  printMessage(text) {
    console.log(text);
  }
}

class BBB extends AAA {
}

function muFunc() {
  const b = new BBB();
  b.printMessage("あああー");
}
```

の実行結果は

```
[20-05-18 10:16:31:982 JST] あああー
```

だけど、(↓ BBBが先、AAAが後に定義されてる)

```js:コード.gs
class BBB extends AAA {
}

class AAA {
  printMessage(text) {
    console.log(text);
  }
}

function muFunc() {
  const b = new BBB();
  b.printMessage("あああー");
}
```

の実行結果は

```
ReferenceError: Cannot access 'AAA' before initialization（行 1、ファイル「コード」）
```

つまり、親クラスを先に定義しておかないとならない、と。
「1つの .gs ファイルで完結しているコード」なら、そのコードの上に親クラスを書けば解決しますが、
ファイル構成が増えて、親クラス子クラスが別ファイルになったときに困りそうです。


----

# 2023-10-31 追記

スクリプトエディタの仕様が変わったようで、最初に記事を投稿したときと状況が変わっていることに気づいたので補足投稿します。

:::note info
結論としては 「ファイルの作成順」 **ではなく** 「ファイルの並び順」に従って、上から読み込まれていくので、クラス定義とかは上にしておこう になります。
:::

古いエディタがどうだったか覚えていないのですが、現時点では下記の2つのキャプチャのように

* アルファベット順にファイルを並べ替える
* ファイル(の並び順を)を上下に移動する

ことが可能になっています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/5c36f35e-9228-9a2b-2815-6a63ccf56013.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/0451afd0-b299-0fb0-80fb-ac6e42b51a62.png)

## 並び順が影響することの確認コード

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/0d8a1182-7c4b-37d3-c011-4b8328d10038.png)

↑ このようにしてあるとして、

```js:1番目に作成.gs
class BBB extends AAA {
}
```

```js:2番目に作成.gs
class AAA {
  printMessage(text) {
    console.log(text);
  }
}
```

```js:3番目に作成.gs
function myFunc() {
  const b = new BBB();
  b.printMessage("あああー");
}
```

から、 `myFunc()` を実行すると下記のエラーになります。

```
ReferenceError: AAA is not defined
(匿名)	@ 1番目に作成.gs:1
```
これはわかりやすい。AよりBが先に定義されているからね。

この状態から下記のようにファイルの並び順を変えてみます。
(ファイルの中身は変えてません。並び順だけ変えた)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/91b77348-c41d-ff3e-f26e-d8f09809d709.png)

これで `myFunc()` を実行すると正常に実行されます。

```
あああー
```

確かに過去の記事のように「作成順」なんて気にしてられないもんね。
「並び順」のほうが直感的。

問題があるとすると、この事情を知らない後任者が「アルファベット順にファイルを並べ替える」を実行してしまうと狂っちゃうことですかね。。。

(追記ここまで)

----
----

以下は初回の記事投稿時のもの

# 実験

## ちゃんと動くやつ

新しいGoogleAppsScriptを作成します。
元からある `コード.gs` をリネームして `classA.gs` を作成します。

![classA.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/5ec98097-4dd3-0d31-be79-d7b9080e846c.png)

[ファイル] → [New] →  [スクリプトファイル] で `classB.gs` を作成します。

![classB.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/e1bbb476-377f-8db1-d176-c7a1f716e7b3.png)


同じく `myFunc.gs` を作成します。

![myFunc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/9a650b68-2618-f75b-92a4-b95f7d7e3f55.png)


この状態で `myFunc()` を実行します。
実行結果は下記で、意図通り動いています。

```
[20-05-18 10:31:03:965 JST] あああー
```

## 並び順を変えてみる

ファイル名を下記のように変更してみます。意図としては「左カラムに並んでる順番に読み込まれてるのではないか」という仮説の検証です。

![並び替え.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/9a8a1bd0-25e6-9a8a-b410-4de1f1537333.png)


仮説が正しいとすると、AよりBが先に読み込まれるのでエラーになるはずです。

ところが実行結果は

```
[20-05-18 10:36:20:705 JST] あああー
```

でした。どうやら「ファイル名」ではないようです。

## ここでピンと来たね

**ファイルが生成された順番では？**

新規にスクリプトを作成して、今度は `classB.gs` → `classA.gs` → `myFunc.gs` の順番でファイルを作成します。

![ファイル作成順.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/bcc66e78-f3aa-d88c-f2db-810be60a9fa9.png)


この状態で `myFunc()` を実行するとエラー出た！

![error.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/8612/7ad15f95-efd6-bd37-7b9f-877a37b43ce6.png)


# 結論

ここまでの実験から、「ファイルの生成順に読み込まれる」ことがわかりました。(ただ「実はそれ以外の要因があって、今回はたまたま作成順だった」という可能性もあります)

GASでclassの継承をするには、下記のようにするとうまくいきそうです。

1) 1つのgsファイル内に、親クラス、子クラスを定義する。
2) 別のファイルの親クラス、子クラスを書く場合は、親クラスのgsファイルを先に生成する (すでに子が先に書かれていて親クラスのファイルを後から追加するときは、ファイルを新規作成して子クラスの中身を移動すればいい)