UIライブラリに依存しすぎないReact Native設計を目指して

Transcript

1. © Findy Inc. 1 2026.04.24 React Native & Flutter Meetup UIライブラリに依存しすぎないReact Native設計を⽬指して ファインディ株式会社 モバイルエンジニア 加藤 雄⼤ @Takahiro_Kato15
2. © Findy Inc. 2 ⾃⼰紹介 加藤 雄⼤（Kato Takahiro） • プロフィール ◦ 1986年⽣まれの埼⽟県出⾝、1児の⽗ • キャリア ◦ iOSアプリ開発(Swift)が得意 ◦ 2025年8⽉からReact Nativeを利⽤ ：@Takahiro_Kato15 ：grandbig
3. © Findy Inc. 3
4. © Findy Inc. 4 Findy Eventsアプリの紹介 QRコードを提⽰ してチェックイン カンファレンス情報の閲覧 ※表記されている情報はテストデータになります。 予約セッションの リマインダー通知
5. © Findy Inc. 5 Findy Eventsアプリの紹介
6. © Findy Inc. 6 皆さんは、UIライブラリを使っていますか？ それともFramework標準のViewで画⾯を作っていますか？ 本⽇は、プロダクト開発を通じてUIライブラリに向き合った話をします。
7. © Findy Inc. 7 私はバリバリUIライブラリを使っていますが、理想を⾔えば... 理想と現実のGap React Native Unistyles
8. © Findy Inc. 8 私はバリバリUIライブラリを使っていますが、理想を⾔えば... 理想と現実のGap React Native Unistyles • 社内初のモバイルアプリ ＝ 社内にデザイン資産がない • 新規⽴ち上げプロダクト ＝ リソースが少ない
9. © Findy Inc. 9 UIライブラリを活⽤して 最⼩リソースで最速リリースを⽬指す
10. © Findy Inc. 1 0 React NativeのUIライブラリを⽐較 • 学習コストを抑えたスムーズな導⼊を実現したい • OS共通デザインを実現したい • 将来的に⾃前のモバイルアプリのデザインシステムを構築したい React Native Paper • 完成度の⾼い Material Design • カスタマイズ制約の 懸念 gluestack-ui • 豊富なUI Componentの提供 • shadcn/uiライクな 管理へのハードル Tamagui • ⼀度使ったので、学 習コストが最⼩ • Webの考慮が不要で 強みを活かせない HeroUI Native • 豊富なUI Componentの提供 • β版の提供※ • Tailwind CSSライク なスタイル指定 ※現在は”stable版”が提供されています。
11. © Findy Inc. 1 1 React NativeのUIライブラリを⽐較 • 学習コストを抑えたスムーズな導⼊を実現したい • OS共通デザインを実現したい • 将来的に⾃前のモバイルアプリのデザインシステムを構築したい React Native Paper • 完成度の⾼い Material Design • カスタマイズ制約の 懸念 gluestack-ui • 豊富なUI Componentの提供 • shadcn/uiライクな 管理へのハードル Tamagui • ⼀度使ったので、学 習コストが最⼩ • Webの考慮が不要で 強みを活かせない HeroUI Native • 豊富なUI Componentの提供 • β版の提供※ • Tailwind CSSライ クなスタイル指定 ※現在は”stable版”が提供されています。
12. © Findy Inc. 1 2 対策 • HeroUI NativeのWrapper Componentを実装し、影響範囲を抑える • 問題が発⽣した場合は、React Nativeで⾃作する HeroUI Native：β版の提供に、設計で向き合う ①
13. © Findy Inc. 1 3 HeroUI Native：β版の提供に、設計で向き合う ② 必要最低限の Propsを抽出 ⼀部Propsは決め打ちで指定 (例) Skeleton ComponentのWrapper Component
14. © Findy Inc. 1 4 対策 • 通常のCSSライクなスタイル指定が可能なUnistylesで、スタイル管理を担う • HeroUI NativeとUnistylesで責務を分離する HeroUI Native：Tailwind CSSライクなスタイル指定に、設計で向き合う ① HeroUI Native 機能‧⾻組み • ベースUI Componentのみを利⽤ • Tailwind CSSによるスタイル定義は ⼀切⾏わない Unistyles スタイル定義 • プロジェクト固有のデザイン定義を 集中管理 • カラー / フォントサイズ / 余⽩ etc
15. © Findy Inc. 1 5 HeroUI Native：Tailwind CSSライクなスタイル指定に、設計で向き合う ② (例) Button ComponentのWrapper Component スタイルは通常のCSSで⾏うため、 styleを抽出し、classNameは抽出しない 独⾃スタイルはUnistylesで適⽤
16. © Findy Inc. 1 6 • どのUIライブラリを選んでもメリット‧デメリットはある • 初めからBestな状態を⽬指せないこともある。組織や開発事情に合わせた、 その時々のBetterな選択を⽬指すことが⼤事 • 必要要件を100%満たせなくても、設計でカバーできないか検討してみよう まとめ
17. © Findy Inc. 1 7 • どのUIライブラリを選んでもメリット‧デメリットはある • 初めからBestな状態を⽬指せないこともある。組織や開発事情に合わせた、 その時々のBetterな選択を⽬指すことが⼤事 • 必要要件を100%満たせなくても、設計でカバーできないか検討してみよう まとめ UIライブラリは 「使う」のではなく「制御する」