Slate 関数の定義と実行

関数エディタでは、クエリ結果、グローバル変数、ウィジェットプロパティなどの Handlebars にアクセス可能なアイテムに対して JavaScript 関数を定義および実行できます。

関数は DOM や Slate 名前空間にアクセスできず、状態は保存されません。データ変換のみに使用できます。

関数は、文字列解析などの軽量なデータ処理タスクに通常使用されます。関数は非同期構文（async、await キーワード、プロミスを含む）に対応しています。

ドキュメントごとの関数ライブラリ

ユーザーは、パラメーターを持つ再利用可能な JavaScript 関数を作成できます。これにより、コードのリファクタリングが容易になり、関数内のコードのコピーと貼り付けが減ります。また、Re-run All Function ボタンを使って、関数ライブラリに依存するすべての関数を再実行して更新することもできます。

デフォルトで利用可能な JavaScript ライブラリ

関数の使用を強化するために、Slate はデフォルトで次の外部 JavaScript ライブラリを提供しています：Lodash、Math.js、Moment、Numeral、および es6-shim。関数の作成時にこれらのライブラリを自由に使用してください。

すべてのユーザーがこれらの機能をサポートするブラウザを使用することが義務付けられていない限り、ES6 構文機能を使用しないでください。

例

例 1：2つのウィジェットプロパティを追加する

この関数は、2つのドロップダウンウィジェットの値を追加し、結果をテキストウィジェットに表示します。

関数エディタを開き、addNumbers という関数を追加します。次の JavaScript を追加してください：

Copied!
1
2
// {{lhs.selectedValue}} と {{rhs.selectedValue}} を足す値を返します。
return {{lhs.selectedValue}} + {{rhs.selectedValue}};

次に、テキストウィジェットで、Handlebars の {{addNumbers}} を参照して関数の戻り値を表示します。

例 2: クエリ結果の解析

この関数は、クエリ結果の各要素を解析します。asteroids という名前のクエリがあり、次の JSON を返すと仮定します：

Copied!
1
2
3
4
5
{
  "id": [6, 7, 8],  // ID番号の配列
  "name": ["Hebe", "Iris", "Flora"],  // 名前の配列
  "diameter": [185.18, 199.83, 135.89]  // 直径の配列
}

次の関数は、名前とIDを組み合わせた結果を返し、さらに新しい円周プロパティを追加します。

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var asteroids = {{asteroids}};  // asteroidsは変数で、{{asteroids}}のデータが入ります
var formattedNames = [];  // formattedNamesは整形された名前の配列を保存するための変数です
var circumference = [];  // circumferenceは円周の配列を保存するための変数です

for (var i = 0; i < asteroids.name.length; i++) {  // asteroids.nameの配列の長さだけループします
  formattedNames.push(formatName(  // formatName関数を呼び出し、結果をformattedNames配列に追加します
    asteroids.name[i], asteroids.designation[i]));
  circumference.push(asteroids.diameter[i] * 3.14);  // 直径に3.14を掛けて円周を計算し、結果をcircumference配列に追加します
}

return {  // 結果を返します
  name: formattedNames,  // 整形された名前の配列
  diameter: asteroids.diameter,  // 直径の配列
  circumference: circumference  // 円周の配列
};

function formatName(name, designation) {  // 名前とデザイネーションを引数に取り、整形された名前を返す関数です
  return name + " (" + designation + ")";
}

結果として得られる JSON は以下のようになります。

Copied!
1
2
3
4
5
{
  "name": ["Hebe (6)", "Iris (7)", "Flora (8)"],  // それぞれの名前は "Hebe (6)", "Iris (7)", "Flora (8)"
  "diameter": [185.18, 199.83, 135.89],  // それぞれの直径は 185.18, 199.83, 135.89 
  "circumference": [581.4652,627.4662,426.6946]  // それぞれの円周は 581.4652,627.4662,426.6946
}

例 3: setTimeout と promises を使用して一時停止を作成する

この関数は、setTimeout を5秒間隔で作成し、Slate 関数を実行する前に5秒間一時停止させます。

Copied!
1
2
3
4
5
6
7
8
// Promiseを返す関数
return new Promise(resolve => {
  // 5秒後にresolveを実行する
  setTimeout(() => {
    // Promiseが解決される
    resolve();
  }, 5000);
});

この関数は、5 秒間の一時停止後に undefined を返します。