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

Transcript

1. 1.

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

2. 2.

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

3. 3.

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

4. 4.

   ͍·͙͢
   HJU
   DMPOF
   ͍ͯͩ͘͠͞ʂ

5. 5.

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

6. 6.

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

7. 7.

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

8. 8.

   վΊ·ͯ͠amagiͰ͢

9. 9.

   IUUQEFWFMPQFSIBUFOBTUBDPNFOUSZ 1PEDBTUװ׏גתׅ

10. 10.

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

11. 11.

    ࠓ͔Β࡞ΔWebαΠτ

12. 12.

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

13. 13.

    diffͷݟํ

14. 14.

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

15. 15.

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

16. 16.

    ඪޠ: JS͕ Θ͔Βͳͯ͘΋ ؾʹ͠ͳ͍ • ࠓ೔͸ReactΛֶͼ·͢
 (JSΛֶͼ͍ͨΘ͚Ͱ͸ͳ͍) • ΨϯΨϯίϐϖ͠Α͏ʂʂʂ •

    ٧·ͬͨΒ໛ൣղ౴Λར༻͠Α͏ ʂʂ
17. 17.

    develop developϒϥϯνʹ͓खຊ͋Γ·͢ master

18. 18.

    develop master HJUͷλά

19. 19.

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

    • ྫ) Step 2 Ͱ٧·ͬͨΒ git checkout step-2
20. 20.

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

21. 21.

    Step 1: αʔόʔΛىಈ • $ npm run dev • http://localhost:3000/

    ʹΞΫηε
22. 22.

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

23. 23.

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

24. 24.

    index.jsͷΑ͏͢

25. 25.

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

26. 26.

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

27. 27.

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

    Rendering Next.js
28. 28.

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

29. 29.

    Hot Module Reloading (HMR) • ϑΝΠϧΛฤूͨ͠Βɺฤूͨ͠෦෼͚ͩ
 Ϧϩʔυͯ͘͠ΕΔ • ຊདྷ͸Webpackͷػೳ •

    Next.js͕উखʹWebpackىಈͯ͘͠ΕͯΔ
30. 30.

    “Server-Side Rendering” ͱ͸ʁ

31. 31.

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

32. 32.

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

33. 33.

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

34. 34.

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

35. 35.

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

    αʔόʔͷॲཧ͕୯७ʹͳΔ
36. 36.

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

37. 37.

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

38. 38.

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

39. 39.

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

40. 40.

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

41. 41.

    pages/about.jsΛ࡞੒

42. 42.

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

43. 43.

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

    Λ࡞Δ • ͦͷޙɺ pages/ ಺ͷϑΝΠϧʹ
 ίϯϙʔωϯτΛૠೖ͢Δ
44. 44.

    components/layout.js

45. 45.

    components/layout.js IFBEཁૉ

46. 46.

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

47. 47.

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

48. 48.

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

49. 49.

    pages/about.js JOEFYKTಉ༷

50. 50.

    ϒϥ΢βͰ֬ೝ͠Α͏

51. 51.

    Step 4: CSSΛಋೖ͢Δ • ReactͰCSSΛ࢖͏ํ๏ • ී௨ʹॻ͍ͯ link λάͰಡΈࠐΉ •

    CSS in JS • ࠓճ͸ CSS in JS ͯ͠Έ·͢
52. 52.

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

53. 53.

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

54. 54.

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

    ΍ͬͯΈΑ͏ʂ
55. 55.

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

56. 56.

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

57. 57.

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

58. 58.

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

59. 59.

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

60. 60.

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

61. 61.

    components/hamburger.jsΛ࡞੒

62. 62.

    components/hamburger.jsΛ࡞੒

63. 63.

    components/layout.jsΛमਖ਼

64. 64.

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

65. 65.

    දࣔ੒ޭ

66. 66.

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

67. 67.

    Reactίϯϙʔωϯτͷछྨ • ঢ়ଶͷͳ͍ίϯϙʔωϯτ:
 ReactElement Λฦؔ͢਺ • ঢ়ଶͷ͋Δίϯϙʔωϯτ:
 React.Component Λܧঝ͢ΔΫϥε •

    render() ϝιουͰ ReactElement Λฦ͢
68. 68.

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

69. 69.

    components/hamburger.jsΛमਖ਼

70. 70.

    components/hamburger.jsΛमਖ਼ ঢ়ଶΛఆٛ

71. 71.

    components/hamburger.jsΛमਖ਼ ঢ়ଶΛมߋ͢Δؔ਺

72. 72.

    components/hamburger.jsΛमਖ਼ ΫϦοΫͨ͠Β
    UPHHMF
    ΛݺͿΑ͏ʹ

73. 73.

    
    ͏͍ͨ͝ʂ

74. 74.

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

75. 75.

    components/sidebar.js

76. 76.

    OFYUMJOLΛར༻͠
    ϦϯΫΛ࡞੒

77. 77.

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

78. 78.

    αΠυόʔ͕දࣔ͞Εͨ

79. 79.

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

80. 80.

    ϘλϯΛԡͨ͠ͱ͖ͷྲྀΕ -BZPVU 4JEFCBS )BNCVSHFS JT4JEFCBS"DUJWF
    
    GBMTF

81. 81.

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

82. 82.

    -BZPVU JT4JEFCBS"DUJWF
    
    GBMTF JT4JEFCBS"DUJWF
    
    USVF JT4JEFCBS"DUJWF
    
    USVF 4JEFCBS )BNCVSHFS ঢ়ଶΛมߋ

83. 83.

    -BZPVU 4JEFCBS )BNCVSHFS JT4JEFCBS"DUJWF
    
    USVF JT4JEFCBS"DUJWF
    
    USVF ঢ়ଶ͕఻ΘΔ

84. 84.

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

85. 85.

    components/layout.jsΛमਖ਼

86. 86.

    components/layout.jsΛमਖ਼ U )BNCVSHFSʹ͋ͬͨ
    ঢ়ଶΛ؅ཧ͢Δॲཧ

87. 87.

    )BNCVSHFS
    4JEFCBSʹ
    ঢ়ଶΛ౉͢

88. 88.

    components/hamburger.jsΛमਖ਼

89. 89.

    components/hamburger.jsΛमਖ਼ QSPQTͰঢ়ଶΛड͚औΔ͚ͩ

90. 90.

    components/sidebar.jsΛमਖ਼

91. 91.

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

92. 92.

    
    αΠυόʔ΋ಈ͍ͨʂ

93. 93.

    ·ͱΊ

94. 94.

    ࠓ೔ֶΜͩ͜ͱ • React ΞϓϦέʔγϣϯͷ࡞Γํ • Single Page Application (SPA) •

    Server-Side Rendering (SSR) • Hot Module Reloading (HMR) • CSS in JS
95. 95.

    ͓͔ͭΕ͞·Ͱͨ͠ʂ

96. 96.

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


    IUUQTUXJUUFSDPNBNBHJUBLBZPTJ
    
    w (JU)VCͰJTTVFཱͯͨΓ
 IUUQTHJUIVCDPNGBOESFBDUIBOETPO