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
96
CameraX使ってみた
takuji31
0
260
kotlinx.datetime 使ってみた
takuji31
0
850
HiltのCustom Componentについて
takuji31
0
310
java.timeをAndroidで使う
takuji31
0
150
KSPを使ってコード生成
takuji31
0
400
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
Wasmの気になる最新情報
askua
0
170
AWS UG Grantでグローバル20名に選出されてre:Inventに行く話と、マルチクラウドセキュリティの教科書を執筆した話 / The Story of Being Selected for the AWS UG Grant to Attending re:Invent, and Writing a Multi-Cloud Security Textbook
yuj1osm
1
110
ビズリーチ求職者検索におけるPLMとLLMの活用 / Search Engineering MEET UP_2-1
visional_engineering_and_design
1
190
AWSでAgentic AIを開発するための前提知識の整理
nasuvitz
2
230
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
480
[OCI Skill Mapping] AWSユーザーのためのOCI – IaaS編(Compute/Storage/Networking) (2025年10月8日開催)
oracle4engineer
PRO
1
120
「魔法少女まどか☆マギカ Magia Exedra」のIPのキャラクターを描くための3Dルック開発
gree_tech
PRO
0
110
React19.2のuseEffectEventを追う
maguroalternative
2
570
HR Force における DWH の併用事例 ~ サービス基盤としての BigQuery / 分析基盤としての Snowflake ~@Cross Data Platforms Meetup #2「BigQueryと愉快な仲間たち」
ryo_suzuki
0
250
Databricks AI/BI Genie の「値ディクショナリー」をAmazonの奥地(S3)まで見に行く
kameitomohiro
1
350
クラウドとリアルの融合により、製造業はどう変わるのか?〜クラスメソッドの製造業への取組と共に〜
hamadakoji
0
230
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
150
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1371
200k
Side Projects
sachag
455
43k
Fireside Chat
paigeccino
40
3.7k
Embracing the Ebb and Flow
colly
88
4.9k
Speed Design
sergeychernyshev
32
1.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.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/