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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ࣗݾ঺հ

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

ΧΫϤϜ

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

kakuyomu.jp

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

React Na(ve

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

No content

Slide 29

Slide 29 text

GraphQL

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

graphql.org

Slide 35

Slide 35 text

։ൃͷྲྀΕ

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

2. ࡞੒͢Δը໘Λ෼ੳ

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

3. ComponentΛ࡞੒

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Storybook • ༷ʑͳঢ়ଶΛ࣋ͭ View • ؆୯ʹՄࢹԽͰ͖Δ

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

ωΠςΟϒͷը໘ʹ 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Λ࢖͏

Slide 53

Slide 53 text

No content

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Query

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Fragment

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

௨৴

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

No content

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

No content

Slide 77

Slide 77 text

ωΠςΟϒଆͱͷ࿈ܞ

Slide 78

Slide 78 text

Na#ve Module

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

(ྫ)ը໘ભҠ

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

ͳͥʁ

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

ModuleΛ࡞੒

Slide 90

Slide 90 text

No content

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

ύϑΥʔϚϯε

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

ςετ

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

No content

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

ωΠςΟϒଆͰUnit Test

Slide 108

Slide 108 text

ೖΕͯΈͯ Ͳ͏͔ͩͬͨ

Slide 109

Slide 109 text

ѹ౗తͳUIߏங଎౓

Slide 110

Slide 110 text

Hot ReloadͰTry & Error͠΍͍͢

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

ࠔͬͨ͜ͱ

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

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

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

ScrollView.snapToAlignment

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

WebView.onShouldStartLoadWithRe quest

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

ͨ·ʹωΠςΟϒΫϥογϡ͢Δ !

Slide 124

Slide 124 text

·ͱΊ

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

Enjoy React Na-ve

Slide 128

Slide 128 text

! ࠾༻৘ใ

Slide 129

Slide 129 text

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

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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