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
93
CameraX使ってみた
takuji31
0
250
kotlinx.datetime 使ってみた
takuji31
0
810
HiltのCustom Componentについて
takuji31
0
300
java.timeをAndroidで使う
takuji31
0
150
KSPを使ってコード生成
takuji31
0
390
Kotlin Symbol Processing API (KSP) を使って Kotlin ア プリケーションの開発を効率化する
takuji31
1
2.9k
kotlinx.serialization
takuji31
0
630
kanmoba-returns-02.pdf
takuji31
0
240
Other Decks in Technology
See All in Technology
自作LLM Native GORM Pluginで実現する AI Agentバックテスト基盤構築
po3rin
2
210
BtoBプロダクト開発の深層
16bitidol
0
130
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
budougumi0617
4
900
Geospatialの世界最前線を探る [2025年版]
dayjournal
2
430
避けられないI/O待ちに対処する: Rails アプリにおけるSSEとasync gemの活用 / Tackling Inevitable I/O Latency in Rails Apps with SSE and the async gem
moznion
2
1.8k
Go Conference 2025: GoのinterfaceとGenericsの内部構造と進化 / Go type system internals
ryokotmng
3
530
Deep Research と NotebookLM を使い倒す!レガシーリプレイスの技術選定と学習コスト削減術
tet0h
0
2.8k
全てGoで作るP2P対戦ゲーム入門
ponyo877
3
1.2k
2重リクエスト完全攻略HANDBOOK / Double Request Handbook
shoheimitani
5
7.1k
AIコーディングとエンジニアリングの現在地 / A Snapshot of AI Coding and Engineering(Sept. 2025)
ar_tama
0
160
バイブコーディングと継続的デプロイメント
nwiizo
2
350
BirdCLEF+2025 Noir 5位解法紹介
myso
0
150
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
460k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
3k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Designing for humans not robots
tammielis
254
25k
We Have a Design System, Now What?
morganepeng
53
7.8k
Docker and Python
trallard
46
3.6k
Scaling GitHub
holman
463
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.2k
Become a Pro
speakerdeck
PRO
29
5.5k
Building Adaptive Systems
keathley
43
2.8k
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/