Slide 1

Slide 1 text

1 © 2026 Japan Digital Design, Inc. Takuya Yonezawa 2026.02.04 Reactぱふぉちゅー Midosuji Tech#8

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

3 © 2026 Japan Digital Design, Inc. VercelさんがReactのべスプラSkillを公開した https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices

Slide 4

Slide 4 text

4 © 2026 Japan Digital Design, Inc. CRITICAL / HIGH / MEDIUM / LOW パフォーマンスへのインパクトごとにプラクティスが整理されている

Slide 5

Slide 5 text

5 © 2026 Japan Digital Design, Inc. 私の独断で気になるものを紹介

Slide 6

Slide 6 text

6 © 2026 Japan Digital Design, Inc. 1 バレルを避けよう CRITICAL

Slide 7

Slide 7 text

7 © 2026 Japan Digital Design, Inc. バレル? ディレクトリ内のコンポーネントや 関数をバレルファイル(index.ts)で まとめてエクスポートするデザイン パターン 別ディレクトリからインポートする 際には、バレルファイル1つを参照す ればOKとなる → コードがスッキリする! バレルファイル

Slide 8

Slide 8 text

8 © 2026 Japan Digital Design, Inc. バレル? ディレクトリ内のコンポーネントや 関数をバレルファイル(index.ts)で まとめてエクスポートするデザイン パターン 別ディレクトリからインポートする 際には、バレルファイル1つを参照す ればOKとなる → コードがスッキリする! バレルファイルが 無い 時 import文をいっぱい書かないといけない

Slide 9

Slide 9 text

9 © 2026 Japan Digital Design, Inc. バレル? ディレクトリ内のコンポーネントや 関数をバレルファイル(index.ts)で まとめてエクスポートするデザイン パターン 別ディレクトリからインポートする 際には、バレルファイル1つを参照す ればOKとなる → コードがスッキリする! バレルファイルが ある 時 impor文を1つにまとめられてスッキリ!

Slide 10

Slide 10 text

10 © 2026 Japan Digital Design, Inc. バレル? ディレクトリ内のコンポーネントや 関数をバレルファイル(index.ts)で まとめてエクスポートするデザイン パターン 別ディレクトリからインポートする 際には、バレルファイル1つを参照す ればOKとなる → コードがスッキリする! バレルファイルが ある 時 import文をいっぱい書かないといけない

Slide 11

Slide 11 text

11 © 2026 Japan Digital Design, Inc. 「バレル良さそうやんけ!」 と思ったそこの貴方、少し待って

Slide 12

Slide 12 text

12 © 2026 Japan Digital Design, Inc. 巨大ライブラリからバレルインポートすると話が少し違う バレル バレル バレル コンポーネント Check X Menu バレル経由のインポートだと 余計なファイルまで読み込んでしまう

Slide 13

Slide 13 text

13 © 2026 Japan Digital Design, Inc. 巨大ライブラリからバレルインポートすると話が少し違う コンポーネント Check X Menu 直インポートだと余計なファイルを 読み込まないので早い

Slide 14

Slide 14 text

14 © 2026 Japan Digital Design, Inc. バレルでの一括エクスポートを使うなら… ↓ 高凝集にする (= exportされているファイルがまとめて使われる状態)

Slide 15

Slide 15 text

15 © 2026 Japan Digital Design, Inc. 【所感】 TypeScriptはビルドするとJavaScriptに依存部分だけ よしなにバンドルしてくれるので コードの読みやすさ vs ローカルでの開発時の速さ/ビルドの早さ なのかなと思う

Slide 16

Slide 16 text

16 © 2026 Japan Digital Design, Inc. 2 async/awaitのパラレル化 CRITICAL

Slide 17

Slide 17 text

17 © 2026 Japan Digital Design, Inc. 例えば APIからデータを拾ってきたうえで画面描画を行うケース

Slide 18

Slide 18 text

18 © 2026 Japan Digital Design, Inc. 良いパターン いまいちなパターン すべて直列で処理を行う 並列で処理を行う fetchUser() fetchPosts() fetchComments() Time fetchUser() fetchPosts() fetchComments() Time

Slide 19

Slide 19 text

19 © 2026 Japan Digital Design, Inc. http://localhost:3000/async-await 【デモ】 http://localhost:3000/async-await-all

Slide 20

Slide 20 text

20 © 2026 Japan Digital Design, Inc. APIコールが別のAPIコールに依存するパターンは better-allなどを使おう Promiseの依存関係が増えた時にチューニングが辛くなる https://github.com/shuding/better-all

Slide 21

Slide 21 text

21 © 2026 Japan Digital Design, Inc. better-all が 無い 時 better-all が ある 時

Slide 22

Slide 22 text

22 © 2026 Japan Digital Design, Inc. 3 モジュールの条件付き読み込み HIGH

Slide 23

Slide 23 text

23 © 2026 Japan Digital Design, Inc. 機能が 必要になった/呼び出された タイミングでモジュールを読み込む ↓ データ転送量の削減 初期レンダリングの高速化

Slide 24

Slide 24 text

24 © 2026 Japan Digital Design, Inc. パフォーマンス向上って観点だと正しい気もするが、 コードのリーダビリティが。。

Slide 25

Slide 25 text

25 © 2026 Japan Digital Design, Inc. Suspense + Lazy Loadを使って 描画速度を向上させること自体は昔からあるし、アンチパターンではない

Slide 26

Slide 26 text

26 © 2026 Japan Digital Design, Inc. 条件付き読み込みは用法用量を守ろう 過剰な採用はリーダビリティを損なうことに

Slide 27

Slide 27 text

27 © 2026 Japan Digital Design, Inc. 4 データが多いときの content-visibility HIGH

Slide 28

Slide 28 text

28 © 2026 Japan Digital Design, Inc. content-visibility? CSSのプロパティの1つ ■ autoに設定すると。。 画面外(viewport外)に配置される コンポーネントのレイアウト処理を スキップさせることができる → 画面の初期描画速度が向上する (LCP : Largest Contentful Paint) (※) DOMツリー上には存在するので、 Accessibility/SEO的な問題はない View Port レイアウト計算やる レイアウト計算やる レイアウト計算やる レイアウト計算やる レイアウト計算スキップ レイアウト計算スキップ レイアウト計算スキップ

Slide 29

Slide 29 text

29 © 2026 Japan Digital Design, Inc. http://localhost:3000/content-visibility 【デモ】 http://localhost:3000/no-content-visibility

Slide 30

Slide 30 text

30 © 2026 Japan Digital Design, Inc. 5 まとめ

Slide 31

Slide 31 text

31 © 2026 Japan Digital Design, Inc. フロントエンドはユーザーとの信頼関係を築くレイヤー 処理が早いとユーザーは嬉しい!!!

Slide 32

Slide 32 text

Thank you. 32 © 2026 Japan Digital Design, Inc.