Velo 第７２回　イテレータ

2024年11月5日 11:58

Veloでは CMSデータを呼び出すと個別アイテムの配列となって取り出されます。
これはテーブルやリピーター等のデータ仕様も同じことです。
従って配列に関する知識や技術は大切です。

配列、文字列などは for/of 構文が使える便利なオブジェクトですが、それは意図的にそう設計されているからです。
つまり「for/of 構文が使える」のではなく「for/of 構文を使うために設計されている」と理解するのが正しいです。

反復可能オブジェクト

分かり易く言えば Javascript には for/of 構文が使える一群のオブジェクトが存在し、これを反復可能オブジェクトと言います。
配列、文字列、Setオブジェクト、Mapオブジェクトなどがこれに相当します。
この反復可能オブジェクトの代表的な特徴は次の通りです。

以下の様に、配列 a = [1, 2, 3] について実際のコーディングでその特徴を確認してみましょう。

今度は文字列 b = '123' でその特徴を確認してみましょう。

構文は全く同じです。
つまり配列も文字列も同じ仕組みを持っていることが分かります。
その同じ仕組みが反復可能オブジェクトの仕組みです。

Velo でもアイテムの操作は頻繁に行いますので、反復がどのような仕組みで行われているのかを知ることは Javascript の理解を深めるためにも有益でしょう。

さて、Javascript での反復処理は以下の３つのオブジェクトの連携で成立しています。

ここでは配列など、for/of 構文が使えるオブジェクトを１の反復可能オブジェクトと言っています。
そしてその中核となるオブジェクトが２のイテレータオブジェクトです。
簡単にイテレータと言いましょう。

反復可能オブジェクト(obj)には必ず Symbol.iterator に定義されたメソッドが存在し、その戻り値のオブジェクトとしてイテレータが得られます。
従ってイテレータは次のコードで取り出すことが出来ます。

const iterator = obj[Symbol.iterator]();

「Symbol.iterator とは」を気にする必要はありませんが、Javascript に既定の Symbolオブジェクトが持つある種の規定値です。

イテレーターとはどんなオブジェクトなのでしょうか。
それは３の反復結果オブジェクトを返す next() メソッドをもつオブジェクトの事です。

では３の反復結果オブジェクトとは何でしょうか。
それは value と done をプロパティに持つオブジェクトです。
value は値を、done はブール値を持ちます。
簡単に言えば {value: 1, done: false} のようなオブジェクトです。

イテレーターは next() メソッドを実行する度にこの反復結果オブジェクトを返します。
そしてvalue を取り出し、消化しきると done が true になり反復を終了します。

従って反復可能オブジェクト(obj)に対し、次の様にコーディングするとそのオブジェクトが持っている値を全てコンソールに吐き出します。

for/of 構文はこの工夫をしなくても、反復可能オブジェクトに備わった機能として使えることを意味しています。

また普通はイテレータ自身も反復可能オブジェクトになっていますので、イテレーターに対しても for/of 構文やスプレッド演算子は有効です。

Velo開発のご依頼はこちら