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

Transcript

1. ΫϩεϓϥοτϑΥʔϜ։ൃ
   ࡾछͷਆث
   React Na(ve / TypeScript / GraphQL
   Takuji Nishibayashi, Ryo Kitamura
   DroidKaigi 2019, day 1, 16:30-17:20
   

   View Slide

2. ࣗݾ঺հ
   

   View Slide

3. ࣗݾ঺հ
   • Takuji Nishibayashi
   • takuji31
   • Hatena Co., Ltd. (2016/01 ~)
   • Android (2009~)
   • Kotlin
   •
   !
   hFps:/
   /blog.takuji31.jp
   •
   "
   hFps:/
   /nazuna.takuji31.jp
   •
   # $
   hFps:/
   /photo.takuji31.jp
   

   View Slide

4. ࣗݾ঺հ
   • Ryo Kitamura
   • @experopero id:funnelbit
   • Hatena Co., Ltd.
   • Android
   • iOS
   • React NaAve
   •
   !
   hDp:/
   /funnelbit.hatenablog.com/
   •
   "
   hDps:/
   /www.instagram.com/
   experopero/
   

   View Slide

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

   View Slide

6. ΧΫϤϜ
   

   View Slide

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

   View Slide

8. ΧΫϤϜ
   • KADOKAWA༷ͱ͸ͯͳͷڞಉ։ൃ
   • ެࣜ࡞඼΋ಡΊ·͢
   • ॻ੶Խ࡞඼ଓʑग़ͯ·͢
   • ΞχϝԽ࡞඼΋ܾఆ͠·ͨ͠
   • ॎ૊ΈରԠ
   • ެࣜϏϡʔϫʔΞϓϦ (Android, iOS)
   

   View Slide

9. kakuyomu.jp
   

   View Slide

10. View Slide

11. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

16. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

21. View Slide

22. View Slide

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

    View Slide

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

    View Slide

25. React Na(ve
    

    View Slide

26. React Na(ve
    • ReactΛར༻ͯ͠ϞόΠϧΞϓϦΛ։ൃͰ͖ΔϑϨʔϜϫʔΫ
    • github.com/facebook/react-na5ve
    • Android, iOSରԠ
    • طଘͷωΠςΟϒΞϓϦʹ௥ՃͰಋೖՄೳ
    

    View Slide

27. React Na(ve
    • JavaScriptʹXMLͷλάͷΑ͏ͳه๏͕௥Ճ͞Εͨ
    JSXΛ࢖ͬͯهड़
    • TypeScriptʹ΋ରԠ
    • ܕͷԸܙΛड͚ΒΕΔ
    • ωΠςΟϒͷView(≠ ϑϨʔϜϫʔΫඪ४ͷView)
    

    View Slide

28. View Slide

29. GraphQL
    

    View Slide

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

    View Slide

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

    View Slide

32. View Slide

33. View Slide

34. graphql.org
    

    View Slide

35. ։ൃͷྲྀΕ
    

    View Slide

36. ։ൃͷྲྀΕ
    1. ϦϙδτϦͱϦϦʔεઓུ
    2. ࡞੒͢Δը໘Λ෼ੳ
    3. ComponentΛ࡞੒
    4. ωΠςΟϒͷը໘ʹ React Na2ve ୯ಠදࣔ͢Δը໘Λ࡞੒
    5. Apollo Ͱ௨৴
    6. ࡞ͬͨ Component Λ࢖ͬͯϦετΛදࣔ͢Δ
    

    View Slide

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

    View Slide

38. Monorepo ʹ͢Δ
    • ैདྷ͸෼͔Ε͍ͯͨ Android ͱ iOS ͷ
    ϦϙδτϦΛҰͭʹ
    • h,p:/
    /engineering.khanacademy.org/
    posts/react-na;ve-monorepo.html
    

    View Slide

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

    View Slide

40. 2. ࡞੒͢Δը໘Λ෼ੳ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

46. 3. ComponentΛ࡞੒
    

    View Slide

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

    View Slide

48. Storybook
    • h#ps:/
    /github.com/storybooks/
    storybook
    • UI ίϯϙʔωϯτ୯ମͰಈ͔͢͜ͱͷ
    Ͱ͖Δ؀ڥ
    • ը໘Λ࡞Βͳͯ͘΋ίϯϙʔωϯτ୯
    ҐͰ֬ೝͰ͖Δ
    • View ͷଟ༷ͳঢ়ଶΛ֬ೝͰ͖Δ
    

    View Slide

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

    View Slide

50. View Slide

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

    View Slide

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Λ࢖͏
    

    View Slide

53. View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

58. Query
    

    View Slide

59. View Slide

60. Fragment
    

    View Slide

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

    View Slide

62. View Slide

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

    View Slide

64. View Slide

65. ௨৴
    

    View Slide

66. View Slide

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

    View Slide

68. View Slide

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

    View Slide

70. View Slide

71. Higher Order Component (HOC)
    • Λ࢖͏ʹ͸ ͰғΉඞཁ͕
    ͋Δ
    • ͍͍ͪͪॻ͘ͷ͸໘౗
    • HOC Λ࢖͏
    

    View Slide

72. View Slide

73. View Slide

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

    View Slide

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

    View Slide

76. View Slide

77. ωΠςΟϒଆͱͷ࿈ܞ
    

    View Slide

78. Na#ve Module
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

82. (ྫ)ը໘ભҠ
    

    View Slide

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

    View Slide

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

    View Slide

85. ͳͥʁ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

89. ModuleΛ࡞੒
    

    View Slide

90. View Slide

91. View Slide

92. ύϑΥʔϚϯε
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

97. ςετ
    

    View Slide

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

    View Slide

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

    View Slide

100. View Slide

101. View Slide

102. View Slide

103. View Slide

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

     View Slide

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

     View Slide

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

     View Slide

107. ωΠςΟϒଆͰUnit Test
     

     View Slide

108. ೖΕͯΈͯ
     Ͳ͏͔ͩͬͨ
     

     View Slide

109. ѹ౗తͳUIߏங଎౓
     

     View Slide

110. Hot ReloadͰTry & Error͠΍͍͢
     

     View Slide

111. ͦͷଞ
     • Webͱ࿈ܞͯ͠Ϧετදࣔ→ৄࡉը໘Έ͍ͨͳΞϓϦͰ͸࢖͑ͦ͏
     • ҰํͰΧελϜViewΛଟ༻͢ΔΑ͏ͳը໘͕ଟ͍ΞϓϦͷ։ൃʹ͸޲͔ͳ͍
     • ωΠςΟϒଆͰΧελϜViewΛ࡞ͬͯReact Na/veʹͭͳ͛Δͷ͸໘౗
     • React Na/veʹ͋Δίϯϙʔωϯτ͚ͩͰදݱͰ͖Δͱָ
     • ϋΠϒϦουΞϓϦΛݕ౼ͯ͠΋Αͦ͞͏
     • ύϑΥʔϚϯε͸ѱ͘ͳ͍͕νϡʔχϯά͸େมͦ͏
     • σόοάϏϧυͷύϑΥʔϚϯε͕ѱ͘ɺޮՌ͕֬ೝͮ͠Β͍
     

     View Slide

112. ࠔͬͨ͜ͱ
     

     View Slide

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

     View Slide

114. React Na(ve Ͱ ViewPager
     • h#ps:/
     /github.com/react-na6ve-community/react-na6ve-tab-
     view
     • ૉ๿ʹ΍ΔͱҰ੪ʹશը໘͕ render
     • shouldComponentUpdate੍ޚɺදࣔதϖʔδͷ྆ྡ͚ͩ render
     ͢ΔͳͲɺ࠷దԽํ๏͸͋Δ͕ͦΕͰ΋஗͍
     • Ұ౓ಡΈࠐΈऴΘͬͨը໘͕࠶ͼਅͬനʹͳΔͳͲɺฐ֐͕
     େ͖͍
     

     View Slide

115. React Na(ve Ͱ ViewPager
     • h#ps:/
     /github.com/ptomasroos/react-na6ve-scrollable-tab-view
     • iOS ͩͱ஗͍
     • ͷ௨৴ΛࢭΊΔ͢΂͕ͳ͍
     • ͢͹΍͘εϫΠϓ͢Δͱը໘෼௨৴͞Εଓ͚Δ
     • λϒͷ਺ͰύϑΥʔϚϯε͕ࠨӈ͞ΕΔ
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

119. ScrollView.snapToAlignment
     

     View Slide

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

     View Slide

121. WebView.onShouldStartLoadWithRe
     quest
     

     View Slide

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

     View Slide

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

     View Slide

124. ·ͱΊ
     

     View Slide

125. ·ͱΊ
     • Monorepoʹ͢Δͱ؅ཧ͠΍͘͢ͳΔ
     • ϦϦʔεPR͸ผʑʹཱͯΔ
     • φϏήʔγϣϯ͸શ෦ωΠςΟϒଆͰ΍Δͱγϯϓϧʹͳͬͯ
     Α͍
     • Storybook΍Hot ReloadΛ༻͍Δͱૉૣ͘։ൃ͕Մೳ
     

     View Slide

126. ·ͱΊ
     • ωΠςΟϒଆͷίʔυͱ࿈ܞ͍ͨ͠৔߹͸Na$ve ModuleΛ࡞Δ
     • ςετ͸·ͣεφοϓγϣοτςετ͔Β
     • ύϑΥʔϚϯενϡʔχϯά͸՝୊
     • React Na$ve͸ۜͷ஄ؙͰ͸ͳ͍
     • ಋೖ͢ΔՕॴΛ͔ͬ͠Γݕ౼͢Δඞཁ͕͋Δ
     • GraphQL͸࠷ߴ
     

     View Slide

127. Enjoy React Na-ve
     

     View Slide

128. !
     ࠾༻৘ใ
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide