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
クロスプラットフォーム開発3種の神器 React Native / TypeScript / ...
Search
Takuji Nishibayashi
February 07, 2019
Technology
7
6.3k
クロスプラットフォーム開発3種の神器 React Native / TypeScript / GraphQL
Takuji Nishibayashi
February 07, 2019
Tweet
Share
More Decks by Takuji Nishibayashi
See All by Takuji Nishibayashi
compose-hot-reload を試そうとした話
takuji31
0
87
CameraX使ってみた
takuji31
0
240
kotlinx.datetime 使ってみた
takuji31
0
770
HiltのCustom Componentについて
takuji31
0
290
java.timeをAndroidで使う
takuji31
0
140
KSPを使ってコード生成
takuji31
0
390
Kotlin Symbol Processing API (KSP) を使って Kotlin ア プリケーションの開発を効率化する
takuji31
1
2.8k
kotlinx.serialization
takuji31
0
620
kanmoba-returns-02.pdf
takuji31
0
240
Other Decks in Technology
See All in Technology
株式会社ARAV 採用案内
maqui
0
370
AIドリブンのソフトウェア開発 - うまいやり方とまずいやり方
okdt
PRO
9
680
Goss: Faiss向けの新しい本番環境対応 Goバインディング #coefl_go_jp
bengo4com
0
1.4k
トヨタ生産方式(TPS)入門
recruitengineers
PRO
4
800
Webアクセシビリティ入門
recruitengineers
PRO
2
810
Browser
recruitengineers
PRO
5
1.2k
Goss: New Production-Ready Go Binding for Faiss #coefl_go_jp
bengo4com
0
1.1k
KiroでGameDay開催してみよう(準備編)
yuuuuuuu168
1
140
[CVPR2025論文読み会] Linguistics-aware Masked Image Modelingfor Self-supervised Scene Text Recognition
s_aiueo32
0
210
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
yug1224
10
3.1k
攻撃と防御で実践するプロダクトセキュリティ演習~導入パート~
recruitengineers
PRO
3
840
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
7
2k
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
It's Worth the Effort
3n
187
28k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
185
54k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Building Adaptive Systems
keathley
43
2.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Docker and Python
trallard
45
3.5k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Transcript
ΫϩεϓϥοτϑΥʔϜ։ൃ ࡾछͷਆث React Na(ve / TypeScript / GraphQL Takuji Nishibayashi,
Ryo Kitamura DroidKaigi 2019, day 1, 16:30-17:20
ࣗݾհ
ࣗݾհ • Takuji Nishibayashi • takuji31 • Hatena Co., Ltd.
(2016/01 ~) • Android (2009~) • Kotlin • ! hFps:/ /blog.takuji31.jp • " hFps:/ /nazuna.takuji31.jp • # $ hFps:/ /photo.takuji31.jp
ࣗݾհ • Ryo Kitamura • @experopero id:funnelbit • Hatena Co.,
Ltd. • Android • iOS • React NaAve • ! hDp:/ /funnelbit.hatenablog.com/ • " hDps:/ /www.instagram.com/ experopero/
AGENDA • ΧΫϤϜͱΞϓϦϦχϡʔΞϧʹ͍ͭͯ • ΫϩεϓϥοτϑΥʔϜ։ൃࡾछͷਆث • React Na)veΛ༻͍ͨ։ൃ • ಋೖͯ͠Ͳ͏͔ͩͬͨ
• ࠔͬͨ͜ͱ
ΧΫϤϜ
KADOKAWA×ͯͳ͕͓͘Δ ʮॻ͚ΔɺಡΊΔɺ͑ΒΕΔʯ WebখઆߘαΠτ
ΧΫϤϜ • KADOKAWA༷ͱͯͳͷڞಉ։ൃ • ެࣜ࡞ಡΊ·͢ • ॻ੶Խ࡞ଓʑग़ͯ·͢ • ΞχϝԽ࡞ܾఆ͠·ͨ͠ •
ॎΈରԠ • ެࣜϏϡʔϫʔΞϓϦ (Android, iOS)
kakuyomu.jp
None
None
ΞϓϦϦχϡʔΞϧʹ ͍ͭͯ
ΞϓϦΧΫϤϜͷϤϜ෦Λ ୲͍ͬͯΔ
ࠓճΧΫϤϜViewerͱͯ͠ ϦχϡʔΞϧ
δϟϯϧؒΛεϫΠϓͰαΫαΫҠಈͯ͠ɺ ͓ͯͷখઆΛܰշʹ୳͘͢͠
None
ϝσΟΞը໘ͷωΠςΟϒԽ ʴ طଘը໘ͷվम
৽نը໘ ΫϩεϓϥοτϑΥʔϜͰ → React Na)veΛ࠾༻
طଘը໘ͷվमैདྷ௨Γ → Java(్த͔ΒKotlinԽ)/ Swi1
React Na(ve + ωΠςΟϒͷ ϋΠϒϦουΞϓϦʹ
None
None
Ϋϩε ϓϥοτϑΥʔϜ ։ൃࡾछͷਆث
ΫϩεϓϥοτϑΥʔϜ։ൃࡾछͷਆث • React Na)ve • GraphQL • (TypeScript)
React Na(ve
React Na(ve • ReactΛར༻ͯ͠ϞόΠϧΞϓϦΛ։ൃͰ͖ΔϑϨʔϜϫʔΫ • github.com/facebook/react-na5ve • Android, iOSରԠ •
طଘͷωΠςΟϒΞϓϦʹՃͰಋೖՄೳ
React Na(ve • JavaScriptʹXMLͷλάͷΑ͏ͳه๏͕Ճ͞Εͨ JSXΛͬͯهड़ • TypeScriptʹରԠ • ܕͷԸܙΛड͚ΒΕΔ •
ωΠςΟϒͷView(≠ ϑϨʔϜϫʔΫඪ४ͷView)
None
GraphQL
GraphQL is a query language for your API — h$ps://graphql.org/learn/
୯ҰͷΤϯυϙΠϯτʹ ಠࣗܗࣜͷΫΤϦʔΛ͛ͯ ϨεϙϯεΛड͚औΔ
None
None
graphql.org
։ൃͷྲྀΕ
։ൃͷྲྀΕ 1. ϦϙδτϦͱϦϦʔεઓུ 2. ࡞͢Δը໘Λੳ 3. ComponentΛ࡞ 4. ωΠςΟϒͷը໘ʹ React
Na2ve ୯ಠදࣔ͢Δը໘Λ࡞ 5. Apollo Ͱ௨৴ 6. ࡞ͬͨ Component ΛͬͯϦετΛදࣔ͢Δ
1. ϦϙδτϦͱϦϦʔεઓུ
Monorepo ʹ͢Δ • ैདྷ͔Ε͍ͯͨ Android ͱ iOS ͷ ϦϙδτϦΛҰͭʹ •
h,p:/ /engineering.khanacademy.org/ posts/react-na;ve-monorepo.html
Android ͱ iOS ͰผʑʹϦϦʔε͢Δ
2. ࡞͢Δը໘Λੳ
࡞͢Δը໘Λੳ • Ͳ͔͜ΒΛωΠςΟϒɺͲ͔͜ΒΛ React Na)ve ʹ͢Δͷ͔Λߟ͑Δ • Component ͷࡉԽʹ͍ͭͯߟ͑Δ
Ͳ͔͜ΒΛωΠςΟϒɺͲ͜ ͔ΒΛ React Na(ve ʹ͢Δͷ ͔Λߟ͑Δ • Ϧετ෦͕༷ʑͳηϧ͕͍ࠞͬͯ͡ ͯߴίετ •
Ϧετ෦ GraphQL ͱ૬ੑ͕͍͍
Ͳ͔͜ΒΛωΠςΟϒɺͲ͜ ͔ΒΛ React Na(ve ʹ͢Δͷ ͔Λߟ͑Δ • φϏήʔγϣϯ෦શͯωΠςΟϒ ʹ͢Δ΄͏͕ϝϦοτ͕େ͖͍ •
͋ͱͰઆ໌͠·͢ʂ
࡞͢Δը໘Λੳ • ߏཁૉΛ Component ʹࡉԽ
࡞͢Δը໘Λੳ • ؆୯ʹ֤ View Λ࡞Δ͜ͱ͕Ͱ͖Δ • ࠶ར༻Λੵۃతʹૂ͑Δ
3. ComponentΛ࡞
ComponentΛ࡞ • ࠷খ୯Ґ͔Β Component Λ࡞Δ • Storybook ͰҰͭͣͭ֬ೝ
Storybook • h#ps:/ /github.com/storybooks/ storybook • UI ίϯϙʔωϯτ୯ମͰಈ͔͢͜ͱͷ Ͱ͖Δڥ •
ը໘Λ࡞Βͳͯ͘ίϯϙʔωϯτ୯ ҐͰ֬ೝͰ͖Δ • View ͷଟ༷ͳঢ়ଶΛ֬ೝͰ͖Δ
Storybook • ༷ʑͳঢ়ଶΛ࣋ͭ View • ؆୯ʹՄࢹԽͰ͖Δ
None
4. ωΠςΟϒͷը໘ʹ React Na*ve ୯ಠදࣔ͢Δը໘Λ࡞
ωΠςΟϒͷը໘ʹ React Na(ve ୯ಠදࣔ͢Δը໘Λ࡞ • React Na)ve ͷ Component Λදࣔ͢Δ
Ac)vity Λ༻ҙ͢Δ • h4ps:/ /facebook.github.io/react-na)ve/docs/integra)on-with- exis)ng-apps.html • ReactRootViewΛ͏
None
5. Apollo Ͱ௨৴ͯ͠ɺϦετදࣔ
Apollo Apollo is a complete pla-orm for implemen1ng a graph
over your data. It includes two run1me libraries, Apollo Server and Apollo Client, for building and querying your graph’s API. — h$ps://www.apollographql.com/docs/tutorial/ introduc8on.html#what-is-apollo
Apollo Ͱ௨৴͢Δ ඞཁͳͷ • apollo schema:download • gql(graphql-tag) هड़ •
apollo codegen:generate • <ApolloProvider> ͱ <Query>
apollo schema:download • αʔό͔ΒεΩʔϚఆٛΛͱͬͯ͘Δ • apollo schema:download src/graphql/schema.json --endpoint=***
Query
None
Fragment
h"ps:/ /graphql.org/learn/queries/ #fragments
None
apollo codegen:generate • apollo codegen:generate --schema=src/graphql/ schema.json --queries=src/**/*.tsx -- target=typescript
None
௨৴
None
ϩʔσΟϯάதͷॲཧΛॻ͖͍ͨͳ Β
None
ΤϥʔϋϯυϦϯά͍ͨ͠ͳΒ
None
Higher Order Component (HOC) • <Query /> Λ͏ʹ <ApolloProvider />
ͰғΉඞཁ͕ ͋Δ • ͍͍ͪͪॻ͘ͷ໘ • HOC Λ͏
None
None
6. ࡞ͬͨ Component Λͬͯ ϦετΛදࣔ͢Δ
࡞ͬͨ Component ΛͬͯϦετΛදࣔ͢ Δ
None
ωΠςΟϒଆͱͷ࿈ܞ
Na#ve Module
ωΠςΟϒଆͷॲཧΛ React Na(veଆ͔ΒݺΔ
React Na(veʹରԠ͍ͯ͠Δ Module͕ͳ͍࣌ʹ࡞Δ
ྫ͑ • DBͷΞΫηε • طʹΞϓϦʹ͋ΔϩδοΫͷྲྀ༻ • طଘͷωΠςΟϒΞϓϦ෦ͱͷ࿈ܞ • React Na+veଆ͔ΒAc+vityΛىಈ
(ྫ)ը໘ભҠ
React Na(ve Naviga(onͷ ϥΠϒϥϦʔΛ͏
React Na(ve Naviga(onͷ ϥΠϒϥϦʔΛ͏ →ը໘ભҠωΠςΟϒଆͰ࣮ͨ͠
ͳͥʁ
ϑϧReact Na(ve Ͱͳ͍͔Β
ྫ͑ • React Na)veͷը໘͔ΒωΠςΟϒͷը໘ʹભҠ͢Δ • ωΠςΟϒͷը໘͔ΒReact Na)veͷը໘ʹભҠ͢Δ • ViewPagerͷFragmentͷView͚ͩReact Na)veͩͬͨΓ
ը໘ભҠશͯωΠςΟϒଆͰ݁ → ࣮͕γϯϓϧʹɺReact Na)veଆ͔Β Na)ve ModuleͷϝιουΛݺͿ
ModuleΛ࡞
None
None
ύϑΥʔϚϯε
σόοάϏϧυ͕ॏ͍ (iOSͦΜͳʹมΘΒͳ͍)
ϦϦʔεϏϧυͰ ͳ͍
→ ύϑΥʔϚϯενϡʔχϯά͕ ΓͮΒ͍
ݟ͓࣋ͪͷํ͍ͨΒ ڭ͍͑ͯͩ͘͞
ςετ
jest ͷεφοϓγϣοτςετ
ComponentͷπϦʔ͕ਖ਼͍͔͠Λ ͔֬Ί͍ͯΔ
None
None
None
None
ҙਤ͠ͳ͍มߋΛݕͰ͖Δ
εφοϓγϣοτςετҎ֎ ͬͯͳ͍
ϩδοΫ͕React Na(veଆʹͳ͍
ωΠςΟϒଆͰUnit Test
ೖΕͯΈͯ Ͳ͏͔ͩͬͨ
ѹతͳUIߏங
Hot ReloadͰTry & Error͍͢͠
ͦͷଞ • Webͱ࿈ܞͯ͠Ϧετදࣔ→ৄࡉը໘Έ͍ͨͳΞϓϦͰ͑ͦ͏ • ҰํͰΧελϜViewΛଟ༻͢ΔΑ͏ͳը໘͕ଟ͍ΞϓϦͷ։ൃʹ͔ͳ͍ • ωΠςΟϒଆͰΧελϜViewΛ࡞ͬͯReact Na/veʹͭͳ͛Δͷ໘ • React
Na/veʹ͋Δίϯϙʔωϯτ͚ͩͰදݱͰ͖Δͱָ • ϋΠϒϦουΞϓϦΛݕ౼ͯ͠Αͦ͞͏ • ύϑΥʔϚϯεѱ͘ͳ͍͕νϡʔχϯάେมͦ͏ • σόοάϏϧυͷύϑΥʔϚϯε͕ѱ͘ɺޮՌ͕֬ೝͮ͠Β͍
ࠔͬͨ͜ͱ
React Na(ve Ͱ ViewPager ϥΠΫͳ ը໘Λ࡞Δͱܹॏʹͳͬͨ
React Na(ve Ͱ ViewPager • h#ps:/ /github.com/react-na6ve-community/react-na6ve-tab- view • ૉʹΔͱҰ੪ʹશը໘͕
render • shouldComponentUpdate੍ޚɺදࣔதϖʔδͷ྆ྡ͚ͩ render ͢ΔͳͲɺ࠷దԽํ๏͋Δ͕ͦΕͰ͍ • ҰಡΈࠐΈऴΘͬͨը໘͕࠶ͼਅͬനʹͳΔͳͲɺฐ͕ େ͖͍
React Na(ve Ͱ ViewPager • h#ps:/ /github.com/ptomasroos/react-na6ve-scrollable-tab-view • iOS ͩͱ͍
• <Query> ͷ௨৴ΛࢭΊΔ͕͢ͳ͍ • ͘͢εϫΠϓ͢Δͱը໘௨৴͞Εଓ͚Δ • λϒͷͰύϑΥʔϚϯε͕ࠨӈ͞ΕΔ
→ ωΠςΟϒͰViewPager + FragmentͰ࣮͢Δ͜ͱʹͳͬͨ
Android Studio ͷόʔδϣϯΛ ࣗ༝ʹ্͛ΒΕͳ͍
iOS ͱ Android Ͱ Component ʹػೳ͕ࠩ͋Δ
ScrollView.snapToAlignment
ScrollView.snapToAlignment • AndroidඇରԠ • ~ v0.55 • ΧϧʔηϧͰεφοϓΛ࣮͢Δ࣌ʹ͑ͳ͍ • όʔδϣϯΛ্͍͕͙͛ͨ͢ʹ্͛ΒΕͳ͍
• → εφοϓఘΊͨ
WebView.onShouldStartLoadWithRe quest
WebView.onShouldStartLoadWithRequest • AndroidඇରԠ • WebViewͰભҠ͠Α͏ͱ͍ͯ͠ΔϦϯΫʹରԠ͢ΔωΠςΟϒ ͷը໘͕͋Ε։͖͍ͨ • طʹωΠςΟϒଆʹಉ༷ͷ࣮͕͋Δ • →
ωΠςΟϒͷWebViewΛ͏͜ͱʹͨ͠
ͨ·ʹωΠςΟϒΫϥογϡ͢Δ !
·ͱΊ
·ͱΊ • Monorepoʹ͢Δͱཧ͘͢͠ͳΔ • ϦϦʔεPRผʑʹཱͯΔ • φϏήʔγϣϯશ෦ωΠςΟϒଆͰΔͱγϯϓϧʹͳͬͯ Α͍ • StorybookHot
ReloadΛ༻͍Δͱૉૣ͘։ൃ͕Մೳ
·ͱΊ • ωΠςΟϒଆͷίʔυͱ࿈ܞ͍ͨ͠߹Na$ve ModuleΛ࡞Δ • ςετ·ͣεφοϓγϣοτςετ͔Β • ύϑΥʔϚϯενϡʔχϯά՝ • React
Na$veۜͷؙͰͳ͍ • ಋೖ͢ΔՕॴΛ͔ͬ͠Γݕ౼͢Δඞཁ͕͋Δ • GraphQL࠷ߴ
Enjoy React Na-ve
! ࠾༻ใ
גࣜձࣾͯͳͰɺ ͱʹʮઓʯͰ͖Δ ؒΛืू͍ͯ͠·͢
͜ΜͳਓΛ୳͍ͯ͠·͢ • AndroidΞϓϦΛ࡞Γ͍ͨਓ • React Na/veͷΞϓϦ৮Γ͍ͨਓ • iOSΞϓϦ࡞Γ͍ͨਓ • αʔόʔαΠυΓ͍ͨਓ
h"p:/ /hatenacorp.jp/recruit/