iOSエンジニアが挑んだReact Native習得の裏側

Transcript

1. © Findy Inc. 2026.03.04 エンジニアが「⾃⼰学習」を楽しむための合同LT会 iOSエンジニアが挑んだ React Native習得の裏側 1 ファインディ株式会社 モバイルエンジニア 加藤 雄⼤ @Takahiro_Kato15
2. © Findy Inc. 2 ⾃⼰紹介 加藤 雄⼤（Kato Takahiro） • プロフィール ◦ 1986年⽣まれの埼⽟県出⾝、1児の⽗ • キャリア ◦ iOSアプリ開発(Swift)が得意 ◦ 2025年8⽉にファインディ株式会社に⼊社 ：@Takahiro_Kato15 ：grandbig
3. © Findy Inc. 3 ※クローズドに試験運⽤中
4. © Findy Inc. 4 Findy Eventsアプリの紹介 QRコードを提⽰し てチェックイン チェックインしたイベ ントの概要‧参加者の 閲覧 参加者同⼠で つながり登録 ※クローズドに試験運⽤中のため、機能改善は鋭意進めています
5. © Findy Inc. 5 ① React Nativeの戦略的選択 ② React Nativeの習熟のために⼯夫したこと
6. © Findy Inc. React Nativeの戦略的選択 6
7. © Findy Inc. 7 当時の状況と、私がやるべきこと モバイルアプリプロダクト ： 実績なし 現役モバイルエンジニア： ⾃分だけ 開発環境‧端末‧ルール： なし Apple / Google 法⼈登録 iOS / Android 開発端末調 達 アカウント‧端 末管理ルール策 定 技術選定 当時の状況 やるべきこと 要求＆要件定 義
8. © Findy Inc. 8 モバイルアプリを何で開発するのか 0から技術選定できる環境にあった
9. © Findy Inc. 9 モバイルアプリ開発⼿法の選択肢 アプローチ 概要 Native SwiftでiOS、KotlinでAndroidを開発する Kotlin Multiplatform ロジックを共通化し、UIはiOS/Androidそれぞれ開発 Cross Platform 1つのコードで、両OSのUI/ロジックを開発 開発者の置かれている環境や考え に依存して最適な⼿法は変わる
10. © Findy Inc. 10
11. © Findy Inc. 1 1 なぜReact Nativeを選んだのか？ 組織のアセット(資 産) モバイルエンジニアとし ての⾃⾝のナレッジ 最速リリース
12. © Findy Inc. 1 2 なぜReact Nativeを選んだのか？ 組織のアセット(資 産) モバイルエンジニアとし ての⾃⾝のナレッジ 最速リリース エンジニアとしての⽣存戦略 Webフロントエンド技術に領域を広げる
13. © Findy Inc. React Nativeの習熟のために ⼯夫したこと 1 3
14. © Findy Inc. 1 4 React Nativeの習熟に向けて、初めに取り組んだこと ⾃⼰学習として実施（業務はスキル成熟を待ってくれない） • 公式ドキュメントやチュートリアル • Swift製のコードをAIと伴⾛して、React Nativeに書き直す
15. © Findy Inc. 1 5 React Nativeの習熟に向けて、初めに取り組んだこと ⾃⼰学習として実施（業務はスキル成熟を待ってくれない） • 公式ドキュメントやチュートリアル • Swift製のコードをAIと伴⾛して、React Nativeに書き直す 書き⽅(How)はわかった でも、どこか腹落ちしない(モヤモヤする)
16. © Findy Inc. 1 6 具体的な「モヤモヤ」の例 • React ◦ 昔あったライフサイクルメソッドを使わずに、なぜHooksを使うのか？ • TypeScript ◦ 「enum」の利⽤が⾮推奨と⾔われているのはなぜ？
17. © Findy Inc. 1 具体的な「モヤモヤ」の例 • React ◦ 昔あったライフサイクルメソッドを使わずに、なぜHooksを使うのか？ • TypeScript ◦ 「enum」の利⽤が⾮推奨と⾔われているのはなぜ？ 納得感(Why)がスキップされて、 脳がシフトできていないことに気づいた Swift / iOS脳 React Native / TypeScript脳 • OS仕様(Appleのルール) • ⾔語仕様としての型安全 • Framework / ⾔語としての仕様 • JSへの静的型付けの導⼊
18. © Findy Inc. 1 8 「モヤモヤ」に対する対策 React Native / TypeScriptへの納得感(Why)を得るために... 特定の記法やアーキテクチャの 「歴史や経緯」を学ぶことを選択 学び⽅は様々ですが... 私の場合は、⾃⼰学習として、書籍を読むことで、体系的な学びに繋がった • りあクト！TypeScriptで始めるつらくないReact開発【②React基礎編】 • プロを⽬指す⼈のためのTypeScript⼊⾨
19. © Findy Inc. 1 9 歴史や経緯を読み解いて納得感に繋がった例 • ライフサイクルメソッド ◦ 関⼼の分離の軸が「時間」になり、関連性のあるロジックが分散する componentDidMount() { ChatAPI.subscribe(this.props.id); // 購読の開始処理 } componentDidUpdate(prevProps) { if (prevProps.id !== this.props.id) { ChatAPI.unsubscribe(prevProps.id); // 購読の解除処理 ChatAPI.subscribe(this.props.id); // 購読の設定処理 } } componentWillUnmount() { ChatAPI.unsubscribe(this.props.id); // 購読の解除処理 } あ iOSのライフサイクルメソッ ドに似ている... • viewDidLoad • viewDidLayoutSubviews • viewWillDisappear
20. © Findy Inc. 2 0 歴史や経緯を読み解いて納得感に繋がった例 • React Hooks ◦ React Hookを活⽤することで、関連性のあるロジックを集約できる ◦ useEffectを利⽤することで、依存配列で実⾏タイミングを決めれる＆ク リーンアップ関数により、関連性のあるロジックが集約される useEffect(() => { ChatAPI.subscribe(id); // 購読の開始処理 return () => { ChatAPI.unsubscribe(this.props.id); //クリーンアップ関数内で、購読解除 } }, [id]);
21. © Findy Inc. 2 1 まとめ • React Nativeの戦略的選択 ◦ 開発者の置かれている環境や考えに依存して最適な⼿法は変わる ◦ 組織と開発者⾃⾝の双⽅にメリットのある選定がオススメ • React Nativeの習熟のために⼯夫したこと ◦ 業務スピードに負けないために、⾃⼰学習を実施 ◦ 書き⽅(How)だけでなく、歴史や経緯を学び、納得感(Why)に繋げること で、真の理解に近づいた