新規サービス開発におけるReact Nativeのリアル〜技術選定の裏側と実践的OSS活用〜

Transcript

1. © Findy Inc. 1 2026.04.13 React Native Lunch Talk 〜いま選ばれる理由とアプリの現在地〜 新規サービス開発におけるReact Native のリアル 〜技術選定の裏側と実践的OSS活⽤〜 ファインディ株式会社 モバイルエンジニア 加藤 雄⼤ @Takahiro_Kato15
2. © Findy Inc. 2 ⾃⼰紹介 加藤 雄⼤（Kato Takahiro） • プロフィール ◦ 1986年⽣まれの埼⽟県出⾝、1児の⽗ • キャリア ◦ iOSアプリ開発(Swift)が得意 ◦ 2025年8⽉からReact Nativeを利⽤ ：@Takahiro_Kato15 ：grandbig
3. © Findy Inc. 3 ※α版を”Android”のみリリース済み。β版のリリースに向けて邁進中
4. © Findy Inc. 4 Findy Eventsアプリの紹介 QRコードを提⽰して チェックイン カンファレンスの情報の閲覧 ※こちらは提供予定の機能で、表記されている情報はテストデータになります。
5. © Findy Inc. 5 Findy Eventsアプリの紹介
6. © Findy Inc. 6 ① React Nativeの技術選定の背景 ② OSSモジュールの選定と活⽤事例 ③ React Nativeに対するリアルな所感 アジェンダ
7. © Findy Inc. React Nativeの技術選定の背景 7
8. © Findy Inc. 8 当時の状況と、私がやるべきこと モバイルアプリプロダクト ： 実績なし 現役モバイルエンジニア： ⾃分だけ 開発環境‧端末‧ルール： なし Apple / Google 法⼈登録 iOS / Android 開発端末調 達 アカウント‧端 末管理ルール策 定 技術選定 当時の状況 やるべきこと 要求＆要件定 義
9. © Findy Inc. 9 モバイルアプリの開発⼿法を 0から技術選定できる環境にあった
10. © Findy Inc. 1 0 モバイルアプリ開発⼿法の選定 アプローチ 概要 Native SwiftでiOS、KotlinでAndroidを開発する Kotlin Multiplatform ロジックを共通化し、UIはiOS/Androidそれぞれ開発 Cross Platform 1つのコードで、両OSのUI/ロジックを開発 最適な開発⼿法は、下記に依存する • 開発者の置かれている環境 • 開発者⾃⾝の考え
11. © Findy Inc. 1 1 モバイルアプリ開発⼿法の選定 アプローチ 概要 Native SwiftでiOS、KotlinでAndroidを開発する Kotlin Multiplatform ロジックを共通化し、UIはiOS/Androidそれぞれ開発 Cross Platform 1つのコードで、両OSのUI/ロジックを開発 最適な開発⼿法は、下記に依存する • 開発者の置かれている環境 • 開発者⾃⾝の考え 最⼩リソースで最速リリースを⽬指す
12. © Findy Inc. 1 2 国内での採⽤事例数 ◯ △ エンジニアの習熟しやすさ ◯ ( モバイルエンジニアに有利 ) △ ( Webエンジニアに有利 ) パフォーマンス ◯ ◯ UI‧UXの⼀貫性 ◯ ( カスタムウィジェット ) △ ( ネイティブコンポーネント ) AIの学習量‧優位性 △ ◯ ( JavaScript, Reactの情報量 ) Cross Platformの選定
13. © Findy Inc. 1 3 国内での採⽤事例数 ◯ △ エンジニアの習熟しやすさ ◯ ( モバイルエンジニアに有利 ) △ ( Webエンジニアに有利 ) パフォーマンス ◯ ◯ UI‧UXの⼀貫性 ◯ ( カスタムウィジェット ) △ ( ネイティブコンポーネント ) AIの学習量‧優位性 △ ◯ ( JavaScript, Reactの情報量 ) Cross Platformの選定
14. © Findy Inc. 1 4 • 組織のアセット ◦ 優秀なWeb FEのReact‧TypeScriptの知識提供やレビュー協⼒を得られる ◦ React製の既存プロダクトの設計思想やソースコードを参考にできる • モバイルエンジニアとしての⾃⾝のナレッジ ◦ iOS/Androidのプラットフォーム特性への理解 ◦ プッシュ通知などのモバイル固有の課題への対応⼒ Cross Platformの選定
15. © Findy Inc. 1 5 • 組織のアセット ◦ 優秀なWeb FEのReact‧TypeScriptの知識提供やレビュー協⼒を得られる ◦ React製の既存プロダクトの設計思想やソースコードを参考にできる • モバイルエンジニアとしての⾃⾝のナレッジ ◦ iOS/Androidのプラットフォーム特性への理解 ◦ プッシュ通知などのモバイル固有の課題への対応⼒ Cross Platformの選定 最⼩リソースで最速リリースを⽬指す
16. © Findy Inc. 1 6 ⾔語 ‧Framework React Native この組み合わせは、デファクトスタンダード Expoを利⽤することで、下記のような恩恵を得られる • リリース作業の簡易化 • 便利モジュールの提供 etc Expo TypeScript UI HeroUI Native スタイル管理は Unistyles   を利⽤ デザイン カタログ Storybook 社内で標準的に利⽤されている データ通信 Apollo Client GraphQL 開発⽀援 品質管理 分析 Jest ESLint Prettier Sentry Firebase Analytics 主な技術スタック
17. © Findy Inc. OSSモジュールの選定と活⽤事例 1 7
18. © Findy Inc. 1 8 • SwiftでのiOSアプリ開発と⽐較すると、OSSが豊富にある ◦ React製のWeb向けのOSSも利⽤対象に⼊ることも1つの要因 ◦ ⼀⽅で、多過ぎて、どれを選定すれば良いのか悩みそう。。。 React Nativeで利⽤可能な豊富なOSSから選定
19. © Findy Inc. 1 9 • SwiftでのiOSアプリ開発と⽐較すると、OSSが豊富にある ◦ React製のWeb向けのOSSも利⽤対象に⼊ることも1つの要因 ◦ ⼀⽅で、多過ぎて、どれを選定すれば良いのか悩みそう。。。 React Nativeで利⽤可能な豊富なOSSから選定 • Expo公式ドキュメントを「羅針盤」として活⽤ ◦ Expo公式 or 推奨モジュールを第⼀候補とし、選定コストを縮⼩化 • ➕プロダクトのコンテキストに合わせた独⾃の選定を実施
20. © Findy Inc. 2 0 OSSの選定結果 Expo公式OSS ルーティング expo-router プッシュ通知 expo-notifications セキュアストレージ expo-secure-store 暗号化 expo-crypto Expoの推奨 3rd Party OSS キーボードの制御 react-native-keyborad-controller ページビューの制御 react-native-pager-view WebView react-native-webview アニメーションの制御 react-native-reanimated その他 Sign in with Apple react-native-apple-authentication UIライブラリ heroui-native • 具体的には、下表の選定を実施
21. © Findy Inc. 2 1 • 背景 ◦ プロダクトにGitHub/Googleの認証機能が必要なため、「Sign in with Apple」の導⼊が必須となる • 選定軸 ◦ iOS⽤に内部で、ASAuthorizationAppleIDButtonを利⽤していること ◦ iOS/Androidの両OSで「Sign in with Apple」を実現できること ▪ expo-apple-authenticationはAndroidが対象外 • 選定結果 ◦ react-native-apple-authentication 独⾃のOSS選定について：Sign in with Apple
22. © Findy Inc. 2 2 • 背景 ◦ ⾃社初のモバイルアプリであるため、社内にデザイン資産がない • 選定軸 ◦ 最⼩リソースで最速リリースを実現できること ▪ 豊富なUI Componentが提供されていること ▪ モバイルエンジニアが理解しやすい‧利⽤しやすいこと • 選定結果 ◦ HeroUI Native ▪ α版ではTamaguiを採⽤したが、β版でデザイン再考することにな り、より要件に合致するものを探した ▪ shadcn/uiスタイルでなく、Component提供型のOSSを選び、学習 コストをカット 独⾃のOSS選定について：UIライブラリ
23. © Findy Inc. 2 3 • 懸念事項 ◦ HeroUI Nativeはβ版であり、課題が多く⾒つかるかもしれない • 対策 ◦ HeroUI NativeのWrapper Componentを実装し、影響範囲を抑える UIライブラリの活⽤について
24. © Findy Inc. React Nativeに対するリアルな所感 2 4
25. © Findy Inc. 2 5 React Nativeを選択した結果 AI時代と⾔えど、⽴ち上がりに苦労しました • モダンReactのキャッチアップ ◦ React Hooksとは？Lifecycleメソッドはいずこに？ • Swiftとは似て⾮なるTypeScript ◦ asもenumも⾮推奨！？ ただ、React Nativeへのハードルはあまり感じなかった • 宣⾔的UIによるUI構築は、SwiftUIで経験があった • プッシュ通知など、機能の仕組みそのものを理解している
26. © Findy Inc. 2 6 React Nativeを選択した結果 AI時代と⾔えど、⽴ち上がりに苦労しました • モダンReactのキャッチアップ ◦ React Hooksとは？Lifecycleメソッドはいずこに？ • Swiftとは似て⾮なるTypeScript ◦ asもenumも⾮推奨！？ ただ、React Nativeへのハードルはあまり感じなかった • 宣⾔的UIによるUI構築は、SwiftUIで経験があった • プッシュ通知など、機能の仕組みそのものを理解している モバイルエンジニアの経験や強みは活かせる
27. © Findy Inc. 2 7 OSS活⽤に対する所感 OSSの更新速度の速さなど、⽂化の違いを感じました • 脆弱性検知などのエコシステムの充実さが開発者体験として良かった Expoの利便性に驚愕しました • デファクトスタンダードな⽴場を確⽴しているため、信頼できる • 証明書やリリース周りの「ならでは」知識の吸収⼒が半端ない！ Web FEのモバイルアプリ開発への参⼊ハードルを相当下げている
28. © Findy Inc. 2 8 OSS活⽤に対する所感 OSSの更新速度の速さなど、⽂化の違いを感じました • 脆弱性検知などのエコシステムの充実さが開発者体験として良かった Expoの利便性に驚愕しました • デファクトスタンダードな⽴場を確⽴しているため、信頼できる • 証明書やリリース周りの「ならでは」知識の吸収⼒が半端ない！ Web FEのモバイルアプリ開発への参⼊ハードルを相当下げている モバイルアプリ開発は想像以上に始めやすい
29. © Findy Inc. 2 9 • React Nativeの技術選定の背景 ◦ 「最⼩リソースで最速リリースを実現する」ために選定 • OSSモジュールの選定と活⽤事例 ◦ Expoドキュメントを「羅針盤」に、コンテキストに合わせた選定も実施 ◦ β版OSSを影響範囲を抑える形で利⽤する活⽤事例 • React Nativeに対するリアルな所感 ◦ モバイルエンジニアの経験や強みは活かせる ◦ Web FEにとって、モバイルアプリ開発は想像以上に始めやすい まとめ
30. © Findy Inc. 3 0 • React Nativeの技術選定の背景 ◦ 「最⼩リソースで最速リリースを実現する」ために選定 • OSSモジュールの選定と活⽤事例 ◦ Expoドキュメントを「羅針盤」に、コンテキストに合わせた選定も実施 ◦ β版OSSを影響範囲を抑える形で利⽤する活⽤事例 • React Nativeに対するリアルな所感 ◦ モバイルエンジニアの経験や強みは活かせる ◦ Web FEにとって、モバイルアプリ開発は想像以上に始めやすい まとめ AI時代に、⼈が責任を取れる技術として選定
31. © Findy Inc. We’re hiring! https://careers.findy.co.jp/ 3 1