読者です 読者をやめる 読者になる 読者になる

albatrosary's blog

Webアプリケーション開発に関すること

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

HTML5 Advent Calendar

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

です。

HTML5 Advent Calendar 2014 - Qiita

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

Mozilla Developer Network

f:id:albatrosary:20141203161956p:plain

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

f:id:albatrosary:20141203162135p:plain

Object.observe

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

var obj = {};

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

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

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

f:id:albatrosary:20141203220433p:plain

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

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

f:id:albatrosary:20141203220445p:plain

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

f:id:albatrosary:20141203220919p:plain

f:id:albatrosary:20141203220926p:plain

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'

f:id:albatrosary:20141203230404p:plain

f:id:albatrosary:20141203230304p:plain

Set

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

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

f:id:albatrosary:20141203230012p:plain

f:id:albatrosary:20141203230027p:plain

Iterator

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

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

最後に

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