「Meguro.es #27 @ oRo」に参加してきました

• 2024/4/25
• https://meguroes.connpass.com/event/311788/

JavaScriptエンジンから見るランタイム

• shqldさん
• https://speakerdeck.com/sosukesuzuki/javascriptcoreno-object-dot-groupby-map-dot-groupby-no-hakuwozi-fen-tebao-gao-sitezi-fen-tezhi-su

ランタイム

• 近年ランタイムが増えてきた
  • Cloudflare WorkersとかBunとかWinterJSとか

エンジンとランタイム

• エンジンは言語処理系
  • v8とか
  • ブラウザ搭載のものは巨大
    • JITが必要
    • sandboxが必要
  • ブラウザ非搭載の後発は軽量
• ランタイムは実行環境
  • NodeとかChromeとか
• ランタイムがエンジンを埋め込んでいる
  • ラナンタイム側でカスタマイズしたりもする

令和最新静的サイトジェネレーター事情

• yamanokuさん
• https://scrapbox.io/yamanoku/%E4%BB%A4%E5%92%8C%E6%9C%80%E6%96%B0%E9%9D%99%E7%9A%84%E3%82%B5%E3%82%A4%E3%83%88%E3%82%B8%E3%82%A7%E3%83%8D%E3%83%AC%E3%83%BC%E3%82%BF%E3%83%BC%E4%BA%8B%E6%83%85

SSGの背景

• WordPressの時代
  • HTMLを動的に返す
  • メンテ/パフォーマンス/セキュリティ
• Janstackの登場
  • 高速/セキュア
  • このアーキテクチャの中にSSG

JS関連のSSG

• Hexo
  • 2012年
  • markdown
  • シンタックスハイライト
• Gatsby
  • Reactベース
  • GrahpQL
  • プラグイン
  • incremental buildsでビルド効率化
  • Netlifyの子会社
  • 最近止まってるらしい
• 11ty
  • マークダウン置いて設定なしでビルドできる
  • いろんなjsテンプレートで書ける
  • 混み入った設定は難しい
• Docusaurus
  • Reactベース
  • meta製
  • VitePressのReact版
• 最近のFWは代替SSGできちゃう
  • Next
  • Nuxt
  • Angular
  • Astro
  • ...

require(ESM)とECMAScript仕様

• uhyo_さん
• https://speakerdeck.com/uhyo/require-esm-toecmascriptshi-yang

require(ESM)

• ESモジュールをcjsで読み込めるようになる

復習

• JSは2つに分類される
  • script
    • cjs
    • <script>
  • module
    • mjd
    • <script type="module">
• モジュールは3分類される
  • Abstract/Cyclick/SourceText

require(ESM)の使用上の解釈

• 4段階を順番に実行していく
  • Promiseを返すフェーズがある
  • そこをどうやって同期的にしてるか
• Evaluateは最初からPromiseを解決済み
• これも前提を満たせばPromiseが最初から解決されている
• ECMAScriptの仕様とは矛盾せずに対応できている

The Fall of React Native Bridge

• Naturalclarさん
• https://slide-react-native-bridge.vercel.app/

ReactNativeの仕組み(Before)

• objective-c/JavaからJSを呼び出すためにBridgeという仕組みがあった
• Request/ResponseをJSONで非同期にやり取り
• JSとNativeはBridgeで完全に分離されていた

Bridgeの問題

• 非同期なので描画が遅い
• アプリ起動の負荷が高い
• 処理の優先順位設定できない

React Native New Architecture

• 2018のReact Confで発表
• Bridgeを介さずにやり取り
• Facebookのアプリは置き換わっている

ReactNativeの仕組み(After)

• JSI
  • JavaScript Interface
  • JSからc++のメソッドを実行したりその逆も
• Hermes
  • JS Runtime
  • ビルド時にJSをバイトコードに変換
  • JIT似頼らず起動時間短縮
• ReactNative Codegen
  • JSからc++呼ぶには型情報が必要
  • TSからc++用の方を生成する
• Turbo Modules
  • ネイティブのモジュールを実行する仕組み
  • NativeのコードをJSI経由で呼び出す
• Fabrics Renderer
  • 描画を同期的にできる
• これらによってBridgeが不要になった

Fast JSX: Don't clone props object #28768

• ユウトさん
• https://speakerdeck.com/yossydev/fast-jsx-dont-clone-props-object-number-28768

JSXの高速化

• React19になっての話
• propsのクローンが不要になった
• keyとrefの予約語を消す必要がなくなった
  • forwardRefが要らなくなる
  • keyはスプレッド構文を使わなければ問題なし
• createElementが使われなくなった
  • jsxという関数が変わりに使われるようになる
  • jsxならユーザによるpropsの上書きができなくなった

JavaScriptCoreのObject.groupBy/Map.groupByのバグを自分で報告して自分で直す

• sosukesuzukiさん
• https://speakerdeck.com/sosukesuzuki/javascriptcoreno-object-dot-groupby-map-dot-groupby-no-hakuwozi-fen-tebao-gao-sitezi-fen-tezhi-su

Object.groupBy/Map.groupBy

• ES2024から入った
• 条件に応じてグルーピングできる
  • 配列やマップで振り分けられる
• 配列だけじゃなくてイテラブルならOK

JSCのgroupByの実装

• objectじゃなかったらTypeError投げてた
  • イテラブルなものもエラーにしてていいのか
  • stringはどうなのか
• バグ報告して直した
  • 修正してPR出した
  • test262へのテスト追加もした