明日から本気出す

低空飛行する Web Developer

【JSConf JP】1日目の参加セッションまとめ

JSConf JP 技術イベント

JSConf JP に行ってきたので、参加したセッションをサクッとまとめました。

jsconf.jp

各セッションまとめ

JavaScript AST プログラミング: 入門とその1歩先へ

jsconf.jp

t-wada さんのセッション

power-assert は AST のかたまり

power-assert はテストが失敗したときに失敗した時点の変数の中身などを見やすくコンソールに出力してくれるツール、と認識しています。*1

AST といえば、RubyでつくるRuby で手を動かしながらやったらある程度馴染めたので、個人的におすすめです。

parser => traverser => unparser で AST プログラミング

parser => traversal => unparser の流れで ESLint のようなツールを作成できる。

  • parser => JavaScript コードを AST に変換する。
  • traversal => AST を解析する。ここで任意の処理を入れ込める。
  • unparser => AST から JavaScript コードを生成する。

estree は JavaScript の AST 標準で、大体のツールが estree に準拠している。これがあるから、好きな parser, traverser, unparser を組み合わせて使えるのかなあと思った。

今回のデモで使用されたツール

印象に残っている t-wada さんの言葉

easy は便利だが、simple を使うことで原理を理解できる。原理を理解したら、便利（easy）なツールを求めるようになる

こちらのツイートを参考にさせていただきました。ありがとうございます。

Wrap-up: Runtime-friendly JavaScript

jsconf.jp

スライドはこちら

docs.google.com

3つのレイヤーでの最適化

JavaScript は 3 つのレイヤーに分かれる

  • Product
    • アプリケーション、ライブラリ
  • Runtime
    • Node.js, Browser, deno, Electron, React Native,...
  • Engine
    • V8

どのレベルで最適化をするのか、意識するのは大事。 インパクトは Product >>>>>> Runtime >>>>>> Engine の順に大きく、通常は Product, Runtime 辺りまで最適化する。

サーバーサイド

  • Node.js : 非同期ノンブロッキングIO
    • 同期的な処理は避けて、非同期処理を使おう
    • Promise や Async/Await に限らずですが、 jsprimer がとても分かりやすいので、おすすめです。
  • Stream API は Node.js の根幹
    • メモリを消費する処理や、大きなデータを使うときは Stream API を検討しよう

クライアントサイド

JavaScript ファイルをダウンロードしてから、Parse, Compile を行う

  • Code Caching
    • パース、コンパイルした結果もキャッシュされるので、実行するだけ
    • Service Worker を使ってキャッシュする
  • preload
    • modulepreload => parse, compile も先に行ってしまう
<link rel="modulepreload" href="index.mjs">
  • idling（アイドリング）
    • メインスレッドをブロックするような重い処理をアイドル時に行うようにする
    • リソースが空いているときに実行すれば良いような処理など

Streams APIをちゃんと理解する

jsconf.jp

冒頭で紹介された Jxck さんの言葉

「Stream を制するものは、Node.js を制す」

該当すると思われる記事

jxck.hatenablog.com

Streams API

  • Node.js と書き方は異なり、互換性もない。WHTAWG が仕様を策定している
  • データを chunk という単位に分割し、ストリームに流して処理をする
  • Streams API には Readable Stream, Transform Stream, Writable Stream がある。

デモ 3つ

  • Fetch API を使って 1 文字ずつ画面に描画していく
    • 面白かった
  • ファイルを Fetch して、ドライブに直接書き込む
    • CORS に引っかかり見れなかったが、多分 Native File System API を使ったもので、なるほどと思った
  • マークダウンを英語に翻訳しつつ、HTML に変換してレンダリングする

その他

  • バックプレッシャーという仕組みや、その際にキューのサイズに気をつける必要があるなど。
  • 5G が 2020 年に来たら、今度はネットワークでなくクライアントがボトルネックになる。その際に Streams API は有効な手段になるのではないか。

Make it Declarative with React

jsconf.jp

スライドはこちら

speakerdeck.com

  • DOM は宣言的というより、命令的な API に基づいている
  • React が Declarative => Imperative に変換してくれている

React Custom Rendrer

  • https://github.com/konvajs/react-konva は、ちょうど仕事で React と Canvas 使って苦戦しているので気になった。
  • HostConfig of renderers は、既存のもの（React, React Native などなど）が参考になる
  • ReactFS というディレクトリやファイルを宣言的に扱える React Custom Renderer のライブコーディング
    • 先にテストコードが書いてあって、一つずつグリーンにしていくスタイルだった。これから実装する部分以外は skip にしていた。最終的なアウトプットのイメージがわかりやすかったし、TDD 良い。

おわりに

ちょうど昨年くらいから、新規サービスの開発を（フロントエンドもバックエンドも） TypeScript でやっているのですが、JS 界隈のカンファレンスや勉強会に参加したことはほぼなかったので、参加できてよかったです。

スピーカーやスタッフのみなさま、ありがとうございました！ 明日は行けないのが残念ですが、ハッシュタグやスライドでウォッチしたいと思います。

*1:まだ使ったことがないので違ったらすみません。プロジェクトで導入したい。