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
620
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
5分で流し読むCloudflare Developer Platform
nkzn
0
80
次世代Web認証「パスキー」 / mo-zatsudan-passkey
nkzn
30
17k
パスキーについて今日時点の僕が知っていること / What I Know About Passkeys as of Today
nkzn
8
2.5k
青い空の歩き方 / Flying in the bluesky
nkzn
1
190
SPAの歴史とRemix SPAモードという到達点 / the SPA's chronicle reaches to remix
nkzn
43
15k
RemixでWeb標準を学んだ1年間 / First year with Remix
nkzn
21
6.5k
純粋培養フルリモート開発組織のワーク&ライフスタイル / monicle full remote style
nkzn
5
3.4k
資産運用を対面で相談するサービスでITエンジニアがやることあるの? / derta-gig-04
nkzn
0
1.3k
React Nativeエコシステム概論 / react-native ecosystem
nkzn
1
870
Other Decks in Technology
See All in Technology
AIエージェントを現場に導入する目線とは
masahiro_nishimi
1
1.5k
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
スレットハンティングについて知っておきたいこと
hacket
0
130
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
簡単に始めるSnowflakeの機械学習
nayuts
1
190
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
150
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
How GitHub (no longer) Works
holman
305
140k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
34
1.9k
Code Reviewing Like a Champion
maltzj
517
39k
Designing for humans not robots
tammielis
247
25k
Stop Working from a Prison Cell
hatefulcrawdad
266
20k
Six Lessons from altMBA
skipperchong
24
3.2k
Fireside Chat
paigeccino
25
2.8k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
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!
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠