Reactで学ぶ！いまどきのWeb開発

by fand/amagitakayosi

Slide 1

Slide 1 text

BNBHJUBLBZPTJ 3FBDUͰֶͿ ͍·Ͳ͖ͷ8FC։ൃ 3FBDUͰֶͿ ͍·Ͳ͖ͷ8FC։ൃ BNBHJUBLBZPTJ BNBHJUBLBZPTJ

Slide 2

Slide 2 text

ࢿྉ • ڭՊॻ  https://github.com/fand/react-hands-on • ߨٛεϥΠυ  https://speakerdeck.com/fand/reactdexue- bu-imadokifalsewebkai-fa

Slide 3

Slide 3 text

ಥવͰ͕͢ ͓ئ͍͕͋Γ·͢

Slide 4

Slide 4 text

͍·͙͢ HJUDMPOF ͍ͯͩ͘͠͞ʂ

Slide 5

Slide 5 text

·ͣ͸Node.jsΠϯετʔϧ • https://nodejs.org/ja/ ͔Βμ΢ϯϩʔυ

Slide 6

Slide 6 text

ϨϙδτϦΛ git clone $ git clone https://github.com/fand/react-hands-on • ·ͨ͸ zipͰμ΢ϯϩʔυ

Slide 7

Slide 7 text

$ cd react-hands-on $ npm install ґଘϥΠϒϥϦ΋Πϯετʔϧ

Slide 8

Slide 8 text

վΊ·ͯ͠amagiͰ͢

Slide 9

Slide 9 text

IUUQEFWFMPQFSIBUFOBTUBDPNFOUSZ 1PEDBTUװ׏גתׅ

Slide 10

Slide 10 text

͜ͷϋϯζΦϯͰ΍Δ͜ͱ • ReactͰWebαΠτΛ࡞Δ • ReactͱɺͦͷपลͰى͍ͬͯ͜Δ  ։ൃ؀ڥͷมԽʹֶ͍ͭͯͿ

Slide 11

Slide 11 text

ࠓ͔Β࡞ΔWebαΠτ

Slide 12

Slide 12 text

ڭՊॻ: https://github.com/fand/react-hands-on • ௥Ճ/มߋ͢Δίʔυ͕εςοϓຖʹॻ͔Ε͍ͯΔ

Slide 13

Slide 13 text

diffͷݟํ

Slide 14

Slide 14 text

diffͷݟํ ʮςΫετʯΛ ʮςΩετʯʹมߋ

Slide 15

Slide 15 text

diffͷݟํ ϑΝΠϧ຤ඌʹ ʮZPʯΛ௥Ճ

Slide 16

Slide 16 text

ඪޠ: JS͕ Θ͔Βͳͯ͘΋ ؾʹ͠ͳ͍ • ࠓ೔͸ReactΛֶͼ·͢  (JSΛֶͼ͍ͨΘ͚Ͱ͸ͳ͍) • ΨϯΨϯίϐϖ͠Α͏ʂʂʂ • ٧·ͬͨΒ໛ൣղ౴Λར༻͠Α͏ ʂʂ

Slide 17

Slide 17 text

develop developϒϥϯνʹ͓खຊ͋Γ·͢ master

Slide 18

Slide 18 text

develop master HJUͷλά

Slide 19

Slide 19 text

developϒϥϯνͷ࢖͍ํ • օ͞Μ͸masterͰ࡞ۀ͠·͢ • ʮͳΜ͔͓͔͍͠ʂಈ͔ͳ͍ʂʯͱ͔  ʮ·ͩॻ͍ͯΔ్தͳͷʹʙʂʯͱͳͬͨΒ  git checkout step-n ͠·͠ΐ͏ • ྫ) Step 2 Ͱ٧·ͬͨΒ git checkout step-2

Slide 20

Slide 20 text

ׁ׏׉ֻ כׄ׭ת׃׳ֲ

Slide 21

Slide 21 text

Step 1: αʔόʔΛىಈ • $ npm run dev • http://localhost:3000/ ʹΞΫηε

Slide 22

Slide 22 text

ىಈ੒ޭʂ • pages/ ʹϑΝΠϧ͕͋Δ • Reactίϯϙʔωϯτ

Slide 23

Slide 23 text

͜ͷϨϙδτϦͷߏ଄ • pages/ ʹJSϑΝΠϧ͕͋Δ • pages/index.js ΛݟͯΈΑ͏

Slide 24

Slide 24 text

index.jsͷΑ͏͢

Slide 25

Slide 25 text

index.jsͷΑ͏͢ U 3FBDUίϯϙʔωϯτ

Slide 26

Slide 26 text

index.jsͷΑ͏͢ 3FBDU&MFNFOUΛฦ͢ ؔ਺ʹͳ͍ͬͯΔ U

Slide 27

Slide 27 text

• ReactͰWebαΠτ࡞ΔͨΊͷϑϨʔϜϫʔΫ • ࣗಈͰ৭ʑ΍ͬͯ͘ΕΔ • Hot Module Reloading • Server-Side Rendering Next.js

Slide 28

Slide 28 text

pages/index.js Λฤूͯ͠ΈΑ͏ • Ϧϩʔυ͠ͳͯ͘΋൓ө͞ΕΔ͸ͣ

Slide 29

Slide 29 text

Hot Module Reloading (HMR) • ϑΝΠϧΛฤूͨ͠Βɺฤूͨ͠෦෼͚ͩ  Ϧϩʔυͯ͘͠ΕΔ • ຊདྷ͸Webpackͷػೳ • Next.js͕উखʹWebpackىಈͯ͘͠ΕͯΔ

Slide 30

Slide 30 text

“Server-Side Rendering” ͱ͸ʁ

Slide 31

Slide 31 text

ී௨ͷJS • αʔόʔଆͰϨϯμϦϯά

Slide 32

Slide 32 text

ී௨ͷJS • αʔόʔଆͰϨϯμϦϯά • JSͰಈ͖Λ͚ͭΔ • αʔόʔଆͰϨϯμϦϯά

Slide 33

Slide 33 text

Single Page Application (SPA) • JSͰશ෦ඳը͢Δ

Slide 34

Slide 34 text

Single Page Application (SPA) • JSͰશ෦ඳը͢Δ

Slide 35

Slide 35 text

"SPAͷϝϦοτ" • HTMLϦΫΤετ͕ݮΔ • AjaxͰσʔλΛऔಘ͠ɺJSͰඳը͢Δ • ϖʔδભҠ࣌΋ɺϖʔδ͕ਅͬനʹͳΒͳ͍ • શ෦JSͰॻ͚Δ • αʔόʔͷॲཧ͕୯७ʹͳΔ

Slide 36

Slide 36 text

#SPAͷ໰୊఺# • HTMLϑΝΠϧ͸നࢴ • ࠷ॳʹਅͬനͳը໘͕දࣔ͞Εͯ͠·͏ • SEOʹऑ͍

Slide 37

Slide 37 text

Server-Side Rendering • ReactͷϨϯμϦϯάΛαʔόʔଆͰߦͳ͏ʂ

Slide 38

Slide 38 text

Server-Side Rendering • ReactͷϨϯμϦϯάΛαʔόʔଆͰߦͳ͏ʂ

Slide 39

Slide 39 text

։ൃऀπʔϧͰݟΔͱ • HTMLϑΝΠϧʹͪΌΜͱத਎͕͋Δ

Slide 40

Slide 40 text

Step 2: AboutϖʔδΛ࡞Δ • pages/about.js Λ࡞੒ • ΄΅ pages/index.js ͱಉ͡

Slide 41

Slide 41 text

pages/about.jsΛ࡞੒

Slide 42

Slide 42 text

http://localhost:3000/about Λ֬ೝ

Slide 43

Slide 43 text

Step 3: ڞ௨ίϯϙʔωϯτΛ࡞Δ • ϨΠΞ΢τ౳ɺෳ਺ͷϖʔδͰ࢖͏ύʔπΛ  ίϯϙʔωϯτʹ੾Γग़͢ • component/ ϑΥϧμΛ࡞Γɺͦͷதʹ  layout.js Λ࡞Δ • ͦͷޙɺ pages/ ಺ͷϑΝΠϧʹ  ίϯϙʔωϯτΛૠೖ͢Δ

Slide 44

Slide 44 text

components/layout.js

Slide 45

Slide 45 text

components/layout.js IFBEཁૉ

Slide 46

Slide 46 text

components/layout.js શϖʔδڞ௨ͷ ϔομʔ

Slide 47

Slide 47 text

components/layout.js ϖʔδͷத਎Λ ಡΈࠐΜͰ͍Δ

Slide 48

Slide 48 text

pages/index.js ϖʔδશମΛ -BZPVUͰғΉ

Slide 49

Slide 49 text

pages/about.js JOEFYKTಉ༷

Slide 50

Slide 50 text

ϒϥ΢βͰ֬ೝ͠Α͏

Slide 51

Slide 51 text

Step 4: CSSΛಋೖ͢Δ • ReactͰCSSΛ࢖͏ํ๏ • ී௨ʹॻ͍ͯ link λάͰಡΈࠐΉ • CSS in JS • ࠓճ͸ CSS in JS ͯ͠Έ·͢

Slide 52

Slide 52 text

CSSͷ೉͍͠ॴ • ໊લۭ͕ؒάϩʔόϧ • ༏ઌ౓ • ม਺΍ؔ਺͕࢖͑ͳ͍

Slide 53

Slide 53 text

CSS։ൃͷਐԽ • Sass, Less౳ͷϓϦϓϩηοα • PostCSS • CSS in JS

Slide 54

Slide 54 text

CSS in JS • ʮJSͰελΠϧΛఆٛͯ͠  ίϯϙʔωϯτͷstyleଐੑʹͭͬ͜΋͏ͥʯ  ͱ͍͏ൃ૝ • Next.jsͰ͸σϑΥϧτͰ࢖͑Δ • ΍ͬͯΈΑ͏ʂ

Slide 55

Slide 55 text

components/layout.jsΛमਖ਼ $44JO+4༻ ϥΠϒϥϦΛϩʔυ

Slide 56

Slide 56 text

components/layout.jsΛमਖ਼ CPEZཁૉͷ$44

Slide 57

Slide 57 text

ελΠϧΛఆٛͯ͠ ཁૉʹ౉͢

Slide 58

Slide 58 text

⚡ελΠϧ͕ద༻͞Εͨ⚡

Slide 59

Slide 59 text

ͳΜͰίϨͰಈ͘ͷ……ʁ • next/css ͸֤ཁૉʹҰҙͳΫϥε໊Λੜ੒͠ɺ  ͦͷΫϥεʹରͯ͠ελΠϧΛఆٛ͢Δ

Slide 60

Slide 60 text

Step 5: ϋϯόʔΨʔϘλϯΛ௥Ճ͢Δ • ֎෦ͷCSSϥΠϒϥϦΛಡΈࠐΜͰ  ϘλϯΛදࣔͯ͠ΈΑ͏ • ࠓճ͸ jonsuh/hamburgers Λར༻͠·͢

Slide 61

Slide 61 text

components/hamburger.jsΛ࡞੒

Slide 62

Slide 62 text

components/hamburger.jsΛ࡞੒

Slide 63

Slide 63 text

components/layout.jsΛमਖ਼

Slide 64

Slide 64 text

components/layout.jsΛमਖ਼ ֎෦$44Λϩʔυ

Slide 65

Slide 65 text

දࣔ੒ޭ

Slide 66

Slide 66 text

Step 6: ϋϯόʔΨʔϘλϯΛಈ͔͢ • ͜͜·ͰͷReactίϯϙʔωϯτ͸  ঢ়ଶΛ΋ͨͳ͔ͬͨ • ϋϯόʔΨʔϘλϯʹঢ়ଶΛ௥Ճ͠  ಈ͔ͯ͠ΈΑ͏ʂ

Slide 67

Slide 67 text

Reactίϯϙʔωϯτͷछྨ • ঢ়ଶͷͳ͍ίϯϙʔωϯτ:  ReactElement Λฦؔ͢਺ • ঢ়ଶͷ͋Δίϯϙʔωϯτ:  React.Component Λܧঝ͢ΔΫϥε • render() ϝιουͰ ReactElement Λฦ͢

Slide 68

Slide 68 text

ReactElement is Կ • JSXͰੜ੒͞ΕΔΦϒδΣΫτ ͍ͭ͜ͷ͜ͱ

Slide 69

Slide 69 text

components/hamburger.jsΛमਖ਼

Slide 70

Slide 70 text

components/hamburger.jsΛमਖ਼ ঢ়ଶΛఆٛ

Slide 71

Slide 71 text

components/hamburger.jsΛमਖ਼ ঢ়ଶΛมߋ͢Δؔ਺

Slide 72

Slide 72 text

components/hamburger.jsΛमਖ਼ ΫϦοΫͨ͠Β UPHHMF ΛݺͿΑ͏ʹ

Slide 73

Slide 73 text

͏͍ͨ͝ʂ

Slide 74

Slide 74 text

Step 7: αΠυόʔΛ௥Ճ • TopϖʔδɺAboutϖʔδͷϦϯΫΛද͍ࣔͨ͠ • components/sidebar.jsͰαΠυόʔΛ࡞੒͠  components/layout.jsʹૠೖ͢Δ

Slide 75

Slide 75 text

components/sidebar.js

Slide 76

Slide 76 text

OFYUMJOLΛར༻͠ ϦϯΫΛ࡞੒

Slide 77

Slide 77 text

components/layout.jsΛमਖ਼ 4JEFCBSΛϩʔυ 4JEFCBSΛૠೖ (লུ) … …

Slide 78

Slide 78 text

αΠυόʔ͕දࣔ͞Εͨ

Slide 79

Slide 79 text

Step 8: αΠυόʔΛಈ͔͢ • HamburgerͰ؅ཧ͍ͯ͠Δঢ়ଶΛ  Sidebarʹ΋఻͍͑ͨ • LayoutͰঢ়ଶΛ؅ཧ͠  HamburgerͱSidebarʹ౉͢Α͏ʹ͢Δ

Slide 80

Slide 80 text

ϘλϯΛԡͨ͠ͱ͖ͷྲྀΕ -BZPVU 4JEFCBS )BNCVSHFS JT4JEFCBS"DUJWFGBMTF

Slide 81

Slide 81 text

-BZPVU 4JEFCBS )BNCVSHFS ΫϦοΫ͞ΕͨΑʙ JT4JEFCBS"DUJWFGBMTF

Slide 82

Slide 82 text

-BZPVU JT4JEFCBS"DUJWFGBMTF JT4JEFCBS"DUJWFUSVF JT4JEFCBS"DUJWFUSVF 4JEFCBS )BNCVSHFS ঢ়ଶΛมߋ

Slide 83

Slide 83 text

-BZPVU 4JEFCBS )BNCVSHFS JT4JEFCBS"DUJWFUSVF JT4JEFCBS"DUJWFUSVF ঢ়ଶ͕఻ΘΔ

Slide 84

Slide 84 text

-BZPVU 4JEFCBS )BNCVSHFS JT4JEFCBS"DUJWFUSVF JT4JEFCBS"DUJWFUSVF දࣔΛ੾Γସ͑Δ

Slide 85

Slide 85 text

components/layout.jsΛमਖ਼

Slide 86

Slide 86 text

components/layout.jsΛमਖ਼ U )BNCVSHFSʹ͋ͬͨ ঢ়ଶΛ؅ཧ͢Δॲཧ

Slide 87

Slide 87 text

)BNCVSHFS 4JEFCBSʹ ঢ়ଶΛ౉͢

Slide 88

Slide 88 text

components/hamburger.jsΛमਖ਼

Slide 89

Slide 89 text

components/hamburger.jsΛमਖ਼ QSPQTͰঢ়ଶΛड͚औΔ͚ͩ

Slide 90

Slide 90 text

components/sidebar.jsΛमਖ਼

Slide 91

Slide 91 text

components/sidebar.jsΛमਖ਼ QSPQTΛड͚औͬͯ දࣔΛ੾Γସ͑Δ

Slide 92

Slide 92 text

αΠυόʔ΋ಈ͍ͨʂ

Slide 93

Slide 93 text

·ͱΊ

Slide 94

Slide 94 text

ࠓ೔ֶΜͩ͜ͱ • React ΞϓϦέʔγϣϯͷ࡞Γํ • Single Page Application (SPA) • Server-Side Rendering (SSR) • Hot Module Reloading (HMR) • CSS in JS

Slide 95

Slide 95 text

͓͔ͭΕ͞·Ͱͨ͠ʂ

Slide 96

Slide 96 text

ؾܰʹ࣭໰͍ͯͩ͘͠͞ w 5XJUUFSͰϝϯγϣϯͨ͠Γ  IUUQTUXJUUFSDPNBNBHJUBLBZPTJ w (JU)VCͰJTTVFཱͯͨΓ  IUUQTHJUIVCDPNGBOESFBDUIBOETPO ؾܰʹ࣭໰͍ͯͩ͘͠͞ w 5XJUUFSͰϝϯγϣϯͨ͠Γ  IUUQTUXJUUFSDPNBNBHJUBLBZPTJ w (JU)VCͰJTTVFཱͯͨΓ  IUUQTHJUIVCDPNGBOESFBDUIBOETPO