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 / GraphQL
Search
Takuji Nishibayashi
February 07, 2019
Technology
7
6k
クロスプラットフォーム開発3種の神器 React Native / TypeScript / GraphQL
Takuji Nishibayashi
February 07, 2019
Tweet
Share
More Decks by Takuji Nishibayashi
See All by Takuji Nishibayashi
java.timeをAndroidで使う
takuji31
0
24
KSPを使ってコード生成
takuji31
0
160
Kotlin Symbol Processing API (KSP) を使って Kotlin ア プリケーションの開発を効率化する
takuji31
1
700
kotlinx.serialization
takuji31
0
440
kanmoba-returns-02.pdf
takuji31
0
130
AndroidXとKotlin Coroutines
takuji31
0
270
AndroidXに潜む便利なヤツら
takuji31
0
120
Kotlin Inline Class
takuji31
0
96
No more Adapter with Epoxy and Data Binding
takuji31
0
780
Other Decks in Technology
See All in Technology
JAWS-UG Bedrock Claude Night
yamahiro
3
620
ServiceNow Knowledge 24の歩き方 EYストラテジー・アンド・コンサルティング
manarobot
0
200
Kernel MemoryでAzure OpenAI Serviceとお手軽データソース連携
mitsuzono
1
260
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
370
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.7k
R3のコードから見る実践LINQ実装最適化・コンカレントプログラミング実例
neuecc
2
500
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
310
AWSに詳しくない人でも始められるコスト最適化ガイド
yuhta28
1
250
LLM開発・活用の舞台裏@2024.04.25
yushin_n
3
850
アクセス制御にまつわる改善 / Improving access control
itkq
0
560
エンジニア候補者向け資料2024.04.24.pdf
macloud
0
3.3k
私が trocco を推す理由
__allllllllez__
1
260
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
Bash Introduction
62gerente
604
210k
Building Better People: How to give real-time feedback that sticks.
wjessup
355
18k
Facilitating Awesome Meetings
lara
42
5.6k
Music & Morning Musume
bryan
41
5.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
BBQ
matthewcrist
80
8.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
648
58k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Building a Scalable Design System with Sketch
lauravandoore
456
32k
Ruby is Unlike a Banana
tanoku
96
10k
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/