TECH STAND #3 クロスプラットフォーム開発 Flutter x React Native ( https://standfm.connpass.com/event/199782/ ) の登壇資料です。
React Nativeアプリにおけるキッチハイクの選択を ベストプラクティス度・変更コストの2つの軸から紹介します。
アジェンダ - プラットフォーム選定 - React Nativeアプリ設計 - 運用設計
5&$)45"/% ,JUDI)JLFࣜ 3FBDU/BUJWFઃܭνΣοΫϙΠϯτ4IPLFO'VKJTBLJ
View Slide
3FBDU/BUJWFΞϓϦʹ͓͚ΔΩονϋΠΫͷબΛ ϕετϓϥΫςΟεɾมߋίετͷͭͷ͔࣠Βհ͠·͢ ϓϥοτϑΥʔϜબఆ 3FBDU/BUJWFΞϓϦઃܭ ӡ༻ઃܭΞδΣϯμ
ࣗݾհw 4IPLFO'VKJTBLJ !TIPLFOYw גࣜձࣾΩονϋΠΫ ڞಉۀऀ$50w ΩονϋΠΫΤϯδχΞνʔϜͰ ݄ץ3/'FBUVSFT࿈ࡌத IUUQTUFDILJUDIIJLFDPN
ΩονϋΠΫ 3FBDU/BUJWFͰ։ൃw Նʹ͔Β3FBDU/BUJWFͰ։ൃw ճҎ্ͷϦϦʔεw ճͷ3FBDU/BUJWFΞοϓάϨʔυ
ࣗʹҬͷ৯ࡐ͕ಧ͘ΦϯϥΠϯΠϕϯτΛల։த
ࣾձɺࢲ͕ͨͪ৯ͨͷͰͰ͖͍ͯΔ
ϓϥοτϑΥʔϜ ࢲ͕ͨͪબͨ͠ߦಈ͔ΒͰ͖͍ͯΔ
3FBDU/BUJWFΞϓϦʹ͓͚ΔΩονϋΠΫͷબΛ ͭͷ͔࣠Βհ͠·͢ϕετϓϥΫςΟεϕετϓϥΫςΟε͕ݻ·Γͭͭ͋Δͷ͔ɺ·ͩෳखஈ͕ݕ౼͞Ε͍ͯΔͷ͔มߋίετޙ͔Βมߋ͢Δ࣌ʹ͔͔Δίετ
ΞδΣϯμ ϓϥοτϑΥʔϜબఆ 3FBDU/BUJWFΞϓϦઃܭ ӡ༻ઃܭ
ϓϥοτϑΥʔϜબఆ3FBDU/BUJWFϕετϓϥΫςΟε⭐ˑˑมߋίετ࠷ߴ
ͳͥ3FBDU/BUJWF͔νʔϜମ੍ΞϓϦ7JFX։ൃ͕ϝΠϯωΠςΟϒػೳͷڧ͍ґଘ͕ͳ͍ઃܭࢥɾ։ൃίϛϡχςΟ3FBDUΤίγεςϜϓϥοτϑΥʔϜબఆ
ͳͥ3FBDU/BUJWF͔ͦͷνʔϜମ੍3FBDUΛಋೖࡁΈͷ8FCΤϯδχΞͷνʔϜྑ͍λΠϛϯάͰ֎෦ͷγχΞωΠςΟϒΤϯδχΞ͕ࢀըωΠςΟϒͷࣝඞཁͩͱײͨ͡ϓϥοτϑΥʔϜબఆ
ͳͥ3FBDU/BUJWF͔ͦͷΞϓϦ7JFX։ൃ͕ϝΠϯ8FC൛ϦϦʔεޙҎ্͍ͨͬͯͨϏδωεϩδοΫαʔόʔαΠυʹ͋ΔΞϓϦബ͍7JFXͱ͍͏ઃܭํϓϥοτϑΥʔϜબఆ
ͳͥ3FBDU/BUJWF͔ͦͷωΠςΟϒػೳͷڧ͍ґଘ͕ͳ͍ωΠςΟϒػೳʢϚϧνΧϝϥδϟΠϩηϯαʔͳͲʣͷཁ͕݅ͳ͔ͬͨϓϥοτϑΥʔϜબఆ
ͳͥ3FBDU/BUJWF͔ͦͷઃܭࢥɾ։ൃίϛϡχςΟ3FBDUɺؔܕϓϩάϥϛϯάͷࢥɺಛʹJNNVUBCJMJUZΛେࣄʹ͍ͯ͠ΔϑϨʔϜϫʔΫͩͱײ͡·͢ɻ͜ͷɺ3FBDU/BUJWFΛऔΓೖΕͨཧ༝ͷҰͭͰ͢ɻ3VCZ3BJMTͱผͷઃܭࢥʹ৮ΕΔ͜ͱʹΑΓɺ։ൃνʔϜʹԞߦ͖Λ͔࣋ͨͤͨͬͨͱ͍͏ࢥ͍͕͋Γ·͢ɻ3FBDUͷࢥͰ͋Δ-FBSO0ODF 8SJUF"OZXIFSFΩονϋΠΫνʔϜͰ্ख͘ϫʔΫ͍ͯ͠Δͱࢥ͍·͢ɻϓϥοτϑΥʔϜબఆ
ͳͥ3FBDU/BUJWF͔ͦͷ3FBDUΤίγεςϜϓϥοτϑΥʔϜબఆMFBSOPODF XSJUFBOZXIFSF3FBDUίϯϙʔωϯτԽ͢Εɺଟ͘ͷϓϥοτϑΥʔϜͰಈ͘ ϥΠϒϥϦΛ࡞ΕΔ3FBDU/BUJWF3FBDU/BUJWFGPS8JOEPXT 3FBDU/BUJWFGPSNBD043FBDU
ͳͥ3FBDU/BUJWF͔ϓϥοτϑΥʔϜબఆ'"22&YQPݕ౼͠ͳ͔ͬͨʁ
ͳͥ3FBDU/BUJWF͔'"22&YQPݕ౼͠ͳ͔ͬͨʁϓϥοτϑΥʔϜબఆ"੍࣌ݶ͕ڧ͍ҹͩͬͨɻظӡ༻Λݟӽ͍ͯͨ͠ͷͰ࠷ॳ͔Β7BOJMMB3FBDU/BUJWFΛ࠾༻ͨ͠ɻ
ͳͥ3FBDU/BUJWF͔ϓϥοτϑΥʔϜબఆ'"22'MVUUFSͦͷଞݕ౼͠ͳ͔ͬͨʁ
ͳͥ3FBDU/BUJWF͔'"22'MVUUFSͦͷଞݕ౼͠ͳ͔ͬͨʁϓϥοτϑΥʔϜબఆ"8FCͰ3FBDUΛಋೖ͍ͯͯ͠ɺઃܭࢥ͕ҹͩͬͨͷ͕Ұ൪ͷཧ༝Ͱ3FBDU/BUJWFʹɻ
3FBDU/BUJWFબఆޙʹͬͨ͜ͱϓϥοτϑΥʔϜબఆެࣜυΩϡϝϯτಡΉ044ͷιʔείʔυΛಡΉ࠷৽ใΛΩϟονΞοϓɾɾΛఆظతʹࣾษڧձͰڞ༗ͯ͠ɺ ϒϩάهࣄͱͯ͠ެ։
3FBDU/BUJWFબఆޙʹͬͨ͜ͱϓϥοτϑΥʔϜબఆެࣜυΩϡϝϯτಡΉ IUUQTSFBDUOBUJWFEFWEPDTHFUUJOHTUBSUFEఆظతʹಡΈฦ͢͜ͱେ ྫ͑ɺ࠷ۙͰSFBDUOBUJWFDMJ͔ΒOQYSFBDUOBUJWF͕ਪʹͳ͍ͬͯΔIUUQTSFBDUOBUJWFEFWEPDTFOWJSPONFOUTFUVQ
3FBDU/BUJWFબఆޙʹͬͨ͜ͱϓϥοτϑΥʔϜબఆ044ͷιʔείʔυΛಡΉ IUUQTHJUIVCDPN3FBDU/BUJWF/FXT3FBDU/BUJWF"QQT*OfiOJUF3FE͕ӡӦ͍ͯ͠Δ 3FBDU/BUJWF"QQTϦϙδτϦ ެࣜυΩϡϝϯτͰհ͞Ε͍ͯΔ
3FBDU/BUJWFબఆޙʹͬͨ͜ͱϓϥοτϑΥʔϜબఆ࠷৽ใͷΩϟονΞοϓw 3FBDU3FBDU/BUJWFެࣜϒϩάw 3FBDU/BUJWFΞϓϦΛ։ൃ͍ͯ͠ΔձࣾͷςοΫϒϩά 8JY 4IPQJGZ ,IBO"DBEFNZଞw 3FBDU/BUJWF3FMFBTFTϦϙδτϦ ࣍ͷϦϦʔεʹ͍ͭͯσΟεΧογϣϯ͕͞Ε͍ͯΔ IUUQTHJUIVCDPNSFBDUOBUJWFDPNNVOJUZSFMFBTFTw 5XJUUFS .FEJVN EFWUP ษڧձεϥΠυͳͲ
3FBDU/BUJWFબఆޙʹͬͨ͜ͱϓϥοτϑΥʔϜબఆࣾษڧձͰڞ༗ͯ͠ɺςοΫϒϩάهࣄͱͯ͠ެ։ 3/'FBUVSFT IUUQTUFDILJUDIIJLFDPNBSDIJWFDBUFHPSZ3FBDU/BUJWF
ΞϓϦઃܭνΣοΫϙΠϯτw 6*ίϯϙʔωϯτw "1*ΫϥΠΞϯτw εςʔτཧw φϏήʔγϣϯϥΠϒϥϦw ΞϓϦετϨʔδ%#w ίϯϙʔωϯτઃܭΧλϩάw σΟϨΫτϦߏw ܕνΣοΧʔw ςετܭըʢ$*$%ؚΉʣ
ΞϓϦઃܭνΣοΫϙΠϯτw 6*ίϯϙʔωϯτw "1*ΫϥΠΞϯτw εςʔτཧw φϏήʔγϣϯϥΠϒϥϦw ΞϓϦετϨʔδ%#w ίϯϙʔωϯτઃܭΧλϩάw σΟϨΫτϦߏw ܕνΣοΧʔw ςετܭըʢ$*$%ؚΉʣάϨʔͷ߲ޙड़ͷ2JJUBهࣄͰղઆ͍ͯ͠·͢
εςʔτཧҎલબࢶ͕ଟ͘·͔ͬͨ͠ 3FEVY .PC9 6OTUBUFEͩͱҎԼͷ͕ͭ༗ྗͳީิ '$)PPLT $POUFYU"1* 3FDPJMΩονϋΠΫͰͷ'$)PPLTΛ࠾༻ΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε⭐⭐ˑมߋίετߴ
σΟϨΫτϦߏΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε⭐⭐ˑมߋίετதઃܭϙΠϯτ τοϓσΟϨΫτϦ໊ ίϯϙʔωϯτσΟϨΫτϦ໊ ϑΝΠϧ໊ ελΠϧϑΝΠϧͷஔ͖
σΟϨΫτϦߏΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε⭐⭐ˑมߋίετத࠷ۙͷ τοϓσΟϨΫτϦ໊ ίϯϙʔωϯτσΟϨΫτϦ໊ ϑΝΠϧ໊ ελΠϧϑΝΠϧͷஔ͖TSD͕ओྲྀ TDSFFOTDPNQPOFOUT ίϯϙʔωϯτ໊KT ίϯϙʔωϯτϑΝΠϧ ʹهड़
σΟϨΫτϦߏΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε⭐⭐ˑมߋίετதIUUQTHJUIVCDPNSFBDUOBUJWFKQQSBJTFSέʔεQSBJTFS
σΟϨΫτϦߏΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε⭐⭐ˑมߋίετதέʔεQYWJFXIUUQTHJUIVCDPNBMQIBTQQYWJFX
ܕνΣοΧʔΞϓϦઃܭνΣοΫϙΠϯτ ϕετϓϥΫςΟε⭐⭐⭐มߋίετத5ZQF4DSJQUPS'MPXॳ3FBDU/BUJWFͱಉ͡'BDFCPPL͕։ൃ͍ͯ͠Δ'MPXΛೖΕ͍͕ͯͨɺ్தͰ5ZQF4DSJQUʹมߋ7JTVBM4UVEJP$PEFΛ͍ͬͯΔΤϯδχΞ͕͍ͨͷཧ༝ͷҰͭʢ5ZQF4DSJQUͱಉ͡.JDSPTPGU͕։ൃ͍ͯ͠Δʣ
ӡ༻ઃܭνΣοΫϙΠϯτw ใΩϟονΞοϓw ΞοϓάϨʔυӡ༻w ϦϦʔεӡ༻ʢJ04"OESPJEରԠʣw ΫϥογϡϨϙʔτw ΞϓϦαΠζw ηΩϡϦςΟରࡦw ϚʔέςΟϯάӡ༻
ӡ༻ઃܭνΣοΫϙΠϯτw ใΩϟονΞοϓw ΞοϓάϨʔυӡ༻w ϦϦʔεӡ༻ʢJ04"OESPJEରԠʣw ΫϥογϡϨϙʔτw ΞϓϦαΠζw ηΩϡϦςΟରࡦw ϚʔέςΟϯάӡ༻άϨʔͷ߲ޙड़ͷ2JJUBهࣄͰղઆ͍ͯ͠·͢
ใΩϟονΞοϓӡ༻ઃܭνΣοΫϙΠϯτϕετϓϥΫςΟε⭐⭐⭐มߋίετதલఏ·ͩ3FBDU/BUJWFWɻWະຬͰɺ·ͩਐԽதɻใΩϟονΞοϓ Ξοϓσʔτɾ%FQSFDBUFEͷΩϟονΞοϓ ϕετϓϥΫςΟε୳͠ पΓʹฉ͚Δਓ͕͍Δ͔ॏཁϞνϕʔγϣϯߴ͘औΓΉΈ ΩονϋΠΫͰษڧձ͔Βͷهࣄެ։͕ϫʔΫ͍ͯ͠Δ ݄ץ3/'FBUVSFT࿈ࡌதIUUQTUFDILJUDIIJLFDPNBSDIJWFDBUFHPSZ3FBDU/BUJWF
ϦϦʔεӡ༻ӡ༻ઃܭνΣοΫϙΠϯτϕετϓϥΫςΟε⭐⭐ˑมߋίετJ044JHOJOXJUI"QQMF -BVODI4UPSZCPBSE μʔΫϞʔυ 6*8FC7JFXഇࢭJ04*%'"ڐՄऔಘରԠ 9DPEFରԠ"OESPJECJUରԠ WYͰαϙʔτ "OESPJE9ͷҠߦʢWYͰαϙʔτʣ (PPHMF1MBZͷର"1*Ϩϕϧཁ݅ͷରԠʢUBSHFU4EL7FSTJPOʣ֤ϓϥοτϑΥʔϜϕϯμʔඞਢରԠ
͜ͷεϥΠυ3FBDU/BUJWF"EWFOU$BMFOEBSͰॻ͍ͨهࣄΛݩʹ࡞͠·ͨ͠ɻهࣄ͋ΘͤͯಡΉͱΘ͔Γ͍͔͢ͱࢥ͍·͢ɻIUUQTRJJUBDPNTIPLFOJUFNTEGEEBDFF IUUQTRJJUBDPNTIPLFOJUFNTCCBCCBGDG
͍͞͝ʹw ։ൃϓϥοτϑΥʔϜͷઃܭࢥ͔Βड͚ΔԸܙw Ϟνϕʔγϣϯߴ͘ΩϟονΞοϓ͕Ͱ͖Δ ϓϥοτϑΥʔϜ͕͓͢͢Ίw ະདྷ͔ͭ͠બͳ͍͕ɺաڈͷબΛϕετʹ͢Δ͜ͱ͜Ε͔ΒՄೳ
͝੩ௌ͋Γ͕ͱ͏͍͟͝·݄ͨ͠ץ3/'FBUVSFTͰ3FBDU/BUJWF ࠷৽ใΛ࿈ࡌத IUUQTUFDILJUDIIJLFDPN