Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

14084b6462b19a8512ce5208a76f8925?s=128

fand/amagitakayosi

March 18, 2017
Tweet

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. ͍·͙͢ HJUDMPOF ͍ͯͩ͘͠͞ʂ

  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Λमਖ਼ $44JO+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"DUJWFGBMTF

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

  82. -BZPVU JT4JEFCBS"DUJWFGBMTF JT4JEFCBS"DUJWFUSVF JT4JEFCBS"DUJWFUSVF 4JEFCBS )BNCVSHFS ঢ়ଶΛมߋ

  83. -BZPVU 4JEFCBS )BNCVSHFS JT4JEFCBS"DUJWFUSVF JT4JEFCBS"DUJWFUSVF ঢ়ଶ͕఻ΘΔ

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

  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