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

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