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

FRONTEND CONFERENCE 2017のハンズオン用資料です。
教科書はこちら https://github.com/fand/react-hands-on

Transcript

1. BNBHJUBLBZPTJ 3FBDUͰֶͿ
   ͍·Ͳ͖ͷ8FC։ൃ 3FBDUͰֶͿ
   ͍·Ͳ͖ͷ8FC։ൃ BNBHJUBLBZPTJ BNBHJUBLBZPTJ
2. ࢿྉ • ڭՊॻ
 https://github.com/fand/react-hands-on • ߨٛεϥΠυ
 https://speakerdeck.com/fand/reactdexue- bu-imadokifalsewebkai-fa
3. ಥવͰ͕͢
   ͓ئ͍͕͋Γ·͢
4. ͍·͙͢
   HJU
   DMPOF
   ͍ͯͩ͘͠͞ʂ
5. ·ͣ͸Node.jsΠϯετʔϧ • https://nodejs.org/ja/ ͔Βμ΢ϯϩʔυ
6. ϨϙδτϦΛ git clone $ git clone https://github.com/fand/react-hands-on • ·ͨ͸ zipͰμ΢ϯϩʔυ
7. $ cd react-hands-on $ npm install ґଘϥΠϒϥϦ΋Πϯετʔϧ
8. վΊ·ͯ͠amagiͰ͢
9. IUUQEFWFMPQFSIBUFOBTUBDPNFOUSZ 1PEDBTUװ׏גתׅ
10. ͜ͷϋϯζΦϯͰ΍Δ͜ͱ • ReactͰWebαΠτΛ࡞Δ • ReactͱɺͦͷपลͰى͍ͬͯ͜Δ
 ։ൃ؀ڥͷมԽʹֶ͍ͭͯͿ
11. ࠓ͔Β࡞ΔWebαΠτ
12. ڭՊॻ: https://github.com/fand/react-hands-on • ௥Ճ/มߋ͢Δίʔυ͕εςοϓຖʹॻ͔Ε͍ͯΔ
13. diffͷݟํ
14. diffͷݟํ ʮςΫετʯΛ
    ʮςΩετʯʹมߋ
15. diffͷݟํ ϑΝΠϧ຤ඌʹ
    ʮZPʯΛ௥Ճ
16. ඪޠ: JS͕ Θ͔Βͳͯ͘΋ ؾʹ͠ͳ͍ • ࠓ೔͸ReactΛֶͼ·͢
 (JSΛֶͼ͍ͨΘ͚Ͱ͸ͳ͍) • ΨϯΨϯίϐϖ͠Α͏ʂʂʂ • ٧·ͬͨΒ໛ൣղ౴Λར༻͠Α͏ ʂʂ
17. develop developϒϥϯνʹ͓खຊ͋Γ·͢ master
18. develop master HJUͷλά
19. developϒϥϯνͷ࢖͍ํ • օ͞Μ͸masterͰ࡞ۀ͠·͢ • ʮͳΜ͔͓͔͍͠ʂಈ͔ͳ͍ʂʯͱ͔
 ʮ·ͩॻ͍ͯΔ్தͳͷʹʙʂʯͱͳͬͨΒ
 git checkout step-n ͠·͠ΐ͏ • ྫ) Step 2 Ͱ٧·ͬͨΒ git checkout step-2
20. ׁ׏׉ֻ
    כׄ׭ת׃׳ֲ
21. Step 1: αʔόʔΛىಈ • $ npm run dev • http://localhost:3000/ ʹΞΫηε
22. ىಈ੒ޭʂ • pages/ ʹϑΝΠϧ͕͋Δ • Reactίϯϙʔωϯτ
23. ͜ͷϨϙδτϦͷߏ଄ • pages/ ʹJSϑΝΠϧ͕͋Δ • pages/index.js ΛݟͯΈΑ͏
24. index.jsͷΑ͏͢
25. index.jsͷΑ͏͢ U 3FBDUίϯϙʔωϯτ
26. index.jsͷΑ͏͢ 3FBDU&MFNFOUΛฦ͢
    ؔ਺ʹͳ͍ͬͯΔ U
27. • ReactͰWebαΠτ࡞ΔͨΊͷϑϨʔϜϫʔΫ • ࣗಈͰ৭ʑ΍ͬͯ͘ΕΔ • Hot Module Reloading • Server-Side Rendering Next.js
28. pages/index.js Λฤूͯ͠ΈΑ͏ • Ϧϩʔυ͠ͳͯ͘΋൓ө͞ΕΔ͸ͣ
29. Hot Module Reloading (HMR) • ϑΝΠϧΛฤूͨ͠Βɺฤूͨ͠෦෼͚ͩ
 Ϧϩʔυͯ͘͠ΕΔ • ຊདྷ͸Webpackͷػೳ • Next.js͕উखʹWebpackىಈͯ͘͠ΕͯΔ
30. “Server-Side Rendering” ͱ͸ʁ
31. ී௨ͷJS • αʔόʔଆͰϨϯμϦϯά
32. ී௨ͷJS • αʔόʔଆͰϨϯμϦϯά • JSͰಈ͖Λ͚ͭΔ • αʔόʔଆͰϨϯμϦϯά
33. Single Page Application (SPA) • JSͰશ෦ඳը͢Δ
34. Single Page Application (SPA) • JSͰશ෦ඳը͢Δ
35. "SPAͷϝϦοτ" • HTMLϦΫΤετ͕ݮΔ • AjaxͰσʔλΛऔಘ͠ɺJSͰඳը͢Δ • ϖʔδભҠ࣌΋ɺϖʔδ͕ਅͬനʹͳΒͳ͍ • શ෦JSͰॻ͚Δ • αʔόʔͷॲཧ͕୯७ʹͳΔ
36. #SPAͷ໰୊఺# • HTMLϑΝΠϧ͸നࢴ • ࠷ॳʹਅͬനͳը໘͕දࣔ͞Εͯ͠·͏ • SEOʹऑ͍
37. Server-Side Rendering • ReactͷϨϯμϦϯάΛαʔόʔଆͰߦͳ͏ʂ
38. Server-Side Rendering • ReactͷϨϯμϦϯάΛαʔόʔଆͰߦͳ͏ʂ
39. ։ൃऀπʔϧͰݟΔͱ • HTMLϑΝΠϧʹͪΌΜͱத਎͕͋Δ
40. Step 2: AboutϖʔδΛ࡞Δ • pages/about.js Λ࡞੒ • ΄΅ pages/index.js ͱಉ͡
41. pages/about.jsΛ࡞੒
42. http://localhost:3000/about Λ֬ೝ
43. Step 3: ڞ௨ίϯϙʔωϯτΛ࡞Δ • ϨΠΞ΢τ౳ɺෳ਺ͷϖʔδͰ࢖͏ύʔπΛ
 ίϯϙʔωϯτʹ੾Γग़͢ • component/ ϑΥϧμΛ࡞Γɺͦͷதʹ
 layout.js Λ࡞Δ • ͦͷޙɺ pages/ ಺ͷϑΝΠϧʹ
 ίϯϙʔωϯτΛૠೖ͢Δ
44. components/layout.js
45. components/layout.js IFBEཁૉ
46. components/layout.js શϖʔδڞ௨ͷ
    ϔομʔ
47. components/layout.js ϖʔδͷத਎Λ
    ಡΈࠐΜͰ͍Δ
48. pages/index.js ϖʔδશମΛ
    -BZPVUͰғΉ
49. pages/about.js JOEFYKTಉ༷
50. ϒϥ΢βͰ֬ೝ͠Α͏
51. Step 4: CSSΛಋೖ͢Δ • ReactͰCSSΛ࢖͏ํ๏ • ී௨ʹॻ͍ͯ link λάͰಡΈࠐΉ • CSS in JS • ࠓճ͸ CSS in JS ͯ͠Έ·͢
52. CSSͷ೉͍͠ॴ • ໊લۭ͕ؒάϩʔόϧ • ༏ઌ౓ • ม਺΍ؔ਺͕࢖͑ͳ͍
53. CSS։ൃͷਐԽ • Sass, Less౳ͷϓϦϓϩηοα • PostCSS • CSS in JS
54. CSS in JS • ʮJSͰελΠϧΛఆٛͯ͠
 ίϯϙʔωϯτͷstyleଐੑʹͭͬ͜΋͏ͥʯ
 ͱ͍͏ൃ૝ • Next.jsͰ͸σϑΥϧτͰ࢖͑Δ • ΍ͬͯΈΑ͏ʂ
55. components/layout.jsΛमਖ਼ $44
    JO
    +4༻
    ϥΠϒϥϦΛϩʔυ
56. components/layout.jsΛमਖ਼ CPEZཁૉͷ$44
57. ελΠϧΛఆٛͯ͠
    ཁૉʹ౉͢
58. ⚡ελΠϧ͕ద༻͞Εͨ⚡
59. ͳΜͰίϨͰಈ͘ͷ……ʁ • next/css ͸֤ཁૉʹҰҙͳΫϥε໊Λੜ੒͠ɺ
 ͦͷΫϥεʹରͯ͠ελΠϧΛఆٛ͢Δ
60. Step 5: ϋϯόʔΨʔϘλϯΛ௥Ճ͢Δ • ֎෦ͷCSSϥΠϒϥϦΛಡΈࠐΜͰ
 ϘλϯΛදࣔͯ͠ΈΑ͏ • ࠓճ͸ jonsuh/hamburgers Λར༻͠·͢
61. components/hamburger.jsΛ࡞੒
62. components/hamburger.jsΛ࡞੒
63. components/layout.jsΛमਖ਼
64. components/layout.jsΛमਖ਼ ֎෦$44Λϩʔυ
65. දࣔ੒ޭ
66. Step 6: ϋϯόʔΨʔϘλϯΛಈ͔͢ • ͜͜·ͰͷReactίϯϙʔωϯτ͸
 ঢ়ଶΛ΋ͨͳ͔ͬͨ • ϋϯόʔΨʔϘλϯʹঢ়ଶΛ௥Ճ͠
 ಈ͔ͯ͠ΈΑ͏ʂ
67. Reactίϯϙʔωϯτͷछྨ • ঢ়ଶͷͳ͍ίϯϙʔωϯτ:
 ReactElement Λฦؔ͢਺ • ঢ়ଶͷ͋Δίϯϙʔωϯτ:
 React.Component Λܧঝ͢ΔΫϥε • render() ϝιουͰ ReactElement Λฦ͢
68. ReactElement is Կ • JSXͰੜ੒͞ΕΔΦϒδΣΫτ ͍ͭ͜ͷ͜ͱ
69. components/hamburger.jsΛमਖ਼
70. components/hamburger.jsΛमਖ਼ ঢ়ଶΛఆٛ
71. components/hamburger.jsΛमਖ਼ ঢ়ଶΛมߋ͢Δؔ਺
72. components/hamburger.jsΛमਖ਼ ΫϦοΫͨ͠Β
    UPHHMF
    ΛݺͿΑ͏ʹ
73. 
    ͏͍ͨ͝ʂ
74. Step 7: αΠυόʔΛ௥Ճ • TopϖʔδɺAboutϖʔδͷϦϯΫΛද͍ࣔͨ͠ • components/sidebar.jsͰαΠυόʔΛ࡞੒͠
 components/layout.jsʹૠೖ͢Δ
75. components/sidebar.js
76. OFYUMJOLΛར༻͠
    ϦϯΫΛ࡞੒
77. components/layout.jsΛमਖ਼ 4JEFCBSΛϩʔυ 4JEFCBSΛૠೖ (লུ) … …
78. αΠυόʔ͕දࣔ͞Εͨ
79. Step 8: αΠυόʔΛಈ͔͢ • HamburgerͰ؅ཧ͍ͯ͠Δঢ়ଶΛ
 Sidebarʹ΋఻͍͑ͨ • LayoutͰঢ়ଶΛ؅ཧ͠
 HamburgerͱSidebarʹ౉͢Α͏ʹ͢Δ
80. ϘλϯΛԡͨ͠ͱ͖ͷྲྀΕ -BZPVU 4JEFCBS )BNCVSHFS JT4JEFCBS"DUJWF
    
    GBMTF
81. -BZPVU 4JEFCBS )BNCVSHFS ΫϦοΫ͞ΕͨΑʙ JT4JEFCBS"DUJWF
    
    GBMTF
82. -BZPVU JT4JEFCBS"DUJWF
    
    GBMTF JT4JEFCBS"DUJWF
    
    USVF JT4JEFCBS"DUJWF
    
    USVF 4JEFCBS )BNCVSHFS ঢ়ଶΛมߋ
83. -BZPVU 4JEFCBS )BNCVSHFS JT4JEFCBS"DUJWF
    
    USVF JT4JEFCBS"DUJWF
    
    USVF ঢ়ଶ͕఻ΘΔ
84. -BZPVU 4JEFCBS )BNCVSHFS JT4JEFCBS"DUJWF
    
    USVF JT4JEFCBS"DUJWF
    
    USVF දࣔΛ੾Γସ͑Δ
85. components/layout.jsΛमਖ਼
86. components/layout.jsΛमਖ਼ U )BNCVSHFSʹ͋ͬͨ
    ঢ়ଶΛ؅ཧ͢Δॲཧ
87. )BNCVSHFS
    4JEFCBSʹ
    ঢ়ଶΛ౉͢
88. components/hamburger.jsΛमਖ਼
89. components/hamburger.jsΛमਖ਼ QSPQTͰঢ়ଶΛड͚औΔ͚ͩ
90. components/sidebar.jsΛमਖ਼
91. components/sidebar.jsΛमਖ਼ QSPQTΛड͚औͬͯ
    දࣔΛ੾Γସ͑Δ
92. 
    αΠυόʔ΋ಈ͍ͨʂ
93. ·ͱΊ
94. ࠓ೔ֶΜͩ͜ͱ • React ΞϓϦέʔγϣϯͷ࡞Γํ • Single Page Application (SPA) • Server-Side Rendering (SSR) • Hot Module Reloading (HMR) • CSS in JS
95. ͓͔ͭΕ͞·Ͱͨ͠ʂ
96. ؾܰʹ࣭໰͍ͯͩ͘͠͞ w 5XJUUFSͰϝϯγϣϯͨ͠Γ
 IUUQTUXJUUFSDPNBNBHJUBLBZPTJ
    
    w (JU)VCͰJTTVFཱͯͨΓ
 IUUQTHJUIVCDPNGBOESFBDUIBOETPO
    ؾܰʹ࣭໰͍ͯͩ͘͠͞ w 5XJUUFSͰϝϯγϣϯͨ͠Γ
 IUUQTUXJUUFSDPNBNBHJUBLBZPTJ
    
    w (JU)VCͰJTTVFཱͯͨΓ
 IUUQTHJUIVCDPNGBOESFBDUIBOETPO