地方IT企業の戦略を広げる 技術選択としてのReact Native / react native for local

MOBILE CREW NIIGATA 2019で喋りました https://www.mobilecrew.jp/

Transcript

1. ஍ํITاۀͷઓུΛ޿͛Δ ٕज़બ୒ͱͯ͠ͷ React Native Yukiya Nakagawa @ WaterCell Inc. 2019.10.11 MOBILE CREW NIIGATA 2019
2. ࣗݾ঺հ • த઒ ޾࠸ / Nkzn / ͳ͔͟Μ • ্ӽࢢग़਎ • ϞόΠϧΤϯδχΞ ʢReact Native, Android, PWAʣ • ೋࣇͷ෕Ͱ࠺ͷ෉
3. ຊ͕޷ධͰ͢ • ͨͬͨ1೔Ͱجຊ͕਎ʹ෇͘ʂ AndroidΞϓϦ։ൃ௒ೖ໳ • ٕज़ධ࿦ࣾ • 224ϖʔδ / 2,280ԁʴ੫ • https://gihyo.jp/book/ 2018/978-4-297-10004-9 ࠓճɺAndroidΤϯδχΞΒ͍͠࿩͸͚ͩ͜͜
4. • ΢Υʔλʔηϧגࣜձࣾ https://water-cell.jp • 2011೥૑ۀͷ৽ׁࢢͷϕϯνϟʔاۀ • ΄΅ઐۀͰ೶ۀؔ࿈ICTγεςϜΛ։ൃɾӡ༻ • ࣾһ਺3xਓͰ20ਓ͘Β͍͕ITΤϯδχΞ • ͏ͪϞόΠϧΤϯδχΞ͸5ਓ΄ͲʢAndroidͱPWAத৺ʣ
5. ೶৔ͷʮݟ͑ΔԽʯͰܦӦΛڧԽ͢Δ Ӧ೶ɾ࠿ഓࢧԉπʔϧ ੜ࢈૊৫਺  ૊৫Ҏ্˞ ˞ɹτϥΠΞϧظؒɺٴͼ࣮ূࣄۀͳͲͷར༻ऀ਺ΛؚΉ૯ར༻ऀ਺Ͱ͢ ˔
   ߤۭࣸਅϕʔεͷࢹ֮తͳะ৔؅ཧ ˔
   ϞόΠϧ͔Β೶࡞ۀه࿥ ˔
   Ϋϥ΢υγεςϜͰϦΞϧλΠϜʹ৘ใڞ༗ ˔
   ๛෋ͳσʔλ෼ੳɾग़ྗػೳ 19.7%
6. λʔήοτ • ஍ํͷITاۀͷਓ • ஍Ҭʹࠜࠩͨ͠ࣄۀΛߦ͏ITاۀͷਓ • ݶΒΕͨ৚݅ͷதͰਫ਼Ұഋ੒ՌΛग़ͦ͏ͱ ໛ࡧ͢Δਓ
7. ࠓճ఻͍͑ͨ͜ͱ • ࢲ͕ͨͪͲΜͳ՝୊ʹͲΜͳΞϓϩʔνΛબ Μͩͷ͔ • React Native͕ྑ͍ΞϓϩʔνͰ͋ͬͨཧ༝ • ʮ஍ํITاۀʯͱ͍͏ڞ௨߲Ͱࢀߟʹͯ͠΄ ͍͠ͱ͜Ζ
8. Agenda 1. ٕज़બ୒ͱࢲͨͪ 2. ࢲͨͪͷ૊৫ͱࣄۀͷ՝୊ 3. ࢲͨͪͷٕज़બ୒ 4. ஍ํITاۀͷઓུΛ޿͛Δٕज़બ୒ͱͯ͠ͷ React Native
9. 1. ٕज़બ୒ͱࢲͨͪ
10. ։ൃϓϩδΣΫτͷʮྑ͍ʯͱ͸ • ૣ͘։ൃͰ͖Δ͜ͱ • ݎ࿚Ͱ͋Δ͜ͱ • কདྷͷϝϯςφϯείετ͕௿͍͜ͱ • ਫ਼ີʹ޻਺͕ݟੵ΋ΕΔ͜ͱ • গͳ͍ਓ਺Ͱ΋ଟ͘ͷ։ൃ͕Ͱ͖Δ͜ͱ • ଟ͘ͷਓ਺Ͱ։ൃͯ͠΋ഁ୼͠ͳ͍͜ͱ • ֶशίετ͕௿͘ɺ৽نϝϯόʔΛऔΓೖΕ΍͍͢͜ͱ
11. ʮྑ͍ʯ͸།ҰͷՁ஋؍Ͱ͸ͳ͍ • ʮྑ͞ʯʹ͸༷ʑͳ؍఺͕͋Δ • ೲظɾ඼࣭ɾਓ਺ɾεΩϧηοτɾνʔϜؒ੓࣏ɾ ࣾ಺੓࣏ɾetc... • ࣄۀ΍૊৫ʢνʔϜʣͷಛੑʹΑͬͯɺ༷ʑͳ੍ ݶ͕͔͔͍ͬͯΔ • ੍ݶͷதͰਫ਼Ұഋͷʮྑ͞ʯΛٻΊΔ͜ͱʹͳΔ
12. ٕज़બ୒͸૊৫ͱࣄۀͷӨڹΛ ड͚Δ • ࢲ͕ͨͪιϑτ΢ΣΞ։ൃΛߦ͏ͱ͖ɺ૊৫ ΍ࣄۀͱແؔ܎Ͱ͸͍ΒΕͳ͍
13. ྫɿίϯ΢ΣΠͷ๏ଇ • ʮγεςϜΛઃܭ͢Δ૊৫͸ɺͦͷߏ଄Λͦͬ͘Γ ·Ͷͨߏ଄ͷઃܭΛੜΈग़ͯ͠͠·͏ʯ • γεςϜ։ൃΛߦ͏૊৫ͷߏ଄ͱɺͦͷ૊৫͕ੜΈ ग़ͨ͠ιϑτ΢ΣΞͷߏ଄͸ɺ͋Δఔ౓ࣅͯ͠·͏ ͱ͍͏๏ଇ • 3νʔϜ߹ಉͰ1ͭͷΞϓϦΛ৮Δͱ֤νʔϜ༻ͷϞ δϡʔϧ͕3ͭͰ͖ΔɺΈ͍ͨͳ࿩
14. πʔϧબ୒ͷ෼໺Ͱ΋ • ݎ࿚ʹ࡞Γ͍ͨࣄۀͳΒɺνʔϜϝϯόʔͷܦݧ ͕๛෋ͳɺރΕͨݴޠ΍ϑϨʔϜϫʔΫΛ࢖͏ • ϓϩτλΠϐϯάʹ͸લ४උ͕গͳ͙ͯ͘͢ʹ ੒Ռ͕໨ʹݟ͑Δπʔϧ͕͍͍ • νʔϜϝϯόʔʹSQLΛॻ͚Δਓ͕গͳ͍ͷͰ O/RϚούʔΛಋೖ
15. ࣗ෼ͨͪͷࣄۀ΍૊৫ͷ ՝୊Λղܾ͢Δʹ͸ ͲΜͳπʔϧ͕߹͏ͷ͔Λ ߟ͑Δͷ͕ॏཁ
16. 2. ࢲͨͪͷ૊৫ͱࣄۀͷ՝୊
17. ϞόΠϧνʔϜͷ؅ཧԼʹ͋ΔΞϓϦ 2019 • ΞάϦϊʔτ • ๭ࣾ޲͚࠿ഓ؅ཧΞϓ Ϧ • ๭ࣾ޲͚೶ༀ࢖༻ཤྺ ΞϓϦ • ๭ࣾ޲͚Πνΰग़ՙ؅ ཧΞϓϦ • ਫ໳؅ཧ • ໘ੵܭࢉ • ڑ཭ܭࢉ • ೶ༀݕࡧ AndroidΞϓϦ iOSΞϓϦ WebΞϓϦ/PWA
18. • େখ֤ϓϥοτϑΥʔϜ߹Θͤͯ14ݸ • ଟ͍Ͱ͢Ͷ
19. ೶ۀICT͕΍͹͍ • ୈҰ࣍࢈ۀ͸ଟ͘ͷ࢈ۀͷૅ • खΛ৳͹ͦ͏ͱࢥ͑͹ͲΜͳࣄۀͰ΋Ͱ͖Δ • ͦΜͳʹཉுͬͨͭ΋Γ͸ͳ͍ͷʹ͜Μͳঢ় گͰ͢
20. αʔϏεఏڙऀ๊͕͑Δ໋॓ https://www.kantarworldpanel.com/global/smartphone-os-market-share/
21. ΢Υʔλʔηϧͱ྆OSରԠʢʙ2015ʣ • ๻͕1ਓ໨ͷϞόΠϧΤϯδχΞͩͬͨͷ΋ ͋ͬͯɺ࠷ॳͷ਺೥͸Android͚ͩ΍͍ͬͯͨ • ࣍ୈͱAndroid/iOSͷ྆ํ͕ٻΊΒΕΔ B2B2BҊ݅ʢB2BࣄۀऀͰ࢖ͬͯ΋Β͏Ξϓ Ϧͷ։ൃʣ͕ग़͖ͯͨ
22. B2B2BҊ݅ͷਐΊํ 2014ࠒ • iOSଆͷଟ͘͸֎஫ʹཔΔܗͰ։ൃΛਐΊͨ • ࣾ಺ϝϯόʔͰਐΊΔͨΊͷiOSڭҭ͕ؒʹ߹ Θͳ͔ͬͨ • iOSਓࡐͷ࠾༻΋͋·Γ্ख͘ਐ·ͳ͔ͬͨ • ୯७ʹਓ਺͕଍Γͳ͔ͬͨͷ΋͋Δ
23. ʮૉ௚ʹʯ࡞Δ • ʮૉ௚ʹ࡞Ζ͏ʯͱ͍͏ํ਑ͰɺAndroid͸Javaɺ iOS͸SwiftͰɺͦΕͧΕͷྲّྀʹԊͬͨ࡞ΓํΛͯ͠ ͍ͨ • UI͸֤OSͷྲّྀʹԊͬͨܗͰɺݟͨ໨͕ҧͬͯ΋Ͱ͖ Δ͜ͱ͕ಉ͡ͳΒؾʹ͠ͳ͍ํ਑ • ಉ͡Ϙλϯ͕ϔομʔʹ͋ͬͨΓϑολʔʹ͋ͬͨΓ ͢Δɺ͘Β͍ͷҧ͍
24. B2B(2B)ͳΒͰ͸ͷಛੑʹؾͮ ͘ • ࣾ಺ͷϢʔβʔαϙʔτνʔϜ΍B2B2Bͷ ύʔτφʔ͞Μͱͷର࿩ͷதͰɺ AndroidΞϓϦͱiOSΞϓϦͷݟͨ໨Λ Ͱ͖Δ͚ͩಉ͡ʹ͢Δඞཁੑ͕ݟ͖͑ͯͨ
25. Ϣʔβʔڭҭͷ؍఺Ͱͷ՝୊ • ΤϯυϢʔβʔ͕ITγεςϜͷར༻ʹ໌Δ͘ͳ͍৔߹ɺϚχϡΞϧ ੍࡞΍ษڧձͷ։࠵ɺࢦಋһͷҭ੒ͳͲɺڭҭͷͨΊͷࢪࡦ͕ඞཁ ʹͳͬͯ͘Δ • ɹͱɹͰݟͨ໨΍࢖͍ํ͕େ͖͘ҟͳΔͱɺ͜ΕΒͷڭҭ޲͚ͷࢿ ྉ࡞੒ͷख͕ؒഒʹͳΔ • αϙʔτͷి࿩ޱͰϘλϯΛԡͯ͠΋Β͏ͱ͖ʹɺҐஔΛը໘಺ͷ ্ԼࠨӈͰ఻͑ͨΓ͢Δࡍʹ΋ෆศ • ͓٬͞Μ͸ࣗ෼ͷεϚʔτϑΥϯ͕ɹͳͷ͔ɹͳͷ͔Θ͔ͬͯͳ͍ ͜ͱ΋͋Δ
26. ͳΜͱ͔͍ͨ͠ • ΧελϜϏϡʔΛۦ࢖ͯ͠·Ͱಉ͡ʹ͢Δඞ ཁ͸ͳ͍͕ɺɹ൛ͷը໘ͰϚχϡΞϧΛ࡞ͬ ͯɺલॻ͖ʹʮɹ΋͍͍ͩͨಉ͡Ͱ͢ʯͱॻ ͍ͯ΋ΪϦΪϦͳΜͱ͔ͳΔൣғΛ໨ࢦ͢Α ͏ͳ͜ͱ͕Ͱ͖ΔͱΑͦ͞͏ • ɹͱɹ͕ಉ͡ݟͨ໨Ͱಉ͡ಈ͖Λ͢Δ͜ͱͷ Ձ஋͕ൃ۷͞Εͨ
27. ʮಉ͡΋ͷΛ2ͭ࡞Δʯ ͷ೰Έ
28. • UI͸Ͱ͖Δ͚ͩࣅͨΑ͏ͳݟͨ໨ʹͳͬͨ΄ ͏͕͍͍ • ϏδωεϩδοΫ͸౰વಉ͡ڍಈʹͳΒͳ͚ Ε͹ͳΒͳ͍ ઌʹยํΛ࡞͔ͬͯΒ ΋͏ยํ͕ਅࣅ͢Δͷ͕Ԧಓ
29. εϐʔυ࠷༏ઌͷݱ৔Ͱ͸ͦ͏΋͍͔ͳ͍ • Ϗδωεͱͯ͠εϐʔυΛग़ͦ͏ͱ͢Δͱɺ ಉ࣌ਐߦΛ༨ّͳ͘͞ΕΔ͜ͱ΋͋Δ
30. υΩϡϝϯςʔγϣϯΛͪΌΜͱ͢Δ • ͜Ε΋·ͨԦಓ • ઃܭॻʢͱ͍͏͔ࢦࣔॻʣʹे෼ͳ࣌ؒΛׂ ͘͜ͱ͕Ͱ͖Ε͹ɺͦΕΛݩʹ্ͯ͠ख͘ಉ ࣌ਐߦͰ͖Δ͔΋͠Εͳ͍
31. εϐʔυ࠷༏ઌͷݱ৔Ͱ͸ͦ͏΋͍͔ͳ͍(࠶) • Ϗδωεͱͯ͠εϐʔυΛग़ͦ͏ͱ͢Δͱɺ ೲظ͕ΧπΧπͰେ࿮͕ܾ·ͬͨޙ͸૸Γͳ ͕ΒܾΊΔΈ͍ͨͳঢ়گʹͳΓ͕ͪ
32. • ૸Γͳ͕Β࢓༷ΛܾΊ͍ͯ͘ͱɺͳΜ͔ͩΜͩ ͰͣΕΔ • ܧଓ։ൃͷϑΣʔζʹೖΔͱɺػೳվमͷε ϐʔυײ࣍ୈͰಉ͡໰୊͕ى͜Γଓ͚Δ • ίϛϡχέʔγϣϯίετΛڐ༰Ͱ͖Δࣄۀɾ ૊৫Ͱͳ͍ͱɺԦಓͰղܾ͢Δ͜ͱ͸೉ͦ͠͏ ʮಉ͡΋ͷΛ2ͭ࡞Δʯ͸೉͍͠
33. ͦ΋ͦ΋ਓ਺͕ݶΒΕ͍ͯΔ • ஍ํɺͪΐͬͱ΍ͦͬͱͷࢪࡦͰ͸ਓ͕ू·Βͳ͍ • ɹͷΤϯδχΞ͕5ਓ͍Δͷ͸ଟ͍͚Ͳɺͦͷ͏ͪ3ਓ͸ฐ ࣾͰҭͬͨͷͰɺத్࠾༻্͕ख͍͍ͬͯ͘ΔΘ͚Ͱ͸ͳ͍ • ɹͷΤϯδχΞ࠾༻͸ҰਐҰୀ • ΞάϦςοΫͰ͸ࡳଋͰԥͬͯਓࡐूΊͯ୹ظܾઓʂ্͕ख ͘ޮ͘Ϗδωε΋·ͩൃ۷͞Ε͍ͯͳ͍ʢΑ͘ੜ͖ͯΔͳզʑ……ʣ • গͳ͍ਓ਺ͷ··Ͱ΋ϏδωεʹߩݙͰ͖Δࢪࡦ͕΄͍͠
34. ࣄۀͱ૊৫ʹࠜͨ͟͠՝୊ • ɹͱɹʹࣅͨΑ͏ͳݟͨ໨ͱಉ͡ڍಈΛ༩͑ ͍ͨ • ಉ࣌ਐߦͷࡍͷखؒΛݮΒ͍ͨ͠ • ख͕޿͕Γ͕ͪͳࣄۀྖҬʹɺগͳ͍ϝϯ όʔͰ΋ίϛοτ͍ͨ͠
35. 3. ࢲͨͪͷٕज़બ୒
36. ͦͯ͠X-Plat΁ • ՝୊Λٕज़Ͱղܾ͢ΔͨΊɺɹͱɹͰιʔε ίʔυΛڞ௨Խ͢ΔઓུΛ໨ࢦ࢝͠Ίͨ • ͍ΘΏΔΫϩεϓϥοτϑΥʔϜʢX-Platʣͳ ΞϓϦ։ൃͷख๏
37. ຊ৺ͱͯ͠͸ • Kotlin΍SwiftͰͷ։ൃΛத৺ʹஔ͖͍͕ͨɺ ݱࡏͷࣄۀن໛ͱ૊৫ن໛ͷόϥϯεͰ͸೉ ͍͠ • ʮɹͱɹͷΤϯδχΞ͕10ਓ͍ͣͭͨΒX- Plat͸΍Βͳ͍͍͕ͯ͘ɺ࣮ࡍʹ͸͍ͳ͍ͷͰ X-PlatΛ΍Δʯͱ͍͏ཱ৔
38. ʲ࠶ܝʳ ࣗ෼ͨͪͷࣄۀ΍૊৫ͷ ՝୊Λղܾ͢Δʹ͸ ͲΜͳπʔϧ͕߹͏ͷ͔Λ ߟ͑Δͷ͕ॏཁ
39. Cordovaͷ࣌୅ ʢ2015ʙʣ
40. Cordovaͷ࣌୅ • 2015೥ʹCordova + React JSͰΞάϦϊʔτͷ iOSΞϓϦΛ։ൃ • WebViewΛCordovaͰύοέʔδϯάͨ͠ϞόΠ ϧWebΞϓϦ • Material DesignʹدͤΔ͜ͱͰطଘͷAndroidΞ ϓϦΛݟͨ໨Λ͚ۙͮͨ
41. ͳͥWebViewͰReactͩͬͨͷ͔ • WebViewͷύϑΥʔϚϯε্͕͕͖͍ͬͯͯͨ࣌୅ͩͬͨ • ͪΐ͏Ͳࣾ಺ͷϑϩϯτΤϯυνʔϜ͕ReactͰσεΫτοϓ൛ͷΞ άϦϊʔτΛϦχϡʔΞϧ͍ͯͨ͠ • ࣾ಺Ͱѻ͏ςΫϊϩδʹڞ௨ͷ෦෼͕ੜ·ΕΕ͹ɺ෦ॺ಺ͷίϛϡ χέʔγϣϯ͕ԁ׈ʹͳΔ͔ͳɺͱ͍͏໨࿦ݟ΋͋ͬͨ • ͋ͱJavaScriptͳΒ͜Ε͔Β੝Γ্͕Γͦ͏͔ͩΒɺνʔϜϝϯ όʔͷΩϟϦΞϓϥϯͱͯ͠΋௵͕͠ޮ͍͍͍͔ͯͳͱʢwhy not swiftʣ
42. Ϛοϓ͚ͩ͸Objective-C࣮૷ • ೶஍؅ཧʹGoogleϚοϓΛ࢖͍ͬͯΔ • ϒϥ΢β൛ͷGoogleϚοϓ͸ૢ࡞ੑ͕ෆຬ ͩͬͨͷͰɺϓϥάΠϯͰରԠ • WebViewͷޙΖʹϚοϓΛஔ͍ͯɺWebView ʹ݀Λ։͚Δͱ͍͏͍࣮͢͝૷
43. ຊ౰͸Android൛΋͜Εʹஔ͖ ׵͑Δͭ΋Γ͕ͩͬͨɺ React NativeΛݟ͚ͭͯ͠ ·ͬͨͷͰ಴࠳
44. React Nativeͱͷग़ձ͍ ʢ2016ʙʣ
45. React Nativeͱͷग़ձ͍ • ొ৔͙͔ͨ͢͠Β໊લ͸஌ͬͯͨʢඑଣ෺ͩ ͱࢥͬͯͨʣ • 2015೥຤͔Β2016೥தʹɺιʔείʔυΛಡ ΜͩΓϓϩτλΠϐϯάͰͷࢼݧಋೖΛ࣮ࢪ • 2017೥͔Β͸ࣾ಺ͷখ͍͞ΞϓϦΛத৺ʹຊ ֨ಋೖ͍ͯ͠Δ
46. React Nativeͱ͸ • 2015೥ʹFacebook͔Βൃද͞ΕͨɺϞόΠϧ ΞϓϦΛ։ൃ͢ΔͨΊͷπʔϧ • ϞμϯͳJavaScriptݴޠͱReactϥΠϒϥϦͰ ॻ͍ͨGUIΞϓϦ͕ɺAndroidͱiOSͰಈ͘
47. import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; // HTMLͷΑ͏ͳϚʔΫΞοϓͰϨΠΞ΢τͷߏ଄Λఆٛ͢Δ const App = (props) => ( <View style={styles.container}> <Text>Hello, React Native!</Text> </View> ); export default App; // CSSϥΠΫͳࢦఆͰελΠϧΛఆٛ͢Δ const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, });
49. ReactΛ͓ܰ͘͞Β͍ • HTMLͬΆ͍΋ͷΛJavaScriptͷதʹॻ͍͓ͯ͘ ͱɺޮ཰తʹϒϥ΢βͷදࣔΛߋ৽ͯ͘͠ΕΔ΍ͭ • WebΞϓϦΛ࡞Δͱ͖ʹΑ͘࢖ΘΕ͍ͯΔ • ϓϩάϥϛϯάݴޠͷதͰɺએݴతͳߏจͰUIΛ ఆٛ͢Δɺͱ͍͏ੈք؍͕Θ͔Γ΍͍͢ͱ͍͏͜ ͱͰ޿·ͬͨ
50. ReactͷӨڹ͸ϞόΠϧʹ΋ • Swift UI • Jetpack Composeʢ։ൃதʣ
51. React Native͸ ϒϥ΢βͳͷʁ
52. ҧ͍·͢ɻ • React Nativeʹ͸HTML΍CSS͕ొ৔͠ͳ͍ • JavaScript಺ʹఆٛ͞ΕͨϨΠΞ΢τΛɺ֤ϓ ϥοτϑΥʔϜͷUIίϯϙʔωϯτʹ຋༁ͯ͠ඳ ը͢Δ • ֤ϓϥοτϑΥʔϜͷຊདྷͷUIΛʮωΠςΟϒ UIʯͱݺͿจԽ͔ΒʮReact Nativeʯʹͳͬͨ
53. ຋༁ͷྫ
54. React Nativeͷ2ͭͷϨΠϠʔ • UIϥΠϒϥϦ૚ • ReactϥΠϒϥϦ޲͚ͷλάΛఏڙ͢ΔJavaScriptϥΠϒϥϦ • ϛυϧ΢ΣΞ૚ • JavaScriptͷ࣮ߦ؀ڥΛ༻ҙ • JavaScriptଆͰUIϥΠϒϥϦ͕ར༻͞Εͨࡍʹɺ֤ϓϥοτ ϑΥʔϜͷUIʹ຋༁͢ΔɺC++ͱʢJava | Objective-CʣͰ࡞Β Εͨϛυϧ΢ΣΞ
55. ϛυϧ΢ΣΞ૚ͷࠩ͠ସ͑Ͱ޿͕Δੈք • iOSʢofficialʣ • Androidʢofficialʣ • for Windowsʢthird party / Microsoftʣ • for Webʢthird party, ͨͩ͠࡞ऀ͸ReactνʔϜೖΓʣ • for macOSʢthird partyʣ
56. ಋೖࣄྫ΋ଓʑ • InstagramʢFBͳͷͰʣ • DiscordʢiOS onlyʣ • Office 365ʢ΄Μͱ͔ʁʣ • Twitter for WebʢReact Native for Webʣ https://blog.nkzn.info/entry/2019/04/16/163743 ΄ΜͱΒ͍͠Αʁ
57. IUUQTUXJUUFSDPNEBO@BCSBNPWTUBUVT
58. ୅දతͳίϯϙʔωϯτ 7JFX ϨΠΞ΢τͷجຊ୯Ґ 5FYU ςΩετΛදࣔɾ૷০͢Δ "DUJWJUZ*OEJDBUPS ॲཧ଴ͪΛද͢Πϯδέʔλʔ 'MBU-JTU ഑ྻσʔλΛলϝϞϦͰදࣔ 4DSPMM7JFX ಺ଆͷίϯςϯπ͕ը໘Λ͸Έग़ͨΒ
    εΫϩʔϧͤ͞Δ 3FGSFTI$POUSPM 4DSPMM7JFXʹʮҾͬுͬͯߋ৽ʯΛ෇༩͢Δ 5PVDIBCMF0QBDJUZ ͋ΒΏΔϏϡʔʹλοϓΠϕϯτͱϑΟʔυό οΫΛ࣋ͨͤΔ
59. ΄ͲΑཻ͍౓ • GUIΞϓϦέʔγϣϯͷߏ੒ཁૉͱͯ͠ྑ͍ • ͜ΕΛϒϥ΢βͰ࢖͍ͨͯ͘ React Native for Web͕ੜ·Εͨ • ϒϩάʹ·ͱΊͨͷͰಡΜͰ • React NativeΛWebʹ࣋ͬͯ͘Δ͜ͱͷҙຯ https://blog.nkzn.info/entry/2018/05/29/210030
60. ΋ͬͱஸೡʹ஌Γ͍ͨ৔߹͸ • CodeZineͰෆఆظ࿈ࡌͯ͠ΔͷͰಡΜͰ͘ Εʂ https://codezine.jp/article/corner/772 • ୈ1ճ͕ࠓͷ࿩ͷ΋ͬͱஸೡͳ΍ͭ
61. React Nativeͷ͍͍ͱ͜Ζ
62. JavaScriptΞϓϦ։ൃͷ؍఺ • ϥϯλΠϜ͕WebKitͷJavaScriptCore • JS to JSίϯύΠϥͷBabel͕૊Έࠐ·Ε͓ͯΓɺϞμϯͳ JavaScriptจ๏Λ࢖༻Ͱ͖Δ • TypeScriptͰܕΛ෇͚Ε͹େن໛։ൃʹ΋ରԠͰ͖Δ • FlexboxΛ࢖ͬͯϨΠΞ΢τ͕૊ΊΔ • جఈίϯϙʔωϯτʹ͸༨ܭͳελΠϧ͕͍͍ͭͯͳ͍ͷͰɺಠ ࣗσβΠϯΛ࡞Γ͍ͨͱ͖ʹ૊Έཱͯ΍͍͢
63. ϞόΠϧΞϓϦ։ൃͷ؍఺ • ɹ΍ɹͷϏϧυจԽʹରͯ͠੣࣮Ͱຐ๏͕গͳ͍ • Java΍Objective-CͰϓϥάΠϯΛॻ͘৔߹͸ɺɹ΍ɹͷ ΤϯδχΞͰ͋Ε͹؆୯ʹॻ͖ํΛ֮͑ΒΕΔఔ౓ʹૉ௚ • Gradle΍XcodeΛ࢖͍׳Ε͍ͯΔΤϯδχΞͳΒ༰қʹΧ ελϚΠζͰ͖Δ • GoogleϚοϓͷΑ͏ͳෳࡶͳදࣔʹಛԽͨ͠ϥΠϒϥϦ ΋औΓࠐΈ΍͍͢
64. ਓࡐӡ༻ͷ؍఺ • JavaScriptͱReactͱ͍͏ڞ௨߲ʹΑΓɺϑϩϯτ ΤϯυͱReact Native͸͋Δఔ౓ਓࡐΛڞ༗Ͱ͖Δ • APIͷҧ͍Λ৐Γӽ͑Δ·Ͱʹ͸׳Ε͕ඞཁ • ݴޠͷҧ͍͕গͳ͍ͷͰڭҭίετ͕ߴ͘ͳ͍ • εʔύʔϚϯͰͳͯ͘΋͍͚Δͷ͕͍͍
65. React NativeͷͭΒ͍ͱ͜Ζ
66. JavaScriptΞϓϦ։ൃͷ؍఺ • ελΠϧγεςϜ͕CSSͷΑ͏ͰCSSͰ͸ͳ͍ ʢͪΐͬͱɹɹͷ౎߹͕ࠞͬͯ͟ΔʣͷͰɺ JavaScriptΤϯδχΞ͕ॳΊͯ৮Δͱށ࿭͏
67. import React from 'react'; import { View, Text, StyleSheet } from 'react-native'; // HTMLͷΑ͏ͳϚʔΫΞοϓͰϨΠΞ΢τͷߏ଄Λఆٛ͢Δ const App = (props) => ( <View style={styles.container}> <Text>Hello, React Native!</Text> </View> ); export default App; // CSSϥΠΫͳࢦఆͰελΠϧΛఆٛ͢Δ const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', }, }); ←͜Ε
68. ΤϥʔΘ͔ΓͮΒ͍໰୊ • JavaScript༝དྷͱɹɹ༝དྷͷΤϥʔ͕྆ํͱ΋ ग़ΔͷͰɺΤϥʔϝοηʔδΛݟͯɺͲͪΒ ͷΤϥʔͳͷ͔൑அ͠ͳ͍ͱ͍͚ͳ͍
70. ࣮ࡍʹ͋ͬͨྫ • This app has been build with an incorrect configuration. Please configure your build for VectorDrawableCompat. • ελοΫτϨʔεతʹ͸ˣ͕ݪҼ • ReactSwitchManager.java • SwitchCompat.java • Android 4.4ͰVectorDrawableΛಈ͔ͦ͏ͱͯ͠ࢮΜͩΒ͍͠ • ͳ͓ػछґଘόάͩͬͨ໛༷ʢCompat͸έΞ͞ΕͯΔ͸ͣͰ͢͠Ͷ https://qiita.com/Nkzn/items/79477933c1d8762961be
71. ϦϦʔεͷඞཁ஌ࣝྔ͕΍͹͍ • ϦϦʔεϏϧυΛߦ͏ʹ͸3ͭͷจԽݍͷʮ;ͭ͏ʯΛ ஌͍ͬͯΔඞཁ͕͋Δ • NPM / Babel • Android Studio / Gradle • Xcode / CocoaPods • ͦΕͧΕͰݟͨΒಛघͳ஌ࣝͱ͍͏΄ͲͰ͸ͳ͍ͷ͕ٹ͍
72. React NativeΛͲ͏ଊ͑Δ͔
73. ϑϩϯτΤϯυग़਎ऀʹͱͬͯ ͷReact Native • ΊͪΌͪ͘ΌΫηͷڧ͍ϒϥ΢β • ɹɹΤϯδχΞʹཔΉͱϒϥ΢βଆͷڍಈΛ ΧελϚΠζͯ͠΋Β͑Δ • Javaͱ͔Objective-CΛ֮͑Δͱࣗ෼Ͱ΋Χε λϚΠζͰ͖Δ
74. ϞόΠϧΞϓϦग़਎ऀʹͱͬͯ ͷReact Native • JavaScriptͱReactͱ͔͍͏DSLͰɺUIͷঢ়ଶ ؅ཧΛߦ͏͜ͱ͕Ͱ͖ΔUIϥΠϒϥϦ • Swift UI΍Jetpack Compose͕ීٴ͍ͯ͘͠ ͱɺͦ͜·Ͱڧ͍ΞυόϯςʔδͰ͸ͳ͘ ͳ͍͖ͬͯͦ͏
75. ͳͥ˓˓Ͱ͸ͳ͔ͬͨͷ͔
76. ͳͥ˓˓Ͱ͸ͳ͔ͬͨͷ͔ • ιʔείʔυڞ௨Խ͚ͩΛߟ͑ΔͱɺFlutterͰ΋IonicͰ΋ XamarinͰ΋Kotlin MPPͰ΋͍͍ͱࢥ͏ • ࢲͨͪ͸೶஍؅ཧͷจ຺ͰϚοϓΛଟ༻͢ΔͷͰɺωΠςΟ ϒUIΛૉ௚ʹѻ͑Δ΋ͷΛબͿඞཁ͕͋ͬͨ • ࣾ಺ͷਓࡐྲྀಈੑ΍ɺϝϯόʔͷΩϟϦΞύεͱͯ͠௵͕͠ ޮ͔͘Ͳ͏͔ͰJavaScriptʹدͤͨ෦෼͸͋Δ • Cordova࣌୅ͷ͓͔͛ͰReactͷܦݧ͕͋ͬͨͷ͸େ͖͍
77. ͓·͚ ReactͱϚοϓ͸૬ੑ͕͍͍
78. import React from 'react'; import MapView, { Marker } from 'react-native-maps'; export function MyMapView(props) { return ( <MapView region={props.region} onRegionChange={props.onRegionChange} > {props.markers.map(marker => ( <Marker coordinate={marker.latlng} title={marker.title} description={marker.description} /> ))} </MapView> ); }; Ґஔ৘ใͷArrayΛmapͰMarkerʹม׵
79. 4. ஍ํITاۀͷઓུΛ޿͛Δ ٕज़બ୒ͱͯ͠ͷ React Native
80. ஍ํITاۀͷࣄۀͱ૊৫ͷ՝୊ʁ • BtoB(toB)͕ଟΊ • ɹɹ͸྆ํ΍Βͳ͍ͱ͍͚ͳ͍ • ஍ํ͸ट౎ݍʹྠΛ͔͚ͯਓࡐྲྀಈੑ͕গͳ͍ • ࠓ͍ΔϝϯόʔͰͳΜͱ͔͢Δํ޲ʹدͤͨ΄ ͏͕Αͦ͞͏
81. ͜Ε͸X-Platͷग़൪͕ ͋ΔͷͰ͸
82. React NativeΛѻ͏νʔϜʹ ඞཁͳϩʔϧ • JavaScript/TypeScript + ReactʹΑΔΞϓϦ։ൃʹࢀՃͰ͖Δϑ ϩϯτΤϯυΤϯδχΞʢͨ͘͞Μʣ • NPMʹΑΔΞϓϦͷӡ༻͕Ͱ͖ΔΤϯδχΞʢ࠷௿1໊ʣ • Xcode + CocoaPodsʹΑΔiOSΞϓϦͷӡ༻͕Ͱ͖ΔiOSΤϯδ χΞʢ࠷௿1໊ʣ • GradleʹΑΔAndroidΞϓϦͷӡ༻͕Ͱ͖ΔAndroidΤϯδχΞ ʢ࠷௿1໊ʣ
83. ͍Δͱخ͍͠ϩʔϧ • iOS SDKͰiOSΞϓϦ͕ॻ͚ΔiOSΤϯδχΞ ʢ೚ҙɾΧελϚΠζཁһʣ • Android SDKͰAndroidΞϓϦ͕ॻ͚Δ AndroidΤϯδχΞʢ೚ҙɾΧελϚΠζཁ һʣ
84. ॏް͗͢Ͱ͸ʂʁ • ͏Μʢਅإʣ • ͦΕͧΕผͷਓΛ༻ҙ͠Α͏ͱࢥͬͨΒɺਓ ࡐྲྀಈੑ͕ߴͯ͘΋ׂͱແ஡ͳͷͰ͸ͱ͍͏ ؾ࣋ͪ
85. ͋Δఔ౓͸݉೚Ͱߟ͑Δ
86. ϑϩϯτΤϯυΤϯδχΞ • UI࣮૷ͷ୲౰ͱɺNPMӡ༻͸ͬͪ͜ʹ೚ͤΔ • ϒϥ΢β޲͚ͷ։ൃͱεΩϧηοτ͕͍ۙͷͰ ௵͕͠ޮ͘ • ։ൃ෦ୂͳͷͰɺ͋Δఔ౓·Ͱ͸ਓ਺͕͍ͨํ ͕։ൃεϐʔυ্͕͕Δ • ༨ஊ͚ͩͲ։ൃϚγϯ͸ڧ͍ͷʹ͍ͯͩ͘͠͞
88. ϞόΠϧӡ༻ΤϯδχΞ • ϏϧυͱϦϦʔεΛ୲౰ • ɹɹͷϓϩʹͳΔਓΛ1ਓͳ͍͠1ਓͣͭҭͯΔ • ϑϩϯτΤϯυ / NPMͷ౎߹΋͋Δఔ౓͸஌ͬ ͍ͯΔඞཁ͕͋Δ • CocoaPods΍Fastlaneͷ౎߹ͰRuby΋
89. ث༻ͳਓΛ୳ͤ • ӡ༻ϩʔϧ͸εʔύʔϚϯͳͷͰɺࣾ಺ͷث༻ ͳਓΛׂΓ౰ͯΔ͜ͱʹͳΔ • ֤ࣾ1ਓ͸ͦ͏͍͏ਓ͍ΔͰ͠ΐʢࠜڌͳ͠ʣ • ։ൃͷཁʹͳΔͷͰɺް۰ͯ͠ઈରʹख์͠ ͯ͸ͳΒͳ͍
90. ͢Δͱ͜͏͍͏૊৫͕Ͱ͖Δ ϞόΠϧӡ༻νʔϜ ։ൃνʔϜA ։ൃνʔϜB ։ൃνʔϜC ؀ڥߏஙࢧԉɾϓϥάΠϯ։ൃࢧԉ ث༻ͳਓ ث༻ͳਓ
91. ث༻ͳਓʹ׆༂ͯ͠΋Β͏ • ϞόΠϧΞϓϦ։ൃɺث༻ͳਓͷ࿹ྗΛͪΌΜͱ ׆͔ͤͳ͍έʔε͕͋Δ • ࣮͸ɹ΋ɹ΋ɹ΋ͦΕͳΓʹͰ͖ΔɺΈ͍ͨͳث ༻ͳਓ͕͍ͯ΋ɺ1ਓͷਓؒ͸1ਓ͔͍͠ͳ͍ͷͰ ஞ࣮࣍ߦ͔͠Ͱ͖ͳ͍ • ͦ͏͍ͬͨਓͨͪʹث༻͞Λ࠷େݶʹൃشͯ͠΋ Β͏͜ͱͰฒྻੑΛ্͛Δͱ͍͏ઓུ͕औΕΔ
92. ؆୯ʹͰ͖ΔΘ͚Ͱ͸ͳ͍ • πʔϧΛ࢖͑͹؀ڥ͕खʹೖΔΘ͚Ͱ͸ͳ͍ • ث༻ͳਓ͕ຊདྷ͍࣋ͬͯΔ࿹ྗΛ࠷େݶൃش Ͱ͖Δ؀ڥΛ࡞ΕΔΑɺͱ͍͏࿩ • ࿹ྗ͕͋Δث༻ͳਓΛࣾ಺ʹଘࡏͤ͞Δͷ ͸ɺڭҭͱ࠾༻ͷ౒ྗ
93. ࠾༻Ͱղܾ͢Δ͜ͱ͸…… • ʮωΠςΟϒϨΠϠʔͷӡ༻Λ͢Δਓʯͱ͍͏ϩʔϧ͕ͳ͍ͱ੒Γཱ ͨͳ͍࡞ΓΛ͍ͯ͠ΔͷͰɺͰ͖ͨΒ࠾༻ͷखஈ΋༻ҙ͍ͨ͠ • ݱࡏSwift΍KotlinͰΰϦΰϦͱΞϓϦΛॻ͍͍ͯΔਓͷ΄͏͕ɺϏϧυ ΍ϦϦʔεʹؔ͢Δܦݧ΋๛෋ͳ͸͕ͣͩɺʮͦͷεΩϧΛओʹӡ༻ʹ ׆͔ͯ͠΄͍͠ʯͱ͍͏ٻਓʹདྷΔͷ͔……ʁ • ݄˓࣌ؒΈ͍ͨͳܖ໿Ͱɺ෭ۀͰٕज़ސ໰ʹೖͬͯ΋Β͏ͱ͍͏ख΋͋ Δ͔΋͠Εͳ͍ • ɹɹɹ੎ͷʮ͜Ε͔ΒͷΩϟϦΞύεͲ͏͠Α͏ʯͷબ୒ࢶͷͻͱͭʹ ͳΔͱɺUIJλʔϯ͕૿͑Δ͔΋ʢໝ૝ʣ
94. ·ͱΊ
95. ·ͱΊ • ࣗ෼ͨͪͷࣄۀ΍૊৫ͷ՝୊Λղܾ͢Δʹ͸ͲΜͳπʔϧ͕߹͏ͷ͔ Λߟ͑Δͷ͕ॏཁ • ਓࡐྲྀಈੑ͕௿͍஍ํITاۀͰ͸ɺগͳ͍ਓ਺Ͱɺ௵͠ͷޮ͘ݴޠ Ͱɺଟ͘ͷΞϓϦΛ࡞ΕΔπʔϧΛબͿ͜ͱʹɺͦΕͳΓʹՁ஋͕͋ Δ͸ͣ • ث༻ͳਓͷ࿹ྗ͕ͳ͍ͱ੒Γཱͨͳ͍ͷͰɺ·ͣ͸ث༻ͳਓΛʢ΋ͪ ΖΜߴڅͰʣݟ͚ͭͨΓ࠾༻ͨ͠Γ͠·͠ΐ͏ • ࿹ྗΛ׆͔͢બ୒ࢶͷͻͱͭͱͯ͠ɺReact NativeΛݕ౼ͯ͠Έͯ͸ ͍͔͕Ͱ͠ΐ͏͔
96. We are hiring! • ΢ΥʔλʔηϧͰ͸Ұॹʹʮ೔ຊͷ೶ۀɾ৯ Λ”৘ใ”Ͱࢧ͑Δ࢓ࣄʯʹऔΓ૊ΜͰ͘ΕΔΤ ϯδχΞΛืू͍ͯ͠·͢ • ๻ͱҰॹʹࣄۀͱ૊৫ͷ՝୊ʹ೰ΜͰ͘Εʂ • https://water-cell.jp/recruit/
97. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
98. ࢀߟจݙ • ͳͥɺ૊৫ͷͭ͘Γͱιϑτ΢ΣΞΞʔΩςΫνϟ͸ࣅͯ͠·͏ͷ͔ - Qiita https://qiita.com/hirokidaichi/items/d12fcce80ee593bcf34d • Android 4.4ҎԼͰReact NativeͷSwitch͕ಈ͔ͳ͍৔߹ͷରॲ - Qiita https://qiita.com/Nkzn/items/79477933c1d8762961be • React NativeΛWebʹ࣋ͬͯ͘Δ͜ͱͷҙຯ - φΧβϯυοτωοτ https://blog.nkzn.info/entry/2018/05/29/210030 • React Nativeͱ͸Կ͔ʁ جຊͷ࢓૊Έͱ࢖͍Ͳ͜ΖΛཧղ͢Δ - CodeZine https://codezine.jp/article/detail/11295 • ʮωΠςΟϒΞϓϦ։ൃऀ͸ઈ໓ةዧछͳͷ͔ʁʯ΁ͷײ૝จ - φΧβϯυοτωοτ https://blog.nkzn.info/entry/2019/04/16/163743