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でWebとNativeの共通UIライブラリを作ろう
Search
Kento Moriwaki
September 13, 2018
Programming
0
1.1k
ReactでWebとNativeの共通UIライブラリを作ろう
Kento Moriwaki
September 13, 2018
Tweet
Share
More Decks by Kento Moriwaki
See All by Kento Moriwaki
わかった気になれる CRDT を使った共同編集
kentomoriwaki
5
3.6k
デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018
kentomoriwaki
16
3.5k
BFFを導入しなかった理由
kentomoriwaki
4
13k
TypeScript in Wantedly
kentomoriwaki
2
660
5分でわかる React "Suspense"
kentomoriwaki
3
1.4k
導入して1年経ったReact周辺の 技術スタックを反省します | React反省会@Wantedly
kentomoriwaki
10
8.5k
Immutable.jsとReact @Wantedly ~入門編~
kentomoriwaki
8
74k
React速習会@Wantedly
kentomoriwaki
1
400
Other Decks in Programming
See All in Programming
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
EventSourcingの理想と現実
wenas
6
2.1k
Why Spring Matters to Jakarta EE - and Vice Versa
ivargrimstad
0
990
2万ページのSSG運用における工夫と注意点 / Vue Fes Japan 2024
chinen
3
1.3k
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
350
Piniaの現状と今後
waka292
5
1.5k
Honoの来た道とこれから
yusukebe
19
3k
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
850
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.3k
Tuning GraphQL on Rails
pyama86
2
1k
Macとオーディオ再生 2024/11/02
yusukeito
0
200
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
How STYLIGHT went responsive
nonsquared
95
5.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Code Review Best Practice
trishagee
64
17k
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
81
5.2k
Six Lessons from altMBA
skipperchong
26
3.5k
Faster Mobile Websites
deanohume
304
30k
Teambox: Starting and Learning
jrom
132
8.7k
Transcript
©2018 Wantedly, Inc. ReactͰWebͱNativeͷ ڞ௨UIϥΠϒϥϦΛ࡞Ζ͏ React Native Meetup #9 13.Sep.2018
- Kento Moriwaki
©2018 Wantedly, Inc. • KentoMoriwaki • twitter: @kento_trans_lu • WantedlyͷΤϯδχΞ
• ओʹϑϩϯτΤϯυΛϦʔυ͍ͯ͠·͢ ࣗݾհ
©2018 Wantedly, Inc. ࣾDesign Systemͷ React൛Λ࣮͍ͯ͠·͢ 3
©2018 Wantedly, Inc. “React NativeͰ ಈ͘Α͏ʹ͍ͨ͠ͳ” 4
©2018 Wantedly, Inc. ͷ͜ͷҰݴͰۤ͠Μͩ Πϯλʔϯ @RyuichiSakagami 5 https://twitter.com/RyuichiSakagami
©2018 Wantedly, Inc. `npm install my-ui`ͯ͠ `import { Button }
from "my-ui"` ͬͯॻ͍ͨΒ WebͱNativeͰಈ͍ͯཉ͍͠ 6
©2018 Wantedly, Inc. 7 ͜ΜͳϘλϯ͕࡞Γ͍ͨɺ͚ͩ
©2018 Wantedly, Inc. ͜ΜͳϘλϯ͕࡞Γ͍ͨɺ͚ͩ? 8 ϏϧυͲ͏͢Δͷʁ TypeScriptͷܕνΣοΫʁ άϥσʔγϣϯʁ Ξχϝʔγϣϯʁ ΠϯλϥΫγϣϯʁ
©2018 Wantedly, Inc. • ͪΖΜɺreact-native, react-native-web͕ϕʔε • ՄೳͳݶΓɺreact-primitivesΛ͏ • ͳ͚Εɺreact-nativeΛ͏
• ͦΕͳ͚ΕɺϓϥοτϑΥʔϜ͝ͱʹϩδοΫΛ͚Δ → .web.js, .ios.js, .android.js • TypeScriptͷܕཉ͍͠ جຊํ
©2018 Wantedly, Inc. Ϗϧυઃఆ͕ϋʔυ͗͢Δ 10 ͍͖ͳΓຯͳͰ͝ΊΜͳ͍͞
©2018 Wantedly, Inc. TypeScript .web.jsͱ͔.ios.jsΛͦͷ··Ͱ ͏·͘ѻ͑ͳ͍ 1. ϓϥοτϑΥʔϜؒͰexport͢Δܕ͕ҧ͏͜ͱ ʹؾ͚ͮͳ͍ 2.
Cannot find module TypeScriptͷ
©2018 Wantedly, Inc. ϓϥοτϑΥʔϜؒͰҧ͏ܕΛexport͍ͯͯ͠ ܕΤϥʔى͖ͳ͍ ϓϥοτϑΥʔϜ͝ͱͷܕνΣοΫ foo.web.tsx foo.native.tsx
©2018 Wantedly, Inc. ϓϥοτϑΥʔϜ͝ͱʹྨ ͦΕͧΕʹ`tsc`ͰܕνΣοΫ ϓϥοτϑΥʔϜ͝ͱͷܕνΣοΫ foo.native.tsx gulpͰมߋΛݕͯ͠ ࣗಈతʹίϐʔ
©2018 Wantedly, Inc. Cannot find module... Cannot find module
©2018 Wantedly, Inc. index.js͕ͳ͚ΕɺimportͰ͖ͳ͍ Cannot find module
©2018 Wantedly, Inc. ͜ΕͰ௨Δ͚Ͳɺ nativeͰಈ͔ͳ͍Α... Cannot find module
©2018 Wantedly, Inc. tsͷcompilerOptionsͰղܾ Cannot find module tsconfig.web.json
©2018 Wantedly, Inc. tsconfig͕͍ͬͺ͍Ͱ͖Δ • tsconfig.base.json • جຊϧʔϧΛ·ͱΊΔ • tsconfig.{platform}.json
• ϓϥοτϑΥʔϜ͝ͱͷઃఆ • rootDir, pathsͳͲ • tsconfig.json • ΤσΟλͰ͏ઐ༻
©2018 Wantedly, Inc. • distҎԼʹ index.web.js, .ios.js, .android.js ΛͦΕͧΕు͖ग़͢Α͏ʹઃఆ •
package.jsonͷmainʹɺdist ͱࢦఆ͢ΕɺΞϓϦέʔγϣϯ ଆͰΓ͚ͯ͘ΕΔ Webpack
©2018 Wantedly, Inc. • ϓϥοτϑΥʔϜ͝ͱͷڍಈͷҧ͍ɺmodulesҎԼʹݶ ఆ͢Δ • VS CodeͰॻ͖ͳ͕ΒͷܕνΣοΫΦʔτίϯϓϦʔτ ɺͲΕ͔ҰͭͷϓϥοτϑΥʔϜʹݻఆ͢Δ
• modulesΛՃͨ͠ΒɺwebpackΛ࠶ىಈ͢Δ • resolve.aliasͷॊೈੑ͕͍ͨΊɻͬͱ͍͍ํ๏͋Δ͔ TypeScript·ΘΓͷ੍ݶ
©2018 Wantedly, Inc. ͜͜·ͰͰ͖Εɺ ͋ͱ؆୯ʂ 21
©2018 Wantedly, Inc. άϥσʔγϣϯ 22
©2018 Wantedly, Inc. • nativeͰɺωΠςΟϒϞδϡʔϧΛؚΉϥΠϒϥϦΛ͏ • https://github.com/react-native-community/react-native-linear-gradient • WebͰɺCSSͰදݱͰ͖Δ •
background-image: linear-gradient(...); • ಉ͡ΠϯλʔϑΣʔεΛఆٛͯ͠ɺ࣮Λ.web.tsxͱ native.tsxͰ͚Δ͚ͩ webͱnativeͰҧ͏άϥσʔγϣϯͷ࣮ݱํ๏
©2018 Wantedly, Inc. webͱnativeͰҧ͏άϥσʔγϣϯͷ࣮ݱํ๏ modules/linear-gradient/index.native.tsx modules/linear-gradient/index.web.tsx
©2018 Wantedly, Inc. hover 25
©2018 Wantedly, Inc. • react-nativeͷViewͷpropsʹonMouseEnter ͳ͍ • react-native-webͰܕΤϥʔग़Δ͕ɺ࣮ ͦͷ··divʹͯ͘͠ΕΔͷͰɺઃఆͰ͖Δ •
ܕ͚ͩΛՃͨ͠Βͳ͔ͬͨ nativeʹhoverͳ͍
©2018 Wantedly, Inc. Ξχϝʔγϣϯ 27
©2018 Wantedly, Inc. • react-native-webͷAnimatedɺύϑΥʔϚ ϯεతʹྼΔ • WebͰɺCSSͷtransitionΛ͍͍ͨ ࠷ޙͷؔ: Animated
©2018 Wantedly, Inc. Animatedͷ͍ํ ࠷ޙͷؔ: Animated
©2018 Wantedly, Inc. ࠷ޙͷؔ: Animated ࣅͨΑ͏ͳInterfaceΛఆٛ
©2018 Wantedly, Inc. ࠷ޙͷؔ: Animated Animated.ValueͷมߋΛݕͯ͠ɺstyleʹtransitionΛͯΔ
©2018 Wantedly, Inc. react-cross-ui-boilerplate ʹ͋͛·ͨ͠ 32 https://github.com/KentoMoriwaki/react-cross-ui-boilerplate
©2018 Wantedly, Inc. 1. clone͍ͯͬͯͩ͘͠͞ 2. ಈ͔ͳ͍ͱ͜Ζଟ͍ͷͰɺࢀߟఔͰ 3. Microsoft/reactxp͍͢͝ 4.
gulpศར react-cross-ui-platform
©2018 Wantedly, Inc. 1. ϑΥϯτwebͱnativeͰΓସ͑Δඞཁ͋Δ 2. Server-side renderingͰ͖Δͷ͔ 3. Native
moduleΛͲ͏ͬͯϏϧυ͢Δ͔ ·ͩ·ͩߟ͑Δඞཁ͕͋Δͱ͜Ζ
©2018 Wantedly, Inc. • ͍ܰؾ࣋ͪͰ࢝ΊΔͷΦεεϝ͠ͳ͍Ͱ͢ • ϥΠϒϥϦʹ͢Δඞཁͳ͍ͳΒɺ͏ͪΐͬͱ؆ ୯ʹͰ͖Δ͔ • ϥΠϒϥϦʹ͍ͨ͠ͳΒɺҰॹʹઓ͍·͠ΐ͏
• ຖि༵։࠵ʂϑϩϯτΤϯυʹ͍ͭͯΏΔͬͱษڧ͠·ͤΜ͔ʁ ಉ͜͡ͱΛΓ͍ͨͱࢥ͍ͬͯͨΒɺ
©2018 Wantedly, Inc. Rejectcon 2018Ͱ͢ͷͰɺ Α͔ͬͨΒདྷ͍ͯͩ͘͞ʂ https://rejectcon.connpass.com/event/96581/