Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
地方IT企業の戦略を広げる 技術選択としてのReact Native
Search
Yukiya Nakagawa
October 11, 2019
Technology
23
21k
地方IT企業の戦略を広げる 技術選択としてのReact Native
MOBILE CREW NIIGATA 2019で喋りました
https://www.mobilecrew.jp/
Yukiya Nakagawa
October 11, 2019
Tweet
Share
More Decks by Yukiya Nakagawa
See All by Yukiya Nakagawa
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
22
13k
パスキーについて今日時点の僕が知っていること / What I Know About Passkeys as of Today
nkzn
8
2.2k
青い空の歩き方 / Flying in the bluesky
nkzn
1
140
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
39
13k
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
19
5.3k
純粋培養フルリモート開発組織のワーク&ライフスタイル / monicle full remote style
nkzn
6
3k
資産運用を対面で相談するサービスでITエンジニアがやることあるの? / derta-gig-04
nkzn
0
1.3k
React Nativeエコシステム概論 / react-native ecosystem
nkzn
1
800
React Native for Webのこれまでから読み解くReact GUIのこれから
nkzn
7
6k
Other Decks in Technology
See All in Technology
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
100
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
2
2.1k
Azure犬駆動開発の記録/GlobalAzureFukuoka2024_20240420
nina01
1
210
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
130
生産性向上チームの紹介
cybozuinsideout
PRO
1
870
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
650
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
コンテナセキュリティの基本と脅威への対策
kyohmizu
3
760
Databricks における 『MLOps』
databricksjapan
2
170
Terraformあれやこれ/terraform-this-and-that
emiki
8
1.4k
web-application-security
matsuihidetoshi
0
160
Featured
See All Featured
Designing with Data
zakiwarfel
96
4.8k
Into the Great Unknown - MozCon
thekraken
10
990
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Teambox: Starting and Learning
jrom
128
8.4k
Design by the Numbers
sachag
274
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
2
1.3k
Visualization
eitanlees
136
14k
Producing Creativity
orderedlist
PRO
337
39k
Clear Off the Table
cherdarchuk
84
310k
Bash Introduction
62gerente
604
210k
Agile that works and the tools we love
rasmusluckow
325
20k
What the flash - Photography Introduction
edds
64
11k
Transcript
ํITاۀͷઓུΛ͛Δ ٕज़બͱͯ͠ͷ React Native Yukiya Nakagawa @ WaterCell Inc. 2019.10.11
MOBILE CREW NIIGATA 2019
ࣗݾհ • த ࠸ / Nkzn / ͳ͔͟Μ • ্ӽࢢग़
• ϞόΠϧΤϯδχΞ ʢReact Native, Android, PWAʣ • ೋࣇͷͰ࠺ͷ
ຊ͕ධͰ͢ • ͨͬͨ1Ͱجຊ͕ʹ͘ʂ AndroidΞϓϦ։ൃೖ • ٕज़ධࣾ • 224ϖʔδ / 2,280ԁʴ੫
• https://gihyo.jp/book/ 2018/978-4-297-10004-9 ࠓճɺAndroidΤϯδχΞΒ͍͚ͩ͜͜͠
• Υʔλʔηϧגࣜձࣾ https://water-cell.jp • 2011ۀͷ৽ׁࢢͷϕϯνϟʔاۀ • ΄΅ઐۀͰۀؔ࿈ICTγεςϜΛ։ൃɾӡ༻ • ࣾһ3xਓͰ20ਓ͘Β͍͕ITΤϯδχΞ •
͏ͪϞόΠϧΤϯδχΞ5ਓ΄ͲʢAndroidͱPWAத৺ʣ
ͷʮݟ͑ΔԽʯͰܦӦΛڧԽ͢Δ Ӧɾഓࢧԉπʔϧ ੜ࢈৫ ৫Ҏ্˞ ˞ɹτϥΠΞϧظؒɺٴͼ࣮ূࣄۀͳͲͷར༻ऀΛؚΉ૯ར༻ऀͰ͢ ˔ߤۭࣸਅϕʔεͷࢹ֮తͳะཧ ˔ϞόΠϧ͔Β࡞ۀه ˔ΫϥυγεςϜͰϦΞϧλΠϜʹใڞ༗ ˔๛ͳσʔλੳɾग़ྗػೳ
19.7%
λʔήοτ • ํͷITاۀͷਓ • Ҭʹࠜࠩͨ͠ࣄۀΛߦ͏ITاۀͷਓ • ݶΒΕͨ݅ͷதͰਫ਼ҰഋՌΛग़ͦ͏ͱ ࡧ͢Δਓ
ࠓճ͍͑ͨ͜ͱ • ࢲ͕ͨͪͲΜͳ՝ʹͲΜͳΞϓϩʔνΛબ Μͩͷ͔ • React Native͕ྑ͍ΞϓϩʔνͰ͋ͬͨཧ༝ • ʮํITاۀʯͱ͍͏ڞ௨߲Ͱࢀߟʹͯ͠΄ ͍͠ͱ͜Ζ
Agenda 1. ٕज़બͱࢲͨͪ 2. ࢲͨͪͷ৫ͱࣄۀͷ՝ 3. ࢲͨͪͷٕज़બ 4. ํITاۀͷઓུΛ͛Δٕज़બͱͯ͠ͷ React
Native
1. ٕज़બͱࢲͨͪ
։ൃϓϩδΣΫτͷʮྑ͍ʯͱ • ૣ͘։ൃͰ͖Δ͜ͱ • ݎ࿚Ͱ͋Δ͜ͱ • কདྷͷϝϯςφϯείετ͕͍͜ͱ • ਫ਼ີʹ͕ݟੵΕΔ͜ͱ •
গͳ͍ਓͰଟ͘ͷ։ൃ͕Ͱ͖Δ͜ͱ • ଟ͘ͷਓͰ։ൃͯ͠ഁ͠ͳ͍͜ͱ • ֶशίετ͕͘ɺ৽نϝϯόʔΛऔΓೖΕ͍͢͜ͱ
ʮྑ͍ʯ།ҰͷՁ؍Ͱͳ͍ • ʮྑ͞ʯʹ༷ʑͳ؍͕͋Δ • ೲظɾ࣭ɾਓɾεΩϧηοτɾνʔϜ࣏ؒɾ ࣏ࣾɾetc... • ࣄۀ৫ʢνʔϜʣͷಛੑʹΑͬͯɺ༷ʑͳ੍ ݶ͕͔͔͍ͬͯΔ •
੍ݶͷதͰਫ਼Ұഋͷʮྑ͞ʯΛٻΊΔ͜ͱʹͳΔ
ٕज़બ৫ͱࣄۀͷӨڹΛ ड͚Δ • ࢲ͕ͨͪιϑτΣΞ։ൃΛߦ͏ͱ͖ɺ৫ ࣄۀͱແؔͰ͍ΒΕͳ͍
ྫɿίϯΣΠͷ๏ଇ • ʮγεςϜΛઃܭ͢Δ৫ɺͦͷߏΛͦͬ͘Γ ·ͶͨߏͷઃܭΛੜΈग़ͯ͠͠·͏ʯ • γεςϜ։ൃΛߦ͏৫ͷߏͱɺͦͷ৫͕ੜΈ ग़ͨ͠ιϑτΣΞͷߏɺ͋Δఔࣅͯ͠·͏ ͱ͍͏๏ଇ • 3νʔϜ߹ಉͰ1ͭͷΞϓϦΛ৮Δͱ֤νʔϜ༻ͷϞ
δϡʔϧ͕3ͭͰ͖ΔɺΈ͍ͨͳ
πʔϧબͷͰ • ݎ࿚ʹ࡞Γ͍ͨࣄۀͳΒɺνʔϜϝϯόʔͷܦݧ ͕๛ͳɺރΕͨݴޠϑϨʔϜϫʔΫΛ͏ • ϓϩτλΠϐϯάʹલ४උ͕গͳ͙ͯ͘͢ʹ Ռ͕ʹݟ͑Δπʔϧ͕͍͍ • νʔϜϝϯόʔʹSQLΛॻ͚Δਓ͕গͳ͍ͷͰ O/RϚούʔΛಋೖ
ࣗͨͪͷࣄۀ৫ͷ ՝Λղܾ͢Δʹ ͲΜͳπʔϧ͕߹͏ͷ͔Λ ߟ͑Δͷ͕ॏཁ
2. ࢲͨͪͷ৫ͱࣄۀͷ՝
ϞόΠϧνʔϜͷཧԼʹ͋ΔΞϓϦ 2019 • ΞάϦϊʔτ • ͚ࣾഓཧΞϓ Ϧ • ͚ࣾༀ༻ཤྺ ΞϓϦ
• ͚ࣾΠνΰग़ՙ ཧΞϓϦ • ਫཧ • ໘ੵܭࢉ • ڑܭࢉ • ༀݕࡧ AndroidΞϓϦ iOSΞϓϦ WebΞϓϦ/PWA
• େখ֤ϓϥοτϑΥʔϜ߹Θͤͯ14ݸ • ଟ͍Ͱ͢Ͷ
ۀICT͕͍ • ୈҰ࣍࢈ۀଟ͘ͷ࢈ۀͷૅ • खΛ৳ͦ͏ͱࢥ͑ͲΜͳࣄۀͰͰ͖Δ • ͦΜͳʹཉுͬͨͭΓͳ͍ͷʹ͜Μͳঢ় گͰ͢
αʔϏεఏڙऀ๊͕͑Δ໋॓ https://www.kantarworldpanel.com/global/smartphone-os-market-share/
Υʔλʔηϧͱ྆OSରԠʢʙ2015ʣ • ͕1ਓͷϞόΠϧΤϯδχΞͩͬͨͷ ͋ͬͯɺ࠷ॳͷAndroid͚͍ͩͬͯͨ • ࣍ୈͱAndroid/iOSͷ྆ํ͕ٻΊΒΕΔ B2B2BҊ݅ʢB2BࣄۀऀͰͬͯΒ͏Ξϓ Ϧͷ։ൃʣ͕ग़͖ͯͨ
B2B2BҊ݅ͷਐΊํ 2014ࠒ • iOSଆͷଟ͘֎ʹཔΔܗͰ։ൃΛਐΊͨ • ࣾϝϯόʔͰਐΊΔͨΊͷiOSڭҭ͕ؒʹ߹ Θͳ͔ͬͨ • iOSਓࡐͷ࠾༻͋·Γ্ख͘ਐ·ͳ͔ͬͨ •
୯७ʹਓ͕Γͳ͔ͬͨͷ͋Δ
ʮૉʹʯ࡞Δ • ʮૉʹ࡞Ζ͏ʯͱ͍͏ํͰɺAndroidJavaɺ iOSSwiftͰɺͦΕͧΕͷྲّྀʹԊͬͨ࡞ΓํΛͯ͠ ͍ͨ • UI֤OSͷྲّྀʹԊͬͨܗͰɺݟ͕ͨҧͬͯͰ͖ Δ͜ͱ͕ಉ͡ͳΒؾʹ͠ͳ͍ํ • ಉ͡Ϙλϯ͕ϔομʔʹ͋ͬͨΓϑολʔʹ͋ͬͨΓ
͢Δɺ͘Β͍ͷҧ͍
B2B(2B)ͳΒͰͷಛੑʹؾͮ ͘ • ࣾͷϢʔβʔαϙʔτνʔϜB2B2Bͷ ύʔτφʔ͞ΜͱͷରͷதͰɺ AndroidΞϓϦͱiOSΞϓϦͷݟͨΛ Ͱ͖Δ͚ͩಉ͡ʹ͢Δඞཁੑ͕ݟ͖͑ͯͨ
Ϣʔβʔڭҭͷ؍Ͱͷ՝ • ΤϯυϢʔβʔ͕ITγεςϜͷར༻ʹ໌Δ͘ͳ͍߹ɺϚχϡΞϧ ੍࡞ษڧձͷ։࠵ɺࢦಋһͷҭͳͲɺڭҭͷͨΊͷࢪࡦ͕ඞཁ ʹͳͬͯ͘Δ • ɹͱɹͰݟ͍ͨํ͕େ͖͘ҟͳΔͱɺ͜ΕΒͷڭҭ͚ͷࢿ ྉ࡞ͷख͕ؒഒʹͳΔ • αϙʔτͷిޱͰϘλϯΛԡͯ͠Β͏ͱ͖ʹɺҐஔΛը໘ͷ
্ԼࠨӈͰ͑ͨΓ͢Δࡍʹෆศ • ͓٬͞ΜࣗͷεϚʔτϑΥϯ͕ɹͳͷ͔ɹͳͷ͔Θ͔ͬͯͳ͍ ͜ͱ͋Δ
ͳΜͱ͔͍ͨ͠ • ΧελϜϏϡʔΛۦͯ͠·Ͱಉ͡ʹ͢Δඞ ཁͳ͍͕ɺɹ൛ͷը໘ͰϚχϡΞϧΛ࡞ͬ ͯɺલॻ͖ʹʮɹ͍͍ͩͨಉ͡Ͱ͢ʯͱॻ ͍ͯΪϦΪϦͳΜͱ͔ͳΔൣғΛࢦ͢Α ͏ͳ͜ͱ͕Ͱ͖ΔͱΑͦ͞͏ • ɹͱɹ͕ಉ͡ݟͨͰಉ͡ಈ͖Λ͢Δ͜ͱͷ Ձ͕ൃ۷͞Εͨ
ʮಉ͡ͷΛ2ͭ࡞Δʯ ͷΈ
• UIͰ͖Δ͚ͩࣅͨΑ͏ͳݟͨʹͳͬͨ΄ ͏͕͍͍ • ϏδωεϩδοΫવಉ͡ڍಈʹͳΒͳ͚ ΕͳΒͳ͍ ઌʹยํΛ࡞͔ͬͯΒ ͏ยํ͕ਅࣅ͢Δͷ͕Ԧಓ
εϐʔυ࠷༏ઌͷݱͰͦ͏͍͔ͳ͍ • Ϗδωεͱͯ͠εϐʔυΛग़ͦ͏ͱ͢Δͱɺ ಉ࣌ਐߦΛ༨ّͳ͘͞ΕΔ͜ͱ͋Δ
υΩϡϝϯςʔγϣϯΛͪΌΜͱ͢Δ • ͜Ε·ͨԦಓ • ઃܭॻʢͱ͍͏͔ࢦࣔॻʣʹेͳ࣌ؒΛׂ ͘͜ͱ͕Ͱ͖ΕɺͦΕΛݩʹ্ͯ͠ख͘ಉ ࣌ਐߦͰ͖Δ͔͠Εͳ͍
εϐʔυ࠷༏ઌͷݱͰͦ͏͍͔ͳ͍(࠶) • Ϗδωεͱͯ͠εϐʔυΛग़ͦ͏ͱ͢Δͱɺ ೲظ͕ΧπΧπͰେ͕ܾ·ͬͨޙΓͳ ͕ΒܾΊΔΈ͍ͨͳঢ়گʹͳΓ͕ͪ
• Γͳ͕Β༷ΛܾΊ͍ͯ͘ͱɺͳΜ͔ͩΜͩ ͰͣΕΔ • ܧଓ։ൃͷϑΣʔζʹೖΔͱɺػೳվमͷε ϐʔυײ࣍ୈͰಉ͕͡ى͜Γଓ͚Δ • ίϛϡχέʔγϣϯίετΛڐ༰Ͱ͖Δࣄۀɾ ৫Ͱͳ͍ͱɺԦಓͰղܾ͢Δ͜ͱͦ͠͏ ʮಉ͡ͷΛ2ͭ࡞Δʯ͍͠
ͦͦਓ͕ݶΒΕ͍ͯΔ • ํɺͪΐͬͱͦͬͱͷࢪࡦͰਓ͕ू·Βͳ͍ • ɹͷΤϯδχΞ͕5ਓ͍Δͷଟ͍͚Ͳɺͦͷ͏ͪ3ਓฐ ࣾͰҭͬͨͷͰɺத్࠾༻্͕ख͍͍ͬͯ͘ΔΘ͚Ͱͳ͍ • ɹͷΤϯδχΞ࠾༻ҰਐҰୀ • ΞάϦςοΫͰࡳଋͰԥͬͯਓࡐूΊͯظܾઓʂ্͕ख
͘ޮ͘Ϗδωε·ͩൃ۷͞Ε͍ͯͳ͍ʢΑ͘ੜ͖ͯΔͳզʑ……ʣ • গͳ͍ਓͷ··ͰϏδωεʹߩݙͰ͖Δࢪࡦ͕΄͍͠
ࣄۀͱ৫ʹࠜͨ͟͠՝ • ɹͱɹʹࣅͨΑ͏ͳݟͨͱಉ͡ڍಈΛ༩͑ ͍ͨ • ಉ࣌ਐߦͷࡍͷखؒΛݮΒ͍ͨ͠ • ख͕͕Γ͕ͪͳࣄۀྖҬʹɺগͳ͍ϝϯ όʔͰίϛοτ͍ͨ͠
3. ࢲͨͪͷٕज़બ
ͦͯ͠X-Plat • ՝Λٕज़Ͱղܾ͢ΔͨΊɺɹͱɹͰιʔε ίʔυΛڞ௨Խ͢ΔઓུΛࢦ࢝͠Ίͨ • ͍ΘΏΔΫϩεϓϥοτϑΥʔϜʢX-Platʣͳ ΞϓϦ։ൃͷख๏
ຊ৺ͱͯ͠ • KotlinSwiftͰͷ։ൃΛத৺ʹஔ͖͍͕ͨɺ ݱࡏͷࣄۀنͱ৫نͷόϥϯεͰ ͍͠ • ʮɹͱɹͷΤϯδχΞ͕10ਓ͍ͣͭͨΒX- PlatΒͳ͍͍͕ͯ͘ɺ࣮ࡍʹ͍ͳ͍ͷͰ X-PlatΛΔʯͱ͍͏ཱ
ʲ࠶ܝʳ ࣗͨͪͷࣄۀ৫ͷ ՝Λղܾ͢Δʹ ͲΜͳπʔϧ͕߹͏ͷ͔Λ ߟ͑Δͷ͕ॏཁ
Cordovaͷ࣌ ʢ2015ʙʣ
Cordovaͷ࣌ • 2015ʹCordova + React JSͰΞάϦϊʔτͷ iOSΞϓϦΛ։ൃ • WebViewΛCordovaͰύοέʔδϯάͨ͠ϞόΠ ϧWebΞϓϦ
• Material DesignʹدͤΔ͜ͱͰطଘͷAndroidΞ ϓϦΛݟͨΛ͚ۙͮͨ
ͳͥWebViewͰReactͩͬͨͷ͔ • WebViewͷύϑΥʔϚϯε্͕͕͖͍ͬͯͯͨ࣌ͩͬͨ • ͪΐ͏ͲࣾͷϑϩϯτΤϯυνʔϜ͕ReactͰσεΫτοϓ൛ͷΞ άϦϊʔτΛϦχϡʔΞϧ͍ͯͨ͠ • ࣾͰѻ͏ςΫϊϩδʹڞ௨ͷ෦͕ੜ·ΕΕɺ෦ॺͷίϛϡ χέʔγϣϯ͕ԁʹͳΔ͔ͳɺͱ͍͏ݟ͋ͬͨ •
͋ͱJavaScriptͳΒ͜Ε͔ΒΓ্͕Γͦ͏͔ͩΒɺνʔϜϝϯ όʔͷΩϟϦΞϓϥϯͱͯ͠௵͕͠ޮ͍͍͍͔ͯͳͱʢwhy not swiftʣ
Ϛοϓ͚ͩObjective-C࣮ • ཧʹGoogleϚοϓΛ͍ͬͯΔ • ϒϥβ൛ͷGoogleϚοϓૢ࡞ੑ͕ෆຬ ͩͬͨͷͰɺϓϥάΠϯͰରԠ • WebViewͷޙΖʹϚοϓΛஔ͍ͯɺWebView ʹ݀Λ։͚Δͱ͍͏͍࣮͢͝
ຊAndroid൛͜Εʹஔ͖ ͑ΔͭΓ͕ͩͬͨɺ React NativeΛݟ͚ͭͯ͠ ·ͬͨͷͰ࠳
React Nativeͱͷग़ձ͍ ʢ2016ʙʣ
React Nativeͱͷग़ձ͍ • ొ͙͔ͨ͢͠Β໊લͬͯͨʢඑଣͩ ͱࢥͬͯͨʣ • 2015͔Β2016தʹɺιʔείʔυΛಡ ΜͩΓϓϩτλΠϐϯάͰͷࢼݧಋೖΛ࣮ࢪ • 2017͔Βࣾͷখ͍͞ΞϓϦΛத৺ʹຊ
֨ಋೖ͍ͯ͠Δ
React Nativeͱ • 2015ʹFacebook͔Βൃද͞ΕͨɺϞόΠϧ ΞϓϦΛ։ൃ͢ΔͨΊͷπʔϧ • ϞμϯͳJavaScriptݴޠͱReactϥΠϒϥϦͰ ॻ͍ͨGUIΞϓϦ͕ɺAndroidͱiOSͰಈ͘
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', }, });
None
ReactΛ͓ܰ͘͞Β͍ • HTMLͬΆ͍ͷΛJavaScriptͷதʹॻ͍͓ͯ͘ ͱɺޮతʹϒϥβͷදࣔΛߋ৽ͯ͘͠ΕΔͭ • WebΞϓϦΛ࡞Δͱ͖ʹΑ͘ΘΕ͍ͯΔ • ϓϩάϥϛϯάݴޠͷதͰɺએݴతͳߏจͰUIΛ ఆٛ͢Δɺͱ͍͏ੈք؍͕Θ͔Γ͍͢ͱ͍͏͜ ͱͰ·ͬͨ
ReactͷӨڹϞόΠϧʹ • Swift UI • Jetpack Composeʢ։ൃதʣ
React Native ϒϥβͳͷʁ
ҧ͍·͢ɻ • React NativeʹHTMLCSS͕ొ͠ͳ͍ • JavaScriptʹఆٛ͞ΕͨϨΠΞτΛɺ֤ϓ ϥοτϑΥʔϜͷUIίϯϙʔωϯτʹ༁ͯ͠ඳ ը͢Δ • ֤ϓϥοτϑΥʔϜͷຊདྷͷUIΛʮωΠςΟϒ
UIʯͱݺͿจԽ͔ΒʮReact Nativeʯʹͳͬͨ
༁ͷྫ
React Nativeͷ2ͭͷϨΠϠʔ • UIϥΠϒϥϦ • ReactϥΠϒϥϦ͚ͷλάΛఏڙ͢ΔJavaScriptϥΠϒϥϦ • ϛυϧΣΞ • JavaScriptͷ࣮ߦڥΛ༻ҙ
• JavaScriptଆͰUIϥΠϒϥϦ͕ར༻͞Εͨࡍʹɺ֤ϓϥοτ ϑΥʔϜͷUIʹ༁͢ΔɺC++ͱʢJava | Objective-CʣͰ࡞Β ΕͨϛυϧΣΞ
ϛυϧΣΞͷࠩ͠ସ͑Ͱ͕Δੈք • iOSʢofficialʣ • Androidʢofficialʣ • for Windowsʢthird party /
Microsoftʣ • for Webʢthird party, ͨͩ͠࡞ऀReactνʔϜೖΓʣ • for macOSʢthird partyʣ
ಋೖࣄྫଓʑ • InstagramʢFBͳͷͰʣ • DiscordʢiOS onlyʣ • Office 365ʢ΄Μͱ͔ʁʣ •
Twitter for WebʢReact Native for Webʣ https://blog.nkzn.info/entry/2019/04/16/163743 ΄ΜͱΒ͍͠Αʁ
IUUQTUXJUUFSDPNEBO@BCSBNPWTUBUVT
දతͳίϯϙʔωϯτ 7JFX ϨΠΞτͷجຊ୯Ґ 5FYU ςΩετΛදࣔɾ০͢Δ "DUJWJUZ*OEJDBUPS ॲཧͪΛද͢Πϯδέʔλʔ 'MBU-JTU ྻσʔλΛলϝϞϦͰදࣔ 4DSPMM7JFX
ଆͷίϯςϯπ͕ը໘ΛΈग़ͨΒ εΫϩʔϧͤ͞Δ 3FGSFTI$POUSPM 4DSPMM7JFXʹʮҾͬுͬͯߋ৽ʯΛ༩͢Δ 5PVDIBCMF0QBDJUZ ͋ΒΏΔϏϡʔʹλοϓΠϕϯτͱϑΟʔυό οΫΛ࣋ͨͤΔ
΄ͲΑཻ͍ • GUIΞϓϦέʔγϣϯͷߏཁૉͱͯ͠ྑ͍ • ͜ΕΛϒϥβͰ͍ͨͯ͘ React Native for Web͕ੜ·Εͨ •
ϒϩάʹ·ͱΊͨͷͰಡΜͰ • React NativeΛWebʹ࣋ͬͯ͘Δ͜ͱͷҙຯ https://blog.nkzn.info/entry/2018/05/29/210030
ͬͱஸೡʹΓ͍ͨ߹ • CodeZineͰෆఆظ࿈ࡌͯ͠ΔͷͰಡΜͰ͘ Εʂ https://codezine.jp/article/corner/772 • ୈ1ճ͕ࠓͷͷͬͱஸೡͳͭ
React Nativeͷ͍͍ͱ͜Ζ
JavaScriptΞϓϦ։ൃͷ؍ • ϥϯλΠϜ͕WebKitͷJavaScriptCore • JS to JSίϯύΠϥͷBabel͕Έࠐ·Ε͓ͯΓɺϞμϯͳ JavaScriptจ๏Λ༻Ͱ͖Δ • TypeScriptͰܕΛ͚Εେن։ൃʹରԠͰ͖Δ
• FlexboxΛͬͯϨΠΞτ͕ΊΔ • جఈίϯϙʔωϯτʹ༨ܭͳελΠϧ͕͍͍ͭͯͳ͍ͷͰɺಠ ࣗσβΠϯΛ࡞Γ͍ͨͱ͖ʹΈཱ͍ͯ͢
ϞόΠϧΞϓϦ։ൃͷ؍ • ɹɹͷϏϧυจԽʹର࣮ͯ͠Ͱຐ๏͕গͳ͍ • JavaObjective-CͰϓϥάΠϯΛॻ͘߹ɺɹɹͷ ΤϯδχΞͰ͋Ε؆୯ʹॻ͖ํΛ֮͑ΒΕΔఔʹૉ • GradleXcodeΛ͍׳Ε͍ͯΔΤϯδχΞͳΒ༰қʹΧ ελϚΠζͰ͖Δ •
GoogleϚοϓͷΑ͏ͳෳࡶͳදࣔʹಛԽͨ͠ϥΠϒϥϦ औΓࠐΈ͍͢
ਓࡐӡ༻ͷ؍ • JavaScriptͱReactͱ͍͏ڞ௨߲ʹΑΓɺϑϩϯτ ΤϯυͱReact Native͋ΔఔਓࡐΛڞ༗Ͱ͖Δ • APIͷҧ͍ΛΓӽ͑Δ·Ͱʹ׳Ε͕ඞཁ • ݴޠͷҧ͍͕গͳ͍ͷͰڭҭίετ͕ߴ͘ͳ͍ •
εʔύʔϚϯͰͳ͍͚ͯ͘Δͷ͕͍͍
React NativeͷͭΒ͍ͱ͜Ζ
JavaScriptΞϓϦ։ൃͷ؍ • ελΠϧγεςϜ͕CSSͷΑ͏ͰCSSͰͳ͍ ʢͪΐͬͱɹɹͷ߹͕ࠞͬͯ͟ΔʣͷͰɺ JavaScriptΤϯδχΞ͕ॳΊͯ৮Δͱށ͏
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', }, }); ←͜Ε
ΤϥʔΘ͔ΓͮΒ͍ • JavaScript༝དྷͱɹɹ༝དྷͷΤϥʔ͕྆ํͱ ग़ΔͷͰɺΤϥʔϝοηʔδΛݟͯɺͲͪΒ ͷΤϥʔͳͷ͔அ͠ͳ͍ͱ͍͚ͳ͍
None
࣮ࡍʹ͋ͬͨྫ • 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
ϦϦʔεͷඞཁࣝྔ͕͍ • ϦϦʔεϏϧυΛߦ͏ʹ3ͭͷจԽݍͷʮ;ͭ͏ʯΛ ͍ͬͯΔඞཁ͕͋Δ • NPM / Babel • Android
Studio / Gradle • Xcode / CocoaPods • ͦΕͧΕͰݟͨΒಛघͳࣝͱ͍͏΄ͲͰͳ͍ͷ͕ٹ͍
React NativeΛͲ͏ଊ͑Δ͔
ϑϩϯτΤϯυग़ऀʹͱͬͯ ͷReact Native • ΊͪΌͪ͘ΌΫηͷڧ͍ϒϥβ • ɹɹΤϯδχΞʹཔΉͱϒϥβଆͷڍಈΛ ΧελϚΠζͯ͠Β͑Δ • Javaͱ͔Objective-CΛ֮͑ΔͱࣗͰΧε
λϚΠζͰ͖Δ
ϞόΠϧΞϓϦग़ऀʹͱͬͯ ͷReact Native • JavaScriptͱReactͱ͔͍͏DSLͰɺUIͷঢ়ଶ ཧΛߦ͏͜ͱ͕Ͱ͖ΔUIϥΠϒϥϦ • Swift UIJetpack Compose͕ීٴ͍ͯ͘͠
ͱɺͦ͜·Ͱڧ͍ΞυόϯςʔδͰͳ͘ ͳ͍͖ͬͯͦ͏
ͳͥ˓˓Ͱͳ͔ͬͨͷ͔
ͳͥ˓˓Ͱͳ͔ͬͨͷ͔ • ιʔείʔυڞ௨Խ͚ͩΛߟ͑ΔͱɺFlutterͰIonicͰ XamarinͰKotlin MPPͰ͍͍ͱࢥ͏ • ࢲͨͪཧͷจ຺ͰϚοϓΛଟ༻͢ΔͷͰɺωΠςΟ ϒUIΛૉʹѻ͑ΔͷΛબͿඞཁ͕͋ͬͨ • ࣾͷਓࡐྲྀಈੑɺϝϯόʔͷΩϟϦΞύεͱͯ͠௵͕͠
ޮ͔͘Ͳ͏͔ͰJavaScriptʹدͤͨ෦͋Δ • Cordova࣌ͷ͓͔͛ͰReactͷܦݧ͕͋ͬͨͷେ͖͍
͓·͚ ReactͱϚοϓ૬ੑ͕͍͍
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ʹม
4. ํITاۀͷઓུΛ͛Δ ٕज़બͱͯ͠ͷ React Native
ํITاۀͷࣄۀͱ৫ͷ՝ʁ • BtoB(toB)͕ଟΊ • ɹɹ྆ํΒͳ͍ͱ͍͚ͳ͍ • ํटݍʹྠΛ͔͚ͯਓࡐྲྀಈੑ͕গͳ͍ • ࠓ͍ΔϝϯόʔͰͳΜͱ͔͢Δํʹدͤͨ΄ ͏͕Αͦ͞͏
͜ΕX-Platͷग़൪͕ ͋ΔͷͰ
React NativeΛѻ͏νʔϜʹ ඞཁͳϩʔϧ • JavaScript/TypeScript + ReactʹΑΔΞϓϦ։ൃʹࢀՃͰ͖Δϑ ϩϯτΤϯυΤϯδχΞʢͨ͘͞Μʣ • NPMʹΑΔΞϓϦͷӡ༻͕Ͱ͖ΔΤϯδχΞʢ࠷1໊ʣ
• Xcode + CocoaPodsʹΑΔiOSΞϓϦͷӡ༻͕Ͱ͖ΔiOSΤϯδ χΞʢ࠷1໊ʣ • GradleʹΑΔAndroidΞϓϦͷӡ༻͕Ͱ͖ΔAndroidΤϯδχΞ ʢ࠷1໊ʣ
͍Δͱخ͍͠ϩʔϧ • iOS SDKͰiOSΞϓϦ͕ॻ͚ΔiOSΤϯδχΞ ʢҙɾΧελϚΠζཁһʣ • Android SDKͰAndroidΞϓϦ͕ॻ͚Δ AndroidΤϯδχΞʢҙɾΧελϚΠζཁ һʣ
ॏް͗͢Ͱʂʁ • ͏Μʢਅإʣ • ͦΕͧΕผͷਓΛ༻ҙ͠Α͏ͱࢥͬͨΒɺਓ ࡐྲྀಈੑ͕ߴׂͯ͘ͱແͳͷͰͱ͍͏ ؾ࣋ͪ
͋Δఔ݉Ͱߟ͑Δ
ϑϩϯτΤϯυΤϯδχΞ • UI࣮ͷ୲ͱɺNPMӡ༻ͬͪ͜ʹͤΔ • ϒϥβ͚ͷ։ൃͱεΩϧηοτ͕͍ۙͷͰ ௵͕͠ޮ͘ • ։ൃ෦ୂͳͷͰɺ͋Δఔ·Ͱਓ͕͍ͨํ ͕։ൃεϐʔυ্͕͕Δ •
༨ஊ͚ͩͲ։ൃϚγϯڧ͍ͷʹ͍ͯͩ͘͠͞
None
ϞόΠϧӡ༻ΤϯδχΞ • ϏϧυͱϦϦʔεΛ୲ • ɹɹͷϓϩʹͳΔਓΛ1ਓͳ͍͠1ਓͣͭҭͯΔ • ϑϩϯτΤϯυ / NPMͷ߹͋Δఔͬ ͍ͯΔඞཁ͕͋Δ
• CocoaPodsFastlaneͷ߹ͰRuby
ث༻ͳਓΛ୳ͤ • ӡ༻ϩʔϧεʔύʔϚϯͳͷͰɺࣾͷث༻ ͳਓΛׂΓͯΔ͜ͱʹͳΔ • ֤ࣾ1ਓͦ͏͍͏ਓ͍ΔͰ͠ΐʢࠜڌͳ͠ʣ • ։ൃͷཁʹͳΔͷͰɺް۰ͯ͠ઈରʹख์͠ ͯͳΒͳ͍
͢Δͱ͜͏͍͏৫͕Ͱ͖Δ ϞόΠϧӡ༻νʔϜ ։ൃνʔϜA ։ൃνʔϜB ։ൃνʔϜC ڥߏஙࢧԉɾϓϥάΠϯ։ൃࢧԉ ث༻ͳਓ ث༻ͳਓ
ث༻ͳਓʹ׆༂ͯ͠Β͏ • ϞόΠϧΞϓϦ։ൃɺث༻ͳਓͷྗΛͪΌΜͱ ׆͔ͤͳ͍έʔε͕͋Δ • ࣮ɹɹɹͦΕͳΓʹͰ͖ΔɺΈ͍ͨͳث ༻ͳਓ͕͍ͯɺ1ਓͷਓؒ1ਓ͔͍͠ͳ͍ͷͰ ஞ࣮࣍ߦ͔͠Ͱ͖ͳ͍ • ͦ͏͍ͬͨਓͨͪʹث༻͞Λ࠷େݶʹൃشͯ͠
Β͏͜ͱͰฒྻੑΛ্͛Δͱ͍͏ઓུ͕औΕΔ
؆୯ʹͰ͖ΔΘ͚Ͱͳ͍ • πʔϧΛ͑ڥ͕खʹೖΔΘ͚Ͱͳ͍ • ث༻ͳਓ͕ຊདྷ͍࣋ͬͯΔྗΛ࠷େݶൃش Ͱ͖ΔڥΛ࡞ΕΔΑɺͱ͍͏ • ྗ͕͋Δث༻ͳਓΛࣾʹଘࡏͤ͞Δͷ ɺڭҭͱ࠾༻ͷྗ
࠾༻Ͱղܾ͢Δ͜ͱ…… • ʮωΠςΟϒϨΠϠʔͷӡ༻Λ͢Δਓʯͱ͍͏ϩʔϧ͕ͳ͍ͱΓཱ ͨͳ͍࡞ΓΛ͍ͯ͠ΔͷͰɺͰ͖ͨΒ࠾༻ͷखஈ༻ҙ͍ͨ͠ • ݱࡏSwiftKotlinͰΰϦΰϦͱΞϓϦΛॻ͍͍ͯΔਓͷ΄͏͕ɺϏϧυ ϦϦʔεʹؔ͢Δܦݧ๛ͳ͕ͣͩɺʮͦͷεΩϧΛओʹӡ༻ʹ ׆͔ͯ͠΄͍͠ʯͱ͍͏ٻਓʹདྷΔͷ͔……ʁ • ݄˓࣌ؒΈ͍ͨͳܖͰɺ෭ۀͰٕज़ސʹೖͬͯΒ͏ͱ͍͏ख͋
Δ͔͠Εͳ͍ • ɹɹɹͷʮ͜Ε͔ΒͷΩϟϦΞύεͲ͏͠Α͏ʯͷબࢶͷͻͱͭʹ ͳΔͱɺUIJλʔϯ͕૿͑Δ͔ʢໝʣ
·ͱΊ
·ͱΊ • ࣗͨͪͷࣄۀ৫ͷ՝Λղܾ͢ΔʹͲΜͳπʔϧ͕߹͏ͷ͔ Λߟ͑Δͷ͕ॏཁ • ਓࡐྲྀಈੑ͕͍ํITاۀͰɺগͳ͍ਓͰɺ௵͠ͷޮ͘ݴޠ Ͱɺଟ͘ͷΞϓϦΛ࡞ΕΔπʔϧΛબͿ͜ͱʹɺͦΕͳΓʹՁ͕͋ Δͣ • ث༻ͳਓͷྗ͕ͳ͍ͱΓཱͨͳ͍ͷͰɺ·ͣث༻ͳਓΛʢͪ
ΖΜߴڅͰʣݟ͚ͭͨΓ࠾༻ͨ͠Γ͠·͠ΐ͏ • ྗΛ׆͔͢બࢶͷͻͱͭͱͯ͠ɺReact NativeΛݕ౼ͯ͠Έͯ ͍͔͕Ͱ͠ΐ͏͔
We are hiring! • ΥʔλʔηϧͰҰॹʹʮຊͷۀɾ৯ Λ”ใ”Ͱࢧ͑ΔࣄʯʹऔΓΜͰ͘ΕΔΤ ϯδχΞΛืू͍ͯ͠·͢ • ͱҰॹʹࣄۀͱ৫ͷ՝ʹΜͰ͘Εʂ •
https://water-cell.jp/recruit/
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠
ࢀߟจݙ • ͳͥɺ৫ͷͭ͘ΓͱιϑτΣΞΞʔΩςΫνϟࣅͯ͠·͏ͷ͔ - 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