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

Transcript

1. 1.

   ΫϩεϓϥοτϑΥʔϜ։ൃ ࡾछͷਆث React Na(ve / TypeScript / GraphQL Takuji Nishibayashi,

   Ryo Kitamura DroidKaigi 2019, day 1, 16:30-17:20
2. 2.

   ࣗݾ঺հ

3. 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. 4.

   ࣗݾ঺հ • Ryo Kitamura • @experopero id:funnelbit • Hatena Co.,

   Ltd. • Android • iOS • React NaAve • ! hDp:/ /funnelbit.hatenablog.com/ • " hDps:/ /www.instagram.com/ experopero/
5. 5.

   AGENDA • ΧΫϤϜͱΞϓϦϦχϡʔΞϧʹ͍ͭͯ • ΫϩεϓϥοτϑΥʔϜ։ൃࡾछͷਆث • React Na)veΛ༻͍ͨ։ൃ • ಋೖͯ͠Ͳ͏͔ͩͬͨ

   • ࠔͬͨ͜ͱ
6. 6.

   ΧΫϤϜ

7. 7.

   KADOKAWA×͸ͯͳ͕͓͘Δ ʮॻ͚ΔɺಡΊΔɺ఻͑ΒΕΔʯ Webখઆ౤ߘαΠτ

8. 8.

   ΧΫϤϜ • KADOKAWA༷ͱ͸ͯͳͷڞಉ։ൃ • ެࣜ࡞඼΋ಡΊ·͢ • ॻ੶Խ࡞඼ଓʑग़ͯ·͢ • ΞχϝԽ࡞඼΋ܾఆ͠·ͨ͠ •

   ॎ૊ΈରԠ • ެࣜϏϡʔϫʔΞϓϦ (Android, iOS)
9. 9.

   kakuyomu.jp

10. 10.

    None
11. 11.

    None
12. 12.

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

13. 13.

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

14. 14.

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

15. 15.

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

16. 16.

    None
17. 17.

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

18. 18.

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

19. 19.

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

20. 20.

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

21. 21.

    None
22. 22.

    None
23. 23.

    Ϋϩε ϓϥοτϑΥʔϜ ։ൃࡾछͷਆث

24. 24.

    ΫϩεϓϥοτϑΥʔϜ։ൃࡾछͷਆث • React Na)ve • GraphQL • (TypeScript)

25. 25.

    React Na(ve

26. 26.

    React Na(ve • ReactΛར༻ͯ͠ϞόΠϧΞϓϦΛ։ൃͰ͖ΔϑϨʔϜϫʔΫ • github.com/facebook/react-na5ve • Android, iOSରԠ •

    طଘͷωΠςΟϒΞϓϦʹ௥ՃͰಋೖՄೳ
27. 27.

    React Na(ve • JavaScriptʹXMLͷλάͷΑ͏ͳه๏͕௥Ճ͞Εͨ JSXΛ࢖ͬͯهड़ • TypeScriptʹ΋ରԠ • ܕͷԸܙΛड͚ΒΕΔ •

    ωΠςΟϒͷView(≠ ϑϨʔϜϫʔΫඪ४ͷView)
28. 28.

    None
29. 29.

    GraphQL

30. 30.

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

31. 31.

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

32. 32.

    None
33. 33.

    None
34. 34.

    graphql.org

35. 35.

    ։ൃͷྲྀΕ

36. 36.

    ։ൃͷྲྀΕ 1. ϦϙδτϦͱϦϦʔεઓུ 2. ࡞੒͢Δը໘Λ෼ੳ 3. ComponentΛ࡞੒ 4. ωΠςΟϒͷը໘ʹ React

    Na2ve ୯ಠදࣔ͢Δը໘Λ࡞੒ 5. Apollo Ͱ௨৴ 6. ࡞ͬͨ Component Λ࢖ͬͯϦετΛදࣔ͢Δ
37. 37.

    1. ϦϙδτϦͱϦϦʔεઓུ

38. 38.

    Monorepo ʹ͢Δ • ैདྷ͸෼͔Ε͍ͯͨ Android ͱ iOS ͷ ϦϙδτϦΛҰͭʹ •

    h,p:/ /engineering.khanacademy.org/ posts/react-na;ve-monorepo.html
39. 39.

    Android ͱ iOS ͰผʑʹϦϦʔε͢Δ

40. 40.

    2. ࡞੒͢Δը໘Λ෼ੳ

41. 41.

    ࡞੒͢Δը໘Λ෼ੳ • Ͳ͔͜ΒΛωΠςΟϒɺͲ͔͜ΒΛ React Na)ve ʹ͢Δͷ͔Λߟ͑Δ • Component ͷࡉ෼Խʹ͍ͭͯߟ͑Δ

42. 42.

    Ͳ͔͜ΒΛωΠςΟϒɺͲ͜ ͔ΒΛ React Na(ve ʹ͢Δͷ ͔Λߟ͑Δ • Ϧετ෦෼͕༷ʑͳηϧ͕͍ࠞͬͯ͡ ͯߴίετ •

    Ϧετ෦෼͸ GraphQL ͱ૬ੑ͕͍͍
43. 43.

    Ͳ͔͜ΒΛωΠςΟϒɺͲ͜ ͔ΒΛ React Na(ve ʹ͢Δͷ ͔Λߟ͑Δ • φϏήʔγϣϯ෦෼͸શͯωΠςΟϒ ʹ͢Δ΄͏͕ϝϦοτ͕େ͖͍ •

    ͋ͱͰઆ໌͠·͢ʂ
44. 44.

    ࡞੒͢Δը໘Λ෼ੳ • ߏ੒ཁૉΛ Component ʹࡉ෼Խ

45. 45.

    ࡞੒͢Δը໘Λ෼ੳ • ؆୯ʹ֤ View Λ࡞Δ͜ͱ͕Ͱ͖Δ • ࠶ར༻Λੵۃతʹૂ͑Δ

46. 46.

    3. ComponentΛ࡞੒

47. 47.

    ComponentΛ࡞੒ • ࠷খ୯Ґ͔Β Component Λ࡞Δ • Storybook ͰҰͭͣͭ֬ೝ

48. 48.

    Storybook • h#ps:/ /github.com/storybooks/ storybook • UI ίϯϙʔωϯτ୯ମͰಈ͔͢͜ͱͷ Ͱ͖Δ؀ڥ •

    ը໘Λ࡞Βͳͯ͘΋ίϯϙʔωϯτ୯ ҐͰ֬ೝͰ͖Δ • View ͷଟ༷ͳঢ়ଶΛ֬ೝͰ͖Δ
49. 49.

    Storybook • ༷ʑͳঢ়ଶΛ࣋ͭ View • ؆୯ʹՄࢹԽͰ͖Δ

50. 50.

    None
51. 51.

    4. ωΠςΟϒͷը໘ʹ React Na*ve ୯ಠදࣔ͢Δը໘Λ࡞੒

52. 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. 53.

    None
54. 54.

    5. Apollo Ͱ௨৴ͯ͠ɺϦετදࣔ

55. 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. 56.

    Apollo Ͱ௨৴͢Δ ඞཁͳͷ͸ • apollo schema:download • gql(graphql-tag) هड़ •

    apollo codegen:generate • <ApolloProvider> ͱ <Query>
57. 57.

    apollo schema:download • αʔό͔ΒεΩʔϚఆٛΛͱͬͯ͘Δ • apollo schema:download src/graphql/schema.json --endpoint=***

58. 58.

    Query

59. 59.

    None
60. 60.

    Fragment

61. 61.

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

62. 62.

    None
63. 63.

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

64. 64.

    None
65. 65.

    ௨৴

66. 66.

    None
67. 67.

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

68. 68.

    None
69. 69.

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

70. 70.

    None
71. 71.

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

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

    None
73. 73.

    None
74. 74.

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

75. 75.

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

76. 76.

    None
77. 77.

    ωΠςΟϒଆͱͷ࿈ܞ

78. 78.

    Na#ve Module

79. 79.

    ωΠςΟϒଆͷॲཧΛ React Na(veଆ͔Βݺ΂Δ

80. 80.

    React Na(veʹରԠ͍ͯ͠Δ Module͕ͳ͍࣌ʹ࡞Δ

81. 81.

    ྫ͑͹ • DB΁ͷΞΫηε • طʹΞϓϦʹ͋ΔϩδοΫͷྲྀ༻ • طଘͷωΠςΟϒΞϓϦ෦෼ͱͷ࿈ܞ • React Na+veଆ͔ΒAc+vityΛىಈ

82. 82.

    (ྫ)ը໘ભҠ

83. 83.

    React Na(ve Naviga(on౳ͷ ϥΠϒϥϦʔΛ࢖͏

84. 84.

    React Na(ve Naviga(on౳ͷ ϥΠϒϥϦʔΛ࢖͏ →ը໘ભҠ͸ωΠςΟϒଆͰ࣮૷ͨ͠

85. 85.

    ͳͥʁ

86. 86.

    ϑϧReact Na(ve Ͱ͸ͳ͍͔Β

87. 87.

    ྫ͑͹ • React Na)veͷը໘͔ΒωΠςΟϒͷը໘ʹભҠ͢Δ • ωΠςΟϒͷը໘͔ΒReact Na)veͷը໘ʹભҠ͢Δ • ViewPagerͷFragmentͷView͚ͩReact Na)veͩͬͨΓ

88. 88.

    ը໘ભҠ͸શͯωΠςΟϒଆͰ׬݁ → ࣮૷͕γϯϓϧʹɺReact Na)veଆ͔Β͸ Na)ve ModuleͷϝιουΛݺͿ

89. 89.

    ModuleΛ࡞੒

90. 90.

    None
91. 91.

    None
92. 92.

    ύϑΥʔϚϯε

93. 93.

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

94. 94.

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

95. 95.

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

96. 96.

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

97. 97.

    ςετ

98. 98.

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

99. 99.

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

100. 100.

     None
101. 101.

     None
102. 102.

     None
103. 103.

     None
104. 104.

     ҙਤ͠ͳ͍มߋΛݕ஌Ͱ͖Δ

105. 105.

     εφοϓγϣοτςετҎ֎͸ ΍ͬͯͳ͍

106. 106.

     ϩδοΫ͕React Na(veଆʹͳ͍

107. 107.

     ωΠςΟϒଆͰUnit Test

108. 108.

     ೖΕͯΈͯ Ͳ͏͔ͩͬͨ

109. 109.

     ѹ౗తͳUIߏங଎౓

110. 110.

     Hot ReloadͰTry & Error͠΍͍͢

111. 111.

     ͦͷଞ • Webͱ࿈ܞͯ͠Ϧετදࣔ→ৄࡉը໘Έ͍ͨͳΞϓϦͰ͸࢖͑ͦ͏ • ҰํͰΧελϜViewΛଟ༻͢ΔΑ͏ͳը໘͕ଟ͍ΞϓϦͷ։ൃʹ͸޲͔ͳ͍ • ωΠςΟϒଆͰΧελϜViewΛ࡞ͬͯReact Na/veʹͭͳ͛Δͷ͸໘౗ • React

     Na/veʹ͋Δίϯϙʔωϯτ͚ͩͰදݱͰ͖Δͱָ • ϋΠϒϦουΞϓϦΛݕ౼ͯ͠΋Αͦ͞͏ • ύϑΥʔϚϯε͸ѱ͘ͳ͍͕νϡʔχϯά͸େมͦ͏ • σόοάϏϧυͷύϑΥʔϚϯε͕ѱ͘ɺޮՌ͕֬ೝͮ͠Β͍
112. 112.

     ࠔͬͨ͜ͱ

113. 113.

     React Na(ve Ͱ ViewPager ϥΠΫͳ ը໘Λ࡞Δͱܹॏʹͳͬͨ

114. 114.

     React Na(ve Ͱ ViewPager • h#ps:/ /github.com/react-na6ve-community/react-na6ve-tab- view • ૉ๿ʹ΍ΔͱҰ੪ʹશը໘͕

     render • shouldComponentUpdate੍ޚɺදࣔதϖʔδͷ྆ྡ͚ͩ render ͢ΔͳͲɺ࠷దԽํ๏͸͋Δ͕ͦΕͰ΋஗͍ • Ұ౓ಡΈࠐΈऴΘͬͨը໘͕࠶ͼਅͬനʹͳΔͳͲɺฐ֐͕ େ͖͍
115. 115.

     React Na(ve Ͱ ViewPager • h#ps:/ /github.com/ptomasroos/react-na6ve-scrollable-tab-view • iOS ͩͱ஗͍

     • <Query> ͷ௨৴ΛࢭΊΔ͢΂͕ͳ͍ • ͢͹΍͘εϫΠϓ͢Δͱը໘෼௨৴͞Εଓ͚Δ • λϒͷ਺ͰύϑΥʔϚϯε͕ࠨӈ͞ΕΔ
116. 116.

     → ωΠςΟϒͰViewPager + FragmentͰ࣮૷͢Δ͜ͱʹͳͬͨ

117. 117.

     Android Studio ͷόʔδϣϯΛ ࣗ༝ʹ্͛ΒΕͳ͍

118. 118.

     iOS ͱ Android Ͱ Component ʹػೳ͕ࠩ͋Δ

119. 119.

     ScrollView.snapToAlignment

120. 120.

     ScrollView.snapToAlignment • AndroidඇରԠ • ~ v0.55 • ΧϧʔηϧͰεφοϓΛ࣮૷͢Δ࣌ʹ࢖͑ͳ͍ • όʔδϣϯΛ্͍͕͙͛ͨ͢ʹ͸্͛ΒΕͳ͍

     • → εφοϓ͸ఘΊͨ
121. 121.

     WebView.onShouldStartLoadWithRe quest

122. 122.

     WebView.onShouldStartLoadWithRequest • AndroidඇରԠ • WebViewͰભҠ͠Α͏ͱ͍ͯ͠ΔϦϯΫʹରԠ͢ΔωΠςΟϒ ͷը໘͕͋Ε͹։͖͍ͨ • طʹωΠςΟϒଆʹಉ༷ͷ࣮૷͕͋Δ • →

     ωΠςΟϒͷWebViewΛ࢖͏͜ͱʹͨ͠
123. 123.

     ͨ·ʹωΠςΟϒΫϥογϡ͢Δ !

124. 124.

     ·ͱΊ

125. 125.

     ·ͱΊ • Monorepoʹ͢Δͱ؅ཧ͠΍͘͢ͳΔ • ϦϦʔεPR͸ผʑʹཱͯΔ • φϏήʔγϣϯ͸શ෦ωΠςΟϒଆͰ΍Δͱγϯϓϧʹͳͬͯ Α͍ • Storybook΍Hot

     ReloadΛ༻͍Δͱૉૣ͘։ൃ͕Մೳ
126. 126.

     ·ͱΊ • ωΠςΟϒଆͷίʔυͱ࿈ܞ͍ͨ͠৔߹͸Na$ve ModuleΛ࡞Δ • ςετ͸·ͣεφοϓγϣοτςετ͔Β • ύϑΥʔϚϯενϡʔχϯά͸՝୊ • React

     Na$ve͸ۜͷ஄ؙͰ͸ͳ͍ • ಋೖ͢ΔՕॴΛ͔ͬ͠Γݕ౼͢Δඞཁ͕͋Δ • GraphQL͸࠷ߴ
127. 127.

     Enjoy React Na-ve

128. 128.

     ! ࠾༻৘ใ

129. 129.

     גࣜձࣾ͸ͯͳͰ͸ɺ ͱ΋ʹʮ௅ઓʯͰ͖Δ ஥ؒΛืू͍ͯ͠·͢

130. 130.

     ͜ΜͳਓΛ୳͍ͯ͠·͢ • AndroidΞϓϦΛ࡞Γ͍ͨਓ • React Na/veͷΞϓϦ৮Γ͍ͨਓ • iOSΞϓϦ΋࡞Γ͍ͨਓ • αʔόʔαΠυ΋΍Γ͍ͨਓ

131. 131.

     h"p:/ /hatenacorp.jp/recruit/