非SPAで小さく始めるReactアーキテクチャ

by masarufuruya

Slide 1

Slide 1 text

ඇSPAͰখ࢝͘͞ΊΔ ReactΞʔΩςΫνϟ ݹՈ େ

Slide 2

Slide 2 text

ࣗݾ঺հ ݹՈ େ (@enzerubank) ϑϦʔϥϯε ϑϩϯτΤϯυΤϯδχΞ طଘͷRailsΞϓϦ΁ReactͰ৽ػೳΛ௥Ճ

Slide 3

Slide 3 text

ࠓճͷൃදʹࢸͬͨഎܠ ○ SPAಋೖͷهࣄ͕ଟ͍ ○ ඇSPA΋gemΛ࢖ͬͨύλʔϯ͔ɺ webpackͰ΋෦෼తͳTipsͷهࣄ͕ଟ͍

Slide 4

Slide 4 text

ࠓ೔ओʹ࿩͢͜ͱ ○ ඇSPAΞϓϦʹReact+webpackΛಋೖ͢Δ ࡍͷશମతͳΞʔΩςΫνϟͱࠔΓϙΠϯ τ΁ͷ஌ݟڞ༗

Slide 5

Slide 5 text

͜Μͳ͜ͱ͸࿩͠·ͤΜ ○ React,ES6,webpackʹؔ͢Δجૅతͳ࿩ ○ ଞͷJSϑϨʔϜϫʔΫͱͷൺֱͷ࿩

Slide 6

Slide 6 text

ࠓճಋೖͨ͠ελοΫ ○ React ○ flowtype ○ webpack ○ ES6 + Babel ○ jQuery

Slide 7

Slide 7 text

ࠓճಋೖͨ͠ελοΫ ○ React ○ flowtype ○ webpack ○ ES6 + Babel ○ jQuery Redux͸ֶशίετ͕ߴ͍ͷͰݟૹΓ ܕΛܾΊΔͱAPIଆͱͷҙࢥૄ௨ָ͕ɻΦεεϝ σβΠφʔ͕ॻ͘JSʹؔͯ͠͸ڐ༰

Slide 8

Slide 8 text

શମͷReactίϯϙʔωϯτߏ੒ Page App App Component Component ϖʔδͷى఺ ֤UIύʔπͷ਌ ֤UIύʔπͷࢠ

Slide 9

Slide 9 text

ϖʔδ (Page) UIύʔπ(App) UIύʔπ(App)

Slide 10

Slide 10 text

webpackϏϧυ • entryʹෳ਺ΤϯτϦʔϙΠϯτΛࢦఆ • ϖʔδຖͷXXXPage.jsΛES6 ➔ ES5ʹม׵

Slide 11

Slide 11 text

Pageͷ໾ׂ (ϖʔδͷى఺) • ඞཁͳUIύʔπΛReactDOM.render • ֤UIύʔπ͸XXXApp.jsͰ໋໊Λ౷Ұ

Slide 12

Slide 12 text

Appͷ໾ׂ (֤UIύʔπͷ਌) • stateͷอ࣋/มߋΛ୲౰ • ඇಉظॲཧ౳ͷϩδοΫ͸શͯ͜͜ʹهࡌ ※ ن໛͕େ͖͘ͳ͖ͬͯͨΒRedux, Immutable.jsͰ෼ׂΛݕ౼

Slide 13

Slide 13 text

Appͷ໾ׂ (֤UIύʔπͷ਌) • stateͷ஋͸flowtypeͰܕఆٛ • APIଆͱͷσʔλͷೝࣝ߹Θͤʹศར

Slide 14

Slide 14 text

Componentͷ໾ׂ (֤UIύʔπͷࢠ) • ਌(App)͔ΒͷpropsΛϨϯμϦϯά • ϢʔβʔͷΠϕϯτΛ਌ʹ౉͢

Slide 15

Slide 15 text

ඇಉظॲཧʹؔ͢ΔTips • axiosͱ͍͏HTTPΫϥΠΞϯτΛར༻ • ϞοΫ΋༻ҙͰ͖ͯAPIແ͠Ͱ΋։ൃͰ͖Δ

Slide 16

Slide 16 text

ॳճͷσʔλϩʔυ଴ͪ͸Ͳ͏͢Δʁ • gonͰॳճσʔλΛJS΁౉͠ճආ • SSR͸ख͕͔͔ؒΓͦ͏ͩͬͨͷͰࠓճ͸อཹ • σʔλऔಘ׬ྃ·Ͱը໘͕දࣔ͞Εͳ͍໰୊

Slide 17

Slide 17 text

ࠓޙऔΓ૊Έ͍ͨ͜ͱ ○ CSS in JSͷಋೖ ○ εϚϗදࣔͷύϑΥʔϚϯενϡʔχϯά ○ JQueryͱReactͷ࢖͍෼͚ͷϧʔϧࡦఆ ※ UIύʔπຖʹָͳํͰ࣮૷Ͱ͖ΔΑ͏ʹ͍͖͍ͯͨ͠

Slide 18

Slide 18 text

LT಺༰΁ͷϑΟʔυόοΫΛ ࠙਌ձͰ௖͚Δͱخ͍͠Ͱ͢ʂ