レポート

Domenic Denicola氏,JavaScriptの今を紹介 ~東京Node学園祭2015 基調講演

この記事を読むのに必要な時間:およそ 4.5 分

2015年11月7日,株式会社サイバーエージェントセミナールームにて東京Node学園祭2015が開催されました。本稿では,基調講演の模様をレポートします。

画像

基調講演はECMAScriptを策定している委員会TC39のメンバーのDomenic Denicola氏です。PromiseやStreamの仕様策定に携わっていることで有名です。また日本でもよく使われているjsdomの作者でもあります。

今回の発表は,JavaScriptの辿った歴史から現在のECMAScript2015(以下ES2015),そして未来について包括的なものとなりました。

画像

スライドはSlideShareにて公開されています。

JavaScriptの歴史

JavaScriptは今から約20年前の1995年にNetscapeで実装されたのがはじまりで,1997年にECMAScriptとして標準化され,現在に至ります。

2005年にはAjaxが登場し,翌年2006年にjQueryが広く使われるようになりました。2008年にはNode.jsのエンジンでもあるV8が登場し,JavaScriptのエンジン間で速度競争がはじまりました。2009年はNode.jsの誕生,ECMAScript5が策定され今日のウェブを支えています。

2012年以降はNode.jsを搭載したロボットなどハードウェアや,asm.jsWebAssemblyでより低いレイヤのAPIを扱えたりと広がりを見せています。

画像

JavaScriptの現在

今年の6月にES2015が策定され,各ブラウザやランタイムがこの仕様に即した実装をしています。

ES2015の中でも大きな変更はシンタックスです。中でも,クラス糖衣構文class, extends, superやアロー関数arr.map(x => x * x)),ブロックスコープ{ let x = 5; const y = 10; }はNode.jsで既に実装されており,今日から使うことができます。分割代入var {x, y} = getPoint()),レスト/スプレッドvar [first, ...rest] = els; Math.max(...myArray)),デフォルトパラメータfunction parseInt(x, base = 10) { }はまだ使えません。

画像

次に大きな変更はデータの構造です。マップとセットはO(1)でアクセスできるオブジェクトです。また,ウィークマップ/ウィークセットはライブラリ提供者によりプライベートな名前空間を提供できます。そして,for-of構文によってオブジェクトでも配列でも同じ構文で書くことが可能になりました。これらはNode.jsでもう使うことができます。

画像

最後に紹介したのは,これからのJavaScriptを大きく変える革新的な新機能です。ジェネレータとPromiseは非同期処理を書くための機能です。これまでのJavaScriptは非同期処理を様々な方法で処理していましたが,今後は標準化されたこれらの機能で統一されていくでしょう。プロキシはオブジェクトのメソッドに任意の処理を挟むことができる機能で,ログ出力やプロファイルが想定されています。テンプレートストリングjsx`<a href="${url}">${text}</a>`は,文字列に変数を挿入できる構文です。中でも最も重要な機能はビルトインオブジェクトをサブクラスとして使えるようになったことですclass Elements extends Array { })。これによって,これまで配列ではなかったDOMのリストなども配列として扱えるように現在実装が進められています。これらの内でプロキシ以外はNode.jsで使うことができます。

画像

実際のプロジェクトでもvarは使わずにlet/constを使っていたり,シンボルやアロー関数を使っている様子もスニペットと共に紹介しました。ESLintを用いて新しい構文を使うように強制しています。非同期処理もジェネレータとPromiseによって見通しよく書くことはとても楽しいそうです。

まだES2015の機能が実装されていないブラウザや,標準化されていない構文のためにBabelを使っています。BabelはES2015や,標準化されていない構文を未実装のブラウザ等で動作させるためのトランスパイラです。Babelは新しい構文を試すことに向いていますが,標準化されていない構文を使う際には将来変更されることを考慮して書くようにしてください。

ブラウザでの新たな機能

ここまではJavaScriptの構文を取り上げてきましたが,ブラウザで新たな機能も実装されているので"Node"学園祭ですがこれらについても紹介しました。この背景として,現在大半がC++で書かれている機能をJavaScriptに低レベルのAPIとして提供することを目的とするThe Extensible Web Manifesto(日本語訳)があります。これによって今までJavaScriptではできなかったことができるようになってきたと言います。

まずはJavaScriptで任意のHTML要素を定義できるカスタムエレメンツです(リスト1)。これはGoogle Chromeでは以前から提供されている機能でしたが,ようやく他のブラウザでも実装がはじまりました。

リスト1 カスタムエレメント

class CustomImage extends HTMLElement {
  constructor(src) {
    super();
    if (src !== undefined) this.src = src;
  }

  get src() {
    return (new URL(this.getAttribute("src"), this.baseURI)).href;
  }

  set src(value) {
    this.setAttribute("src", value);
  }

  [Element.attributeChanged](name) {
    if (name === "src") updateShadowDOM(this, this.src);
  }
}

document.registerElement("custom-image", CustomImage);

次はサービスワーカです。サービスワーカの例としてToolboxというライブラリを紹介しました。これはサービスワーカでキャッシュサーバを作り,通信のキャッシュを制御するライブラリで,これによってよりサーバとクライアントでより近い開発ができるようになります(リスト2)。

リスト2 サービスワーカ

toolbox.precache(['index.html', '/site.css', '/images/logo.png']);

toolbox.cache('/data/2014/posts.json');
toolbox.uncache('/data/2013/posts.json');

toolbox.router.get('/:foo/index.html', (req, values) => {
  return new Response(
    `Handled a request for ${req.url}
    with :foo as ${value.foo}`);
});

toolbox.router.get('/myapp/a', toolbox.networkFirst);
toolbox.router.get('/myapp/b', toolbox.networkOnly);
toolbox.router.get('/myapp/c', toolbox.cacheFirst);
toolbox.router.get('/myapp/:page', toolbox.cacheOnly);
toolbox.router.get('/(.*)', toolbox.fastest);

最後はカスタムペイントです。これまでCSSによる描画はJavaScriptから制御しづらいものでしたが,カスタムペイントでは新たなCSSプロパティを追加できます。カンバスのようなAPIでスタイルをすべて変えることができます(リスト3)。

リスト3 カスタムペイント

registerPaint('circle', class {
  static get inputProperties() { return ['--circle-color']; }

  paint(ctx, geom, properties) {
    // 色を変える
    ctx.fillStyle = properties.get('--circle-color');

    // 中心点と半径を計算する
    const x = geom.width / 2;
    const y = geom.height / 2;
    const radius = Math.min(x, y);

    // 円を描く
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
    ctx.fill();
  }
})

Domenic Denicola氏は「これらのブラウザでの新たな機能から,Node.jsでの開発のインスピレーションになれば幸いです」と述べています。

著者プロフィール

小林貴也(こばやしたかや)

福井工業高等専門学校を卒業後いろいろあって株式会社サイバーエージェントへ入社。JavaScriptを書いたりRailsを書いたりしている。映画をみたりDJをしたりゲームをするのが趣味。

Webサイト:http://jgs.me
Twitter:@neo6120

コメント

コメントの記入