ゼロから始めたFindy初のモバイルアプリ開発

Transcript

1. © Findy Inc. 2026.01.22 Findy Tech Talk #01 ゼロから始めた Findy初のモバイルアプリ開発 1 ファインディ株式会社 モバイルエンジニア 加藤 雄⼤ @Takahiro_Kato15
2. © Findy Inc. 2 ⾃⼰紹介 加藤 雄⼤（Kato Takahiro） • プロフィール ◦ 1986年⽣まれの埼⽟県出⾝、1児の⽗ • キャリア ◦ iOSアプリ開発をメインに研鑽 ◦ 2025年8⽉にファインディ株式会社に⼊社 ：@Takahiro_Kato15 ：grandbig
3. © Findy Inc. 3 ※クローズドに試験運⽤中
4. © Findy Inc. 4 Findy Eventsアプリの紹介 QRコードを提⽰して チェックイン チェックインしたイベン トの概要‧参加者の閲覧 参加者同⼠で つながり登録 ※クローズドに試験運⽤中のため、機能改善は鋭意進めています
5. © Findy Inc. 5 Findy Eventsアプリの紹介
6. © Findy Inc. 6 どのように Findy初のモバイルアプリ開発に挑んだのか
7. © Findy Inc. モバイルアプリ開発の背景 7
8. © Findy Inc. 8 モバイルアプリ開発の背景 • 昨今はAIの進化が⽬覚ましく、知識を簡単にオンラインから得られるように なった • ⼀⽅で、これからの時代、オフラインの場が今まで以上に⼤事になってくる ◦ そこでしか⼿に⼊らない、⽣きた『情報』 ◦ そこでしか作れない、かけがえのない『つながり』
9. © Findy Inc. 9 モバイルアプリ開発の背景 • 昨今はAIの進化が⽬覚ましく、知識を簡単にオンラインから得られるように なった • ⼀⽅で、これからの時代、オフラインの場が今まで以上に⼤事になってくる ◦ そこでしか⼿に⼊らない、⽣きた『情報』 ◦ そこでしか作れない、かけがえのない『つながり』 オフラインにおけるつながりを最⼤化し エンジニア同⼠の知識‧経験の共有を促進する
10. © Findy Inc. 0→1の挑戦 10
11. © Findy Inc. 11 0→1の挑戦 モバイルアプリプロダクト： 実績なし 現役モバイルエンジニア： ⾃分だけ 開発環境‧端末‧ルール： なし Apple / Google 法⼈登録 iOS / Android 開発端末調達 アカウント‧端末 管理ルール策定 技術選定 当時の状況 やること⼭積み 要求＆要件定義
12. © Findy Inc. 12 0→1の挑戦 モバイルアプリプロダクト： 実績なし 現役モバイルエンジニア： ⾃分だけ 開発環境‧端末‧ルール： なし Apple / Google 法⼈登録 iOS / Android 開発端末調達 アカウント‧端末 管理ルール策定 技術選定 当時の状況 やること⼭積み 要求＆要件定義
13. © Findy Inc. 13 要求＆要件定義 1. 企画すり合わせ 2.UX / デザイン 3.議論‧検討 4.開発 要求定義& 機能の洗い出し エンジニア (参加者視点) PO (主催者視点) POが UXベース作成 デザイナーが Figmaで作成 どうですか？ ここは こう変更で OK！ 確度の⾼い機能 並⾏して実装を開始 細かい挙動 &仕様決定 実装を通じた エンジニア主体の改善 完成 プロダクト
14. © Findy Inc. 14 要求＆要件定義 1. 企画すり合わせ 2.UX / デザイン 3.議論‧検討 4.開発 要求定義& 機能の洗い出し エンジニア (参加者視点) PO (主催者視点) POが UXベース作成 デザイナーが Figmaで作成 どうですか？ ここは こう変更で OK！ 確度の⾼い機能 並⾏して実装を開始 細かい挙動 &仕様決定 実装を通じた エンジニア主体の改善 完成 プロダクト エンジニアも徹底的に各フェーズに関わっていける
15. © Findy Inc. 15 技術選定：メインフレームワークの選定 国内での採⽤事例数 ◯ △ エンジニアの習熟しやすさ ◯ ( モバイルエンジニア向き ) △ ( Webエンジニア向き ) パフォーマンス ◯ ◯ UI‧UXの⼀貫性 ◯ ( カスタムウィジェット ) △ ( ネイティブコンポーネント ) AIの学習量‧優位性 △ ◯ ( JavaScript, Reactの情報量 )
16. © Findy Inc. 16 技術選定：メインフレームワークの選定
17. © Findy Inc. 17 技術選定：メインフレームワークの選定 アドバイス • 会社として「◯◯を使ってください」ということはない • 技術は変化するものであり、将来的な再構築は起こり得る 私の解釈‧考察 • 現場主導の責任を持った意思決定をする • 不確実性の⾼いことを考えすぎるより、今思うBetterな判断をする
18. © Findy Inc. 18
19. © Findy Inc. 19 技術選定：React Native 選定の理由 • 組織のアセット ◦ 社内のWeb FEから、React‧TypeScriptの知識 / レビュー協⼒を得られる ◦ React製の既存プロダクトのアーキテクチャを参考にできる • モバイルエンジニアとしての⾃⾝のナレッジ ◦ iOS/Androidのプラットフォーム特性への理解 ◦ プッシュ通知などのモバイル固有の課題への対応⼒
20. © Findy Inc. 20 技術選定：React Native 選定の理由 • 組織のアセット ◦ 社内のWeb FEから、React‧TypeScriptの知識 / レビュー協⼒を得られる ◦ React製の既存プロダクトのアーキテクチャを参考にできる • モバイルエンジニアとしての⾃⾝のナレッジ ◦ iOS/Androidのプラットフォーム特性への理解 ◦ プッシュ通知などのモバイル固有の課題への対応⼒ 最も早くリリースができる
21. © Findy Inc. 21 技術選定：技術スタック 言語 ・Framework React Native この組み合わせがデファクトスタンダード + Expoにより、専門外のエンジニアでも簡単にリリース作業ができる Expo TypeScript UIライブラリ Tamagui OS共通のデザインを実現 + モバイルエンジニアが理解しやすい デザイン カタログ Storybook 社内で標準的に利用されている データ通信 Apollo Client GraphQL 開発支援 品質管理 分析 Jest ESLint Prettier Sentry Firebase Analytics
22. © Findy Inc. 現状とこれから 22
23. © Findy Inc. 23 現状とこれから：React Nativeを選択した結果 AI時代と⾔えど、⽴ち上がりに⾮常に苦労しました • モダンReactのキャッチアップ ◦ React Hooksって何？ • Swiftとは似て⾮なるTypeScript ◦ asもenumも⾮推奨！？ 選択して良かった • Web FE有識者のレビューから学びを得ることが多かった • 他プロダクトのWeb FEが読めるようになった ◦ 逆も然りだと思うので、組織の流動性にも寄与するはず
24. © Findy Inc. 24 現状とこれから：2025年12⽉にAndroidアプリをリリース 「Android ロボットは、Google が作成および提供している作品から複製または変更したものであり、 クリエイティブ‧コモンズ表⽰ 3.0 ライセンスに記載された条件に従って使⽤しています。」 ※iOS版は開発中
25. © Findy Inc. 25 現状とこれから：ユーザの声から⾒えた「伸びしろ」 興味関⼼を持ってアプリを⾒て頂けた⼀⽅で、次の気づきを感じた • UI‧UX：『もっとわかりやすく、簡単に』を突き詰める • Value：『使いたい』と思える機能提供が不可⽋ これから⽬指すこと 1. 「あると便利」だと感じてもらえる⼟台に⽴つ 2. 「使いたい」「当たり前に使う」アプリへ成⻑
26. © Findy Inc. 26 現状とこれから：ユーザの声から⾒えた「伸びしろ」 興味関⼼を持ってアプリを⾒て頂けた⼀⽅で、次の気づきを感じた • UI‧UX：『もっとわかりやすく、簡単に』を突き詰める • Value：『使いたい』と思える機能提供が不可⽋ これから⽬指すこと 1. 「あると便利」だと感じてもらえる⼟台に⽴つ 2. 「使いたい」「当たり前に使う」アプリへ成⻑ モバイルアプリへの挑戦は始まったばかり！
27. © Findy Inc. Appendix 27
28. © Findy Inc. IDE(統合開発環境) VSCode Xcode Android Studio 28 技術選定：技術スタック ⾔語‧フレームワーク UIライブラリ React Native Expo TypeScript Tamagui デザインカタログ Storybook 開発⽀援‧品質管理‧分析 Jest ESLint Prettier Sentry Firebase Analytics データ通信 Apollo Client GraphQL