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

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

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

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

Yukiya Nakagawa

October 11, 2019
Tweet

More Decks by Yukiya Nakagawa

Other Decks in Technology

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