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
30
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
頭部ふわふわ浄酔器
uyupun
0
110
様々なファイルシステム
sat
PRO
0
240
AI時代の開発を加速する組織づくり - ブログでは書けなかったリアル
hiro8ma
1
310
混合雲環境整合異質工作流程工具運行關鍵業務 Job 的經驗分享
yaosiang
0
190
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
720
SQLAlchemy の select(User).where(User.id =="123") を理解してみる/sqlalchemy deep dive
3l4l5
3
410
AIプロダクトのプロンプト実践テクニック / Practical Techniques for AI Product Prompts
saka2jp
0
110
生成AI時代のPythonセキュリティとガバナンス
abenben
0
140
OCIjp_Oracle AI World_Recap
shinpy
1
180
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
210
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
180
Featured
See All Featured
Side Projects
sachag
455
43k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
Making Projects Easy
brettharned
120
6.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Build your cross-platform service in a week with App Engine
jlugia
233
18k
Leading Effective Engineering Teams in the AI Era
addyosmani
7
640
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.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!
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠