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

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

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

9a6e4623f9314c5e1fc99635ac9617ed?s=128

Yukiya Nakagawa

October 11, 2019
Tweet

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', }, });
  48. None
  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༝དྷͱɹɹ༝དྷͷΤϥʔ͕྆ํͱ΋ ग़ΔͷͰɺΤϥʔϝοηʔδΛݟͯɺͲͪΒ ͷΤϥʔͳͷ͔൑அ͠ͳ͍ͱ͍͚ͳ͍

  69. None
  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ӡ༻͸ͬͪ͜ʹ೚ͤΔ • ϒϥ΢β޲͚ͷ։ൃͱεΩϧηοτ͕͍ۙͷͰ ௵͕͠ޮ͘ • ։ൃ෦ୂͳͷͰɺ͋Δఔ౓·Ͱ͸ਓ਺͕͍ͨํ ͕։ൃεϐʔυ্͕͕Δ •

    ༨ஊ͚ͩͲ։ൃϚγϯ͸ڧ͍ͷʹ͍ͯͩ͘͠͞
  87. None
  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