> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# グローバル変数

> YiDA でグローバル変数を作成・バインド・更新する方法を解説。React の state に似たページ State 管理の仕組みと、API 経由での再レンダリング制御をマスターできます。

グローバル変数は、React の state に類似した概念です。主にページレベルの State 管理に使用され、開発者は API を呼び出してグローバル State を変更し、ページの再レンダリングをトリガーできます。

## グローバル変数の作成

データソースパネルで変数を追加することで、グローバル変数を作成できます。

作成時には、以下の項目を指定できます。

* **名前** - グローバル変数の名前を宣言します。JavaScript の変数命名規則に従ってください。
* **説明** - グローバル変数の説明を記述します。この説明は変数バインディング時に表示されます。
* **データ** - グローバル変数の初期値を設定します。文字列、ブール値、オブジェクトなど、JavaScript の基本型に対応します。

<Tip>
  YiDA プラットフォームは、現在のページ URL からパラメータを取得するためのデフォルトのグローバル変数 urlParams を提供しています。URL パラメータには `this.state.urlParams.xxx` でアクセスでき、`xxx` はパラメータ名です。該当のパラメータが存在しない場合は undefined を返します。
</Tip>

## API

YiDA プラットフォームは、グローバル変数の読み取りと書き込みに対応する 2 つの API を提供しています。

### 読み取り

変数バインディングおよびアクションパネルでは、以下の API を使用してページのグローバル変数を取得できます（変数バインディングの場面では、これを省略して state.xxx を直接使用できます）。

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
const name = this.state.name;
```

### 更新

ページのグローバル変数を変更し、ページの再レンダリングをトリガーするために、setState API を提供しています（React の setState に類似）。以下のとおりです。

```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
this.setState({
  name: 'Jack'
});
```

<Warning>
  YiDA の setState API は React と一見同じですが、以下の点で異なります。

  * YiDA の setState API はコールバック機能を提供していないため、React の setState のようにコールバック関数を渡すことはできません。
  * YiDA の setState API はリアクティブなデータソリューションを採用しているため、setState 実行直後に新しい State データへアクセスできます。以下のとおりです。

  ```js theme={"theme":{"light":"github-light","dark":"github-dark"}}
  // setState 実行前に this.state.name が 'Alice' であると仮定
  this.setState({
    name: 'Bob'
  });

  // 出力: Bob
  console.log(this.state.name); 

  ```
</Warning>

## 利用シーン

グローバル変数を定義したあと、カスタムページでの利用シーンは 2 つあります。

### 変数バインディング

コンポーネントプロパティの変数バインディングを設定することで、State をバインドできます。手動入力またはデータソースからの選択により、グローバル変数をバインドできます（変数バインディングの場面では、変数の形式は state.xxx となります）。

テキストコンポーネントのコンテンツプロパティを変数にバインドします。

コンテンツデータを name という名前のグローバル変数にバインドします。

右上のプレビューをクリックすると、以下のようなバインディング結果を確認できます。

### イベント処理

アクションパネルでは、JavaScript プログラミングを通じてグローバル変数の読み書きを行えます。以下のとおりです。

まさに React の API そのものと言えます。[イベント処理ドキュメント](/ja/open/yida/guide/concept/event) にアクセスして、イベント処理の使用方法もあわせてご確認いただけます。