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.2k
クロスプラットフォーム開発3種の神器 React Native / TypeScript / GraphQL
Takuji Nishibayashi
February 07, 2019
Tweet
Share
More Decks by Takuji Nishibayashi
See All by Takuji Nishibayashi
CameraX使ってみた
takuji31
0
120
kotlinx.datetime 使ってみた
takuji31
0
450
HiltのCustom Componentについて
takuji31
0
220
java.timeをAndroidで使う
takuji31
0
87
KSPを使ってコード生成
takuji31
0
340
Kotlin Symbol Processing API (KSP) を使って Kotlin ア プリケーションの開発を効率化する
takuji31
1
1.1k
kotlinx.serialization
takuji31
0
570
kanmoba-returns-02.pdf
takuji31
0
200
AndroidXとKotlin Coroutines
takuji31
0
350
Other Decks in Technology
See All in Technology
Active Directory の保護
eurekaberry
7
3.9k
関東Kaggler会LT: 人狼コンペとLLM量子化について
nejumi
3
400
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
2.9k
Datadogとともにオブザーバビリティを布教しよう
mego2221
0
120
SCSAから学ぶセキュリティ管理
masakamayama
0
140
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
100
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
800
20250208_OpenAIDeepResearchがやばいという話
doradora09
PRO
0
170
Classmethod AI Talks(CATs) #15 司会進行スライド(2025.02.06) / classmethod-ai-talks-aka-cats_moderator-slides_vol15_2025-02-06
shinyaa31
0
160
アジャイル開発とスクラム
araihara
0
160
日経電子版 x AIエージェントの可能性とAgentic RAGによって提案書生成を行う技術
masahiro_nishimi
1
270
FastConnect の冗長性
ocise
1
9.5k
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
620
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Side Projects
sachag
452
42k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
The Cult of Friendly URLs
andyhume
78
6.2k
Building Applications with DynamoDB
mza
93
6.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
We Have a Design System, Now What?
morganepeng
51
7.4k
Building Adaptive Systems
keathley
39
2.4k
GraphQLの誤解/rethinking-graphql
sonatard
68
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/