Fusicフロントエンド座談会 from 雅 2023/03/10

TL;DR

• ライブラリ選定にNode.js Toolboxが参考になるかも
• Blockmanが便利（今回一番盛り上がった）
• GitHubのSaved repliesを活用してきたい
• View Transitions APIが話題だった
• ReactのuseMemoとuseCallbackの使い所の話
• React Nativeの新しいアーキテクチャの話
• 新しいバンドラーRspackに注目

議事録

Node.js Toolbox

• https://nodejstoolbox.com/
• Nodejsのアクティブに更新されている人気のライブラリを探せる
• 棒グラフの総合点はどうやって算出してるんだｗ
• 期間絞ってトレンドとか見れたらもっと良さそう
• Deprecated出るの偉い
• 雅はこのサイトでこんな風に見てるよ、とかユースケース的に発信できたら良さそう
• 選択肢を探して、そこから自分で調査していくような参考資料的ポジション

Blockman

• VS Codeでコードがさらに見やすくなる！ ネストされたブロックを強調表示するVS Codeの機能拡張「Blockman」
• VScodeで今いるブロックをハイライトしてくれるプラグイン
• Pythonとか閉じタグない言語にすごくよさそう
• divタグの鬼ネストとかにもすごく分かりやすそう
• 便利すぎて盛り上がった

コードレビューにラベルを付けるだけでチームの心理的安全性を高めた話

• コードレビューにラベルを付けるだけでチームの心理的安全性を高めた話
• Saved repliesの機能めっちゃ便利そう
• 対応するかは任せるよ〜だと対応しないと…となるので、ラベルがあると明確にできて良さそう
• LGTMとかも毎回同じ入力なので使えたらよい
• この登録されたものって個人アカウントに紐づく？リポジトリに紐づく？
  • 個人アカウントに紐づくっぽい
• 便利すぎて盛り上がった（ショートカットええやん！）
• リポジトリ単位で登録できるとなお良さそう（ラベル運用の話とか）
  • 今のところ個人設定だけっぽい

Chrome 111 の View Transitions API

• Chrome 111 の View Transitions API でリッチなページ間トランジションを実現する
• Firefox、Safariは今のところ使えなさそう（ブラウザハンドリング必要そう）
• Chromeの中の人が、Transitionの機能を増やす的なツイートがあった
• 案件とか実用化にはまだ早い
• Chrome限定とかならいいけど
• 従来の技術でもぬるっとアニメーションは実装できるけど大変で、このAPIが使えるようになるとエンジニアがすごく楽になるという話

React ‘useMemo’ and ‘useCallback’: When to use them and when not

• When should ‘useMemo’ and ‘useCallback’ be used, and when not, complete with examples
• useMemoは大抵の場合は使わない方がいい
  • 配列が10,000を超えるくらいから使った方がパフォーマンスがあがるらしい
  • 配列10,000ってどんな状況だ？
    • 無限スクロールとか
  • ChatGPT先生に記事の要約を聞いてみた

How react-native became performant as native with the new architecture

• How react-native became performant as native with the new architecture
• New Architectureになる前だと、Bridgeを介していたのでJSONの指示が多すぎると詰まったりしていた
• Hermesが登場してからBridgeを介さなくて良くなったので従来より早くなったという話
• エンジニアが実装するときに強く意識はしなくて良い気がする（中身知ってれば良さそう）

Rspack｜A fast Rust-based web bundler

• Rspack
• ByteDanceという企業が作った？（TikTok開発してる）
• Webpackのパフォーマンスが早くなったバージョン
  • Webpackのプラグインとかそのまま使えるのかな？互換性ありそう
  • 古いWebpackシステムからの乗り換えは楽そう（互換性あるなら）
• Viteとの違い
  • ViteはDeveloper ExperienceにフォーカスしていてRollupに依存している＋ Go製
  • RspackはWebpackのアーキテクチャに寄せている？＋ Rust製
• 使ってみないと分からない
• 開発元がByteDanceというのも、大きな企業が開発しているという安心感