Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

E28404a128b6014e6f499d2a967c72a0?s=128

Takuji Nishibayashi

February 07, 2019
Tweet

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/