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
680
Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service
nkzn
7
2.5k
5分で流し読むCloudflare Developer Platform
nkzn
3
260
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
31
18k
パスキーについて今日時点の僕が知っていること / What I Know About Passkeys as of Today
nkzn
8
2.7k
青い空の歩き方 / Flying in the bluesky
nkzn
1
250
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
46
16k
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
23
7.8k
純粋培養フルリモート開発組織のワーク&ライフスタイル / monicle full remote style
nkzn
5
3.7k
Other Decks in Technology
See All in Technology
TypeScript、上達の瞬間
sadnessojisan
46
13k
適材適所の技術選定 〜GraphQL・REST API・tRPC〜 / Optimal Technology Selection
kakehashi
1
690
初心者向けAWS Securityの勉強会mini Security-JAWSを9ヶ月ぐらい実施してきての近況
cmusudakeisuke
0
130
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
250
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.9k
アジャイルチームがらしさを発揮するための目標づくり / Making the goal and enabling the team
kakehashi
3
130
100 名超が参加した日経グループ横断の競技型 AWS 学習イベント「Nikkei Group AWS GameDay」の紹介/mediajaws202411
nikkei_engineer_recruiting
1
170
第1回 国土交通省 データコンペ参加者向け勉強会③- Snowflake x estie編 -
estie
0
130
SRE×AIOpsを始めよう!GuardDutyによるお手軽脅威検出
amixedcolor
0
160
Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例
recruitengineers
PRO
0
110
IBC 2024 動画技術関連レポート / IBC 2024 Report
cyberagentdevelopers
PRO
1
110
Adopting Jetpack Compose in Your Existing Project - GDG DevFest Bangkok 2024
akexorcist
0
110
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
329
21k
Docker and Python
trallard
40
3.1k
Optimizing for Happiness
mojombo
376
70k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
665
120k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
The World Runs on Bad Software
bkeepers
PRO
65
11k
What's new in Ruby 2.0
geeforr
343
31k
A designer walks into a library…
pauljervisheath
204
24k
Faster Mobile Websites
deanohume
305
30k
RailsConf 2023
tenderlove
29
900
[RailsConf 2023] Rails as a piece of cake
palkan
52
4.9k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
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