「Nihonbashi.js #9」に参加してきました

• 2024/10/31
• https://nihonbashi-js.connpass.com/event/332328/

感想

• メモリリークが自分的にホットな話題だったので試せそうな話を聞けてよかった

Stream APIとTCPフロー制御

• tasshiさん
• https://speakerdeck.com/tasshi/web-streams-api-and-tcp-flow-control

Streams API

• データの入出力を逐次的に行う
• ReadableStream - TransformStream - WritableStream
  • 読み込み- 変換 - 書き込み
• チャンク単位で扱うのでメモリ効率がいい
• 各Streamで処理速度が違うと
  • どこかのキューに溜まってメモリが圧迫される?
  • バックプレッシャーで制御できる
• キューイング戦略
  • CountQueuingStrategy
    • 何個溜まったら
  • ByteLengthQueuingStrategy
    • 何バイト溜まったら
• fetchでstreamでデータ取得してるとこに対してバックプレッシャーできるのか？
  • 後ろの処理にdelayを入れて重くする
  • ちゃんと反映されてる
  • 処理しきれない時は切断しないようにzero windowパケットで送られる

怖くないメモリ肥大化

• おおいしつかささん

メモリリーク

• たいてい本番だけで起こる
  • 再現するのが大変
  • 本番環境でプロファイリングするしかない
• 場所を特定できたら
  • その処理を通るテストを書く
  • 処理の前後でメモリをはかって比較
• 自分たちで書いたコードなら探せば見つけられる
  • パッケージのコードなどだと大変
• 本番とローカル
  • 本番でリーク起きててもローカルだと全然使ってない
  • GCで開放されてる？
  • --max-old-space-size で小さい値入れるとローカルでも再現

React Native のbumpの知見

• kexiさん

ReactNativeのbump

• バージョンアップの重要性
  • ストアにアプリを公開するのでプラットフォームの更新に追従する必要あり
• 更新の手順
  • Breaking Changesを確認
  • React Native Upgrade Helper
    • テンプレートの差分を教えてくれる
    • それを真似しながら更新
  • サードパーティライブラリの更新
    • 互換性ないものをあげていく
    • ひたすらビルドしてエラーになるものを特定しあげていく

いまさらのStorybook

• ikuma-tさん

Storybookを使ってみて

• Storyの型定義
  • satisfies Meta<typeof xxx>
  • Metaはコンポーネントごとの設定
  • storyObjはストーリーごとの設定
• Storybookの動き
  • polkaのdevサーバー起動
  • ManagerBuiderとPreviewBuilder
  • 前者はコンポーネント一覧とかで後者はコンポーネントが表示されるところ

Type First な Form開発 の紹介

• hedrallさん

フォーム開発

• フォームを簡単に実装したい
• react-jsonschema-form
  • json schemaを定義するとフォームが出来上がる
  • Formコンポーネントにjsonを渡す
  • uiの情報もpropsとして渡せる
• 型定義をtypescript-jsonschemaでjson schema化すると型からフォームを作れる

React19でお手軽にCSS in jsを自作する

• 小谷さん

CSS in js

• JSの中にCSSを書けるやつ
• styled関数を作る
  • 受け取ったCSSをコンポーネントに渡す
  • 単純に渡すとコード量の重複が爆発する
  • headに差し込むとSSRで動かない
• React19でstykeの組み込みサポートが増えた
  • styleタグの重複を排除してくれる
  • 動的なものもAtomicCSSにすることで対応できる
    • 1クラス1定義