こんにちは！ 昨年の暮れにLIGへ入社したバックエンドエンジニアのKazと申します。普段はLIGの自社サービス開発をおこなっています。どうぞよろしくお願いいたします。
さて、私は昨年の11月に開催された大規模Node.jsイベント「東京Node学園祭2015」に参加しました。今回から何回かにわたり連載として、イベントのレポートをお届けします。
年に1度の大イベント！「東京Node学園祭」とは？
Node.jsの日本での普及や情報共有を目指す「Node.js日本ユーザグループ」。このグループでは定期的に「東京Node学園」と称したイベントを開催していて、Node.jsに関する情報提供や講演などをおこなっています。
今回で5回目となる「東京Node学園祭2015」では、Node.jsや関連プロジェクトの開発にも携わる海外登壇者を始め、国内外から数々の著名な方々が登壇されました！ 数多くのセッションがあるためルームA・Bに分かれて講演がおこなわれました。
- Node.jsとは？
-
Node.jsとは、Webサイトを作る上では欠かせないプログラム言語「JavaScript」をサーバーサイドで動かせるプラットフォームです。Webサイトを表示するブラウザー（クライアント）とデータを処理するサーバーで同じ言語を使えるということでエンジニアとの親和性が高く、JavaScript自体の急速な技術進化とあわせて近年とても注目されてきています。
Node.jsについてのより詳しい説明は「ゼロから始めるNode.js入門」を始め、数々の記事がLIGブログのNode.jsカテゴリーにありますので、ご興味のある方はぜひ見てみてください！
今回「東京Node学園祭」からレポートしていくセッション
ようやく本題に入ってきますが、この連載では私が1日通して参加したルームAのセッションの中から、主に海外登壇者となる下記の方々のセッションを取り上げていきます。
- The State of JavaScript（Domenic Denicola）
新しいJavaScript（ECMAScript）で導入される、あるいは予定されている機能などについて、自らも仕様策定に携わるDomenicがプレゼンする目玉セッション。 - How did we get here?（Rod Bagg）
Node.jsからio.jsへと派生した歴史とその背景、再統合から今後にかけてのNode.jsについて、Node.jsのTSCメンバーRodがプレゼンされました。 - Node.js in the Enterprise（Dan Shaw）
NodeSource社のCo-Founder兼CTOがプレゼンする、大企業でのNode.js活用事例。NetflixやPayPalなど日本でも著名な企業から果てはNASAまで採用するNoe.jsについて、その実例と功績を紹介されていました。 - "npm":">=3"（Kat Marchán）
npmのCLI開発者Kat。いまや単一言語用のパッケージマネージャーとしては世界一のパッケージ数を誇るnpmの最新バージョンnpm3の特徴と、今後のnpmの展望。 - Electroknit! – Pixel to sweater with Node.js（Mariko Kosaka）
ニューヨークで活躍される日本人JavaScript開発者Marikoが贈る、編み物とNode.jsのコラボレーション。年代物の編み機のデータ構造解析からピクセル単位での画像処理まで、そのほとんどをJavaScriptで開発された物語。 - Hardware Hacking for JavaScript Developers（Tomomi Imura）
サンフランシスコのPubNubで働くTomomiがプレゼンする、Node.jsと数行のJavaScriptで簡単にコントロールできるIoTデバイスのかんたんDIY講座。
これらの記事は順番に公開していきます！ さて、ということでトップバッターかつ目玉講演の「The State of JavaScript」をご紹介します。
The State of JavaScript – JavaScriptのこれまでと、これから
ESの仕様策定にも携わるGoogleのエンジニア Domenic Denicola氏
今回のNode学園祭では外国からも幾名か招請され講演がおこなわれました。その中でもひときわ注目されていたのがDomenic氏です。
 |
Domenic Denicola Googleのエンジニア。Chromeチームでブラウザの開発に携わるほか、TC39グループに参加しJavascriptの標準化版であるECMA Scriptの策定や言語の発展などにも尽力している。また、WHATWGでHTMLとストリームの標準化策定に関わり、Googleに参加する前からTC39のパートナーとしPromiseの導入を推し進めた。サイドプロジェクトでDom/HTMLを実装しなおした「jsdom」の開発なども進めるとのこと。 |
|---|
経歴だけでお腹いっぱいになるほど凄い経歴をお持ちの御大がはるばる東京Node学園に向けて来日されたということで、会場となったサイバーエージェントさんの会議場を2部屋ぶち抜いたセッションは大賑わいを見せていました。
講演の内容
アジェンダとして下記の内容が挙げられました。この記事ではまず前半部分をまとめています。
- これまでの歴史
- 今日におけるJavascript
- プラットフォームの新たな進化
- Javascriptは、今後どうなるのか
1. これまでの歴史
まずスライドの第1章にて、これまでのJacaScript界隈の流れを解説しました。流れは次の表の通りです。
| 1995年 | フォームバリデーション、画像ロールオーバー |
|---|---|
| 1997年 | ECMA-262 第1版、Internet Explorer 4、DHTML |
| 1999年 | ES3（新しい構文、try/catch/finally句、正規表現） |
| 2005年 | Ajax |
| 2006年 | jQuery |
| 2008年 | V8（スピード競争の幕開け） |
| 2009年 | ES5、Node.js、PhoneGap、JSCnof、ServerJS/CommonJS |
| 2010年 | Backbone.js、RequireJS |
| 2012年 | Windows 8、Nodecopter |
| 2013年 | Nodebots、next-gen MVC、Extensible web、asm.js |
| 2015年 | io.js、ES2015、MS Edge、Node.js 4、Web Assenbly |
なお、2015年の「Web Assembly」に関しては、講演の後半で軽く触れられています。
2. 今日におけるJavascript
さて、彼が今回議題にあげたのはJavascript/ECMA Scriptの仕様と今後についてです。ECMA Script 6（es2015）は、その先駆であり長らくスタンダードであったES3や5とは一線を画し、数々の新しい記法や機能などを追加しがらりと仕様を塗り替えた大幅なアップデートとなりました。
Domenic氏の講演では前半にまずこれらをおさらいする形でサラリと説明がおこなわれました。この記事ではせっかくですので、Domenic氏が口頭で説明された内容とスライドの内容に併せてそれぞれの新しい機能などについて説明も加えながら進めていきます。
なお各ポイントのより詳しい例を含め、es2015のさまざまな変更点や新機能を取り上げた「es6-cheatsheet」というページがGitHubに公開されていますので、参考として各項目のタイトルからそちらへのリンクも貼っています。
またDomenic氏の講演で挙げられた内容ではありませんが、これから紹介するes2015の「新機能」は、そのいくつかがすでに既存のブラウザやNode.jsによってサポートされており、今すぐ利用可能なものもあります。そういった各ブラウザや実行環境でのサポート状況は「ECMAScript 6 compatibility table」で参照できます。
新しい記法
クラス
es2015では、ついにclassや付随するextends、superなどが記法としてサポートされました。これまでJavascriptではクラスの定義やインスタンス生成をプロトタイプを用いて擬似的に表現する必要があり、記述量も制約も多くいろいろと面倒でした。これがes2015からは他の言語とおなじ感覚で、直感的かつ簡潔にクラス定義ができるようになります。
アロー関数
百聞は一見にしかず。まずは以下をご覧ください。
arr.map(function(x){ return x * x; })配列の中身を全部二乗して回る、よくある関数ですね。
私個人的にはこのように第一級関数が使えるだけでも大満足なのですが、時代はさらなる手軽さを求めているようです。ということでes2015からは下記のように書けてしまいます。
arr.map(x => x * x)なんということでしょう……！ Pythonなんかだとlambda関数で同じような記法を使えますが、es2015ではもはやfuncやlambdaなんて野暮なプレフィックスさえ要りません。矢印で一発です。
構造化代入
こちらもコードで見てみましょう。
var {x, y} = getPoint()返り値のオブジェクトを分解して、キーが一致する値をそれぞれ代入しています。この例はオブジェクトの構造化代入があげられていますが、配列の場合はもっとシンプルで[a, b] = [2, 5]のような書き方が可能です。
たとえばPHPなんかだとlist()言語構造（ややこしいことに関数ではない）で同様のことができたりしますが、それらよりよっぽどシンプルで直感的な記法ですね。
Rest・Spread演算子
Spread演算子で可変数の変数を代入したり展開できるようになりました。
<pre>var [first, ...rest] = els;
Math.max(...myArray)</pre>関数の引数で使えば可変長の引数を取れてargumentsとはもうオサラバ！ ……とまではいかないかもしれませんが、わざわざ呼ぶ方も同様に可変長引数を渡すのにFunction.prototype.apply()を使う必要がなくなり、受け手も同様に直感的に可変長引数を受け取れるようになります。
引数のデフォルト値
function parseInt(x, base = 10) {}これも上記同様に関数を便利に扱えるようになる存在です。いままではわざわざ関数の中で引数が空の時の条件を判別し、個別に初期値を適用したりする必要がありましたが、es2015からはきちんと引数のデフォルト値として定義できるようになりました。
ブロック内スコープ
変数宣言用に新たにletと、定数を宣言するconstが追加されました。これらはvarと微妙に異なり、変数をブロック内に局所化できます。
{
let x = 5;
const y = 10;
}varで宣言した変数はそのブロック内ではなく宣言された関数をスコープとして局所化していました。そのため関数内のifブロック内などでvarを使っても、ブロックを抜けた後にその値を書き換えられてしまったりとブロック外から不意にアクセスできてしまう問題がありますが、それがこれらの新しいスコープによって解決します。
おわりに
今回はDomenic Denicola氏の講演前半をまとめました。彼のセッションのあと、部屋をAとBに分けて2セッション制で進めたため、部屋全体を独占したセッションは彼一人だったのですが、そんな大部屋をまるっと一つ人で埋め尽くすその注目度は凄いの一言です。
また、Twitterにはjsdomをつかっている多数の日本人ユーザーがいるということで「何書いてるか理解はできないけど、使ってくれてありがとう！」と仰っていました。
さて、次の記事では同じくdomenic氏の講演から「es2015で追加されたデータ構造」について取り上げていきます。次回もお楽しみに。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
