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

Transcript

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

10. None
11. None

12. ΞϓϦϦχϡʔΞϧʹ ͍ͭͯ

13. ΞϓϦ͸ΧΫϤϜͷϤϜ෦෼Λ ୲͍ͬͯΔ

14. ࠓճΧΫϤϜViewerͱͯ͠ ϦχϡʔΞϧ

15. δϟϯϧؒΛεϫΠϓͰαΫαΫҠಈͯ͠ɺ ͓໨౰ͯͷখઆΛܰշʹ୳͠΍͘͢

16. None

17. ϝσΟΞը໘ͷωΠςΟϒԽ ʴ طଘը໘ͷվम

18. ৽نը໘͸ ΫϩεϓϥοτϑΥʔϜͰ → React Na)veΛ࠾༻

19. طଘը໘ͷվम͸ैདྷ௨Γ → Java(్த͔ΒKotlinԽ)/ Swi1

20. React Na(ve + ωΠςΟϒͷ ϋΠϒϦουΞϓϦʹ

21. None
22. None

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)
28. None

29. GraphQL

30. GraphQL is a query language for your API — h$ps://graphql.org/learn/

31. ୯ҰͷΤϯυϙΠϯτʹ ಠࣗܗࣜͷΫΤϦʔΛ౤͛ͯ ϨεϙϯεΛड͚औΔ

32. None
33. None

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 • ؆୯ʹՄࢹԽͰ͖Δ

50. None

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Λ࢖͏
53. None

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

59. None

60. Fragment

61. h"ps:/ /graphql.org/learn/queries/ #fragments

62. None

63. apollo codegen:generate • apollo codegen:generate --schema=src/graphql/ schema.json --queries=src/**/*.tsx -- target=typescript

64. None

65. ௨৴

66. None

67. ϩʔσΟϯάதͷॲཧΛॻ͖͍ͨͳ Β

68. None

69. ΤϥʔϋϯυϦϯά͍ͨ͠ͳΒ

70. None

71. Higher Order Component (HOC) • <Query /> Λ࢖͏ʹ͸ <ApolloProvider />

    ͰғΉඞཁ͕ ͋Δ • ͍͍ͪͪॻ͘ͷ͸໘౗ • HOC Λ࢖͏
72. None
73. None

74. 6. ࡞ͬͨ Component Λ࢖ͬͯ ϦετΛදࣔ͢Δ

75. ࡞ͬͨ Component Λ࢖ͬͯϦετΛදࣔ͢ Δ

76. None

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Λ࡞੒

90. None
91. None

92. ύϑΥʔϚϯε

93. σόοάϏϧυ͕ॏ͍ (iOS͸ͦΜͳʹมΘΒͳ͍)

94. ϦϦʔεϏϧυͰ͸ ໰୊ͳ͍

95. → ύϑΥʔϚϯενϡʔχϯά͕ ΍ΓͮΒ͍

96. ஌ݟ͓࣋ͪͷํ͍ͨΒ ڭ͍͑ͯͩ͘͞

97. ςετ

98. jest ͷεφοϓγϣοτςετ

99. ComponentͷπϦʔ͕ਖ਼͍͔͠Λ ͔֬Ί͍ͯΔ

100. None
101. None
102. None
103. None

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/