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

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

Transcript

1. ஍ํITاۀͷઓུΛ޿͛Δ
   ٕज़બ୒ͱͯ͠ͷ
   React Native
   Yukiya Nakagawa @ WaterCell Inc.
   2019.10.11
   MOBILE CREW NIIGATA 2019
   

   View Slide

2. ࣗݾ঺հ
   • த઒ ޾࠸ / Nkzn / ͳ͔͟Μ
   • ্ӽࢢग़਎
   • ϞόΠϧΤϯδχΞ
   ʢReact Native, Android, PWAʣ
   • ೋࣇͷ෕Ͱ࠺ͷ෉
   

   View Slide

3. ຊ͕޷ධͰ͢
   • ͨͬͨ1೔Ͱجຊ͕਎ʹ෇͘ʂ
   AndroidΞϓϦ։ൃ௒ೖ໳
   • ٕज़ධ࿦ࣾ
   • 224ϖʔδ / 2,280ԁʴ੫
   • https://gihyo.jp/book/
   2018/978-4-297-10004-9
   ࠓճɺAndroidΤϯδχΞΒ͍͠࿩͸͚ͩ͜͜
   

   View Slide

4. • ΢Υʔλʔηϧגࣜձࣾ https://water-cell.jp
   • 2011೥૑ۀͷ৽ׁࢢͷϕϯνϟʔاۀ
   • ΄΅ઐۀͰ೶ۀؔ࿈ICTγεςϜΛ։ൃɾӡ༻
   • ࣾһ਺3xਓͰ20ਓ͘Β͍͕ITΤϯδχΞ
   • ͏ͪϞόΠϧΤϯδχΞ͸5ਓ΄ͲʢAndroidͱPWAத৺ʣ
   

   View Slide

5. ೶৔ͷʮݟ͑ΔԽʯͰܦӦΛڧԽ͢Δ
   Ӧ೶ɾ࠿ഓࢧԉπʔϧ
   ੜ࢈૊৫਺
   ૊৫Ҏ্˞
   ˞ɹτϥΠΞϧظؒɺٴͼ࣮ূࣄۀͳͲͷར༻ऀ਺ΛؚΉ૯ར༻ऀ਺Ͱ͢
   ˔ߤۭࣸਅϕʔεͷࢹ֮తͳะ৔؅ཧ
   ˔ϞόΠϧ͔Β೶࡞ۀه࿥
   ˔Ϋϥ΢υγεςϜͰϦΞϧλΠϜʹ৘ใڞ༗
   ˔๛෋ͳσʔλ෼ੳɾग़ྗػೳ
   19.7%
   

   View Slide

6. λʔήοτ
   • ஍ํͷITاۀͷਓ
   • ஍Ҭʹࠜࠩͨ͠ࣄۀΛߦ͏ITاۀͷਓ
   • ݶΒΕͨ৚݅ͷதͰਫ਼Ұഋ੒ՌΛग़ͦ͏ͱ
   ໛ࡧ͢Δਓ
   

   View Slide

7. ࠓճ఻͍͑ͨ͜ͱ
   • ࢲ͕ͨͪͲΜͳ՝୊ʹͲΜͳΞϓϩʔνΛબ
   Μͩͷ͔
   • React Native͕ྑ͍ΞϓϩʔνͰ͋ͬͨཧ༝
   • ʮ஍ํITاۀʯͱ͍͏ڞ௨߲Ͱࢀߟʹͯ͠΄
   ͍͠ͱ͜Ζ
   

   View Slide

8. Agenda
   1. ٕज़બ୒ͱࢲͨͪ
   2. ࢲͨͪͷ૊৫ͱࣄۀͷ՝୊
   3. ࢲͨͪͷٕज़બ୒
   4. ஍ํITاۀͷઓུΛ޿͛Δٕज़બ୒ͱͯ͠ͷ
   React Native
   

   View Slide

9. 1. ٕज़બ୒ͱࢲͨͪ
   

   View Slide

10. ։ൃϓϩδΣΫτͷʮྑ͍ʯͱ͸
    • ૣ͘։ൃͰ͖Δ͜ͱ
    • ݎ࿚Ͱ͋Δ͜ͱ
    • কདྷͷϝϯςφϯείετ͕௿͍͜ͱ
    • ਫ਼ີʹ޻਺͕ݟੵ΋ΕΔ͜ͱ
    • গͳ͍ਓ਺Ͱ΋ଟ͘ͷ։ൃ͕Ͱ͖Δ͜ͱ
    • ଟ͘ͷਓ਺Ͱ։ൃͯ͠΋ഁ୼͠ͳ͍͜ͱ
    • ֶशίετ͕௿͘ɺ৽نϝϯόʔΛऔΓೖΕ΍͍͢͜ͱ
    

    View Slide

11. ʮྑ͍ʯ͸།ҰͷՁ஋؍Ͱ͸ͳ͍
    • ʮྑ͞ʯʹ͸༷ʑͳ؍఺͕͋Δ
    • ೲظɾ඼࣭ɾਓ਺ɾεΩϧηοτɾνʔϜؒ੓࣏ɾ
    ࣾ಺੓࣏ɾetc...
    • ࣄۀ΍૊৫ʢνʔϜʣͷಛੑʹΑͬͯɺ༷ʑͳ੍
    ݶ͕͔͔͍ͬͯΔ
    • ੍ݶͷதͰਫ਼Ұഋͷʮྑ͞ʯΛٻΊΔ͜ͱʹͳΔ
    

    View Slide

12. ٕज़બ୒͸૊৫ͱࣄۀͷӨڹΛ
    ड͚Δ
    • ࢲ͕ͨͪιϑτ΢ΣΞ։ൃΛߦ͏ͱ͖ɺ૊৫
    ΍ࣄۀͱແؔ܎Ͱ͸͍ΒΕͳ͍
    

    View Slide

13. ྫɿίϯ΢ΣΠͷ๏ଇ
    • ʮγεςϜΛઃܭ͢Δ૊৫͸ɺͦͷߏ଄Λͦͬ͘Γ
    ·Ͷͨߏ଄ͷઃܭΛੜΈग़ͯ͠͠·͏ʯ
    • γεςϜ։ൃΛߦ͏૊৫ͷߏ଄ͱɺͦͷ૊৫͕ੜΈ
    ग़ͨ͠ιϑτ΢ΣΞͷߏ଄͸ɺ͋Δఔ౓ࣅͯ͠·͏
    ͱ͍͏๏ଇ
    • 3νʔϜ߹ಉͰ1ͭͷΞϓϦΛ৮Δͱ֤νʔϜ༻ͷϞ
    δϡʔϧ͕3ͭͰ͖ΔɺΈ͍ͨͳ࿩
    

    View Slide

14. πʔϧબ୒ͷ෼໺Ͱ΋
    • ݎ࿚ʹ࡞Γ͍ͨࣄۀͳΒɺνʔϜϝϯόʔͷܦݧ
    ͕๛෋ͳɺރΕͨݴޠ΍ϑϨʔϜϫʔΫΛ࢖͏
    • ϓϩτλΠϐϯάʹ͸લ४උ͕গͳ͙ͯ͘͢ʹ
    ੒Ռ͕໨ʹݟ͑Δπʔϧ͕͍͍
    • νʔϜϝϯόʔʹSQLΛॻ͚Δਓ͕গͳ͍ͷͰ
    O/RϚούʔΛಋೖ
    

    View Slide

15. ࣗ෼ͨͪͷࣄۀ΍૊৫ͷ
    ՝୊Λղܾ͢Δʹ͸
    ͲΜͳπʔϧ͕߹͏ͷ͔Λ
    ߟ͑Δͷ͕ॏཁ
    

    View Slide

16. 2. ࢲͨͪͷ૊৫ͱࣄۀͷ՝୊
    

    View Slide

17. ϞόΠϧνʔϜͷ؅ཧԼʹ͋ΔΞϓϦ 2019
    • ΞάϦϊʔτ
    • ๭ࣾ޲͚࠿ഓ؅ཧΞϓ
    Ϧ
    • ๭ࣾ޲͚೶ༀ࢖༻ཤྺ
    ΞϓϦ
    • ๭ࣾ޲͚Πνΰग़ՙ؅
    ཧΞϓϦ
    • ਫ໳؅ཧ
    • ໘ੵܭࢉ
    • ڑ཭ܭࢉ
    • ೶ༀݕࡧ
    AndroidΞϓϦ
    iOSΞϓϦ
    WebΞϓϦ/PWA
    

    View Slide

18. • େখ֤ϓϥοτϑΥʔϜ߹Θͤͯ14ݸ
    • ଟ͍Ͱ͢Ͷ
    

    View Slide

19. ೶ۀICT͕΍͹͍
    • ୈҰ࣍࢈ۀ͸ଟ͘ͷ࢈ۀͷૅ
    • खΛ৳͹ͦ͏ͱࢥ͑͹ͲΜͳࣄۀͰ΋Ͱ͖Δ
    • ͦΜͳʹཉுͬͨͭ΋Γ͸ͳ͍ͷʹ͜Μͳঢ়
    گͰ͢
    

    View Slide

20. αʔϏεఏڙऀ๊͕͑Δ໋॓
    https://www.kantarworldpanel.com/global/smartphone-os-market-share/
    

    View Slide

21. ΢Υʔλʔηϧͱ྆OSରԠʢʙ2015ʣ
    • ๻͕1ਓ໨ͷϞόΠϧΤϯδχΞͩͬͨͷ΋
    ͋ͬͯɺ࠷ॳͷ਺೥͸Android͚ͩ΍͍ͬͯͨ
    • ࣍ୈͱAndroid/iOSͷ྆ํ͕ٻΊΒΕΔ
    B2B2BҊ݅ʢB2BࣄۀऀͰ࢖ͬͯ΋Β͏Ξϓ
    Ϧͷ։ൃʣ͕ग़͖ͯͨ
    

    View Slide

22. B2B2BҊ݅ͷਐΊํ 2014ࠒ
    • iOSଆͷଟ͘͸֎஫ʹཔΔܗͰ։ൃΛਐΊͨ
    • ࣾ಺ϝϯόʔͰਐΊΔͨΊͷiOSڭҭ͕ؒʹ߹
    Θͳ͔ͬͨ
    • iOSਓࡐͷ࠾༻΋͋·Γ্ख͘ਐ·ͳ͔ͬͨ
    • ୯७ʹਓ਺͕଍Γͳ͔ͬͨͷ΋͋Δ
    

    View Slide

23. ʮૉ௚ʹʯ࡞Δ
    • ʮૉ௚ʹ࡞Ζ͏ʯͱ͍͏ํ਑ͰɺAndroid͸Javaɺ
    iOS͸SwiftͰɺͦΕͧΕͷྲّྀʹԊͬͨ࡞ΓํΛͯ͠
    ͍ͨ
    • UI͸֤OSͷྲّྀʹԊͬͨܗͰɺݟͨ໨͕ҧͬͯ΋Ͱ͖
    Δ͜ͱ͕ಉ͡ͳΒؾʹ͠ͳ͍ํ਑
    • ಉ͡Ϙλϯ͕ϔομʔʹ͋ͬͨΓϑολʔʹ͋ͬͨΓ
    ͢Δɺ͘Β͍ͷҧ͍
    

    View Slide

24. B2B(2B)ͳΒͰ͸ͷಛੑʹؾͮ
    ͘
    • ࣾ಺ͷϢʔβʔαϙʔτνʔϜ΍B2B2Bͷ
    ύʔτφʔ͞Μͱͷର࿩ͷதͰɺ
    AndroidΞϓϦͱiOSΞϓϦͷݟͨ໨Λ
    Ͱ͖Δ͚ͩಉ͡ʹ͢Δඞཁੑ͕ݟ͖͑ͯͨ
    

    View Slide

25. Ϣʔβʔڭҭͷ؍఺Ͱͷ՝୊
    • ΤϯυϢʔβʔ͕ITγεςϜͷར༻ʹ໌Δ͘ͳ͍৔߹ɺϚχϡΞϧ
    ੍࡞΍ษڧձͷ։࠵ɺࢦಋһͷҭ੒ͳͲɺڭҭͷͨΊͷࢪࡦ͕ඞཁ
    ʹͳͬͯ͘Δ
    • ɹͱɹͰݟͨ໨΍࢖͍ํ͕େ͖͘ҟͳΔͱɺ͜ΕΒͷڭҭ޲͚ͷࢿ
    ྉ࡞੒ͷख͕ؒഒʹͳΔ
    • αϙʔτͷి࿩ޱͰϘλϯΛԡͯ͠΋Β͏ͱ͖ʹɺҐஔΛը໘಺ͷ
    ্ԼࠨӈͰ఻͑ͨΓ͢Δࡍʹ΋ෆศ
    • ͓٬͞Μ͸ࣗ෼ͷεϚʔτϑΥϯ͕ɹͳͷ͔ɹͳͷ͔Θ͔ͬͯͳ͍
    ͜ͱ΋͋Δ
    

    View Slide

26. ͳΜͱ͔͍ͨ͠
    • ΧελϜϏϡʔΛۦ࢖ͯ͠·Ͱಉ͡ʹ͢Δඞ
    ཁ͸ͳ͍͕ɺɹ൛ͷը໘ͰϚχϡΞϧΛ࡞ͬ
    ͯɺલॻ͖ʹʮɹ΋͍͍ͩͨಉ͡Ͱ͢ʯͱॻ
    ͍ͯ΋ΪϦΪϦͳΜͱ͔ͳΔൣғΛ໨ࢦ͢Α
    ͏ͳ͜ͱ͕Ͱ͖ΔͱΑͦ͞͏
    • ɹͱɹ͕ಉ͡ݟͨ໨Ͱಉ͡ಈ͖Λ͢Δ͜ͱͷ
    Ձ஋͕ൃ۷͞Εͨ
    

    View Slide

27. ʮಉ͡΋ͷΛ2ͭ࡞Δʯ
    ͷ೰Έ
    

    View Slide

28. • UI͸Ͱ͖Δ͚ͩࣅͨΑ͏ͳݟͨ໨ʹͳͬͨ΄
    ͏͕͍͍
    • ϏδωεϩδοΫ͸౰વಉ͡ڍಈʹͳΒͳ͚
    Ε͹ͳΒͳ͍
    ઌʹยํΛ࡞͔ͬͯΒ
    ΋͏ยํ͕ਅࣅ͢Δͷ͕Ԧಓ
    

    View Slide

29. εϐʔυ࠷༏ઌͷݱ৔Ͱ͸ͦ͏΋͍͔ͳ͍
    • Ϗδωεͱͯ͠εϐʔυΛग़ͦ͏ͱ͢Δͱɺ
    ಉ࣌ਐߦΛ༨ّͳ͘͞ΕΔ͜ͱ΋͋Δ
    

    View Slide

30. υΩϡϝϯςʔγϣϯΛͪΌΜͱ͢Δ
    • ͜Ε΋·ͨԦಓ
    • ઃܭॻʢͱ͍͏͔ࢦࣔॻʣʹे෼ͳ࣌ؒΛׂ
    ͘͜ͱ͕Ͱ͖Ε͹ɺͦΕΛݩʹ্ͯ͠ख͘ಉ
    ࣌ਐߦͰ͖Δ͔΋͠Εͳ͍
    

    View Slide

31. εϐʔυ࠷༏ઌͷݱ৔Ͱ͸ͦ͏΋͍͔ͳ͍(࠶)
    • Ϗδωεͱͯ͠εϐʔυΛग़ͦ͏ͱ͢Δͱɺ
    ೲظ͕ΧπΧπͰେ࿮͕ܾ·ͬͨޙ͸૸Γͳ
    ͕ΒܾΊΔΈ͍ͨͳঢ়گʹͳΓ͕ͪ
    

    View Slide

32. • ૸Γͳ͕Β࢓༷ΛܾΊ͍ͯ͘ͱɺͳΜ͔ͩΜͩ
    ͰͣΕΔ
    • ܧଓ։ൃͷϑΣʔζʹೖΔͱɺػೳվमͷε
    ϐʔυײ࣍ୈͰಉ͡໰୊͕ى͜Γଓ͚Δ
    • ίϛϡχέʔγϣϯίετΛڐ༰Ͱ͖Δࣄۀɾ
    ૊৫Ͱͳ͍ͱɺԦಓͰղܾ͢Δ͜ͱ͸೉ͦ͠͏
    ʮಉ͡΋ͷΛ2ͭ࡞Δʯ͸೉͍͠
    

    View Slide

33. ͦ΋ͦ΋ਓ਺͕ݶΒΕ͍ͯΔ
    • ஍ํɺͪΐͬͱ΍ͦͬͱͷࢪࡦͰ͸ਓ͕ू·Βͳ͍
    • ɹͷΤϯδχΞ͕5ਓ͍Δͷ͸ଟ͍͚Ͳɺͦͷ͏ͪ3ਓ͸ฐ
    ࣾͰҭͬͨͷͰɺத్࠾༻্͕ख͍͍ͬͯ͘ΔΘ͚Ͱ͸ͳ͍
    • ɹͷΤϯδχΞ࠾༻͸ҰਐҰୀ
    • ΞάϦςοΫͰ͸ࡳଋͰԥͬͯਓࡐूΊͯ୹ظܾઓʂ্͕ख
    ͘ޮ͘Ϗδωε΋·ͩൃ۷͞Ε͍ͯͳ͍ʢΑ͘ੜ͖ͯΔͳզʑ……ʣ
    • গͳ͍ਓ਺ͷ··Ͱ΋ϏδωεʹߩݙͰ͖Δࢪࡦ͕΄͍͠
    

    View Slide

34. ࣄۀͱ૊৫ʹࠜͨ͟͠՝୊
    • ɹͱɹʹࣅͨΑ͏ͳݟͨ໨ͱಉ͡ڍಈΛ༩͑
    ͍ͨ
    • ಉ࣌ਐߦͷࡍͷखؒΛݮΒ͍ͨ͠
    • ख͕޿͕Γ͕ͪͳࣄۀྖҬʹɺগͳ͍ϝϯ
    όʔͰ΋ίϛοτ͍ͨ͠
    

    View Slide

35. 3. ࢲͨͪͷٕज़બ୒
    

    View Slide

36. ͦͯ͠X-Plat΁
    • ՝୊Λٕज़Ͱղܾ͢ΔͨΊɺɹͱɹͰιʔε
    ίʔυΛڞ௨Խ͢ΔઓུΛ໨ࢦ࢝͠Ίͨ
    • ͍ΘΏΔΫϩεϓϥοτϑΥʔϜʢX-Platʣͳ
    ΞϓϦ։ൃͷख๏
    

    View Slide

37. ຊ৺ͱͯ͠͸
    • Kotlin΍SwiftͰͷ։ൃΛத৺ʹஔ͖͍͕ͨɺ
    ݱࡏͷࣄۀن໛ͱ૊৫ن໛ͷόϥϯεͰ͸೉
    ͍͠
    • ʮɹͱɹͷΤϯδχΞ͕10ਓ͍ͣͭͨΒX-
    Plat͸΍Βͳ͍͍͕ͯ͘ɺ࣮ࡍʹ͸͍ͳ͍ͷͰ
    X-PlatΛ΍Δʯͱ͍͏ཱ৔
    

    View Slide

38. ʲ࠶ܝʳ
    ࣗ෼ͨͪͷࣄۀ΍૊৫ͷ
    ՝୊Λղܾ͢Δʹ͸
    ͲΜͳπʔϧ͕߹͏ͷ͔Λ
    ߟ͑Δͷ͕ॏཁ
    

    View Slide

39. Cordovaͷ࣌୅
    ʢ2015ʙʣ
    

    View Slide

40. Cordovaͷ࣌୅
    • 2015೥ʹCordova + React JSͰΞάϦϊʔτͷ
    iOSΞϓϦΛ։ൃ
    • WebViewΛCordovaͰύοέʔδϯάͨ͠ϞόΠ
    ϧWebΞϓϦ
    • Material DesignʹدͤΔ͜ͱͰطଘͷAndroidΞ
    ϓϦΛݟͨ໨Λ͚ۙͮͨ
    

    View Slide

41. ͳͥWebViewͰReactͩͬͨͷ͔
    • WebViewͷύϑΥʔϚϯε্͕͕͖͍ͬͯͯͨ࣌୅ͩͬͨ
    • ͪΐ͏Ͳࣾ಺ͷϑϩϯτΤϯυνʔϜ͕ReactͰσεΫτοϓ൛ͷΞ
    άϦϊʔτΛϦχϡʔΞϧ͍ͯͨ͠
    • ࣾ಺Ͱѻ͏ςΫϊϩδʹڞ௨ͷ෦෼͕ੜ·ΕΕ͹ɺ෦ॺ಺ͷίϛϡ
    χέʔγϣϯ͕ԁ׈ʹͳΔ͔ͳɺͱ͍͏໨࿦ݟ΋͋ͬͨ
    • ͋ͱJavaScriptͳΒ͜Ε͔Β੝Γ্͕Γͦ͏͔ͩΒɺνʔϜϝϯ
    όʔͷΩϟϦΞϓϥϯͱͯ͠΋௵͕͠ޮ͍͍͍͔ͯͳͱʢwhy not
    swiftʣ
    

    View Slide

42. Ϛοϓ͚ͩ͸Objective-C࣮૷
    • ೶஍؅ཧʹGoogleϚοϓΛ࢖͍ͬͯΔ
    • ϒϥ΢β൛ͷGoogleϚοϓ͸ૢ࡞ੑ͕ෆຬ
    ͩͬͨͷͰɺϓϥάΠϯͰରԠ
    • WebViewͷޙΖʹϚοϓΛஔ͍ͯɺWebView
    ʹ݀Λ։͚Δͱ͍͏͍࣮͢͝૷
    

    View Slide

43. ຊ౰͸Android൛΋͜Εʹஔ͖
    ׵͑Δͭ΋Γ͕ͩͬͨɺ
    React NativeΛݟ͚ͭͯ͠
    ·ͬͨͷͰ಴࠳
    

    View Slide

44. React Nativeͱͷग़ձ͍
    ʢ2016ʙʣ
    

    View Slide

45. React Nativeͱͷग़ձ͍
    • ొ৔͙͔ͨ͢͠Β໊લ͸஌ͬͯͨʢඑଣ෺ͩ
    ͱࢥͬͯͨʣ
    • 2015೥຤͔Β2016೥தʹɺιʔείʔυΛಡ
    ΜͩΓϓϩτλΠϐϯάͰͷࢼݧಋೖΛ࣮ࢪ
    • 2017೥͔Β͸ࣾ಺ͷখ͍͞ΞϓϦΛத৺ʹຊ
    ֨ಋೖ͍ͯ͠Δ
    

    View Slide

46. React Nativeͱ͸
    • 2015೥ʹFacebook͔Βൃද͞ΕͨɺϞόΠϧ
    ΞϓϦΛ։ൃ͢ΔͨΊͷπʔϧ
    • ϞμϯͳJavaScriptݴޠͱReactϥΠϒϥϦͰ
    ॻ͍ͨGUIΞϓϦ͕ɺAndroidͱiOSͰಈ͘
    

    View Slide

47. import React from 'react';
    import { View, Text, StyleSheet } from 'react-native';
    // HTMLͷΑ͏ͳϚʔΫΞοϓͰϨΠΞ΢τͷߏ଄Λఆٛ͢Δ
    const App = (props) => (
    
    Hello, React Native!
    
    );
    export default App;
    // CSSϥΠΫͳࢦఆͰελΠϧΛఆٛ͢Δ
    const styles = StyleSheet.create({
    container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    },
    });
    

    View Slide

48. View Slide

49. ReactΛ͓ܰ͘͞Β͍
    • HTMLͬΆ͍΋ͷΛJavaScriptͷதʹॻ͍͓ͯ͘
    ͱɺޮ཰తʹϒϥ΢βͷදࣔΛߋ৽ͯ͘͠ΕΔ΍ͭ
    • WebΞϓϦΛ࡞Δͱ͖ʹΑ͘࢖ΘΕ͍ͯΔ
    • ϓϩάϥϛϯάݴޠͷதͰɺએݴతͳߏจͰUIΛ
    ఆٛ͢Δɺͱ͍͏ੈք؍͕Θ͔Γ΍͍͢ͱ͍͏͜
    ͱͰ޿·ͬͨ
    

    View Slide

50. ReactͷӨڹ͸ϞόΠϧʹ΋
    • Swift UI
    • Jetpack Composeʢ։ൃதʣ
    

    View Slide

51. React Native͸
    ϒϥ΢βͳͷʁ
    

    View Slide

52. ҧ͍·͢ɻ
    • React Nativeʹ͸HTML΍CSS͕ొ৔͠ͳ͍
    • JavaScript಺ʹఆٛ͞ΕͨϨΠΞ΢τΛɺ֤ϓ
    ϥοτϑΥʔϜͷUIίϯϙʔωϯτʹ຋༁ͯ͠ඳ
    ը͢Δ
    • ֤ϓϥοτϑΥʔϜͷຊདྷͷUIΛʮωΠςΟϒ
    UIʯͱݺͿจԽ͔ΒʮReact Nativeʯʹͳͬͨ
    

    View Slide

53. ຋༁ͷྫ
    

    View Slide

54. React Nativeͷ2ͭͷϨΠϠʔ
    • UIϥΠϒϥϦ૚
    • ReactϥΠϒϥϦ޲͚ͷλάΛఏڙ͢ΔJavaScriptϥΠϒϥϦ
    • ϛυϧ΢ΣΞ૚
    • JavaScriptͷ࣮ߦ؀ڥΛ༻ҙ
    • JavaScriptଆͰUIϥΠϒϥϦ͕ར༻͞Εͨࡍʹɺ֤ϓϥοτ
    ϑΥʔϜͷUIʹ຋༁͢ΔɺC++ͱʢJava | Objective-CʣͰ࡞Β
    Εͨϛυϧ΢ΣΞ
    

    View Slide

55. ϛυϧ΢ΣΞ૚ͷࠩ͠ସ͑Ͱ޿͕Δੈք
    • iOSʢofficialʣ
    • Androidʢofficialʣ
    • for Windowsʢthird party / Microsoftʣ
    • for Webʢthird party, ͨͩ͠࡞ऀ͸ReactνʔϜೖΓʣ
    • for macOSʢthird partyʣ
    

    View Slide

56. ಋೖࣄྫ΋ଓʑ
    • InstagramʢFBͳͷͰʣ
    • DiscordʢiOS onlyʣ
    • Office 365ʢ΄Μͱ͔ʁʣ
    • Twitter for WebʢReact Native for Webʣ
    https://blog.nkzn.info/entry/2019/04/16/163743
    ΄ΜͱΒ͍͠Αʁ
    

    View Slide

57. IUUQTUXJUUFSDPNEBO@BCSBNPWTUBUVT
    

    View Slide

58. ୅දతͳίϯϙʔωϯτ
    7JFX ϨΠΞ΢τͷجຊ୯Ґ
    5FYU ςΩετΛදࣔɾ૷০͢Δ
    "DUJWJUZ*OEJDBUPS ॲཧ଴ͪΛද͢Πϯδέʔλʔ
    'MBU-JTU ഑ྻσʔλΛলϝϞϦͰදࣔ
    4DSPMM7JFX
    ಺ଆͷίϯςϯπ͕ը໘Λ͸Έग़ͨΒ
    εΫϩʔϧͤ͞Δ
    3FGSFTI$POUSPM 4DSPMM7JFXʹʮҾͬுͬͯߋ৽ʯΛ෇༩͢Δ
    5PVDIBCMF0QBDJUZ
    ͋ΒΏΔϏϡʔʹλοϓΠϕϯτͱϑΟʔυό
    οΫΛ࣋ͨͤΔ
    

    View Slide

59. ΄ͲΑཻ͍౓
    • GUIΞϓϦέʔγϣϯͷߏ੒ཁૉͱͯ͠ྑ͍
    • ͜ΕΛϒϥ΢βͰ࢖͍ͨͯ͘
    React Native for Web͕ੜ·Εͨ
    • ϒϩάʹ·ͱΊͨͷͰಡΜͰ
    • React NativeΛWebʹ࣋ͬͯ͘Δ͜ͱͷҙຯ
    https://blog.nkzn.info/entry/2018/05/29/210030
    

    View Slide

60. ΋ͬͱஸೡʹ஌Γ͍ͨ৔߹͸
    • CodeZineͰෆఆظ࿈ࡌͯ͠ΔͷͰಡΜͰ͘
    Εʂ https://codezine.jp/article/corner/772
    • ୈ1ճ͕ࠓͷ࿩ͷ΋ͬͱஸೡͳ΍ͭ
    

    View Slide

61. React Nativeͷ͍͍ͱ͜Ζ
    

    View Slide

62. JavaScriptΞϓϦ։ൃͷ؍఺
    • ϥϯλΠϜ͕WebKitͷJavaScriptCore
    • JS to JSίϯύΠϥͷBabel͕૊Έࠐ·Ε͓ͯΓɺϞμϯͳ
    JavaScriptจ๏Λ࢖༻Ͱ͖Δ
    • TypeScriptͰܕΛ෇͚Ε͹େن໛։ൃʹ΋ରԠͰ͖Δ
    • FlexboxΛ࢖ͬͯϨΠΞ΢τ͕૊ΊΔ
    • جఈίϯϙʔωϯτʹ͸༨ܭͳελΠϧ͕͍͍ͭͯͳ͍ͷͰɺಠ
    ࣗσβΠϯΛ࡞Γ͍ͨͱ͖ʹ૊Έཱͯ΍͍͢
    

    View Slide

63. ϞόΠϧΞϓϦ։ൃͷ؍఺
    • ɹ΍ɹͷϏϧυจԽʹରͯ͠੣࣮Ͱຐ๏͕গͳ͍
    • Java΍Objective-CͰϓϥάΠϯΛॻ͘৔߹͸ɺɹ΍ɹͷ
    ΤϯδχΞͰ͋Ε͹؆୯ʹॻ͖ํΛ֮͑ΒΕΔఔ౓ʹૉ௚
    • Gradle΍XcodeΛ࢖͍׳Ε͍ͯΔΤϯδχΞͳΒ༰қʹΧ
    ελϚΠζͰ͖Δ
    • GoogleϚοϓͷΑ͏ͳෳࡶͳදࣔʹಛԽͨ͠ϥΠϒϥϦ
    ΋औΓࠐΈ΍͍͢
    

    View Slide

64. ਓࡐӡ༻ͷ؍఺
    • JavaScriptͱReactͱ͍͏ڞ௨߲ʹΑΓɺϑϩϯτ
    ΤϯυͱReact Native͸͋Δఔ౓ਓࡐΛڞ༗Ͱ͖Δ
    • APIͷҧ͍Λ৐Γӽ͑Δ·Ͱʹ͸׳Ε͕ඞཁ
    • ݴޠͷҧ͍͕গͳ͍ͷͰڭҭίετ͕ߴ͘ͳ͍
    • εʔύʔϚϯͰͳͯ͘΋͍͚Δͷ͕͍͍
    

    View Slide

65. React NativeͷͭΒ͍ͱ͜Ζ
    

    View Slide

66. JavaScriptΞϓϦ։ൃͷ؍఺
    • ελΠϧγεςϜ͕CSSͷΑ͏ͰCSSͰ͸ͳ͍
    ʢͪΐͬͱɹɹͷ౎߹͕ࠞͬͯ͟ΔʣͷͰɺ
    JavaScriptΤϯδχΞ͕ॳΊͯ৮Δͱށ࿭͏
    

    View Slide

67. import React from 'react';
    import { View, Text, StyleSheet } from 'react-native';
    // HTMLͷΑ͏ͳϚʔΫΞοϓͰϨΠΞ΢τͷߏ଄Λఆٛ͢Δ
    const App = (props) => (
    
    Hello, React Native!
    
    );
    export default App;
    // CSSϥΠΫͳࢦఆͰελΠϧΛఆٛ͢Δ
    const styles = StyleSheet.create({
    container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    },
    });
    ←͜Ε
    

    View Slide

68. ΤϥʔΘ͔ΓͮΒ͍໰୊
    • JavaScript༝དྷͱɹɹ༝དྷͷΤϥʔ͕྆ํͱ΋
    ग़ΔͷͰɺΤϥʔϝοηʔδΛݟͯɺͲͪΒ
    ͷΤϥʔͳͷ͔൑அ͠ͳ͍ͱ͍͚ͳ͍
    

    View Slide

69. View Slide

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
    

    View Slide

71. ϦϦʔεͷඞཁ஌ࣝྔ͕΍͹͍
    • ϦϦʔεϏϧυΛߦ͏ʹ͸3ͭͷจԽݍͷʮ;ͭ͏ʯΛ
    ஌͍ͬͯΔඞཁ͕͋Δ
    • NPM / Babel
    • Android Studio / Gradle
    • Xcode / CocoaPods
    • ͦΕͧΕͰݟͨΒಛघͳ஌ࣝͱ͍͏΄ͲͰ͸ͳ͍ͷ͕ٹ͍
    

    View Slide

72. React NativeΛͲ͏ଊ͑Δ͔
    

    View Slide

73. ϑϩϯτΤϯυग़਎ऀʹͱͬͯ
    ͷReact Native
    • ΊͪΌͪ͘ΌΫηͷڧ͍ϒϥ΢β
    • ɹɹΤϯδχΞʹཔΉͱϒϥ΢βଆͷڍಈΛ
    ΧελϚΠζͯ͠΋Β͑Δ
    • Javaͱ͔Objective-CΛ֮͑Δͱࣗ෼Ͱ΋Χε
    λϚΠζͰ͖Δ
    

    View Slide

74. ϞόΠϧΞϓϦग़਎ऀʹͱͬͯ
    ͷReact Native
    • JavaScriptͱReactͱ͔͍͏DSLͰɺUIͷঢ়ଶ
    ؅ཧΛߦ͏͜ͱ͕Ͱ͖ΔUIϥΠϒϥϦ
    • Swift UI΍Jetpack Compose͕ීٴ͍ͯ͘͠
    ͱɺͦ͜·Ͱڧ͍ΞυόϯςʔδͰ͸ͳ͘
    ͳ͍͖ͬͯͦ͏
    

    View Slide

75. ͳͥ˓˓Ͱ͸ͳ͔ͬͨͷ͔
    

    View Slide

76. ͳͥ˓˓Ͱ͸ͳ͔ͬͨͷ͔
    • ιʔείʔυڞ௨Խ͚ͩΛߟ͑ΔͱɺFlutterͰ΋IonicͰ΋
    XamarinͰ΋Kotlin MPPͰ΋͍͍ͱࢥ͏
    • ࢲͨͪ͸೶஍؅ཧͷจ຺ͰϚοϓΛଟ༻͢ΔͷͰɺωΠςΟ
    ϒUIΛૉ௚ʹѻ͑Δ΋ͷΛબͿඞཁ͕͋ͬͨ
    • ࣾ಺ͷਓࡐྲྀಈੑ΍ɺϝϯόʔͷΩϟϦΞύεͱͯ͠௵͕͠
    ޮ͔͘Ͳ͏͔ͰJavaScriptʹدͤͨ෦෼͸͋Δ
    • Cordova࣌୅ͷ͓͔͛ͰReactͷܦݧ͕͋ͬͨͷ͸େ͖͍
    

    View Slide

77. ͓·͚
    ReactͱϚοϓ͸૬ੑ͕͍͍
    

    View Slide

78. import React from 'react';
    import MapView, { Marker } from 'react-native-maps';
    export function MyMapView(props) {
    return (
    region={props.region}
    onRegionChange={props.onRegionChange}
    >
    {props.markers.map(marker => (
    coordinate={marker.latlng}
    title={marker.title}
    description={marker.description}
    />
    ))}
    
    );
    };
    Ґஔ৘ใͷArrayΛmapͰMarkerʹม׵
    

    View Slide

79. 4. ஍ํITاۀͷઓུΛ޿͛Δ
    ٕज़બ୒ͱͯ͠ͷ
    React Native
    

    View Slide

80. ஍ํITاۀͷࣄۀͱ૊৫ͷ՝୊ʁ
    • BtoB(toB)͕ଟΊ
    • ɹɹ͸྆ํ΍Βͳ͍ͱ͍͚ͳ͍
    • ஍ํ͸ट౎ݍʹྠΛ͔͚ͯਓࡐྲྀಈੑ͕গͳ͍
    • ࠓ͍ΔϝϯόʔͰͳΜͱ͔͢Δํ޲ʹدͤͨ΄
    ͏͕Αͦ͞͏
    

    View Slide

81. ͜Ε͸X-Platͷग़൪͕
    ͋ΔͷͰ͸
    

    View Slide

82. React NativeΛѻ͏νʔϜʹ
    ඞཁͳϩʔϧ
    • JavaScript/TypeScript + ReactʹΑΔΞϓϦ։ൃʹࢀՃͰ͖Δϑ
    ϩϯτΤϯυΤϯδχΞʢͨ͘͞Μʣ
    • NPMʹΑΔΞϓϦͷӡ༻͕Ͱ͖ΔΤϯδχΞʢ࠷௿1໊ʣ
    • Xcode + CocoaPodsʹΑΔiOSΞϓϦͷӡ༻͕Ͱ͖ΔiOSΤϯδ
    χΞʢ࠷௿1໊ʣ
    • GradleʹΑΔAndroidΞϓϦͷӡ༻͕Ͱ͖ΔAndroidΤϯδχΞ
    ʢ࠷௿1໊ʣ
    

    View Slide

83. ͍Δͱخ͍͠ϩʔϧ
    • iOS SDKͰiOSΞϓϦ͕ॻ͚ΔiOSΤϯδχΞ
    ʢ೚ҙɾΧελϚΠζཁһʣ
    • Android SDKͰAndroidΞϓϦ͕ॻ͚Δ
    AndroidΤϯδχΞʢ೚ҙɾΧελϚΠζཁ
    һʣ
    

    View Slide

84. ॏް͗͢Ͱ͸ʂʁ
    • ͏Μʢਅإʣ
    • ͦΕͧΕผͷਓΛ༻ҙ͠Α͏ͱࢥͬͨΒɺਓ
    ࡐྲྀಈੑ͕ߴͯ͘΋ׂͱແ஡ͳͷͰ͸ͱ͍͏
    ؾ࣋ͪ
    

    View Slide

85. ͋Δఔ౓͸݉೚Ͱߟ͑Δ
    

    View Slide

86. ϑϩϯτΤϯυΤϯδχΞ
    • UI࣮૷ͷ୲౰ͱɺNPMӡ༻͸ͬͪ͜ʹ೚ͤΔ
    • ϒϥ΢β޲͚ͷ։ൃͱεΩϧηοτ͕͍ۙͷͰ
    ௵͕͠ޮ͘
    • ։ൃ෦ୂͳͷͰɺ͋Δఔ౓·Ͱ͸ਓ਺͕͍ͨํ
    ͕։ൃεϐʔυ্͕͕Δ
    • ༨ஊ͚ͩͲ։ൃϚγϯ͸ڧ͍ͷʹ͍ͯͩ͘͠͞
    

    View Slide

87. View Slide

88. ϞόΠϧӡ༻ΤϯδχΞ
    • ϏϧυͱϦϦʔεΛ୲౰
    • ɹɹͷϓϩʹͳΔਓΛ1ਓͳ͍͠1ਓͣͭҭͯΔ
    • ϑϩϯτΤϯυ / NPMͷ౎߹΋͋Δఔ౓͸஌ͬ
    ͍ͯΔඞཁ͕͋Δ
    • CocoaPods΍Fastlaneͷ౎߹ͰRuby΋
    

    View Slide

89. ث༻ͳਓΛ୳ͤ
    • ӡ༻ϩʔϧ͸εʔύʔϚϯͳͷͰɺࣾ಺ͷث༻
    ͳਓΛׂΓ౰ͯΔ͜ͱʹͳΔ
    • ֤ࣾ1ਓ͸ͦ͏͍͏ਓ͍ΔͰ͠ΐʢࠜڌͳ͠ʣ
    • ։ൃͷཁʹͳΔͷͰɺް۰ͯ͠ઈରʹख์͠
    ͯ͸ͳΒͳ͍
    

    View Slide

90. ͢Δͱ͜͏͍͏૊৫͕Ͱ͖Δ
    ϞόΠϧӡ༻νʔϜ
    ։ൃνʔϜA ։ൃνʔϜB ։ൃνʔϜC
    ؀ڥߏஙࢧԉɾϓϥάΠϯ։ൃࢧԉ
    ث༻ͳਓ ث༻ͳਓ
    

    View Slide

91. ث༻ͳਓʹ׆༂ͯ͠΋Β͏
    • ϞόΠϧΞϓϦ։ൃɺث༻ͳਓͷ࿹ྗΛͪΌΜͱ
    ׆͔ͤͳ͍έʔε͕͋Δ
    • ࣮͸ɹ΋ɹ΋ɹ΋ͦΕͳΓʹͰ͖ΔɺΈ͍ͨͳث
    ༻ͳਓ͕͍ͯ΋ɺ1ਓͷਓؒ͸1ਓ͔͍͠ͳ͍ͷͰ
    ஞ࣮࣍ߦ͔͠Ͱ͖ͳ͍
    • ͦ͏͍ͬͨਓͨͪʹث༻͞Λ࠷େݶʹൃشͯ͠΋
    Β͏͜ͱͰฒྻੑΛ্͛Δͱ͍͏ઓུ͕औΕΔ
    

    View Slide

92. ؆୯ʹͰ͖ΔΘ͚Ͱ͸ͳ͍
    • πʔϧΛ࢖͑͹؀ڥ͕खʹೖΔΘ͚Ͱ͸ͳ͍
    • ث༻ͳਓ͕ຊདྷ͍࣋ͬͯΔ࿹ྗΛ࠷େݶൃش
    Ͱ͖Δ؀ڥΛ࡞ΕΔΑɺͱ͍͏࿩
    • ࿹ྗ͕͋Δث༻ͳਓΛࣾ಺ʹଘࡏͤ͞Δͷ
    ͸ɺڭҭͱ࠾༻ͷ౒ྗ
    

    View Slide

93. ࠾༻Ͱղܾ͢Δ͜ͱ͸……
    • ʮωΠςΟϒϨΠϠʔͷӡ༻Λ͢Δਓʯͱ͍͏ϩʔϧ͕ͳ͍ͱ੒Γཱ
    ͨͳ͍࡞ΓΛ͍ͯ͠ΔͷͰɺͰ͖ͨΒ࠾༻ͷखஈ΋༻ҙ͍ͨ͠
    • ݱࡏSwift΍KotlinͰΰϦΰϦͱΞϓϦΛॻ͍͍ͯΔਓͷ΄͏͕ɺϏϧυ
    ΍ϦϦʔεʹؔ͢Δܦݧ΋๛෋ͳ͸͕ͣͩɺʮͦͷεΩϧΛओʹӡ༻ʹ
    ׆͔ͯ͠΄͍͠ʯͱ͍͏ٻਓʹདྷΔͷ͔……ʁ
    • ݄˓࣌ؒΈ͍ͨͳܖ໿Ͱɺ෭ۀͰٕज़ސ໰ʹೖͬͯ΋Β͏ͱ͍͏ख΋͋
    Δ͔΋͠Εͳ͍
    • ɹɹɹ੎ͷʮ͜Ε͔ΒͷΩϟϦΞύεͲ͏͠Α͏ʯͷબ୒ࢶͷͻͱͭʹ
    ͳΔͱɺUIJλʔϯ͕૿͑Δ͔΋ʢໝ૝ʣ
    

    View Slide

94. ·ͱΊ
    

    View Slide

95. ·ͱΊ
    • ࣗ෼ͨͪͷࣄۀ΍૊৫ͷ՝୊Λղܾ͢Δʹ͸ͲΜͳπʔϧ͕߹͏ͷ͔
    Λߟ͑Δͷ͕ॏཁ
    • ਓࡐྲྀಈੑ͕௿͍஍ํITاۀͰ͸ɺগͳ͍ਓ਺Ͱɺ௵͠ͷޮ͘ݴޠ
    Ͱɺଟ͘ͷΞϓϦΛ࡞ΕΔπʔϧΛબͿ͜ͱʹɺͦΕͳΓʹՁ஋͕͋
    Δ͸ͣ
    • ث༻ͳਓͷ࿹ྗ͕ͳ͍ͱ੒Γཱͨͳ͍ͷͰɺ·ͣ͸ث༻ͳਓΛʢ΋ͪ
    ΖΜߴڅͰʣݟ͚ͭͨΓ࠾༻ͨ͠Γ͠·͠ΐ͏
    • ࿹ྗΛ׆͔͢બ୒ࢶͷͻͱͭͱͯ͠ɺReact NativeΛݕ౼ͯ͠Έͯ͸
    ͍͔͕Ͱ͠ΐ͏͔
    

    View Slide

96. We are hiring!
    • ΢ΥʔλʔηϧͰ͸Ұॹʹʮ೔ຊͷ೶ۀɾ৯
    Λ”৘ใ”Ͱࢧ͑Δ࢓ࣄʯʹऔΓ૊ΜͰ͘ΕΔΤ
    ϯδχΞΛืू͍ͯ͠·͢
    • ๻ͱҰॹʹࣄۀͱ૊৫ͷ՝୊ʹ೰ΜͰ͘Εʂ
    • https://water-cell.jp/recruit/
    

    View Slide

97. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
    

    View Slide

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
    

    View Slide