Next2D NoCode ToolでJavaScriptを使う[上級編]

タイムラインで埋め込むJavaScriptはクロージャのローカル変数なので、別のフレームで埋め込んだJavaScriptでは変数にアクセスができません。
そこで、全てのDisplayObjectからアクセス可能な変数管理機能と、DisplayObject単体に格納できる変数管理機能を実装しています。
今日は変数管理を紹介します。

# ローカル変数
固定のDisplayObjectにだけ変数を格納したい場合に利用します。
利用シーンとしては、個別のキャラクターのパラメーター管理などに利用してます。

## getLocalVariable
ローカル空間から変数の値を取得します。
`key`は型で判定します。例えば`key`を`Number`の`0`で取得した場合と、`String`の`"0"`で取得した場合では戻り値が異なります。

```javascript
const value = this.getLocalVariable(key);
```

## setLocalVariable
ローカル空間へ値を保存します。

```javascript
this.setLocalVariable(key, value);
```

## hasLocalVariable
ローカル空間にある変数を指定のキーでヒットするかを判断します。

```javascript
const result = this.hasLocalVariable(key);
```

## deleteLocalVariable
ローカル空間にある変数を削除します。

```javascript
this.deleteLocalVariable(key, value);
```

# グローバル変数
グローバル空間から変数の値を取得します。
どのDisplayObjectからもアクセスが可能です。削除した場合は全てのDisplayObjectからアクセスできなくなります。
利用シーンとしては、経過時間や共有表示項目などで利用します。

## getGlobalVariable
グローバル空間から変数の値を取得します。
`key`は型で判定します。例えば`key`を`Number`の`0`で取得した場合と、`String`の`"0"`で取得した場合では戻り値が異なります。

```javascript
const value = this.getGlobalVariable(key);
```

## setGlobalVariable
グローバル空間へ値を保存します。

```javascript
this.setGlobalVariable(key, value);
```

## hasGlobalVariable
グローバル空間にある変数を指定のキーでヒットするかを判断します。

```javascript
const result = this.hasGlobalVariable(key);
```

## deleteGlobalVariable
グローバル空間にある変数を削除します。

```javascript
this.deleteGlobalVariable(key, value);
```

# サンプルコード

`MovieClip`を2個作成して、それぞれに名前を付与します。
一つは加算用の`MovieClip`なので`plus`と名付けます。
もう一つは減算用の`MovieClip`なので`minus`と名付けます。

1フレームで`setInterval`で10もしくは-20になった時点で止まる加算と減算の処理を実行します。
そのままフレームを進めて10フレーム目で`stop`関数でフレームを止めます。

## 1フレーム目
プラス関数は10になったら終了して、マイナス関数は-20になったら終了。
進行状況をテキストで出力します。

```javascript
// 終了判定の値をグローバルにセット
this.setGlobalVariable("plusEnd", 10);
this.setGlobalVariable("minusEnd", -20);

const plusTimerId = setInterval((plus) => 
{
    // 初回は変数がないので、0をセット
    if (!plus.hasLocalVariable("plusNumber")) {
        plus.setLocalVariable("plusNumber", 0);
    }

    // 値を加算
    let value = plus.getLocalVariable("plusNumber");
    plus.setLocalVariable("plusNumber", ++value);

    // テキストエリアに現在の数値を表示
    plus.display.text = `${value}`;

    // 10になったら終了
    if (plus.getLocalVariable("plusNumber") === plus.getGlobalVariable("plusEnd")) {
        clearInterval(plus.getLocalVariable("timerId"));
    }

}, 1000, this.plus);

// タイマー終了に必要なIDをローカル変数に格納
this.plus.setLocalVariable("timerId", plusTimerId);

const minusTimerId = setInterval((minus) => 
{
    // 初回は変数がないので、0をセット
    if (!minus.hasLocalVariable("minusNumber")) {
        minus.setLocalVariable("minusNumber", 0);
    }

    // 値を減算
    let value = minus.getLocalVariable("minusNumber");
    minus.setLocalVariable("minusNumber", --value);

    // テキストエリアに現在の数値を表示
    minus.display.text = `${value}`;

    // -20になったら終了
    if (minus.getLocalVariable("minusNumber") === minus.getGlobalVariable("minusEnd")) {
        clearInterval(minus.getLocalVariable("timerId"));
    }

}, 1000, this.minus);

// タイマー終了に必要なIDをローカル変数に格納
this.minus.setLocalVariable("timerId", minusTimerId);
```

## 10フレーム目

```javascript
this.stop();
```

## 動作サンプル動画
※ 1フレームのコードは上記のコードをそのままコピーして利用してます。
<iframe width="560" height="315" src="https://www.youtube.com/embed/y4hx35pMtm8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

もし、この記事を見て、興味が出た方はこちらか動作確認ができます。
[NoCode Tool](https://tool.next2d.app)

また、その他の関数に関しては、`Next2D Player`の[API Docs](https://next2d.app/docs/player/)から閲覧できます。

如何だったでしょうか？
これまで、NoCode Toolの使い方を紹介してきましたが、明日からは`Player`の使い方を紹介できればと思っています。