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.2k
ReactでWebとNativeの共通UIライブラリを作ろう
Kento Moriwaki
September 13, 2018
Tweet
Share
More Decks by Kento Moriwaki
See All by Kento Moriwaki
わかった気になれる CRDT を使った共同編集
kentomoriwaki
8
4.7k
デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018
kentomoriwaki
16
3.8k
BFFを導入しなかった理由
kentomoriwaki
4
13k
TypeScript in Wantedly
kentomoriwaki
2
750
5分でわかる React "Suspense"
kentomoriwaki
3
1.5k
導入して1年経ったReact周辺の 技術スタックを反省します | React反省会@Wantedly
kentomoriwaki
10
8.7k
Immutable.jsとReact @Wantedly ~入門編~
kentomoriwaki
8
75k
React速習会@Wantedly
kentomoriwaki
1
440
Other Decks in Programming
See All in Programming
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
140
議事録の要点整理を自動化! サーバレス Bot 構築術
penpeen
3
1.6k
Чего вы не знали о строках в Python – Василий Рябов, PythoNN
sobolevn
0
150
そのpreloadは必要?見過ごされたpreloadが技術的負債として爆発した日
mugitti9
2
2.8k
ソフトウェア設計の実践的な考え方
masuda220
PRO
2
290
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
11k
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
170
uniqueパッケージの内部実装を支えるweak pointerの話
magavel
0
880
プログラマのための作曲入門
cheebow
0
520
なぜGoのジェネリクスはこの形なのか? Featherweight Goが明かす設計の核心
ryotaros
7
1k
詳しくない分野でのVibe Codingで困ったことと学び/vibe-coding-in-unfamiliar-area
shibayu36
3
2.9k
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
690
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Git: the NoSQL Database
bkeepers
PRO
431
66k
How STYLIGHT went responsive
nonsquared
100
5.8k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
The Invisible Side of Design
smashingmag
301
51k
Producing Creativity
orderedlist
PRO
347
40k
The Pragmatic Product Professional
lauravandoore
36
6.9k
We Have a Design System, Now What?
morganepeng
53
7.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
A better future with KSS
kneath
239
17k
4 Signs Your Business is Dying
shpigford
185
22k
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/