Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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アプリ設計
- 運用設計

9a110460454f56172d4647937fe67f59?s=128

Shoken Fujisaki

January 21, 2021
Tweet

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ΛऔΓೖΕ ͨཧ༝ͷҰͭͰ͢ɻ 3VCZ3BJMTͱ͸ผͷઃܭࢥ૝ʹ৮ΕΔ͜ͱʹΑΓɺ։ൃνʔϜʹԞߦ ͖Λ͔࣋ͨͤͨͬͨͱ͍͏ࢥ͍͕͋Γ·͢ɻ 3FBDUͷࢥ૝Ͱ͋Δ-FBSO0ODF 8SJUF"OZXIFSF͸ΩονϋΠΫνʔ ϜͰ͸্ख͘ϫʔΫ͍ͯ͠Δͱࢥ͍·͢ɻ

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

    3FBDU/BUJWFGPSNBD04 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͔ΒOQYSFBDUOBUJWF͕ਪ঑ʹͳ͍ͬͯΔ IUUQTSFBDUOBUJWFEFWEPDTFOWJSPONFOUTFUVQ

  24. 3FBDU/BUJWFબఆޙʹ΍ͬͨ͜ͱ ϓϥοτϑΥʔϜબఆ 044ͷιʔείʔυΛಡΉ 
 IUUQTHJUIVCDPN3FBDU/BUJWF/FXT3FBDU/BUJWF"QQT *O f i OJUF3FE͕ӡӦ͍ͯ͠Δ 


    3FBDU/BUJWF"QQTϦϙδτϦ 
 
 ެࣜυΩϡϝϯτͰ΋঺հ͞Ε͍ͯΔ
  25. 3FBDU/BUJWFબఆޙʹ΍ͬͨ͜ͱ ϓϥοτϑΥʔϜબఆ ࠷৽৘ใͷΩϟονΞοϓ w 3FBDU3FBDU/BUJWFެࣜϒϩά w 3FBDU/BUJWFΞϓϦΛ։ൃ͍ͯ͠ΔձࣾͷςοΫϒϩά 
 8JY 4IPQJGZ

    ,IBO"DBEFNZଞ w 3FBDU/BUJWF3FMFBTFTϦϙδτϦ 
 ࣍ͷϦϦʔεʹ͍ͭͯσΟεΧογϣϯ͕͞Ε͍ͯΔ 
 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͕ओྲྀ 
 TDSFFOTDPNQPOFOUT 
 ίϯϙʔωϯτ໊KT 
 ίϯϙʔωϯτϑΝΠϧ 
 ಺ʹهड़
  33. σ ΟϨΫτϦߏ੒ ΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε౓⭐⭐ˑ มߋίετத IUUQTHJUIVCDPNSFBDUOBUJWFKQQSBJTFS έʔεQSBJTFS

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

  35. ܕνΣοΧʔ ΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε౓⭐⭐⭐ มߋίετத 5ZQF4DSJQUPS'MPX ౰ॳ͸3FBDU/BUJWFͱಉ͡'BDFCPPL͕։ൃ͍ͯ͠Δ'MPXΛೖΕ͍ͯ ͕ͨɺ్தͰ5ZQF4DSJQUʹมߋ 7JTVBM4UVEJP$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 4JHOJOXJUI"QQMF 
 -BVODI4UPSZCPBSE 
 μʔΫϞʔυ

    
 6*8FC7JFXഇࢭ J04 *%'"ڐՄऔಘରԠ 
 9DPEFରԠ "OESPJE CJUରԠ WYͰαϙʔτ 
 "OESPJE9΁ͷҠߦʢWYͰαϙʔτʣ 
 (PPHMF1MBZͷର৅"1*Ϩϕϧཁ݅΁ͷରԠ ʢUBSHFU4EL7FSTJPOʣ ֤ϓϥοτϑΥʔϜϕϯμʔඞਢରԠ
  41. ͜ͷεϥΠυ͸3FBDU/BUJWF"EWFOU$BMFOEBSͰ ॻ͍ͨهࣄΛݩʹ࡞੒͠·ͨ͠ɻ هࣄ΋͋ΘͤͯಡΉͱΘ͔Γ΍͍͔͢ͱࢥ͍·͢ɻ IUUQTRJJUBDPNTIPLFOJUFNTEGEEBDFF IUUQTRJJUBDPNTIPLFOJUFNTCCBCCBGDG

  42. ͍͞͝ʹ w ։ൃϓϥοτϑΥʔϜͷઃܭࢥ૝͔Βड͚ΔԸܙ w Ϟνϕʔγϣϯߴ͘ΩϟονΞοϓ͕Ͱ͖Δ 
 ϓϥοτϑΥʔϜ͕͓͢͢Ί w ະདྷ͸͔ͭ͠બ΂ͳ͍͕ɺաڈͷબ୒Λϕετ ʹ͢Δ͜ͱ͸͜Ε͔Β΋Մೳ

  43. ͝੩ௌ ͋Γ͕ͱ͏͍͟͝·ͨ͠ ݄ץ3/'FBUVSFTͰ3FBDU/BUJWF 
 ࠷৽৘ใΛ࿈ࡌத 
 IUUQTUFDILJUDIIJLFDPN