MedPeer X みんなのウェディング合同勉強会

1. Webpackerಋೖ࣌ʹ ͓͓͖͍͑ͯͨ͞ઃఆ ϝυϐΞגࣜձࣾ ΤϯδχΞ ଜ্ େ࿨
2. self_introduce.json { “name”: “ଜ্େ࿨”, “age”: 26, “github”: “pipopotamasu”, “company”: “ϝυϐΞגࣜձࣾ”, “tech”: [“Ruby”, “PHP”, “Vue.js”, “React”], “hobby”: [“໺ٿ”, “өը”], }
4. ͱ͍͏Θ͚ͰൃදςʔϚ
5. Webpackerಋೖ࣌ʹ ͓͓͖͍͑ͯͨ͞ઃఆ
6. ͜͜Ͱ࣭໰ʂ
7. ීஈRails࢖ͬͯΔਓ (´ɾωɾ`)ϊγ
8. Webpacker࢖ͬͯΔਓ (ɾωɾ)ϊγ
9. Webpackerͱ͸ • RailsͰwebpackΛѻ͏ͨΊͷϥούʔGem • Rails5.1͔Βಋೖ
10. Webpackͱ͸ • JavaScript΍cssϑΝΠϧͳͲͷґଘؔ܎Λղ ܾ͠ɺͻͱ·ͱΊ(bundle)ͷϑΝΠϧͱͯ͠ ग़ྗͯ͘͠ΕΔπʔϧ • ઃఆ࣍ୈͰ͸ES6Ҏ߱ͷจ๏΍JSϑϨʔϜϫʔ ΫͳͲͷίʔυΛϒϥ΢β͕ಡΈࠐΊΔΑ͏ ʹม׵ͯ͘͠ΕͨΓ͢Δ
11. ͜ͷൃදͰ঺հ͢Δ͜ͱ • ඞͣ͠΋ඞཁ͡Όͳ͍͚Ͳ͋ͬͨ΄͏͕͍͍ ઃఆ • ๨Ε͕ͪͳઃఆ • ͳͲͳͲ
12. ͜ͷൃදͷΰʔϧ • ͢ͰʹWebpackerΛ࢖͍ͬͯΔਓ͕ઃఆΛݟ ௚ͤΔΑ͏ʹ • ·ͩWebpackerΛೖΕ͍ͯͳ͍ਓͷࢀߟʹ
13. ͋Ε?
14. ֮͑ͯ·͔͢?
15. ͜ͷษڧձͷςʔϚ
16. ͜ͷษڧձͷςʔϚ • νʔϜͷ։ൃྗ޲্ • αʔϏεͷվળͷεϐʔυΞοϓ • Rails΁ͷγεςϜҠߦ
17. ͜ͷษڧձͷςʔϚ • νʔϜͷ։ൃྗ޲্ • αʔϏεͷվળͷεϐʔυΞοϓ • Rails΁ͷγεςϜҠߦ
18. ͜ͷษڧձͷςʔϚ • νʔϜͷ։ൃྗ޲্ • αʔϏεͷվળͷεϐʔυΞοϓ • Rails΁ͷγεςϜҠߦ ࠓ೔࿩͢಺༰ͷྖҬ
19. (∵ɾωɾʣšŖŤƃŇ
20. Webpackerಋೖ࣌ʹ ͓͓͖͍͑ͯͨ͞ઃఆ • CommonsChunkPlugin • ݹ͍ϒϥ΢βରԠ • rails-ujs
21. ͓͓͖͍͑ͯͨ͞ઃఆ ͦͷ1
22. CommonsChunkPlugin
23. CommonsChunkPlugin?
24. CommonsChunkPluginͱ͸ • WebpackͷPlugin • ෳ਺ͷΤϯτϦʔϙΠϯτ(ϖʔδຖʹҰ൪࠷ॳʹݺͼग़͞ ΕΔJSϑΝΠϧ)ؒͰར༻͍ͯ͠Δڞ௨ϥΠϒϥϦʔɺϞ δϡʔϧΛόϯυϧͨ͠ϑΝΠϧΛग़ྗͯ͘͠ΕΔPlugin • ग़ྗ͞ΕͨϑΝΠϧ͸Chunk Fileͱݺ͹ΕΔ
25. ΤϯτϦʔϑΝΠϧ?
26. Plugin?
27. ΤϯτϦʔϙΠϯτͱ͸ ϖʔδຖʹҰ൪࠷ॳʹݺͼग़͞ΕΔJSϑΝΠϧ
28. Pluginͱ͸
29. Pluginͱ͸
30. Pluginͱ͸ • WebpackͷػೳΛ֦ு͢Δ΋ͷ
31. ௨ৗ index1.js index2.js index1.bundle.js index2.bundle.js
32. CommonsChunkPlugin࢖༻ index1.js index2.js index1.bundle.js index2.bundle.js vendor.bundle.js
33. ϝϦοτ • શମͷϑΝΠϧαΠζ͕খ͘͞ͳΔ • ΤϯτϦʔϙΠϯτ͕มΘͬͯ΋Chunk File ͸Ωϟογϡ͕ޮ͖ɺϑΝΠϧͷಡΈࠐΈ͕ ଎͘ͳΔ
34. Chunkઃఆ࣌ͷbundleίʔυ
35. ௨ৗ࣌ͷbundleίʔυ
36. ൺֱ ௨ৗ CommonsChunkPlugin
37. CommonsChunkPluginઃఆ
38. ΤϯτϦʔϙΠϯτؒͷڞ௨Ϟδϡʔϧɾ ϥΠϒϥϦʔग़ྗϑΝΠϧͷઃఆ config/webpack/environment.js
39. CommonsChunkPlugin࢖༻ index1.js index2.js index1.bundle.js index2.bundle.js vendor.bundle.js
40. ڞ௨ϞδϡʔϧɾϥΠϒϥϦʔΛΤϯτ ϦʔϙΠϯτ͕ಡΈࠐΉͨΊͷઃఆ config/webpack/environment.js
41. CommonsChunkPlugin࢖༻ index1.js index2.js index1.bundle.js index2.bundle.js vendor.bundle.js
42. https://github.com/rails/webpacker/blob/ master/docs/webpack.md#add-common-chunks
43. ͓͓͖͍͑ͯͨ͞ઃఆ ͦͷ2
44. ݹ͍ϒϥ΢βରԠ
45. babel-polyfill
46. babel-polyfill ৽͍͠ϒϥ΢βͰ࢖͑ͯɺݹ͍ϒϥ΢βͰ͸࢖ ͑ͳ͍ػೳΛ࢖͑ΔΑ͏ʹม׵ͯ͘͠ΕΔ Ұ෦άϩʔόϧείʔϓΛԚછ͢Δ΋ͷ͕͋Δ ɾΤϯτϦʔϙΠϯτͷઌ಄ʹಡΈࠐΉ͜ͱͰ࢖ ͑Δ
47. ࢖͍ํ
48. ͔͠͠ɺɺɺ
49. ΤϯτϦʔϑΝΠϧ
50. ΤϯτϦʔϑΝΠϧ
51. ΤϯτϦʔϑΝΠϧ
52. ΤϯτϦʔϑΝΠϧ
53. ΤϯτϦʔϑΝΠϧ
54. େྔͷimport
55. ຖճΤϯτϦʔϑΝΠϧʹ import͢ΜͷΊΜͲ͘Ͷ?
56. babel-plugin-transform- runtime (௕͍ͷͰҎޙtransform-runtime)
57. transform-runtime ৽͍͠ϒϥ΢βͰ࢖͑ͯɺݹ͍ϒϥ΢βͰ͸࢖͑ͳ͍ ػೳΛ࢖͑ΔΑ͏ʹม׵ͯ͘͠ΕΔ άϩʔόϧԚછ͞Εͳ͍ ຖճಡΈࠐ·ͳ͍͍ͯ͘ Πϯελϯεϝιου͕ม׵Ͱ͖ͳ͍
58. ຖճಡΈࠐ·ͳ͍͍ͯ͘ .babelrc
59. Πϯελϯεϝιου͕ม׵Ͱ͖ͳ͍ • ͜Μͳͷ͕ม׵Ͱ͖ͳ͍ • ྫ) Array ObjectͷΠϯελϯεϝιου
60. ·ͱΊ
61. babel-polyfill ৽͍͠ϒϥ΢βͰ࢖͑ͯɺݹ͍ϒϥ΢βͰ͸࢖͑ ͳ͍ػೳΛ࢖͑ΔΑ͏ʹม׵ͯ͘͠ΕΔ Ұ෦άϩʔόϧείʔϓΛԚછ͢Δ΋ͷ͕͋Δ ΤϯτϦʔϙΠϯτͷઌ಄ʹಡΈࠐΉ͜ͱͰ࢖ ͑Δ
62. transform-runtime ৽͍͠ϒϥ΢βͰ࢖͑ͯɺݹ͍ϒϥ΢βͰ͸࢖͑ͳ͍ ػೳΛ࢖͑ΔΑ͏ʹม׵ͯ͘͠ΕΔ άϩʔόϧԚછ͞Εͳ͍ ຖճಡΈࠐ·ͳ͍͍ͯ͘ Πϯελϯεϝιου͕ม׵Ͱ͖ͳ͍
63. polyfillɺtransform-runtime ڞʹϝϦοτσϝϦοτ͋Δ ͷͰ༻๏༻ྔΛकͬͯ࢖͍· ͠ΐ͏
64. ݹ͍ϒϥ΢β΋αϙʔτඞਢͷ ৔߹ɺͲͪΒ͔͸ೖΕ·͠ΐ͏
65. ͓͓͖͍͑ͯͨ͞ઃఆ ͦͷ3
66. rails-ujs
67. rails-ujs?
68. rails-ujs • Ajax௨৴ͷgetҎ֎ΛΑ͠ͳʹ΍ͬͯ͘ΕΔ (ϦΫΤετϔομʔʹCSRFτʔΫϯ࢓ࠐΉͱ͔) • formϔϧύʔͷremote: true͕ಈ͘ͷ͸͍ͭ͜ͷ ͓͔͛ • ݩ͸jquery-ujsͱ͍͏໊લ͕ͩͬͨɺjQueryґଘ Λແͨ͘͠΋ͷͱͯ͠࡞ΒΕͨ
69. WebpackerͷAjaxॲཧ • ॳظͰ͸rails-ujsͷઃఆ͕͞Ε͍ͯͳ͍ • ಛʹCSRFτʔΫϯ͕෇༩͞Ε͍ͯͳ͍ͨΊ POST΍PUTͷΞΫγϣϯ͕ૹΕͳ͍
70. ී௨ʹAjaxॲཧΛ͢Δͱ…
71. WebpackerͰ΋rails-ujsΛ ͍͍ײ͡ʹ࢖͍͍ͨʂ
72. ઃఆํ๏
73. Step1: Assets Piplineͷrails-ujs Λ࡟আ • WebpackerͷํͰ΋ઃఆ͢ΔͨΊɺɹɹɹ Assets Pipeline Ͱ͸࡟আ͓ͯ͘͠ app/assets/javascripts/application.js
74. Step2: yarn install rails-ujs • ͦͷ·Μ·
75. Step3: WebpackerͰrails-ujsىಈ • WebpackerଆͰͷrails-ujsͷىಈॲཧ • ΍͓͔ͬͯͳ͍ͱformϔϧύʔͷremote: true͕ಈ͔ ͳ͘ͳΔ app/javascript/packs/rails-ujs.js app/javascript/packs/application.js
76. Step4: ajaxͷϦΫΤετϔομʔʹCSRF τʔΫϯΛຒΊࠐΉ app/javascript/packs/hoges/index.js
77. ͔͠͠ɺɺɺ
78. JSϑΝΠϧ
79. ຖճAjaxΛ࢖༻͢ΔϑΝΠϧ ʹCSRFઃఆ͢ΔͷͩΔ͍…
80. WebpackerͰ΋ࣗಈͰCSRF ઃఆ͍ͨ͠!
81. ઃఆํ๏ jquery-csrf.js index.js
82. WebpackerΛ࢖͏ͱ͖͸͍͍ײ͡ ʹCSRFτʔΫϯΛઃఆ͠·͠ΐ͏
83. ·ͱΊ • Commons Chunk Plugin • ݹ͍ϒϥ΢βରԠ • rails-ujs ιʔε https://github.com/pipopotamasu/medpeer-mwed
84. ָ͍͠WebpackerϥΠϑΛ!
86. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠