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

• 2024/5/24
• https://javascript-fes.doorkeeper.jp/events/172450

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

• hiroko_inoさん(RUN．EDGE株式会社)
• https://www.docswell.com/s/hiroko_ino/KJL3GG-javascript-proxy-reflect

JSのproxy

• メタプログラミングするための機能
• オブジェクトの操作に介入したりできる

ProxyとReflect

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

事例

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

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

• たいせーさん(株式会社サイバーエージェント)
• https://speakerdeck.com/ytaisei/tanstackdexiao-lu-de-naruteingutodetaqu-de-woshi-xian

技術選定

• toBでSEOは期にしない
• 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使うかとか非機能要件とかを書く
• コーディングルールとかも書く
• ⇒ セットアップからコードまで教えてくれる