クロスプラットフォーム開発3種の神器 React Native / TypeScript / GraphQL

1. ΫϩεϓϥοτϑΥʔϜ։ൃ ࡾछͷਆث React Na(ve / TypeScript / GraphQL Takuji Nishibayashi, Ryo Kitamura DroidKaigi 2019, day 1, 16:30-17:20
2. ࣗݾ঺հ
3. ࣗݾ঺հ • Takuji Nishibayashi • takuji31 • Hatena Co., Ltd. (2016/01 ~) • Android (2009~) • Kotlin • ! hFps:/ /blog.takuji31.jp • " hFps:/ /nazuna.takuji31.jp • # $ hFps:/ /photo.takuji31.jp
4. ࣗݾ঺հ • Ryo Kitamura • @experopero id:funnelbit • Hatena Co., Ltd. • Android • iOS • React NaAve • ! hDp:/ /funnelbit.hatenablog.com/ • " hDps:/ /www.instagram.com/ experopero/
5. AGENDA • ΧΫϤϜͱΞϓϦϦχϡʔΞϧʹ͍ͭͯ • ΫϩεϓϥοτϑΥʔϜ։ൃࡾछͷਆث • React Na)veΛ༻͍ͨ։ൃ • ಋೖͯ͠Ͳ͏͔ͩͬͨ • ࠔͬͨ͜ͱ
6. ΧΫϤϜ
7. KADOKAWA×͸ͯͳ͕͓͘Δ ʮॻ͚ΔɺಡΊΔɺ఻͑ΒΕΔʯ Webখઆ౤ߘαΠτ
8. ΧΫϤϜ • KADOKAWA༷ͱ͸ͯͳͷڞಉ։ൃ • ެࣜ࡞඼΋ಡΊ·͢ • ॻ੶Խ࡞඼ଓʑग़ͯ·͢ • ΞχϝԽ࡞඼΋ܾఆ͠·ͨ͠ • ॎ૊ΈରԠ • ެࣜϏϡʔϫʔΞϓϦ (Android, iOS)
9. kakuyomu.jp
12. ΞϓϦϦχϡʔΞϧʹ ͍ͭͯ
13. ΞϓϦ͸ΧΫϤϜͷϤϜ෦෼Λ ୲͍ͬͯΔ
14. ࠓճΧΫϤϜViewerͱͯ͠ ϦχϡʔΞϧ
15. δϟϯϧؒΛεϫΠϓͰαΫαΫҠಈͯ͠ɺ ͓໨౰ͯͷখઆΛܰշʹ୳͠΍͘͢
17. ϝσΟΞը໘ͷωΠςΟϒԽ ʴ طଘը໘ͷվम
18. ৽نը໘͸ ΫϩεϓϥοτϑΥʔϜͰ → React Na)veΛ࠾༻
19. طଘը໘ͷվम͸ैདྷ௨Γ → Java(్த͔ΒKotlinԽ)/ Swi1
20. React Na(ve + ωΠςΟϒͷ ϋΠϒϦουΞϓϦʹ
23. Ϋϩε ϓϥοτϑΥʔϜ ։ൃࡾछͷਆث
24. ΫϩεϓϥοτϑΥʔϜ։ൃࡾछͷਆث • React Na)ve • GraphQL • (TypeScript)
25. React Na(ve
26. React Na(ve • ReactΛར༻ͯ͠ϞόΠϧΞϓϦΛ։ൃͰ͖ΔϑϨʔϜϫʔΫ • github.com/facebook/react-na5ve • Android, iOSରԠ • طଘͷωΠςΟϒΞϓϦʹ௥ՃͰಋೖՄೳ
27. React Na(ve • JavaScriptʹXMLͷλάͷΑ͏ͳه๏͕௥Ճ͞Εͨ JSXΛ࢖ͬͯهड़ • TypeScriptʹ΋ରԠ • ܕͷԸܙΛड͚ΒΕΔ • ωΠςΟϒͷView(≠ ϑϨʔϜϫʔΫඪ४ͷView)
29. GraphQL
30. GraphQL is a query language for your API — h$ps://graphql.org/learn/
31. ୯ҰͷΤϯυϙΠϯτʹ ಠࣗܗࣜͷΫΤϦʔΛ౤͛ͯ ϨεϙϯεΛड͚औΔ
34. graphql.org
35. ։ൃͷྲྀΕ
36. ։ൃͷྲྀΕ 1. ϦϙδτϦͱϦϦʔεઓུ 2. ࡞੒͢Δը໘Λ෼ੳ 3. ComponentΛ࡞੒ 4. ωΠςΟϒͷը໘ʹ React Na2ve ୯ಠදࣔ͢Δը໘Λ࡞੒ 5. Apollo Ͱ௨৴ 6. ࡞ͬͨ Component Λ࢖ͬͯϦετΛදࣔ͢Δ
37. 1. ϦϙδτϦͱϦϦʔεઓུ
38. Monorepo ʹ͢Δ • ैདྷ͸෼͔Ε͍ͯͨ Android ͱ iOS ͷ ϦϙδτϦΛҰͭʹ • h,p:/ /engineering.khanacademy.org/ posts/react-na;ve-monorepo.html
39. Android ͱ iOS ͰผʑʹϦϦʔε͢Δ
40. 2. ࡞੒͢Δը໘Λ෼ੳ
41. ࡞੒͢Δը໘Λ෼ੳ • Ͳ͔͜ΒΛωΠςΟϒɺͲ͔͜ΒΛ React Na)ve ʹ͢Δͷ͔Λߟ͑Δ • Component ͷࡉ෼Խʹ͍ͭͯߟ͑Δ
42. Ͳ͔͜ΒΛωΠςΟϒɺͲ͜ ͔ΒΛ React Na(ve ʹ͢Δͷ ͔Λߟ͑Δ • Ϧετ෦෼͕༷ʑͳηϧ͕͍ࠞͬͯ͡ ͯߴίετ • Ϧετ෦෼͸ GraphQL ͱ૬ੑ͕͍͍
43. Ͳ͔͜ΒΛωΠςΟϒɺͲ͜ ͔ΒΛ React Na(ve ʹ͢Δͷ ͔Λߟ͑Δ • φϏήʔγϣϯ෦෼͸શͯωΠςΟϒ ʹ͢Δ΄͏͕ϝϦοτ͕େ͖͍ • ͋ͱͰઆ໌͠·͢ʂ
44. ࡞੒͢Δը໘Λ෼ੳ • ߏ੒ཁૉΛ Component ʹࡉ෼Խ
45. ࡞੒͢Δը໘Λ෼ੳ • ؆୯ʹ֤ View Λ࡞Δ͜ͱ͕Ͱ͖Δ • ࠶ར༻Λੵۃతʹૂ͑Δ
46. 3. ComponentΛ࡞੒
47. ComponentΛ࡞੒ • ࠷খ୯Ґ͔Β Component Λ࡞Δ • Storybook ͰҰͭͣͭ֬ೝ
48. Storybook • h#ps:/ /github.com/storybooks/ storybook • UI ίϯϙʔωϯτ୯ମͰಈ͔͢͜ͱͷ Ͱ͖Δ؀ڥ • ը໘Λ࡞Βͳͯ͘΋ίϯϙʔωϯτ୯ ҐͰ֬ೝͰ͖Δ • View ͷଟ༷ͳঢ়ଶΛ֬ೝͰ͖Δ
49. Storybook • ༷ʑͳঢ়ଶΛ࣋ͭ View • ؆୯ʹՄࢹԽͰ͖Δ
51. 4. ωΠςΟϒͷը໘ʹ React Na*ve ୯ಠදࣔ͢Δը໘Λ࡞੒
52. ωΠςΟϒͷը໘ʹ 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Λ࢖͏
54. 5. Apollo Ͱ௨৴ͯ͠ɺϦετදࣔ
55. 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
56. Apollo Ͱ௨৴͢Δ ඞཁͳͷ͸ • apollo schema:download • gql(graphql-tag) هड़ • apollo codegen:generate • <ApolloProvider> ͱ <Query>
57. apollo schema:download • αʔό͔ΒεΩʔϚఆٛΛͱͬͯ͘Δ • apollo schema:download src/graphql/schema.json --endpoint=***
58. Query
60. Fragment
61. h"ps:/ /graphql.org/learn/queries/ #fragments
63. apollo codegen:generate • apollo codegen:generate --schema=src/graphql/ schema.json --queries=src/**/*.tsx -- target=typescript
65. ௨৴
67. ϩʔσΟϯάதͷॲཧΛॻ͖͍ͨͳ Β
69. ΤϥʔϋϯυϦϯά͍ͨ͠ͳΒ
71. Higher Order Component (HOC) • <Query /> Λ࢖͏ʹ͸ <ApolloProvider /> ͰғΉඞཁ͕ ͋Δ • ͍͍ͪͪॻ͘ͷ͸໘౗ • HOC Λ࢖͏
74. 6. ࡞ͬͨ Component Λ࢖ͬͯ ϦετΛදࣔ͢Δ
75. ࡞ͬͨ Component Λ࢖ͬͯϦετΛදࣔ͢ Δ
77. ωΠςΟϒଆͱͷ࿈ܞ
78. Na#ve Module
79. ωΠςΟϒଆͷॲཧΛ React Na(veଆ͔Βݺ΂Δ
80. React Na(veʹରԠ͍ͯ͠Δ Module͕ͳ͍࣌ʹ࡞Δ
81. ྫ͑͹ • DB΁ͷΞΫηε • طʹΞϓϦʹ͋ΔϩδοΫͷྲྀ༻ • طଘͷωΠςΟϒΞϓϦ෦෼ͱͷ࿈ܞ • React Na+veଆ͔ΒAc+vityΛىಈ
82. (ྫ)ը໘ભҠ
83. React Na(ve Naviga(on౳ͷ ϥΠϒϥϦʔΛ࢖͏
84. React Na(ve Naviga(on౳ͷ ϥΠϒϥϦʔΛ࢖͏ →ը໘ભҠ͸ωΠςΟϒଆͰ࣮૷ͨ͠
85. ͳͥʁ
86. ϑϧReact Na(ve Ͱ͸ͳ͍͔Β
87. ྫ͑͹ • React Na)veͷը໘͔ΒωΠςΟϒͷը໘ʹભҠ͢Δ • ωΠςΟϒͷը໘͔ΒReact Na)veͷը໘ʹભҠ͢Δ • ViewPagerͷFragmentͷView͚ͩReact Na)veͩͬͨΓ
88. ը໘ભҠ͸શͯωΠςΟϒଆͰ׬݁ → ࣮૷͕γϯϓϧʹɺReact Na)veଆ͔Β͸ Na)ve ModuleͷϝιουΛݺͿ
89. ModuleΛ࡞੒
92. ύϑΥʔϚϯε
93. σόοάϏϧυ͕ॏ͍ (iOS͸ͦΜͳʹมΘΒͳ͍)
94. ϦϦʔεϏϧυͰ͸ ໰୊ͳ͍
95. → ύϑΥʔϚϯενϡʔχϯά͕ ΍ΓͮΒ͍
96. ஌ݟ͓࣋ͪͷํ͍ͨΒ ڭ͍͑ͯͩ͘͞
97. ςετ
98. jest ͷεφοϓγϣοτςετ
99. ComponentͷπϦʔ͕ਖ਼͍͔͠Λ ͔֬Ί͍ͯΔ
104. ҙਤ͠ͳ͍มߋΛݕ஌Ͱ͖Δ
105. εφοϓγϣοτςετҎ֎͸ ΍ͬͯͳ͍
106. ϩδοΫ͕React Na(veଆʹͳ͍
107. ωΠςΟϒଆͰUnit Test
108. ೖΕͯΈͯ Ͳ͏͔ͩͬͨ
109. ѹ౗తͳUIߏங଎౓
110. Hot ReloadͰTry & Error͠΍͍͢
111. ͦͷଞ • Webͱ࿈ܞͯ͠Ϧετදࣔ→ৄࡉը໘Έ͍ͨͳΞϓϦͰ͸࢖͑ͦ͏ • ҰํͰΧελϜViewΛଟ༻͢ΔΑ͏ͳը໘͕ଟ͍ΞϓϦͷ։ൃʹ͸޲͔ͳ͍ • ωΠςΟϒଆͰΧελϜViewΛ࡞ͬͯReact Na/veʹͭͳ͛Δͷ͸໘౗ • React Na/veʹ͋Δίϯϙʔωϯτ͚ͩͰදݱͰ͖Δͱָ • ϋΠϒϦουΞϓϦΛݕ౼ͯ͠΋Αͦ͞͏ • ύϑΥʔϚϯε͸ѱ͘ͳ͍͕νϡʔχϯά͸େมͦ͏ • σόοάϏϧυͷύϑΥʔϚϯε͕ѱ͘ɺޮՌ͕֬ೝͮ͠Β͍
112. ࠔͬͨ͜ͱ
113. React Na(ve Ͱ ViewPager ϥΠΫͳ ը໘Λ࡞Δͱܹॏʹͳͬͨ
114. React Na(ve Ͱ ViewPager • h#ps:/ /github.com/react-na6ve-community/react-na6ve-tab- view • ૉ๿ʹ΍ΔͱҰ੪ʹશը໘͕ render • shouldComponentUpdate੍ޚɺදࣔதϖʔδͷ྆ྡ͚ͩ render ͢ΔͳͲɺ࠷దԽํ๏͸͋Δ͕ͦΕͰ΋஗͍ • Ұ౓ಡΈࠐΈऴΘͬͨը໘͕࠶ͼਅͬനʹͳΔͳͲɺฐ֐͕ େ͖͍
115. React Na(ve Ͱ ViewPager • h#ps:/ /github.com/ptomasroos/react-na6ve-scrollable-tab-view • iOS ͩͱ஗͍ • <Query> ͷ௨৴ΛࢭΊΔ͢΂͕ͳ͍ • ͢͹΍͘εϫΠϓ͢Δͱը໘෼௨৴͞Εଓ͚Δ • λϒͷ਺ͰύϑΥʔϚϯε͕ࠨӈ͞ΕΔ
116. → ωΠςΟϒͰViewPager + FragmentͰ࣮૷͢Δ͜ͱʹͳͬͨ
117. Android Studio ͷόʔδϣϯΛ ࣗ༝ʹ্͛ΒΕͳ͍
118. iOS ͱ Android Ͱ Component ʹػೳ͕ࠩ͋Δ
119. ScrollView.snapToAlignment
120. ScrollView.snapToAlignment • AndroidඇରԠ • ~ v0.55 • ΧϧʔηϧͰεφοϓΛ࣮૷͢Δ࣌ʹ࢖͑ͳ͍ • όʔδϣϯΛ্͍͕͙͛ͨ͢ʹ͸্͛ΒΕͳ͍ • → εφοϓ͸ఘΊͨ
121. WebView.onShouldStartLoadWithRe quest
122. WebView.onShouldStartLoadWithRequest • AndroidඇରԠ • WebViewͰભҠ͠Α͏ͱ͍ͯ͠ΔϦϯΫʹରԠ͢ΔωΠςΟϒ ͷը໘͕͋Ε͹։͖͍ͨ • طʹωΠςΟϒଆʹಉ༷ͷ࣮૷͕͋Δ • → ωΠςΟϒͷWebViewΛ࢖͏͜ͱʹͨ͠
123. ͨ·ʹωΠςΟϒΫϥογϡ͢Δ !
124. ·ͱΊ
125. ·ͱΊ • Monorepoʹ͢Δͱ؅ཧ͠΍͘͢ͳΔ • ϦϦʔεPR͸ผʑʹཱͯΔ • φϏήʔγϣϯ͸શ෦ωΠςΟϒଆͰ΍Δͱγϯϓϧʹͳͬͯ Α͍ • Storybook΍Hot ReloadΛ༻͍Δͱૉૣ͘։ൃ͕Մೳ
126. ·ͱΊ • ωΠςΟϒଆͷίʔυͱ࿈ܞ͍ͨ͠৔߹͸Na$ve ModuleΛ࡞Δ • ςετ͸·ͣεφοϓγϣοτςετ͔Β • ύϑΥʔϚϯενϡʔχϯά͸՝୊ • React Na$ve͸ۜͷ஄ؙͰ͸ͳ͍ • ಋೖ͢ΔՕॴΛ͔ͬ͠Γݕ౼͢Δඞཁ͕͋Δ • GraphQL͸࠷ߴ
127. Enjoy React Na-ve
128. ! ࠾༻৘ใ
129. גࣜձࣾ͸ͯͳͰ͸ɺ ͱ΋ʹʮ௅ઓʯͰ͖Δ ஥ؒΛืू͍ͯ͠·͢
130. ͜ΜͳਓΛ୳͍ͯ͠·͢ • AndroidΞϓϦΛ࡞Γ͍ͨਓ • React Na/veͷΞϓϦ৮Γ͍ͨਓ • iOSΞϓϦ΋࡞Γ͍ͨਓ • αʔόʔαΠυ΋΍Γ͍ͨਓ
131. h"p:/ /hatenacorp.jp/recruit/