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

by Yukiya Nakagawa

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

λʔήοτ • ஍ํͷITاۀͷਓ • ஍Ҭʹࠜࠩͨ͠ࣄۀΛߦ͏ITاۀͷਓ • ݶΒΕͨ৚݅ͷதͰਫ਼Ұഋ੒ՌΛग़ͦ͏ͱ ໛ࡧ͢Δਓ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

1. ٕज़બ୒ͱࢲͨͪ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

3. ࢲͨͪͷٕज़બ୒

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Cordovaͷ࣌୅ ʢ2015ʙʣ

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

React Nativeͱͷग़ձ͍ ʢ2016ʙʣ

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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', }, });

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

React Native͸ ϒϥ΢βͳͷʁ

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

຋༁ͷྫ

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

IUUQTUXJUUFSDPNEBO@BCSBNPWTUBUVT

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

React Nativeͷ͍͍ͱ͜Ζ

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

React NativeͷͭΒ͍ͱ͜Ζ

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

࣮ࡍʹ͋ͬͨྫ • This app has been build with an incorrect conﬁguration. Please conﬁgure your build for VectorDrawableCompat. • ελοΫτϨʔεతʹ͸ˣ͕ݪҼ • ReactSwitchManager.java • SwitchCompat.java • Android 4.4ͰVectorDrawableΛಈ͔ͦ͏ͱͯ͠ࢮΜͩΒ͍͠ • ͳ͓ػछґଘόάͩͬͨ໛༷ʢCompat͸έΞ͞ΕͯΔ͸ͣͰ͢͠Ͷ https://qiita.com/Nkzn/items/79477933c1d8762961be

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

React NativeΛͲ͏ଊ͑Δ͔

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

͓·͚ ReactͱϚοϓ͸૬ੑ͕͍͍

Slide 78

Slide 78 text

import React from 'react'; import MapView, { Marker } from 'react-native-maps'; export function MyMapView(props) { return ( {props.markers.map(marker => ( ))} ); }; Ґஔ৘ใͷArrayΛmapͰMarkerʹม׵

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

͜Ε͸X-Platͷग़൪͕ ͋ΔͷͰ͸

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

͋Δఔ౓͸݉೚Ͱߟ͑Δ

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

·ͱΊ

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

Slide 98

Slide 98 text

ࢀߟจݙ • ͳͥɺ૊৫ͷͭ͘Γͱιϑτ΢ΣΞΞʔΩςΫνϟ͸ࣅͯ͠·͏ͷ͔ - 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