20260204_Midosuji_Tech

Transcript

1. 1 © 2026 Japan Digital Design, Inc. Takuya Yonezawa 2026.02.04 Reactぱふぉちゅー Midosuji Tech#8
2. 2 © 2026 Japan Digital Design, Inc. 米澤 拓也 Software Engineer Technology & Development Div. and Corporate Culture室 プロフィール SWEだが、案件でやってるシステムのAWSリソースが増えまくって インフラ専任になりつつある人（現在 800リソースくらい on CDK） Community Builder (Serverless) 2023~ 一言：何故かバズった takuya_y0ne
3. 3 © 2026 Japan Digital Design, Inc. VercelさんがReactのべスプラSkillを公開した https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices
4. 4 © 2026 Japan Digital Design, Inc. CRITICAL / HIGH / MEDIUM / LOW パフォーマンスへのインパクトごとにプラクティスが整理されている
5. 5 © 2026 Japan Digital Design, Inc. 私の独断で気になるものを紹介
6. 6 © 2026 Japan Digital Design, Inc. 1 バレルを避けよう CRITICAL
7. 7 © 2026 Japan Digital Design, Inc. バレル？ ディレクトリ内のコンポーネントや 関数をバレルファイル（index.ts）で まとめてエクスポートするデザイン パターン 別ディレクトリからインポートする 際には、バレルファイル1つを参照す ればOKとなる → コードがスッキリする！ バレルファイル
8. 8 © 2026 Japan Digital Design, Inc. バレル？ ディレクトリ内のコンポーネントや 関数をバレルファイル（index.ts）で まとめてエクスポートするデザイン パターン 別ディレクトリからインポートする 際には、バレルファイル1つを参照す ればOKとなる → コードがスッキリする！ バレルファイルが 無い 時 import文をいっぱい書かないといけない
9. 9 © 2026 Japan Digital Design, Inc. バレル？ ディレクトリ内のコンポーネントや 関数をバレルファイル（index.ts）で まとめてエクスポートするデザイン パターン 別ディレクトリからインポートする 際には、バレルファイル1つを参照す ればOKとなる → コードがスッキリする！ バレルファイルが ある 時 impor文を1つにまとめられてスッキリ！
10. 10 © 2026 Japan Digital Design, Inc. バレル？ ディレクトリ内のコンポーネントや 関数をバレルファイル（index.ts）で まとめてエクスポートするデザイン パターン 別ディレクトリからインポートする 際には、バレルファイル1つを参照す ればOKとなる → コードがスッキリする！ バレルファイルが ある 時 import文をいっぱい書かないといけない
11. 11 © 2026 Japan Digital Design, Inc. 「バレル良さそうやんけ！」 と思ったそこの貴方、少し待って
12. 12 © 2026 Japan Digital Design, Inc. 巨大ライブラリからバレルインポートすると話が少し違う バレル バレル バレル コンポーネント Check X Menu バレル経由のインポートだと 余計なファイルまで読み込んでしまう
13. 13 © 2026 Japan Digital Design, Inc. 巨大ライブラリからバレルインポートすると話が少し違う コンポーネント Check X Menu 直インポートだと余計なファイルを 読み込まないので早い
14. 14 © 2026 Japan Digital Design, Inc. バレルでの一括エクスポートを使うなら… ↓ 高凝集にする （＝ exportされているファイルがまとめて使われる状態）
15. 15 © 2026 Japan Digital Design, Inc. 【所感】 TypeScriptはビルドするとJavaScriptに依存部分だけ よしなにバンドルしてくれるので コードの読みやすさ vs ローカルでの開発時の速さ/ビルドの早さ なのかなと思う
16. 16 © 2026 Japan Digital Design, Inc. 2 async/awaitのパラレル化 CRITICAL
17. 17 © 2026 Japan Digital Design, Inc. 例えば APIからデータを拾ってきたうえで画面描画を行うケース
18. 18 © 2026 Japan Digital Design, Inc. 良いパターン いまいちなパターン すべて直列で処理を行う 並列で処理を行う fetchUser() fetchPosts() fetchComments() Time fetchUser() fetchPosts() fetchComments() Time
19. 19 © 2026 Japan Digital Design, Inc. http://localhost:3000/async-await 【デモ】 http://localhost:3000/async-await-all
20. 20 © 2026 Japan Digital Design, Inc. APIコールが別のAPIコールに依存するパターンは better-allなどを使おう Promiseの依存関係が増えた時にチューニングが辛くなる https://github.com/shuding/better-all
21. 21 © 2026 Japan Digital Design, Inc. better-all が 無い 時 better-all が ある 時
22. 22 © 2026 Japan Digital Design, Inc. 3 モジュールの条件付き読み込み HIGH
23. 23 © 2026 Japan Digital Design, Inc. 機能が 必要になった/呼び出された タイミングでモジュールを読み込む ↓ データ転送量の削減 初期レンダリングの高速化
24. 24 © 2026 Japan Digital Design, Inc. パフォーマンス向上って観点だと正しい気もするが、 コードのリーダビリティが。。
25. 25 © 2026 Japan Digital Design, Inc. Suspense + Lazy Loadを使って 描画速度を向上させること自体は昔からあるし、アンチパターンではない
26. 26 © 2026 Japan Digital Design, Inc. 条件付き読み込みは用法用量を守ろう 過剰な採用はリーダビリティを損なうことに
27. 27 © 2026 Japan Digital Design, Inc. 4 データが多いときの content-visibility HIGH
28. 28 © 2026 Japan Digital Design, Inc. content-visibility? CSSのプロパティの1つ ▪ autoに設定すると。。 画面外（viewport外）に配置される コンポーネントのレイアウト処理を スキップさせることができる → 画面の初期描画速度が向上する （LCP : Largest Contentful Paint） (※) DOMツリー上には存在するので、 Accessibility/SEO的な問題はない View Port レイアウト計算やる レイアウト計算やる レイアウト計算やる レイアウト計算やる レイアウト計算スキップ レイアウト計算スキップ レイアウト計算スキップ
29. 29 © 2026 Japan Digital Design, Inc. http://localhost:3000/content-visibility 【デモ】 http://localhost:3000/no-content-visibility
30. 30 © 2026 Japan Digital Design, Inc. 5 まとめ
31. 31 © 2026 Japan Digital Design, Inc. フロントエンドはユーザーとの信頼関係を築くレイヤー 処理が早いとユーザーは嬉しい！！！
32. Thank you. 32 © 2026 Japan Digital Design, Inc.