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
React Native ❤️ Web
Search
Yukiya Nakagawa
June 29, 2019
Technology
0
710
React Native ❤️ Web
2019.6.29の #bigLT2019_aizu で話しました
Yukiya Nakagawa
June 29, 2019
Tweet
Share
More Decks by Yukiya Nakagawa
See All by Yukiya Nakagawa
Cloudflare Workers で作る専門性特化型 MCP サーバー / workers-specialist-mcp
nkzn
1
66
経済メディア編集部の実務に小さく刺さるAI / small-ai-with-editorial
nkzn
2
910
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
1.8k
Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service
nkzn
7
3.8k
5分で流し読むCloudflare Developer Platform
nkzn
3
380
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
32
18k
パスキーについて今日時点の僕が知っていること / What I Know About Passkeys as of Today
nkzn
8
2.9k
青い空の歩き方 / Flying in the bluesky
nkzn
1
330
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
48
18k
Other Decks in Technology
See All in Technology
Amazon Q と『音楽』-ゲーム音楽もAmazonQで作成してみた感想-
senseofunity129
1
180
コミュニティと計画的偶発性理論 - 出会いが人生を変える / Life-Changing Encounters
soudai
PRO
7
860
会社にデータエンジニアがいることでできるようになること
10xinc
8
1.1k
夏休みWebアプリパフォーマンス相談室/web-app-performance-on-radio
hachi_eiji
1
270
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
1
20k
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
2
560
Kiro と Q Dev で 同じゲームを作らせてみた
r3_yamauchi
PRO
1
120
AIが住民向けコンシェルジュに?Amazon Connectと生成AIで実現する自治体AIエージェント!
yuyeah
0
220
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
vaaaaanquish
34
16k
Backlog AI アシスタントが切り開く未来
vvatanabe
1
170
JAWS-UG のイベントで使うハンズオンシナリオを Amazon Q Developer for CLI で作ってみた話
kazzpapa3
0
120
Amazon Inspector コードセキュリティで手軽に実現するシフトレフト
maimyyym
0
150
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
A designer walks into a library…
pauljervisheath
207
24k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Code Review Best Practice
trishagee
69
19k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
It's Worth the Effort
3n
186
28k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Transcript
React Native ❤ Web Υʔλʔηϧגࣜձࣾ த ࠸ #bigLT2019_aizu
Yukiya Nakagawa / ͳ͔͟Μ ձେֶ13ظੜʢ32ࡀʣ ৽ׁͰAgriTechͬͯΔΑʂ AndroidΤϯδχΞ ϞόΠϧدΓJSΤϯδχΞ
ͨ·ʹʹग़·͢ https://water-cell.jp/recruit/
ͬ͘͟ΓReact Native
Reactͱ • JavaScript͚ͷUIঢ়ଶཧϥΠϒϥϦ • Facebook͕ࣾΦʔφʔ • ϒϥβ͚ඳըϥΠϒϥϦͷReact DOM ɺϞόΠϧΞϓϦ͚ඳըϥΠϒϥϦͷ React
Nativeͱซ༻͢Δ
f(x) = UI / ؔͱͯ͠ͷUI import React from 'react'; import
{ View, TextInput, Button } from 'react-native'; export function LoginForm(props) { return ( <View> <TextInput placeholder="User ID" /> <TextInput placeholder="Password" /> <Button title="ϩάΠϯ" /> </View> ); } JSX -PHJO'PSNίϯϙʔωϯτͷ࣮
https://codezine.jp/article/detail/11295
Learn Once, Write Anywhere
Learn Once, Write Anywhere • React Nativeͷίϯηϓτͷͻͱͭ • JavaͷεϩʔΨϯͷͻͱͭͰ͋ΔʮWrite Once,
Run AnywhereʯΛͬͨ͡ͷ • Reactֶ͑͞ɺ͍ΖΜͳϓϥοτϑΥʔϜ ͚ʹίʔυ͕ॻ͚Δ https://code.fb.com/android/react-native-bringing-modern-web-techniques-to-mobile/
Anywhereͬͯݴ͏ͳΒ WebReact NativeͰ ॻ͖ͨ͘ͳ͍Ͱ͔͢ʂʁ
React Native for Web
ϒϥβ͚Reactͷ • <div><input>ͱ͍ͬͨHTMLͷཁૉ CSSΛΈ߹ΘͤͯUIΛߏங͍ͯ͘͠ • HTMLͷλάΞϓϦͷUIߏஙʹͦ͜·Ͱ͍ ͍ͯͳ͍ React NativeΛWebʹ࣋ͬͯ͘Δ͜ͱͷҙຯ -
φΧβϯυοτωοτ https://blog.nkzn.info/entry/2018/05/29/210030
React Nativeͷ߹ • ΞϓϦΛ։ൃ͢Δࡍʹ࠷ݶඞཁͳը໘෦ ͕ἧ͍ͬͯΔ
None
JavaScript࣮ߦϛυϧΣΞ ͱͯ͠ͷReact Nativeͱผʹ UIϑϨʔϜϫʔΫͱͯ͠ͷ React Nativeͷׂཻ͕ͱଥ
“ͦΕͳΒಉཻ͡Ͱ Web͚ͷίϯϙʔωϯτ ࡞ΕศརͳͷͰ”
export function View(props) { return ( <div>{props.children}</div> ); } export
function Text(props) { return ( <span>{props.children}</span> ); } React Nativeͱಉ໊͡લͰϒϥβ͚ ίϯϙʔωϯτΛ࣮͢Δ
React Native for Web https://github.com/necolas/react-native-web
None
React Native for Web͕ ࣮༻͞Ε͍ͯΔ શੈքͰ༗໊ͳWebαʔϏε
None
Twitterʂ React Native for WebͰʂ ॻ͔Ε͍ͯΔʂʂʂʂ https://twitter.com/necolas/status/913877194199359488 ˞5XJUUFSࣾͰ৽6*νʔϜͷςοΫϦʔυΛͯͨ͠ਓ͕3FBDU/BUJWFGPS8FCͷ࡞ऀ
None
͍ํ import React from 'react'; import { View, TextInput, Button
} from ‘react-native-web’; export function LoginForm(props) { return ( <View> <TextInput placeholder="User ID" /> <TextInput placeholder="Password" /> <Button title="ϩάΠϯ" /> </View> ); } ϒϥβ͚ͷڥͰ react-native-webϞδϡʔϧΛ͏
Ϗϧυ৬ਓ͚ͷઆ໌ • WebpackBabelϓϥάΠϯͰϞδϡʔϧ໊ ΛޡຐԽͯ͠ɺιʔείʔυ্ “react-native“ ϞδϡʔϧΛ͍ͬͯΔΑ͏ʹ ݟ͔͚ͤΔ͜ͱͰ͖·͢ • ϞόΠϧΞϓϦ͚UIͱWebΞϓϦ͚UIΛ ͋Δఔڞ௨ԽͰ͖Δ
ۀͰͬͯΈ·ͨ͠ • React Native for WebΛϓϩμΫγϣϯͰͬ ͯΈ·ͨ͠ - WaterCell Developer’s
Blog https://watercelldev.hatenablog.jp/entry/ 2018/07/18/122604 • ϒϥβ൛ͱAndroid൛Ͱ78%ͷTypeScript ίʔυΛڞ༗Ͱ͖ͨ
ࢼͯ͠Έ͍ͨํ • React Nativeͷ֦ுπʔϧ܈Ͱ͋ΔExpo͕ɺ ϒϥβλʔήοτΛϏϧυ͢ΔͨΊͷπʔ ϧͱͯ͠React Native for WebΛ࠾༻ͨ͠ •
expo-cliΛnpmͰΠϯετʔϧͯ͠ɺexpo init ίϚϯυΛୟ͚ɺϒϥβରԠࡁΈͷΞϓ Ϧ։ൃϓϩδΣΫτ͕࡞ΕΔ
σϞ ʢ࣌ؒ͋Εʣ
·ͱΊ • React NativeͰΞϓϦΛॻ͚ΔͱɺAndroidɺ iOSɺϒϥβͰΞϓϦΛॻ͚Δɺͱ͍͏ੈք ʹͳ͖͍ͬͯͯΔ • ͍ΖΜͳϓϥοτϑΥʔϜʹΞϓϦΛఏڙ͠ ͍ͨਓʹ໘ന͍ʹͳ͍ͬͯ·͢Αʂ
We are hiring!
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠