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
8
4.1k
デザインシステムを導入してUIに秩序を取り戻す - React (Native)編 #rejectron2018
kentomoriwaki
16
3.6k
BFFを導入しなかった理由
kentomoriwaki
4
13k
TypeScript in Wantedly
kentomoriwaki
2
710
5分でわかる React "Suspense"
kentomoriwaki
3
1.4k
導入して1年経ったReact周辺の 技術スタックを反省します | React反省会@Wantedly
kentomoriwaki
10
8.6k
Immutable.jsとReact @Wantedly ~入門編~
kentomoriwaki
8
74k
React速習会@Wantedly
kentomoriwaki
1
420
Other Decks in Programming
See All in Programming
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.2k
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.2k
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
SwiftUI Viewの責務分離
elmetal
PRO
2
280
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
160
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
350
Domain-Driven Design (Tutorial)
hschwentner
13
22k
クックパッド検索システム統合/Cookpad Search System Consolidation
giga811
0
120
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
240
良いコードレビューとは
danimal141
9
5.4k
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
640
Serverless Rust: Your Low-Risk Entry Point to Rust in Production (and the benefits are huge)
lmammino
1
160
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
580
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Practical Orchestrator
shlominoach
186
10k
GitHub's CSS Performance
jonrohan
1030
460k
Automating Front-end Workflow
addyosmani
1369
200k
The Language of Interfaces
destraynor
156
24k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
440
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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/