KitchHike式 React Native 設計チェックポイント / React Native App Design in KitchHike

TECH STAND #3 クロスプラットフォーム開発 Flutter x React Native ( https://standfm.connpass.com/event/199782/ ) の登壇資料です。

React Nativeアプリにおけるキッチハイクの選択を
ベストプラクティス度・変更コストの2つの軸から紹介します。

アジェンダ
- プラットフォーム選定
- React Nativeアプリ設計
- 運用設計

Transcript

1. 5&$)45"/%
   

   ,JUDI)JLFࣜ
   

   3FBDU/BUJWFઃܭνΣοΫϙΠϯτ
   
   4IPLFO'VKJTBLJ
   

   View Slide

2. 3FBDU/BUJWFΞϓϦʹ͓͚ΔΩονϋΠΫͷબ୒Λ
   

   ϕετϓϥΫςΟε౓ɾมߋίετͷͭͷ͔࣠Β঺հ͠·͢
   ϓϥοτϑΥʔϜબఆ
   3FBDU/BUJWFΞϓϦઃܭ
   ӡ༻ઃܭ
   ΞδΣϯμ
   

   View Slide

3. ࣗݾ঺հ
   w 4IPLFO'VKJTBLJ !TIPLFOY
   
   w גࣜձࣾΩονϋΠΫ
   

   ڞಉ૑ۀऀ$50
   w ΩονϋΠΫΤϯδχΞνʔϜͰ
   

   ݄ץ3/'FBUVSFT࿈ࡌத
   

   IUUQTUFDILJUDIIJLFDPN
   

   View Slide

4. ΩονϋΠΫ͸
   

   3FBDU/BUJWFͰ։ൃ೥໨
   w ೥Նʹ͔Β3FBDU/BUJWFͰ։ൃ
   w ճҎ্ͷϦϦʔε
   w ճͷ3FBDU/BUJWFΞοϓάϨʔυ
   

   View Slide

5. ࣗ୐ʹ஍Ҭͷ৯ࡐ͕ಧ͘
   ΦϯϥΠϯΠϕϯτΛల։த
   

   View Slide

6. ࣾձ͸ɺࢲ͕ͨͪ৯΂ͨ΋ͷͰͰ͖͍ͯΔ
   

   View Slide

7. ϓϥοτϑΥʔϜ΋
   

   ࢲ͕ͨͪબ୒ͨ͠ߦಈ͔ΒͰ͖͍ͯΔ
   

   View Slide

8. 3FBDU/BUJWFΞϓϦʹ͓͚ΔΩονϋΠΫͷબ୒Λ
   

   ͭͷ͔࣠Β঺հ͠·͢
   ϕετϓϥΫςΟε౓
   ϕετϓϥΫςΟε͕ݻ·Γͭͭ͋Δͷ͔ɺ·ͩෳ਺खஈ͕ݕ౼͞Ε͍ͯΔͷ͔
   มߋίετ
   ޙ͔Βมߋ͢Δ࣌ʹ͔͔Δίετ
   

   View Slide

9. ΞδΣϯμ
   ϓϥοτϑΥʔϜબఆ
   3FBDU/BUJWFΞϓϦઃܭ
   ӡ༻ઃܭ
   

   View Slide

10. ΞδΣϯμ
    ϓϥοτϑΥʔϜબఆ
    3FBDU/BUJWFΞϓϦઃܭ
    ӡ༻ઃܭ
    

    View Slide

11. ϓϥοτϑΥʔϜબఆ
    3FBDU/BUJWF
    ϕετϓϥΫςΟε౓⭐ˑˑ
    มߋίετ࠷ߴ
    

    View Slide

12. ͳͥ3FBDU/BUJWF͔
    νʔϜମ੍
    ΞϓϦ͸7JFX։ൃ͕ϝΠϯ
    ωΠςΟϒػೳ΁ͷڧ͍ґଘ͕ͳ͍
    ઃܭࢥ૝ɾ։ൃίϛϡχςΟ
    3FBDUΤίγεςϜ
    ϓϥοτϑΥʔϜબఆ
    

    View Slide

13. ͳͥ3FBDU/BUJWF͔
    ͦͷνʔϜମ੍
    3FBDUΛಋೖࡁΈͷ8FCΤϯδχΞͷνʔϜ
    ྑ͍λΠϛϯάͰ֎෦ͷγχΞωΠςΟϒΤϯδχΞ
    ͕ࢀը
    ωΠςΟϒͷ஌ࣝ͸ඞཁͩͱײͨ͡
    ϓϥοτϑΥʔϜબఆ
    

    View Slide

14. ͳͥ3FBDU/BUJWF͔
    ͦͷΞϓϦ͸7JFX։ൃ͕ϝΠϯ
    8FC൛͸ϦϦʔεޙ೥Ҏ্͍ͨͬͯͨ
    ϏδωεϩδοΫ͸αʔόʔαΠυʹ͋Δ
    ΞϓϦ͸ബ͍7JFXͱ͍͏ઃܭํ਑
    ϓϥοτϑΥʔϜબఆ
    

    View Slide

15. ͳͥ3FBDU/BUJWF͔
    ͦͷωΠςΟϒػೳ΁ͷڧ͍ґଘ͕ͳ͍
    ωΠςΟϒػೳʢϚϧνΧϝϥ΍δϟΠϩηϯαʔͳ
    Ͳʣ΁ͷཁ͕݅ͳ͔ͬͨ
    ϓϥοτϑΥʔϜબఆ
    

    View Slide

16. ͳͥ3FBDU/BUJWF͔
    ͦͷઃܭࢥ૝ɾ։ൃίϛϡχςΟ
    3FBDU͸ɺؔ਺ܕϓϩάϥϛϯάͷࢥ૝ɺಛʹJNNVUBCJMJUZΛେࣄʹͯ͠
    ͍ΔϑϨʔϜϫʔΫͩͱײ͡·͢ɻ͜ͷ఺΋ɺ3FBDU/BUJWFΛऔΓೖΕ
    ͨཧ༝ͷҰͭͰ͢ɻ
    3VCZ3BJMTͱ͸ผͷઃܭࢥ૝ʹ৮ΕΔ͜ͱʹΑΓɺ։ൃνʔϜʹԞߦ
    ͖Λ͔࣋ͨͤͨͬͨͱ͍͏ࢥ͍͕͋Γ·͢ɻ
    3FBDUͷࢥ૝Ͱ͋Δ-FBSO0ODF 8SJUF"OZXIFSF͸ΩονϋΠΫνʔ
    ϜͰ͸্ख͘ϫʔΫ͍ͯ͠Δͱࢥ͍·͢ɻ
    ϓϥοτϑΥʔϜબఆ
    

    View Slide

17. ͳͥ3FBDU/BUJWF͔
    ͦͷ3FBDUΤίγεςϜ
    ϓϥοτϑΥʔϜબఆ
    MFBSOPODF XSJUFBOZXIFSF
    3FBDUίϯϙʔωϯτԽ͢Ε͹ɺଟ͘ͷϓϥοτϑΥʔϜͰಈ͘
    

    ϥΠϒϥϦΛ࡞ΕΔ
    3FBDU/BUJWF
    3FBDU/BUJWFGPS8JOEPXT 3FBDU/BUJWFGPSNBD04
    3FBDU
    

    View Slide

18. ͳͥ3FBDU/BUJWF͔
    ϓϥοτϑΥʔϜબఆ
    '"2
    2&YQP͸ݕ౼͠ͳ͔ͬͨʁ
    

    View Slide

19. ͳͥ3FBDU/BUJWF͔
    '"2
    2&YQP͸ݕ౼͠ͳ͔ͬͨʁ
    ϓϥοτϑΥʔϜબఆ
    "౰࣌͸੍ݶ͕ڧ͍ҹ৅ͩͬͨɻ௕ظӡ
    ༻Λݟӽ͍ͯͨ͠ͷͰ࠷ॳ͔Β7BOJMMB
    3FBDU/BUJWFΛ࠾༻ͨ͠ɻ
    

    View Slide

20. ͳͥ3FBDU/BUJWF͔
    ϓϥοτϑΥʔϜબఆ
    '"2
    2'MVUUFS΍ͦͷଞ͸ݕ౼͠ͳ͔ͬͨʁ
    

    View Slide

21. ͳͥ3FBDU/BUJWF͔
    '"2
    2'MVUUFS΍ͦͷଞ͸ݕ౼͠ͳ͔ͬͨʁ
    ϓϥοτϑΥʔϜબఆ
    "8FCͰ3FBDUΛಋೖ͍ͯͯ͠ɺઃܭࢥ
    ૝͕޷ҹ৅ͩͬͨͷ͕Ұ൪ͷཧ༝Ͱ
    3FBDU/BUJWFʹɻ
    

    View Slide

22. 3FBDU/BUJWFબఆޙʹ΍ͬͨ͜ͱ
    ϓϥοτϑΥʔϜબఆ
    ެࣜυΩϡϝϯτಡΉ
    044ͷιʔείʔυΛಡΉ
    ࠷৽৘ใΛΩϟονΞοϓ
    ɾɾΛఆظతʹࣾ಺ษڧձͰڞ༗ͯ͠ɺ
    

    ϒϩάهࣄͱͯ͠ެ։
    

    View Slide

23. 3FBDU/BUJWFબఆޙʹ΍ͬͨ͜ͱ
    ϓϥοτϑΥʔϜબఆ
    ެࣜυΩϡϝϯτಡΉ
    

    IUUQTSFBDUOBUJWFEFWEPDTHFUUJOHTUBSUFE
    ఆظతʹಡΈฦ͢͜ͱ΋େ੾
    

    ྫ͑͹ɺ࠷ۙͰ͸SFBDUOBUJWFDMJ͔ΒOQYSFBDUOBUJWF͕ਪ঑ʹͳ͍ͬͯΔ
    IUUQTSFBDUOBUJWFEFWEPDTFOWJSPONFOUTFUVQ
    

    View Slide

24. 3FBDU/BUJWFબఆޙʹ΍ͬͨ͜ͱ
    ϓϥοτϑΥʔϜબఆ
    044ͷιʔείʔυΛಡΉ
    

    IUUQTHJUIVCDPN3FBDU/BUJWF/FXT3FBDU/BUJWF"QQT
    *O
    f
    i
    OJUF3FE͕ӡӦ͍ͯ͠Δ
    

    3FBDU/BUJWF"QQTϦϙδτϦ
    
 

    ެࣜυΩϡϝϯτͰ΋঺հ͞Ε͍ͯΔ
    

    View Slide

25. 3FBDU/BUJWFબఆޙʹ΍ͬͨ͜ͱ
    ϓϥοτϑΥʔϜબఆ
    ࠷৽৘ใͷΩϟονΞοϓ
    w 3FBDU3FBDU/BUJWFެࣜϒϩά
    w 3FBDU/BUJWFΞϓϦΛ։ൃ͍ͯ͠ΔձࣾͷςοΫϒϩά
    

    8JY 4IPQJGZ ,IBO"DBEFNZଞ
    w 3FBDU/BUJWF3FMFBTFTϦϙδτϦ
    

    ࣍ͷϦϦʔεʹ͍ͭͯσΟεΧογϣϯ͕͞Ε͍ͯΔ
    

    IUUQTHJUIVCDPNSFBDUOBUJWFDPNNVOJUZSFMFBTFT
    w 5XJUUFS .FEJVN EFWUP ษڧձεϥΠυͳͲ
    

    View Slide

26. 3FBDU/BUJWFબఆޙʹ΍ͬͨ͜ͱ
    ϓϥοτϑΥʔϜબఆ
    ࣾ಺ษڧձͰڞ༗ͯ͠ɺςοΫϒϩάهࣄͱͯ͠ެ։
    

    3/'FBUVSFT
    

    IUUQTUFDILJUDIIJLFDPNBSDIJWFDBUFHPSZ3FBDU/BUJWF
    

    View Slide

27. ΞδΣϯμ
    ϓϥοτϑΥʔϜબఆ
    3FBDU/BUJWFΞϓϦઃܭ
    ӡ༻ઃܭ
    

    View Slide

28. ΞϓϦઃܭνΣοΫϙΠϯτ
    w 6*ίϯϙʔωϯτ
    w "1*ΫϥΠΞϯτ
    w εςʔτ؅ཧ
    w φϏήʔγϣϯϥΠϒϥϦ
    w ΞϓϦετϨʔδ%#
    w ίϯϙʔωϯτઃܭΧλϩά
    w σΟϨΫτϦߏ੒
    w ܕνΣοΧʔ
    w ςετܭըʢ$*$%ؚΉʣ
    

    View Slide

29. ΞϓϦઃܭνΣοΫϙΠϯτ
    w 6*ίϯϙʔωϯτ
    w "1*ΫϥΠΞϯτ
    w εςʔτ؅ཧ
    w φϏήʔγϣϯϥΠϒϥϦ
    w ΞϓϦετϨʔδ%#
    w ίϯϙʔωϯτઃܭΧλϩά
    w σΟϨΫτϦߏ੒
    w ܕνΣοΧʔ
    w ςετܭըʢ$*$%ؚΉʣ
    άϨʔͷ߲໨͸ޙड़ͷ2JJUBهࣄͰղઆ͍ͯ͠·͢
    

    View Slide

30. εςʔτ؅ཧ
    Ҏલ͸બ୒ࢶ͕ଟ͘೰·͔ͬͨ͠
    

    3FEVY .PC9 6OTUBUFE
    ೥ͩͱҎԼͷ͕ͭ༗ྗͳީิ
    

    '$)PPLT $POUFYU"1*
    
    

    3FDPJM
    ΩονϋΠΫͰ͸ͷ'$)PPLTΛ࠾༻
    ΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε౓⭐⭐ˑ
    มߋίετߴ
    

    View Slide

31. σ
    ΟϨΫτϦߏ੒
    ΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε౓⭐⭐ˑ
    มߋίετத
    ઃܭϙΠϯτ
    

    τοϓσΟϨΫτϦ໊
    

    ίϯϙʔωϯτσ
    ΟϨΫτϦ໊
    

    ϑΝΠϧ໊
    

    ελΠϧϑΝΠϧͷஔ͖৔
    

    View Slide

32. σ
    ΟϨΫτϦߏ੒
    ΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε౓⭐⭐ˑ
    มߋίετத
    ࠷ۙͷ܏޲
    

    τοϓσΟϨΫτϦ໊
    

    ίϯϙʔωϯτσ
    ΟϨΫτϦ໊
    

    ϑΝΠϧ໊
    

    ελΠϧϑΝΠϧͷஔ͖৔
    TSD͕ओྲྀ
    

    TDSFFOTDPNQPOFOUT
    

    ίϯϙʔωϯτ໊KT
    

    ίϯϙʔωϯτϑΝΠϧ
    

    ಺ʹهड़
    

    View Slide

33. σ
    ΟϨΫτϦߏ੒
    ΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε౓⭐⭐ˑ
    มߋίετத
    IUUQTHJUIVCDPNSFBDUOBUJWFKQQSBJTFS
    έʔεQSBJTFS
    

    View Slide

34. σ
    ΟϨΫτϦߏ੒
    ΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε౓⭐⭐ˑ
    มߋίετத
    έʔεQYWJFX
    IUUQTHJUIVCDPNBMQIBTQQYWJFX
    

    View Slide

35. ܕνΣοΧʔ
    ΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε౓⭐⭐⭐
    มߋίετத
    5ZQF4DSJQUPS'MPX
    ౰ॳ͸3FBDU/BUJWFͱಉ͡'BDFCPPL͕։ൃ͍ͯ͠Δ'MPXΛೖΕ͍ͯ
    ͕ͨɺ్தͰ5ZQF4DSJQUʹมߋ
    7JTVBM4UVEJP$PEFΛ࢖͍ͬͯΔΤϯδχΞ͕͍ͨͷ΋ཧ༝ͷҰͭ
    ʢ5ZQF4DSJQUͱಉ͡.JDSPTPGU͕։ൃ͍ͯ͠Δʣ
    

    View Slide

36. ΞδΣϯμ
    ϓϥοτϑΥʔϜબఆ
    3FBDU/BUJWFΞϓϦઃܭ
    ӡ༻ઃܭ
    

    View Slide

37. ӡ༻ઃܭνΣοΫϙΠϯτ
    w ৘ใΩϟονΞοϓ
    w ΞοϓάϨʔυӡ༻
    w ϦϦʔεӡ༻ʢJ04"OESPJEରԠʣ
    w ΫϥογϡϨϙʔτ
    w ΞϓϦαΠζ
    w ηΩϡϦςΟରࡦ
    w ϚʔέςΟϯάӡ༻
    

    View Slide

38. ӡ༻ઃܭνΣοΫϙΠϯτ
    w ৘ใΩϟονΞοϓ
    w ΞοϓάϨʔυӡ༻
    w ϦϦʔεӡ༻ʢJ04"OESPJEରԠʣ
    w ΫϥογϡϨϙʔτ
    w ΞϓϦαΠζ
    w ηΩϡϦςΟରࡦ
    w ϚʔέςΟϯάӡ༻
    άϨʔͷ߲໨͸ޙड़ͷ2JJUBهࣄͰղઆ͍ͯ͠·͢
    

    View Slide

39. ৘ใΩϟονΞοϓ
    ӡ༻ઃܭνΣοΫϙΠϯτ
    ϕετϓϥΫςΟε౓⭐⭐⭐
    มߋίετத
    લఏ·ͩ3FBDU/BUJWF͸WɻWະຬͰɺ·ͩਐԽதɻ
    ৘ใΩϟονΞοϓ
    

    Ξοϓσʔτɾ%FQSFDBUFEͷΩϟονΞοϓ
    

    ϕετϓϥΫςΟε୳͠
    

    पΓʹฉ͚Δਓ͕͍Δ͔͸ॏཁ
    Ϟνϕʔγϣϯߴ͘औΓ૊Ή࢓૊Έ
    

    ΩονϋΠΫͰ͸ษڧձ͔Βͷهࣄެ։͕ϫʔΫ͍ͯ͠Δ
    

    ݄ץ3/'FBUVSFT࿈ࡌத
    IUUQTUFDILJUDIIJLFDPNBSDIJWFDBUFHPSZ3FBDU/BUJWF
    

    View Slide

40. ϦϦʔεӡ༻
    ӡ༻ઃܭνΣοΫϙΠϯτ
    ϕετϓϥΫςΟε౓⭐⭐ˑ
    มߋίετ
    J04
    4JHOJOXJUI"QQMF
    

    -BVODI4UPSZCPBSE
    

    μʔΫϞʔυ
    

    6*8FC7JFXഇࢭ
    J04
    *%'"ڐՄऔಘରԠ
    

    9DPEFରԠ
    "OESPJE
    CJUରԠ WYͰαϙʔτ
    
    

    "OESPJE9΁ͷҠߦʢWYͰαϙʔτʣ
    

    (PPHMF1MBZͷର৅"1*Ϩϕϧཁ݅΁ͷରԠ
    ʢUBSHFU4EL7FSTJPOʣ
    ֤ϓϥοτϑΥʔϜϕϯμʔඞਢରԠ
    

    View Slide

41. ͜ͷεϥΠυ͸3FBDU/BUJWF"EWFOU$BMFOEBSͰ
    ॻ͍ͨهࣄΛݩʹ࡞੒͠·ͨ͠ɻ
    هࣄ΋͋ΘͤͯಡΉͱΘ͔Γ΍͍͔͢ͱࢥ͍·͢ɻ
    IUUQTRJJUBDPNTIPLFOJUFNTEGEEBDFF IUUQTRJJUBDPNTIPLFOJUFNTCCBCCBGDG
    

    View Slide

42. ͍͞͝ʹ
    w ։ൃϓϥοτϑΥʔϜͷઃܭࢥ૝͔Βड͚ΔԸܙ
    w Ϟνϕʔγϣϯߴ͘ΩϟονΞοϓ͕Ͱ͖Δ
    

    ϓϥοτϑΥʔϜ͕͓͢͢Ί
    w ະདྷ͸͔ͭ͠બ΂ͳ͍͕ɺաڈͷબ୒Λϕετ
    ʹ͢Δ͜ͱ͸͜Ε͔Β΋Մೳ
    

    View Slide

43. ͝੩ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠
    ݄ץ3/'FBUVSFTͰ3FBDU/BUJWF
    

    ࠷৽৘ใΛ࿈ࡌத
    

    IUUQTUFDILJUDIIJLFDPN
    

    View Slide