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
410
Other Decks in Programming
See All in Programming
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
41
16k
バッチを作らなきゃとなったときに考えること
irof
2
530
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
310
推しメソッドsource_locationのしくみを探る - はじめてRubyのコードを読んでみた
nobu09
2
330
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.4k
Jasprが凄い話
hyshu
0
170
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
250
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.6k
Introduction to kotlinx.rpc
arawn
0
770
Django NinjaによるAPI開発の効率化とリプレースの実践
kashewnuts
1
280
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
910
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
270
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5.2k
A Philosophy of Restraint
colly
203
16k
Statistics for Hackers
jakevdp
797
220k
A Tale of Four Properties
chriscoyier
158
23k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Cost Of JavaScript in 2023
addyosmani
47
7.4k
Designing Experiences People Love
moore
140
23k
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/