「初夏のJavaScript祭り」に参加してきました

JavaScriptのProxy(Reflect)と昨日より仲良くなる20分

JSのproxy

ProxyとReflect

  • Proxyで介入する処理をセット
    • getとかapplyとかオブジェクトのメソッドをhandlerにセットして介入させる
  • 処理の中でReflectを呼ぶと元の処理が呼ばれる
    • Proxyにわたすhandlerのとついになってる

事例

  • ライブラリなどではそこそこ使われてる
  • VueのProxyなんかは名前の通りで内部でも使われてる

TanStackで効率的なルーティングとデータ取得を実現

技術選定

  • toBSEOは期にしない
  • FWなくてもいいんじゃないか

Reactだと

  • Vite + React
  • React Router + Redux
  • SWRなど

TanStack Router

  • 2023/12にv1になった
  • ファイルベースルーティング
  • 型安全
    • Linkに指定するURLやパスパラメータも型チェックがきく
  • ルートごとのCodeSplitting
    • route.tsx
      • 初期ロード
    • lazy.tsx
      • 遅延ロード
  • SearchParamsによろ状態管理
    • URLSearchParamsを使わない
      • 型がstringに限定されるため
  • zodと組み合わせてバリデーションできる

TanStack Query

  • useQueryでfetchの結果をキャッシュできる
  • useMutationでキャッシュを更新したり
  • useSuspenseQueryを使うとエラーの場合など処理を分けられる

Request Waterfallを防ぐ

  • コンポーネントの中ではなくloaderでfetchするようにすると並列でアクセスしてくれる

JavaScriptのAI活用と最適化

  • 長谷川広武さん(株式会社HAMWORKS)

コードの生成AI

  • これまではCopilotがよかった
  • 最近はChatGPT-4oとCloud 3 Opusがすごい

プロンプト

  • どんなFW使うかとか非機能要件とかを書く
  • コーディングルールとかも書く
  • ⇒ セットアップからコードまで教えてくれる