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

Shoken Fujisaki

January 21, 2021
Tweet

More Decks by Shoken Fujisaki

Other Decks in Technology

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