グローバル変数

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

グローバル変数の作成

データソースパネルで変数を追加することで、グローバル変数を作成できます。作成時には、以下の項目を指定できます。

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

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

API

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

読み取り

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

const name = this.state.name;

更新

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

this.setState({
  name: 'Jack'
});

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

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

// setState 実行前に this.state.name が 'Alice' であると仮定
this.setState({
  name: 'Bob'
});

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

利用シーン

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

変数バインディング

コンポーネントプロパティの変数バインディングを設定することで、State をバインドできます。手動入力またはデータソースからの選択により、グローバル変数をバインドできます（変数バインディングの場面では、変数の形式は state.xxx となります）。テキストコンポーネントのコンテンツプロパティを変数にバインドします。コンテンツデータを name という名前のグローバル変数にバインドします。右上のプレビューをクリックすると、以下のようなバインディング結果を確認できます。

イベント処理

アクションパネルでは、JavaScript プログラミングを通じてグローバル変数の読み書きを行えます。以下のとおりです。まさに React の API そのものと言えます。イベント処理ドキュメントにアクセスして、イベント処理の使用方法もあわせてご確認いただけます。

はじめに

開発ガイド

API

チュートリアル

コンポーネント