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
720
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
JS Temporalを学ぶ人のための JSR-310入門 / jsr310-for-temporal
nkzn
0
31
Cloudflare Workers で作る専門性特化型 MCP サーバー / workers-specialist-mcp
nkzn
1
110
経済メディア編集部の実務に小さく刺さるAI / small-ai-with-editorial
nkzn
2
970
Remix × Cloudflare Pages × Sentry 奮闘記 / remix-pages-sentry
nkzn
1
1.9k
Cloudflareスタックで月間1200万UUの経済メディアにアバター画像生成サービスを作る / Cloudflare Developer Platform for AI avatar service
nkzn
7
4k
5分で流し読むCloudflare Developer Platform
nkzn
3
410
次世代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
340
Other Decks in Technology
See All in Technology
AI連携の新常識! 話題のMCPをはじめて学ぶ!
makoakiba
0
130
アウトプットから始めるOSSコントリビューション 〜eslint-plugin-vueの場合〜 #vuefes
bengo4com
3
1.8k
OPENLOGI Company Profile for engineer
hr01
1
45k
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
140
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
14
82k
仕様駆動開発を実現する上流工程におけるAIエージェント活用
sergicalsix
1
410
QA業務を変える(!?)AIを併用した不具合分析の実践
ma2ri
0
160
CLIPでマルチモーダル画像検索 →とても良い
wm3
0
190
Kubernetes self-healing of your workload
hwchiu
0
570
Okta Identity Governanceで実現する最小権限の原則 / Implementing the Principle of Least Privilege with Okta Identity Governance
tatsumin39
0
180
IoTLT@ストラタシスジャパン_20251021
norioikedo
0
140
Open Table Format (OTF) が必要になった背景とその機能 (2025.10.28)
simosako
2
370
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Raft: Consensus for Rubyists
vanstee
140
7.2k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Navigating Team Friction
lara
190
15k
Typedesign – Prime Four
hannesfritz
42
2.8k
Optimizing for Happiness
mojombo
379
70k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
Building Applications with DynamoDB
mza
96
6.7k
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!
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠