スタートアップで React Native を採用してよかったこと

2022/10/08 開催の React Native Matsuri 2022 での登壇資料になります。

Transcript

1. ελʔτΞοϓͰ React Native Λ ࠾༻ͯ͠Α͔ͬͨ͜ͱ גࣜձࣾ dinii CTO େ༑Ұथ React Native Matsuri 202 2 2022/10/08
2. ࠓ೔࿩͢͜ͱ 2 • ελʔτΞοϓͷ্ཱ͔ͪ͛ΒɺReact Native Λຊ࠾༻͢Δ·ͰͷܦҢ • ͦͷޙͲ͏ͳ͔ͬͨʁ
3. ελʔτΞοϓͷ্ཱͪ͛ͱٕज़ 3 ϓϩμΫτ͸େମ͏·͍͔͘ͳ͍ Կ౓΋ࣦഊ͢Δɺվળ͢Δɺͦͷࢼߦճ਺͕উෛ → ͱʹ͔͙͘͢ʹಈ͘΋ͷΛ࡞Γɺͱʹ͔͘ϦϦʔε͠ɺֶͼΛಘΔճ਺͕ॏཁ https://blog.winnonapartners.com/what-is-a-pivot-top-10-best-tech-startup-pivots-case-study/
4. ελʔτΞοϓͷ্ཱͪ͛ͱٕज़ 4 • dinii Ͱ΋ɺࣗ෼͕͜Ε·Ͱॻ͍͖ͯͨίʔυɾ࡞͖ͬͯͨϓϩμΫτͷ΄ͲΜͲ͕΋͏ͳ͍ɻ ◦ ࠓ·Ͱ 4,5ճେ͖͘ϐϘοτ͍ͯ͠Δ • ʮͱʹ͔͘ࠓϦϦʔεͤͶ͹ʂʂʯͱ͍͏Ձ஋؍Ͱɺͦͷ࣌ͷϝϯόʔ͕࠷େύϑΥʔϚϯεΛग़ͤ Δٕज़બఆͱ࣮૷Λ͍ͯͨ͠(ϦϦʔευϦϒϯͳٕज़બఆ)ɻ ↓ ࣗ෼΍աڈͷϝϯόʔ͕ܞΘͬͨ਺ʑͷϓϩμΫτͨͪ
5. dinii ͷٕज़ελοΫ 5 ʮଟ਺ͷϓϩμΫτʯΛʮগਓ਺ʯͰʮߴ଎ʯ͔ͭʮ҆ఆʯʹ։ൃ͢Δઓུͱͯ͠ͷ TypeScript, React, GraphQL (Hasura) ΁ͷҰۃूத Ϩδ ΩΦεΫ ΩονϯσΟεϓϨΠ μογϡϘʔυ ϋϯσΟ ϞόΠϧΦʔμʔ ϓϦϯλ࿈ܞ ࣗಈ௼મػ࿈ܞ ϓϦϯλ࿈ܞ LINE Mini App όοΫΤϯυ → ࠷ॳ͸શવҧ͍·ͨ͠
6. dinii ͷٕज़ελοΫ(ݕূظ) 6 • ݩʑɺϑϩϯτΤϯυͱόοΫΤϯυ͸ TypeScript x Node.js Ͱ΍͍ͬͯͨ
 (CTO ͕ͦΕ͔͠ॻ͚ͳ͔ͬͨ / ॻ͘༨༟͕ͳ͔͔ͬͨΒ 😂 ) • ϞόΠϧ͸ɺجຊతʹωΠςΟϒ(Swift/Kotlin)࣮૷͍ͯͨ͠ ◦ ͦ΋ͦ΋ web ͸ͳ͘ϞόΠϧओମͷαʔϏεͷ࣌ظ΋͋ͬͨͷͰ • େ͖ͳϓϩμΫτɾαʔϏεͰ͍͏ͱ4,5ճϐϘοτ͍ͯ͠Δ ◦ ͦͷ౓ʹؙͬͱαʔϏεΛ࡞Γ௚͠
7. dinii ʹ͓͚Δٕज़બఆͷཱͪҐஔͷৼΓฦΓ 7 Ϗδωε/ϓϩμΫτ ٕज़બఆɾΞʔΩςΫνϟ ૊৫ɾਓࡐ ΞʔϦʔͳͷͰ Α͘෼͔Βͳ͍ɻ ະ஌Λ஌ΔͨΊʹɺ ૣ͘ଟ͘ϦϦʔεɻ ߴ଎ϦϦʔεͷͨΊʹɺ ࠓͷϝϯόʔ͕࠷େύ ϑΥʔϚϯεΛൃشͰ͖Δ ٕज़બఆ ৽ن্ཱ͛ɺվળɺӡ ༻ɺϐϘοτɺશͯΛ͜ ͳ͢λϑͳਓࡐ ͜͏ͳΔΜ͡Όͳ͍͔ɺ ͱ͍͏ະདྷ૾͕ ݟ͑ͯ͘Δ ϏδωεͷϏδϣϯʹର ͯ͠దͨ͠ΞʔΩςΫ νϟɺٕज़બఆ ΞʔΩςΫνϟͱٕज़બఆ ʹదͨ͠૊৫ߏ଄ͱਓࡐ ݕূظ (ϦϦʔευϦϒϯ) PMFޙ (ϏδϣϯυϦϒϯ) ✅ ͜ͷస׵ظͰ React Native ͷຊ࠾༻Λͨ͠
8. React Native ಋೖͷܦҢ 8 • ҰఆϏδωεɾϓϩμΫτͷํ޲ੑ͕ݟ͑ͨ࣌ʹɺ͋Δͻͱͭͷ
 ϞόΠϧΞϓϦ(Ϩδ)ʹຊ֨తʹ஫ྗ͢ΔҙࢥܾఆΛͨ͠ɻ →ʮϨδʯͱ͍͏ϞόΠϧΞϓϦͷٕज़બఆͰඇৗʹ໎ͬͨɻ
9. Ϩδ։ൃ஫ྗ௚લͷٕज़ɾνʔϜঢ়گ 9 x1 x2 ͜͜ʹ஫ྗ͍ͯ͘͠Ϗδωε্ͷ ҙࢥܾఆ͕͞Εͨ Backend web app native app A native app B (Ϩδ) ༷ʑͳ HW ࿈ܞͷ༧ఆ͋ Γ SWE Kotlin Ͱଓ౤ vs React Native ΁Ҡߦ
10. Ϩδͷٕज़બఆʹ͓͍ͯߟ͑ͨ͜ͱ 10 • ΩϟογϡυϩϫʔɺϓϦϯλʔͳͲɺ༷ʑͳ෺ཧσόΠεͱͷ࿈ܞ͕ݟ͍͑ͯͨ ◦ ωΠςΟϒ࣮૷ͷํָ͕ͦ͏ ◦ ϋʔυ΢ΣΞଆʹɺRN SDK ͳͲͳ͍͜ͱ͕ଟ͍ • ωΠςΟϒ࣮૷Ͱͷӡ༻ͷͨΊ࣮૷/࣮੷͸͋ͬͨ ◦ ྫ: ҿ৯ళ͸ 24/365 ͳͷͰɺࣗಈΞοϓσʔτ͕͔͔Βͳ͍ͱ͍͚ͳ͍ɻ ▪ Android ͳͷͰ OS ͷਂ͍ͱ͜Ζ·Ͱ৮Ε͍ͯͨͨΊɺͳΜͱ͔ͳ͍ͬͯͨɻ • ๩͍͠ҿ৯ళ޲͚ϓϩμΫτͳͷͰɺඍົͳૢ࡞ੑ΍εϐʔυײ͕ڧ͘ٻΊΒΕͦ͏ ◦ ωΠςΟϒͷํ͕ؤுΕͦ͏ • ϨδΞϓϦͷωΠςΟϒ࣮૷ͷ͜Ε·Ͱͷࢿ࢈Λࣺ͕͍ͯͨ ◦ ͳΜ͔ͩΜͩ͜Ε͕Ұ൪େ͖͍
11. ͳͥ React Native ͕બ୒ࢶͱͯ͠ग़͖ͯͨʁ 11 • աڈͷϐϘοτͷܦݧ͔Βɺ
 ଟ͘ͷϓϩμΫτΛશͯ࿈ಈͤ͞Δ͜ͱʹͳΔͷͰ͸ͳ͍͔ʁͱ͍͏ߏ૝͕ग़͖ͯͨͨΊɻ • ҰํͰɺ͜Ε·ͰͷωΠςΟϒ࣮૷ɾӡ༻ͷࢿ࢈Λࣺ͕͍ͯͨͱ͍͏τϨʔυΦϑɻ → Ϗδωεߏ૝తʹɺଟϓϩμΫτͷ։ൃޮ཰ੑʹٕज़ج൫Λ౗ͨ͠ํ͕ϨόϨοδ͕ޮ͖ͦ͏ ͩͬͨͷ͕ܾΊखɻ ॳ଎ͱকདྷ૾Λఱṝʹֻ͚ɺ Ϩδ։ൃ஫ྗલʹ React Native Ͱ࡞Γ௚͢͜ͱΛҙࢥܾఆ
12. ͦͷޙͲ͏ͳ͔ͬͨʁ 12 • ૝ఆΑΓ΋ɺϞόΠϧΞϓϦ͕૿͑ͨɻ ◦ ҰํͰಉ͡Α͏ͳ࣮૷Օॴ͕ଟ͍ɻશ෦ TS Ͱॻ͚ΔͷͰϝϯςίετ͕௿͘཈͑ΒΕͨɻ ◦ ྫ: དྷళ٬ɺళฮελοϑɺ৭ʑͳਓ͕͋ͪͪ͜Ͱ஫จ͢Δ 
 = ΠϯλʔϑΣʔε͸৭ʑɺϩδοΫ͸ಉ͡ɻ
 • ͦͷଞͷ࿦఺͸ɺΤίγεςϜͷॿ͚΋͋Γඞཁे෼ʹղܾͰ͖ͨɻ ◦ HW ࿈ܞʹ͓͍ͯ΋ɺωΠςΟϒґଘͳ࣮૷Λ཈͑ΒΕͨ(ͦ͏ͳΒͳ͍౒ྗ͕Ͱ͖ͨ)ɻ ◦ ࣗಈΞοϓσʔτ͸ Expo ͷ OTA update ͕͋ͬͨͷͰ໰୊ͳ͔ͬͨɻ ◦ ύϑΥʔϚϯεͷݒ೦͸ɺਖ਼͍࣮͠૷ͰؤுΕͨɻ ▪ ༷ʑͳϥΠϒϥϦ΍ۀքͱͯ͠ͷ࣮૷஌ݟɺ෦෼తͳωΠςΟϒ࣮૷ͳͲɻ ◦ → React Native ͷڧྗͳΤίγεςϜʹॿ͚ΒΕͨ෦෼͕ଟ͍
13. ௚ۙͷٕज़ɾνʔϜঢ়گ 13 xͨ͘͞Μ Backend web app native app A native app B (Ϩδ) HW ࿈ܞ SWE native app C native app D ݁ہ΋ͬͱ૿͑ͨ HW Λ iOS Խ શ௨৴Λ GraphQL Խ ଟ͘ͷมԽ͕͕͋ͬͨʮଟ͘ͷϓϩμΫτΛ࡞Δʯલఏͷ͓͔͛ͰϏδωεతʹࣦ଎ͤͣεέʔϧத
14. Takeaways 14 • ৗʹϏδωεɾϓϩμΫτͷকདྷΛݟ௨ͯ͠ɺٕज़ʹ൓өͤ͞ΒΕΔͱྑ͍ɻ ◦ ͱ͸͍͑ɺக͠ํͳ͍ϑΣʔζ͸Ͳ͏ͯ͠΋͋Δɻ ▪ ಛʹॳظ͸ɺ͙͢ʹϦϦʔεΛֶͯ͠ͼΛಘΔ͜ͱͰ࣍ʹܨ͕Δ͜ͱ͕ଟ͍ɻ ◦ dinii ͷ৔߹ɺ௕͘ҿ৯υϝΠϯͰ 0→1 Λ΍͍ͬͯͨͷͰɺଟϓϩμΫτͷߏ૝ͱॏཁੑΛεέʔϧલʹ࡯஌Ͱ ͖ͨ͜ͱ͕޾ӡͩͬͨɻ ▪ ʮ͜͜࡞Βͳͯ͘ྑ͘ͳ͍ʁʯ͸ɺେ఍ׂͱ͙͢ʹ࡞Β͟ΔΛಘͳ͔ͬͨɻɻɻ • ͋ͬͯΑ͔ͬͨɺReact Nativ e ◦ ෆ࣮֬ੑ͕ߴ͍ελʔτΞοϓʹ͓͍ͯɺϚϧνϓϥοτϑΥʔϜ / web ͷٕज़͕࢖͑Δ / ΤίγεςϜ͕େ͖͍ ͜ͱ͸ඇৗʹڧྗɻ ◦ ಛʹ dinii Ͱ͸ɺଟϓϩμΫτΛϚϧνϓϥοτϑΥʔϜͰٻΊΒΕΔϏδωεͱͷ૬ੑ͕ൈ܈ͩͬͨɻ