2014年のJavascriptやCSS、最も楽しみな5つのテクノロジーは、asm.jsと、、、

Web platform: five technologies to look forward to in 2014

上記の記事にて、「ウェブプラットフォームで待ち遠しい５つのテクノロジー」が紹介されています。

asm.js: near-native performance on the web

ParallelJS: parallelized JavaScript code

ECMAScript 6 (ES6): evolving the language, uniting the community

Web Components: a standard infrastructure for widgets

CSS Grid Layout: native-like GUI layout

と、５つのテクノロジーが挙げられています。「asm.js」「ECMAScript 6」「Web Components」あたりは聞いたことがあったのですが、「ParallelJS」「CSS Grid Layout」っていうのは初耳でした。

詳しい紹介は上記記事にて(英語で)載っていますので、簡単に紹介します。

1. asm.js

asm.js が公式サイトで、Mozillaの支援で開発されています。目的としては「高速なJavascript」といった感じです。ゲームであったり、いわゆるソフトウェア的なものであったりを、「Javascriptで書かれているけれども高速に動く」ようなものを作れます(作りたいです)。

よく、コンパイル型の言語(Cだったり)は高速だと言われます。例えば、その一つの理由として、コンパイル時に型が解決されることがあげられます(静的型付け)。一方でJavascriptはコンパイル型でなく、型の指定もしません。しかし変数を作った時点で型というのはだいたい決まっています。そこで、Javascriptの言語仕様に制約を与えて、型指定ができるようにしましょう、他にもいろいろ最適化できるようにしましょう、というのがasm.jsの基本的な考え方だと思います。

var bmi = weight / (height * height); // 普通にJavascript
var bmi = weight / (height * height) | 0; // int bmi;
var bmi = +(weight / (height * height)); // double bmi;

後２行は、型変換時によくあるイディオムで、旧来のJavascriptの仕様です。このような旧来の仕様を使って、asm.jsの仕様は作られています。そのため「Javascriptのsubset」であると言われます。

ただ、asm.jsは人間が書くものという感じはあまりしません。x|0 じゃなくて int x と書きたいものです。そのため、別の言語で作って(例えばC)、Emscriptenなどで"コンパイル"などして使います。使いどころは難しいですが、ゲームやOSから実行するソフトウェアなどが、それに該当するのかなあという感じです。Webアプリの場合はDOM操作やネットワークが重さの原因なので、Webアプリのための銀の弾丸ではありません。ゲームデモとか見るとすごいです。

2. ParallelJS

ParallelJS: data parallelism for JavaScript

こちらの記事ですが、次のようなブコメがついています。

ECMAScriptへの並行・並列機能の導入について。配列操作の並列実行についての条件の簡単な解説有り。データの並列化およびタスクの並列化。

b:id:saneyuki_s:20131224

記事を読むと、ECMAScript 7、ECMAScript 8へ追加したい言語仕様として捉えられているようです。そのための低レベルAPIとして、SIMDのAPIとかがECMAScriptの仕様としてあるようです。

こちらもasm.jsと似ていて「Javascriptの高速化」で、でもこれが有効なのはゲームとかOS寄りかなあという印象です。間違ってたらごめんなさい！

3. ECMAScript 6

ECMAScriptとは、Javascriptの元となっているような言語仕様です。逆に、JavascriptはECMAScriptの「方言」と言われるようです(ECMAScript - Wikipedia)。ECMAScript 6は現在策定中の仕様ですが、まだ全然使えないというわけではなく、一部は実装されています(Mozilla における ECMAScript 6 のサポート - JavaScript | MDN)。

なぜこれが大事なのかというと、Javascriptが「言語として進歩する」からです。ちょっとだけ似たような話ですが、JavaなどもJava 8として言語仕様が進歩しましたね。

まだES 6は策定中で、ブラウザーに実装されているとは言いがたいですが、Google製のTraceurなどを使えば、ES6準拠で書いて、それを既存のブラウザ上で動かすことができます(年の瀬なのでGoogle作ったソフトのリポジトリ(github.com/google)まとめてみた！ - 病みつきエンジニアブログ)。

4. Web Components

あなたの知らない超絶便利なWeb開発を叶える仕様Web Componentsとは～Google I/O 2013まとめレポート (1/3) - ＠IT

Web Component概要

こちらはあまり知らないので記事紹介です！　簡単な概念としては、要素を「ウィジェット化」して、セマンティックにしましょう、みたいな感じです。

例えばカレンダーを作った時、旧来の方法だと、それっぽいtableを作って、それっぽいJSコードを書いたりします。しかし本当にやりたいのは「カレンダー」をhtml中にコーディングすることです。そこで、「カレンダーを表す要素」を定義してしまって、埋め込みましょう、というような。

Web Components普及の夜明け！？Polymer.jsを試してみた。 | OpenWebにて、コードが紹介されています。

5. CSS Grid Layout

あまりにも知らないのでWeb platform: five technologies to look forward to in 2014を参考にしていただきたいのですが、グリッドレイアウトがCSSの仕様として策定されていて、「IEはサポート済み、Chrome/Firefoxは2014にはサポート」といった感じらしいです。

「なぜこれがExcitingなのか」の理由として、「CSS Grid Layout will eliminate that gap.」と書かれています。ここでいうgapは「Web(HTML/CSS)とネイティブ(iOS、Android)の差」のことです。確かにAndroidのレイアウトは、Grid Layoutっぽい配置で書くし、レスポンシブになってとても良いんですよね。この考え方がCSSで一般的になるのは、確かに楽しみだなーと感じました。

Web platform: five technologies to look forward to in 2014に、サポート状況や使い方へのリンクがあるので、ぜひご覧ください！