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 / react nati...
Search
Yukiya Nakagawa
October 11, 2019
Technology
24
22k
地方IT企業の戦略を広げる 技術選択としてのReact Native / react native for local
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
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
1.1k
Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service
nkzn
7
3k
5分で流し読むCloudflare Developer Platform
nkzn
3
310
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
31
18k
パスキーについて今日時点の僕が知っていること / What I Know About Passkeys as of Today
nkzn
8
2.8k
青い空の歩き方 / Flying in the bluesky
nkzn
1
290
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
48
17k
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
23
8.3k
純粋培養フルリモート開発組織のワーク&ライフスタイル / monicle full remote style
nkzn
5
4k
Other Decks in Technology
See All in Technology
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
7
1.6k
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
290
The Future of SEO: The Impact of AI on Search
badams
0
160
アジャイル開発とスクラム
araihara
0
170
Helm , Kustomize に代わる !? 次世代 k8s パッケージマネージャー Glasskube 入門 / glasskube-entry
parupappa2929
0
210
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
170
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
1
180
人はなぜISUCONに夢中になるのか
kakehashi
PRO
6
1.5k
データ資産をシームレスに伝達するためのイベント駆動型アーキテクチャ
kakehashi
PRO
2
470
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
4
300
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Speed Design
sergeychernyshev
26
790
The Cult of Friendly URLs
andyhume
78
6.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
9
430
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Writing Fast Ruby
sferik
628
61k
Documentation Writing (for coders)
carmenintech
67
4.6k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Automating Front-end Workflow
addyosmani
1367
200k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Why Our Code Smells
bkeepers
PRO
336
57k
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