HTML5 Advent Calendar 4日目：【追加】最近気になっているHTML5の最新技術に触れてみました

このエントリーは「HTML5 Advent Calendar 2014」12月4日の記事です。前日HTML5技術で気になっている機能を味見しましたが追加でもう少し記載します。気になる機能は

• Object.observe
• Map/Set/Iterator

です。

HTML5 Advent Calendar 2014 - Qiita

さてMDN(Mozilla Developer Network)というのをご存知だろうか？

Mozilla Developer Network

多くの方がこのサイトに訪れているとは思いますがこのサイトを開きコンソールを表示すると「Mozilla」が現われます！是非コンソール表示してみてください。

Object.observe

Object.observe（）メソッドは、非同期的にオブジェクトへの変更を観察するために使用されます。

var obj = {};

Object.observe(obj, function(changes) {
  console.log(changes);
});

この「obj」に対してデータを登録します。

obj.a = {'hoge': 1};

今度は、この「obj.a」のデータを更新してみます

obj.a = {'fuga': 1};

Object.observe は現在 ES7 のドラフトとして定義されています。各ブラウザの実装状況ですが次の通りです。

Map/Set/Iterator

Map、Set、Iteratorの実装がいまいちなのはちょっとと思いますが ES6 でということです。

Map

Map オブジェクトは単純なキー/値写像（マップ）です。キーあるいは値として任意の値（オブジェクト、プリミティブ値も）を使うことができます。

var map = new Map();
map.set('key1', 'hoge');
map.set('key2', 'fuga');
map.get('key1');
< 'hoge'

Set

Setオブジェクトを使用すると、任意の型のユニークな値、プリミティブ値またはオブジェクト参照かどうかを保存することができます。

var set = new Set();
set.add('hoge');
set.add('fuga');
set.has('hoge');
< true

Iterator

そしてイテレータです。先ほどのSetを利用して次のようにできます。

var ite = set.keys()
ite.next();
< Object {value: "hoge", done: false}
ite.next();
< Object {value: "fuga", done: false}

最後に

HTML5はまだまだこれからアプリケーション開発に必要な技術が盛りだくさんで展開されます。まさにWebがプラットフォームになる日も近いと感じられます。今のうちに色々な技術を習得しておくのは吉かと思います。と前回と同じコメントを書いてみました。