Nodeまみれ!東京Node学園祭2016に行ってきた!【#04】

まさくに


Nodeまみれ!東京Node学園祭2016に行ってきた!【#04】

DSC00188

こんにちは。まさくにの本体です。最近は結構ブログを書いています。バックエンドエンジニアです。

長く続く Node 学園祭 2016 も佳境です。高校の学園祭で言うならば自分のクラスの出し物での役割も遂げ、ちょっと部室まで遊びに行こうかという中庭で好きな子に出会うところくらい佳境です。「あっ」みたいな。「あっ」みたいな。自分はそんな経験、今生ではありませんでした。

さて、今回は 2 日目午後の講演 2 回目! 脳汁ドバドバの会場の様子を Kaz さんと一緒にダバダバお伝えします!

Kaz Kaz
コーヒーを超甘くするコーヒー好きなLIGバックエンドエンジニア。最近「あ、髪切った?」って言ったら何か照れてた。何なの?

 

通しで 4 番目の記事となるフェスティバル!
前回までの様子は下記からどぞー!



[Room A] boarding the tiny framework train

DSC00329

フレームワーク云々よりも、Yoshua さんのコーディング速度に感嘆。

今回登壇された Yoshua Wuyts さんは、世界中を旅しながらリモートワークで仕事をこなすすごいプログラマー(めちゃ仕事するらしいです)で、今回テーマにもなった「Choo」フレームワークはベトナム滞在中に「暇だったから」作られたそうです。日本に降り立ってからは本腰を入れて Choo の開発を進めているということで、とにかく良い意味で限りなく自由に人生を謳歌されている方だということが伝わってきました。

このセッションでは、Choo の開発を通じて Yoshua さんが感じたこと、新しくフレームワークを作ろうと思った理由、フィードバックの大切さとそれによる劇的改善についてが話されました。中でも特にパフォーマンス改善の話では、最適化する前に TodoMVC ベンチマークで 11.4 秒かかっていたものを最終的に 118 ミリ秒まで縮めた例( Vue が 250 ミリ秒、 Angular1.5 が 1.2 秒)を挙げて、いかなる手法をもってこれほどまでの劇的な改善を達成したのかなど興味深い話もされていました。

[Room B] Introducing Now and Next.js

DSC02930

kanezawa さんによる Zeit, inc のプロダクトである「next.js」とデプロイツールである「now」の発表でした。これ名前どおり次のナウいプロダクトの発表だ……。「next.js」は「ユニバーサルな React アプリのための小さなフレームワーク」で、他の方々の多くの発表に何度も登場したサーバーサイドレンダリングやコード分割を自動で行ってくれるフレームワークとのことです。また、「now」というデプロイツールも先日リリースされたとのことでした。URL が使い捨てとなるデプロイツールとして説明がありました。PaaS として使用できるものと思いますが、その思想はプロダクトによっては非常に運用が簡便化されるなと思います。

>> https://speakerdeck.com/nkzawa/introducing-now-and-next-dot-js

[Room A] The Evolution of Electron – Cheng Zhao

DSC00337

「Atom」には日頃大変お世話になっております。

GitHub が開発したオープンソースの多機能エディタ「Atom」。この根幹を支える「Electron」は、今や Node.js を用いたクロスプラットフォームなデスクトップアプリケーション開発に必携のフレームワークとなりました。今回登壇された Cheng Zhao さんはなんとこの「Electron」の作者となります。

このセッションでは当初 Cocoa ベースで単純な WebView を埋め込んだだけだった Atom が最終的に「Electron」に移行するまでの歴史と背景を主に説明されていました。その道程は簡単なものではなく、特にネイティブ実装をすべて Node で書き換えるプロジェクトでは、当初利用を予定していた node-webkit に苦難が多かったため、「node-webkit」の開発者であった Cheng さんを雇い、それでも根本的な問題が解決できなかったため新しく開発し直して出来上がったものが「Electron」(当時は「atom-shell」という名称)だそうです。最後にこの活動を経ていかにオープンソースプロジェクトを成熟させていくかをお話しされて、セッションが締められました。

>> https://speakerdeck.com/zcbenz/evolution-of-electron-nodefest-2016

>> 資料の日本語訳がこちらにあります

[Room B] PostCSS: Build your own CSS processor

DSC02933

異常に声が良い Increments 株式会社の森下さんの発表でした。話しぶりもゆったりされてていてわかりやすく筋道立っており、声優みたいだと自分は思ったんですが、会場の皆様はどう思われていたのでしょうか。PostCSS に関しての歴史と、最新 V5 周辺のお話でした。PostCSS は CSS のパーサーで AST を操作する API を提供しています。去年 8 月に今までで一番大きな変更を加えてバージョン 5 が出たそうですが、これによって CSS 以外のパースまでできるようなったとのことでした。CSS はどこへ向かっているのでしょう。スライド中にちょいちょい差し込まれた魔法陣は何を意味していたんでしょう。会場の皆様はどう思われていたのでしょうか。

>> https://speakerdeck.com/morishitter/postcss-build-your-own-css-processor

[Room A] Browser is the new server

DSC00341

Wi-Fi が切れても、サーバーが落ちても、Javascript を切っても動き続ける、ロード時間ほぼゼロのウェブサイト。(※)

Gleb Bahmutov さんのこちらのセッションでは、Service Worker を用いてオフラインで完全動作するクライアントサイドサーバーを実現するお話がされました。これによって実現できることは上記のまるでウソのような Web サービス。その内容から感じさせられる可能性の大きさに、個人的に今年もっともテンションが上がりました。このすごさを短くまとめられる気がしないので、ちょっとここだけ厚めに書きます。

ロード時間が超高速でネットワーク通信がなくとも表示できるウェブサイトというと到底信じれないのですが、Gleb さんは話題の「Service Worker」を使ってこれを実現します。具体的には Service Worker 上で Browserify + Express.js を用いて、クライアントサイドサーバーを作成、ページのレンダリングをクライアントサイドで行うようにします。これに加えて新しく提案されている <link rel="serviceworker"/> タグを用いると、初回の Service Worker 登録完了後は何度ページを再読込してもサーバーからデータをロードすることなく、また Javascript を切っても動くようになります。

これによって下記の機能を実現できます。

  • ページの表示はすべてクライアントサイドのキャッシュを使うので、2 回目以降のアクセスはロード時間ゼロで超高速に表示できる
  • 一旦ページを表示したあと、API等を叩いてバックグラウンドで新しいデータを取得し画面を更新する
  • オフラインでもアプリを使い続けられる

ここまではスライドの内容なんですが、つまりこの機能を仮に Gmail で例えると、たとえば下記のような機能を実現できることになります。

  • メールボックスは前回のキャッシュを表示 → ロード時間なしで開いた瞬間使える
  • 新着メールは裏で取りに行って、あれば表示
  • メール送信時はバックグラウンドで API を叩いて送信プログレスでも表示、通信に失敗してもローカルに Draft が残る

と、まるでデスクトップメールアプリさながらの使い勝手を実現できてしまいます。このようにクライアントサイドサーバーという新しい概念に可能性を感じさせる、本当に目から鱗のセッションでした。

>> スライドはこちら!

※ 編注: Javascript を無効化しても動作するのは Chrome のバグだそうです。

[Room B] JavaScript による並列処理:共有メモリとロック

DSC02934

Mozilla Japan の清水さんの発表でした。まずゲーム画面が表示されて「これが JavaScript で作られています」という一言で観衆の心は鷲掴みにされました。本イベントはフロント寄りの話も多かったことからか、本当にゲームのビジュアルに僕らは弱いなと思い知らされました。JS の Web Workers を利用したマルチスレッドプログラミングのお話で、「デッドロックに JS も配慮する必要がある時代になった」という内容でした。マルチスレッドにすれば処理によってはスピードも当然早くなるので、検討する価値はあるとのことです。自分はバックエンドなのでデッドロックの怖さは付き物、逆に新鮮にお話をうかがえました。

>> https://speakerdeck.com/chikoski/20161113-nodefest

Sponsors Talk

DSC00352

今回のイベントでスポンサーをされた PayPal 様、ドワンゴ様、リクルートテクノロジーズ様、Yahoo! JAPAN 様のスポンサーズトークでした。

大きな企業であることは言わずもがなですが、それでも実はベンチャーのような勢いは失わず、実はどの企業も内部では node を始めとする先鋭的な技術も完全に実戦投入されていて、「みんな Node 使ってんだなー」、「安定して動くんだなー」と、自分としては安心感が広がりました。そして今回のイベントも含め、新しい技術のナレッジ共有にも努められており、それを享受する一人として大変感謝しております。

まとめ

新サービスやフレームワーク、「Electron」の作者など、豪華な顔ぶれはそのまま、今回は先鋭的な技術をいかに乗りこなしているかというみっちりとテクニックが詰まっていた登壇が多くありました。Node に対して想像以上の安定感を感じ、イメージが変わりました。

イベントを通してアドレナリンドバドバだったのですが、特に「Browser is the new server」を聞いたあとの Kaz さんは本当に興奮していたので、「この人大丈夫かな」と思ったほどです。この年の瀬に「個人的に今年もっともテンションが上がりました」と彼は書いていますが、彼の 2017 年に幸多からんことを願いまして、次回、Node 学園祭 2016 の本当のフィナーレへ皆様をご案内します。

 

まさくに
この記事を書いた人
まさくに

バックエンドエンジニア

関連記事