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
2. 3FBDU
   /BUJWFΞϓϦʹ͓͚ΔΩονϋΠΫͷબ୒Λ 
 ϕετϓϥΫςΟε౓ɾมߋίετͷͭͷ͔࣠Β঺հ͠·͢  ϓϥοτϑΥʔϜબఆ
    3FBDU
   /BUJWFΞϓϦઃܭ
    ӡ༻ઃܭ ΞδΣϯμ
3. 
   
   
   
   
   
   
   
   ࣗݾ঺հ w 4IPLFO
   'VKJTBLJ
   
   !TIPLFOY
   
   
   w גࣜձࣾΩονϋΠΫ 
 ڞಉ૑ۀऀ
   $50
   w ΩονϋΠΫΤϯδχΞνʔϜͰ 
 ݄ץ
   3/
   'FBUVSFT
   ࿈ࡌத 
 IUUQTUFDILJUDIIJLFDPN
4. ΩονϋΠΫ͸ 
 3FBDU
   /BUJWFͰ։ൃ೥໨ w ೥Նʹ͔Β3FBDU
   /BUJWFͰ։ൃ
   w ճҎ্ͷϦϦʔε
   w ճͷ3FBDU
   /BUJWFΞοϓάϨʔυ
5. ࣗ୐ʹ஍Ҭͷ৯ࡐ͕ಧ͘
   ΦϯϥΠϯΠϕϯτΛల։த
6. ࣾձ͸ɺࢲ͕ͨͪ৯΂ͨ΋ͷͰͰ͖͍ͯΔ
7. ϓϥοτϑΥʔϜ΋ 
 ࢲ͕ͨͪબ୒ͨ͠ߦಈ͔ΒͰ͖͍ͯΔ
8. 3FBDU
   /BUJWFΞϓϦʹ͓͚ΔΩονϋΠΫͷબ୒Λ 
 ͭͷ͔࣠Β঺հ͠·͢ 
   ϕετϓϥΫςΟε౓
   
   
   ϕετϓϥΫςΟε͕ݻ·Γͭͭ͋Δͷ͔ɺ·ͩෳ਺खஈ͕ݕ౼͞Ε͍ͯΔͷ͔
   
   มߋίετ
   
   
   ޙ͔Βมߋ͢Δ࣌ʹ͔͔Δίετ
9. ΞδΣϯμ  ϓϥοτϑΥʔϜબఆ
    3FBDU
   /BUJWFΞϓϦઃܭ
    ӡ༻ઃܭ
10. ΞδΣϯμ  ϓϥοτϑΥʔϜબఆ
     3FBDU
    /BUJWFΞϓϦઃܭ
     ӡ༻ઃܭ
11. ϓϥοτϑΥʔϜબఆ
    3FBDU
    /BUJWF ϕετϓϥΫςΟε౓
    ⭐ˑˑ
    มߋίετ
    ࠷ߴ
12. ͳͥ3FBDU
    /BUJWF͔ 
    νʔϜମ੍
    
    ΞϓϦ͸7JFX։ൃ͕ϝΠϯ
    
    ωΠςΟϒػೳ΁ͷڧ͍ґଘ͕ͳ͍
    
    ઃܭࢥ૝ɾ։ൃίϛϡχςΟ
    
    3FBDUΤίγεςϜ ϓϥοτϑΥʔϜબఆ
13. ͳͥ3FBDU
    /BUJWF͔ ͦͷ
    
    νʔϜମ੍
    3FBDUΛಋೖࡁΈͷ8FCΤϯδχΞͷνʔϜ
    ྑ͍λΠϛϯάͰ֎෦ͷγχΞωΠςΟϒΤϯδχΞ ͕ࢀը
    ωΠςΟϒͷ஌ࣝ͸ඞཁͩͱײͨ͡
    ϓϥοτϑΥʔϜબఆ
14. ͳͥ3FBDU
    /BUJWF͔ ͦͷ
    
    ΞϓϦ͸7JFX։ൃ͕ϝΠϯ
    8FC൛͸ϦϦʔεޙ೥Ҏ্͍ͨͬͯͨ
    ϏδωεϩδοΫ͸αʔόʔαΠυʹ͋Δ
    ΞϓϦ͸ബ͍7JFXͱ͍͏ઃܭํ਑ ϓϥοτϑΥʔϜબఆ
15. ͳͥ3FBDU
    /BUJWF͔ ͦͷ
    
    ωΠςΟϒػೳ΁ͷڧ͍ґଘ͕ͳ͍
    ωΠςΟϒػೳʢϚϧνΧϝϥ΍δϟΠϩηϯαʔͳ Ͳʣ΁ͷཁ͕݅ͳ͔ͬͨ ϓϥοτϑΥʔϜબఆ
16. ͳͥ3FBDU
    /BUJWF͔ ͦͷ
    
    ઃܭࢥ૝ɾ։ൃίϛϡχςΟ
    3FBDU͸ɺؔ਺ܕϓϩάϥϛϯάͷࢥ૝ɺಛʹJNNVUBCJMJUZΛେࣄʹͯ͠ ͍ΔϑϨʔϜϫʔΫͩͱײ͡·͢ɻ͜ͷ఺΋ɺ3FBDU
    /BUJWFΛऔΓೖΕ ͨཧ༝ͷҰͭͰ͢ɻ
    3VCZ
    
    3BJMTͱ͸ผͷઃܭࢥ૝ʹ৮ΕΔ͜ͱʹΑΓɺ։ൃνʔϜʹԞߦ ͖Λ͔࣋ͨͤͨͬͨͱ͍͏ࢥ͍͕͋Γ·͢ɻ
    3FBDUͷࢥ૝Ͱ͋Δ
    -FBSO
    0ODF
    8SJUF
    "OZXIFSF
    ͸ΩονϋΠΫνʔ ϜͰ͸্ख͘ϫʔΫ͍ͯ͠Δͱࢥ͍·͢ɻ ϓϥοτϑΥʔϜબఆ
17. ͳͥ3FBDU
    /BUJWF͔ ͦͷ
    
    3FBDUΤίγεςϜ
    ϓϥοτϑΥʔϜબఆ MFBSO
    PODF
    XSJUF
    BOZXIFSF
    3FBDUίϯϙʔωϯτԽ͢Ε͹ɺଟ͘ͷϓϥοτϑΥʔϜͰಈ͘ 
 ϥΠϒϥϦΛ࡞ΕΔ 3FBDU
    /BUJWF 3FBDU
    /BUJWF
    GPS
    8JOEPXT 3FBDU
    /BUJWF
    GPS
    NBD04 3FBDU
18. ͳͥ3FBDU
    /BUJWF͔ ϓϥοτϑΥʔϜબఆ '"2
    2
    &YQP͸ݕ౼͠ͳ͔ͬͨʁ
19. ͳͥ3FBDU
    /BUJWF͔ '"2
    2
    &YQP͸ݕ౼͠ͳ͔ͬͨʁ ϓϥοτϑΥʔϜબఆ "
    ౰࣌͸੍ݶ͕ڧ͍ҹ৅ͩͬͨɻ௕ظӡ ༻Λݟӽ͍ͯͨ͠ͷͰ࠷ॳ͔Β7BOJMMB
    3FBDU
    /BUJWFΛ࠾༻ͨ͠ɻ
20. ͳͥ3FBDU
    /BUJWF͔ ϓϥοτϑΥʔϜબఆ '"2
    2
    'MVUUFS΍ͦͷଞ͸ݕ౼͠ͳ͔ͬͨʁ
21. ͳͥ3FBDU
    /BUJWF͔ '"2
    2
    'MVUUFS΍ͦͷଞ͸ݕ౼͠ͳ͔ͬͨʁ ϓϥοτϑΥʔϜબఆ "
    8FCͰ3FBDUΛಋೖ͍ͯͯ͠ɺઃܭࢥ ૝͕޷ҹ৅ͩͬͨͷ͕Ұ൪ͷཧ༝Ͱ 3FBDU
    /BUJWFʹɻ
22. 3FBDU
    /BUJWFબఆޙʹ΍ͬͨ͜ͱ ϓϥοτϑΥʔϜબఆ 
    ެࣜυΩϡϝϯτಡΉ
    
    
    044ͷιʔείʔυΛಡΉ
    
    
    ࠷৽৘ใΛΩϟονΞοϓ
    
    ɾɾΛఆظతʹࣾ಺ษڧձͰڞ༗ͯ͠ɺ 
 ϒϩάهࣄͱͯ͠ެ։
23. 3FBDU
    /BUJWFબఆޙʹ΍ͬͨ͜ͱ ϓϥοτϑΥʔϜબఆ 
    ެࣜυΩϡϝϯτಡΉ
    
 IUUQTSFBDUOBUJWFEFWEPDTHFUUJOHTUBSUFE
    ఆظతʹಡΈฦ͢͜ͱ΋େ੾ 
 ྫ͑͹ɺ࠷ۙͰ͸
    SFBDUOBUJWFDMJ
    ͔Β
    OQY
    SFBDU
    OBUJWF
    ͕ਪ঑ʹͳ͍ͬͯΔ IUUQTSFBDUOBUJWFEFWEPDTFOWJSPONFOUTFUVQ
24. 3FBDU
    /BUJWFબఆޙʹ΍ͬͨ͜ͱ ϓϥοτϑΥʔϜબఆ 
    044ͷιʔείʔυΛಡΉ 
 IUUQTHJUIVCDPN3FBDU/BUJWF/FXT3FBDU/BUJWF"QQT
    *O f i OJUF
    3FE͕ӡӦ͍ͯ͠Δ 
 3FBDU
    /BUJWF
    "QQTϦϙδτϦ 
 
 ެࣜυΩϡϝϯτͰ΋঺հ͞Ε͍ͯΔ
25. 3FBDU
    /BUJWFબఆޙʹ΍ͬͨ͜ͱ ϓϥοτϑΥʔϜબఆ 
    ࠷৽৘ใͷΩϟονΞοϓ
    w 3FBDU
    
    3FBDU
    /BUJWF
    ެࣜϒϩά
    w 3FBDU
    /BUJWFΞϓϦΛ։ൃ͍ͯ͠ΔձࣾͷςοΫϒϩά 

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

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

    
    IUUQTHJUIVCDPNSFBDUOBUJWFDPNNVOJUZSFMFBTFT
    w 5XJUUFS
    .FEJVN
    EFWUP
    ษڧձεϥΠυͳͲ
26. 3FBDU
    /BUJWFબఆޙʹ΍ͬͨ͜ͱ ϓϥοτϑΥʔϜબఆ 
    
    ࣾ಺ษڧձͰڞ༗ͯ͠ɺςοΫϒϩάهࣄͱͯ͠ެ։ 
 3/
    'FBUVSFT 
 IUUQTUFDILJUDIIJLFDPNBSDIJWFDBUFHPSZ3FBDU/BUJWF
27. ΞδΣϯμ  ϓϥοτϑΥʔϜબఆ
     3FBDU
    /BUJWFΞϓϦઃܭ
     ӡ༻ઃܭ
28. ΞϓϦઃܭνΣοΫϙΠϯτ w 6*ίϯϙʔωϯτ
    w "1*ΫϥΠΞϯτ
    w εςʔτ؅ཧ
    w φϏήʔγϣϯϥΠϒϥϦ
    w ΞϓϦετϨʔδ
    
    %#
    w ίϯϙʔωϯτઃܭ
    
    Χλϩά
    w σΟϨΫτϦߏ੒
    w ܕνΣοΧʔ
    w ςετܭըʢ$*$%ؚΉʣ
29. ΞϓϦઃܭνΣοΫϙΠϯτ w 6*ίϯϙʔωϯτ
    w "1*ΫϥΠΞϯτ
    w εςʔτ؅ཧ
    w φϏήʔγϣϯϥΠϒϥϦ
    w ΞϓϦετϨʔδ
    
    %#
    w ίϯϙʔωϯτઃܭ
    
    Χλϩά
    w σΟϨΫτϦߏ੒
    w ܕνΣοΧʔ
    w ςετܭըʢ$*$%ؚΉʣ άϨʔͷ߲໨͸ޙड़ͷ2JJUBهࣄͰղઆ͍ͯ͠·͢
30. εςʔτ؅ཧ Ҏલ͸બ୒ࢶ͕ଟ͘೰·͔ͬͨ͠ 

    
    3FEVY
    .PC9
    6OTUBUFE
    ೥ͩͱҎԼͷ͕ͭ༗ྗͳީิ 
 
    '$
    
    )PPLT
    
    
    $POUFYU
    "1*
    
 
    3FDPJM
    ΩονϋΠΫͰ͸ͷ'$
    
    )PPLTΛ࠾༻ ΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε౓
    ⭐⭐ˑ
    มߋίετ
    ߴ
31. σ ΟϨΫτϦߏ੒ ΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε౓
    ⭐⭐ˑ
    มߋίετ
    த ઃܭϙΠϯτ 
 
    τοϓσΟϨΫτϦ໊ 
 
    ίϯϙʔωϯτσ ΟϨΫτϦ໊ 
 
    ϑΝΠϧ໊ 
 
    ελΠϧϑΝΠϧͷஔ͖৔
32. σ ΟϨΫτϦߏ੒ ΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε౓
    ⭐⭐ˑ
    มߋίετ
    த ࠷ۙͷ܏޲ 
 
    τοϓσΟϨΫτϦ໊ 
 
    ίϯϙʔωϯτσ ΟϨΫτϦ໊ 
 
    ϑΝΠϧ໊ 
 
    ελΠϧϑΝΠϧͷஔ͖৔ 
    TSD͕ओྲྀ 
 
    TDSFFOT
    
    DPNQPOFOUT 
 
    ίϯϙʔωϯτ໊KT 
 
    ίϯϙʔωϯτϑΝΠϧ 
 ಺ʹهड़
33. σ ΟϨΫτϦߏ੒ ΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε౓
    ⭐⭐ˑ
    มߋίετ
    த IUUQTHJUIVCDPNSFBDUOBUJWFKQQSBJTFS έʔε
    
    QSBJTFS
34. σ ΟϨΫτϦߏ੒ ΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε౓
    ⭐⭐ˑ
    มߋίετ
    த έʔε
    
    QYWJFX IUUQTHJUIVCDPNBMQIBTQQYWJFX
35. ܕνΣοΧʔ ΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε౓
    ⭐⭐⭐
    มߋίετ
    த 5ZQF4DSJQU
    PS
    'MPX
    ౰ॳ͸3FBDU
    /BUJWFͱಉ͡'BDFCPPL͕։ൃ͍ͯ͠Δ'MPXΛೖΕ͍ͯ ͕ͨɺ్தͰ5ZQF4DSJQUʹมߋ
    7JTVBM
    4UVEJP
    $PEFΛ࢖͍ͬͯΔΤϯδχΞ͕͍ͨͷ΋ཧ༝ͷҰͭ ʢ5ZQF4DSJQUͱಉ͡.JDSPTPGU͕։ൃ͍ͯ͠Δʣ
36. ΞδΣϯμ  ϓϥοτϑΥʔϜબఆ
     3FBDU
    /BUJWFΞϓϦઃܭ
     ӡ༻ઃܭ
37. ӡ༻ઃܭνΣοΫϙΠϯτ w ৘ใΩϟονΞοϓ
    w ΞοϓάϨʔυӡ༻
    w ϦϦʔεӡ༻ʢJ04
    
    "OESPJEରԠʣ
    w ΫϥογϡϨϙʔτ
    w ΞϓϦαΠζ
    w ηΩϡϦςΟରࡦ
    w ϚʔέςΟϯάӡ༻
38. ӡ༻ઃܭνΣοΫϙΠϯτ w ৘ใΩϟονΞοϓ
    w ΞοϓάϨʔυӡ༻
    w ϦϦʔεӡ༻ʢJ04
    
    "OESPJEରԠʣ
    w ΫϥογϡϨϙʔτ
    w ΞϓϦαΠζ
    w ηΩϡϦςΟରࡦ
    w ϚʔέςΟϯάӡ༻ άϨʔͷ߲໨͸ޙड़ͷ2JJUBهࣄͰղઆ͍ͯ͠·͢
39. ৘ใΩϟονΞοϓ ӡ༻ઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε౓
    ⭐⭐⭐
    มߋίετ
    த લఏ
    
    ·ͩ3FBDU
    /BUJWF͸Wɻ
    WະຬͰɺ·ͩਐԽதɻ
    ৘ใΩϟονΞοϓ 

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

    
    
    ϕετϓϥΫςΟε୳͠ 

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

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

    
    
    ݄ץ3/
    'FBUVSFT࿈ࡌத
    IUUQTUFDILJUDIIJLFDPNBSDIJWFDBUFHPSZ3FBDU/BUJWF
40. ϦϦʔεӡ༻ ӡ༻ઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε౓
    ⭐⭐ˑ
    มߋίετ
     J04
    
    
    4JHO
    JO
    XJUI
    "QQMF 
 
    -BVODI
    4UPSZCPBSE 
 
    μʔΫϞʔυ 
 
    6*8FC7JFXഇࢭ
    J04
    
    
    *%'"ڐՄऔಘରԠ 
 
    9DPEF
    ରԠ "OESPJE
    
    CJUରԠ
    WY
    Ͱαϙʔτ 
 
    "OESPJE9
    ΁ͷҠߦʢWY
    Ͱαϙʔτʣ 
 
    (PPHMF
    1MBZͷର৅"1*Ϩϕϧཁ݅΁ͷରԠ ʢUBSHFU4EL7FSTJPOʣ ֤ϓϥοτϑΥʔϜϕϯμʔඞਢରԠ
41. ͜ͷεϥΠυ͸3FBDU
    /BUJWF
    "EWFOU
    $BMFOEBSͰ
    ॻ͍ͨهࣄΛݩʹ࡞੒͠·ͨ͠ɻ
    هࣄ΋͋ΘͤͯಡΉͱΘ͔Γ΍͍͔͢ͱࢥ͍·͢ɻ IUUQTRJJUBDPNTIPLFOJUFNTEGEEBDFF IUUQTRJJUBDPNTIPLFOJUFNTCCBCCBGDG
42. ͍͞͝ʹ w ։ൃϓϥοτϑΥʔϜͷઃܭࢥ૝͔Βड͚ΔԸܙ
    w Ϟνϕʔγϣϯߴ͘ΩϟονΞοϓ͕Ͱ͖Δ 
 ϓϥοτϑΥʔϜ͕͓͢͢Ί
    w ະདྷ͸͔ͭ͠બ΂ͳ͍͕ɺաڈͷબ୒Λϕετ ʹ͢Δ͜ͱ͸͜Ε͔Β΋Մೳ
43. ͝੩ௌ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ ݄ץ
    3/
    'FBUVSFTͰ3FBDU
    /BUJWF 
 ࠷৽৘ใΛ࿈ࡌத 
 IUUQTUFDILJUDIIJLFDPN