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.7k
デザインシステムを導入して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
型付き API リクエストを実現するいくつかの手法とその選択 / Typed API Request
euxn23
8
2.2k
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
250
Realtime API 入門
riofujimon
0
150
AI時代におけるSRE、 あるいはエンジニアの生存戦略
pyama86
6
1.2k
Jakarta EE meets AI
ivargrimstad
0
670
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
Macとオーディオ再生 2024/11/02
yusukeito
0
370
Amazon Qを使ってIaCを触ろう!
maruto
0
410
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
690
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
220
距離関数を極める! / SESSIONS 2024
gam0022
0
290
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Designing the Hi-DPI Web
ddemaree
280
34k
How GitHub (no longer) Works
holman
310
140k
Optimising Largest Contentful Paint
csswizardry
33
2.9k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
The Invisible Side of Design
smashingmag
298
50k
Six Lessons from altMBA
skipperchong
27
3.5k
The Power of CSS Pseudo Elements
geoffreycrofte
73
5.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Measuring & Analyzing Core Web Vitals
bluesmoon
4
130
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
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/