12.8.1. ＄im.resolve¶

12.8.1.1. 概要¶

カスタムスクリプト内では、変数パスを記述することで、直接変数値を取得・代入できます。

// 変数値の取得
const value = $variable.array[0].foo;

// 変数への代入
$variable.array[0].bar = value;

しかし、以下のいずれかに該当する場合は、変数値を正しく取得・代入できません。

変数値が配列またはマップ型であり、JavaScript の配列・汎用オブジェクトとして値を取得したい場合

変数パスを直接指定した場合、パフォーマンス劣化を防ぐために、すべての値を持たない特殊なオブジェクトを返します。

そのため、変数値１つずつは取得可能ですが、配列・オブジェクトとして、まとめて変数値を取得することはできません。

変数値が配列またはマップ型であり、他の変数パスに対して代入したい場合

取得元と代入先がともに配列・マップ型であっても、直接代入すると変数値がすべてコピーされません。

変数値の JavaScript ネイティブ関数を使用したい場合

上記と同様に、特殊オブジェクトのため、ネイティブ関数が正しく動作しない場合があります。

例えば Array#forEach や Object.keys を使用したい場合が該当します。

変数パスの途中で $index を使用したい場合、または、$index 単独で取得したい場合

$index は直接カスタムスクリプトで呼び出すことはできません。

上記に該当する場合は、変数パスを直接記述せずに、$im.resolve を使用します。

注意

パフォーマンスについての注意事項

$im.resolve は、変数値の量に応じて処理時間がかかります。配列件数が多い・大規模な変数に対して $im.resolve を使用した場合、画面動作のパフォーマンスに影響が出ることがあります。

IM-BloomMaker はブラウザで動作する機能のため、クライアントPCの処理能力によって、処理時間は大きく変動します。そのため、$im.resolve は処理上必要な場合にのみ使用してください。

12.8.1.2. 変数値の取得¶

変数が配列の場合、JavaScript ネイティブの配列に変換して各要素を取得するサンプルです。

配列を取得して Array#forEach を使用したときの、$im.resolve 使用有無による動作の違いを示します。

// 直接参照の場合、配列に似た代用オブジェクトが取得されます
console.log($variable.array);  // => [{}, {}, {}, push, ...]
$variable.array.forEach((value) => {
  console.log(value);  // => 1回目:{}, 2回目:{}, 3回目:{}
});

// $im.resolve を使用して取得した場合、ネイティブの配列が取得されます
const array = $im.resolve('$variable.array');
console.log(array);  // => [{foo: 1}, {foo: 2}, {foo: 3}]
array.forEach((value) => {
  console.log(value);  // => 1回目:{foo: 1}, 2回目:{foo: 2}, 3回目:{foo: 3}
});

配列がマップ型の場合、JavaScript ネイティブの Object に変換した結果を取得するサンプルです。

マップを取得して Object.keys を使用したときの、$im.resolve 使用有無による動作の違いを示します。

// 直接参照の場合、空オブジェクトに似た代用オブジェクトが取得されます
console.log($variable.object);  // => {}
console.log(Object.keys($variable.object));  // => []

// $im.resolve を使用して取得した場合、ネイティブの Object が取得されます
const object = $im.resolve('$variable.object');
console.log(object);  // => {foo: 1, bar: 2, baz: 3}
console.log(Object.keys(object));  // => ['foo', 'bar', 'baz']

配列やマップの全データを他の変数にコピーするサンプルです。

$im.resolve 使用有無による動作の違いを示します。

console.log($im.resolve('$variable.source'));  // => [{foo: 1}, {foo: 2}, {foo: 3}]

// 直接参照の場合、マップ型の中身はすべて null 扱いです
$variable.destination = $variable.source;
console.log($im.resolve('$variable.destination'));  // => [{foo: null}, {foo: null}, {foo: null}]

// $im.resolve を使用してコピーした場合、すべての値がコピーされます
$variable.destination = $im.resolve('$variable.source');
console.log($im.resolve('$variable.destination'));  // => [{foo: 1}, {foo: 2}, {foo: 3}]

$index を使用した変数パスで変数値を取得するサンプルです。

$im.resolve を使用すると、変数パス内に $index が含まれていた場合、イベントの発火契機となった繰り返しエレメントの位置番号に置き換わります。

// $index そのものの取得（$index = 1 の場合）
const index = $im.resolve('$index');
console.log(index);  // => 1

// 変数値の取得（$index = 1 の場合）
console.log($im.resolve('$variable.array'));  // => [{foo: 1}, {foo: 2}, {foo: 3}]
const value = $im.resolve('$variable.array[$index].foo');
console.log(value);  // => 2

12.8.1.3. 変数値の設定¶

$index を使用した変数パスで変数値を代入するサンプルです。

$im.resolve を使用すると、変数パス内に $index が含まれていた場合、イベントの発火契機となった繰り返しエレメントの位置番号に置き換わります。

// 変数への代入（$index = 1 の場合）
const newValue = 'NEW';
$im.resolve('$variable.array[$index].bar', newValue);
console.log($variable.array[1].bar);  // => "NEW"

目次

12.8.1. ＄im.resolve¶

12.8.1.1. 概要¶

12.8.1.2. 変数値の取得¶

12.8.1.3. 変数値の設定¶

目次