Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
MedPeer X みんなのウェディング合同勉強会
Search
pipopotamasu
January 18, 2018
0
1.1k
MedPeer X みんなのウェディング合同勉強会
pipopotamasu
January 18, 2018
Tweet
Share
More Decks by pipopotamasu
See All by pipopotamasu
How JS Works
pipopotamasu
0
190
vue-function-tester
pipopotamasu
2
1.2k
Dive into vue-test-utils ~~Road of 1.0.0~~
pipopotamasu
0
94
medpacker_introduction_20190523
pipopotamasu
0
500
Introduction of medpacker: RoR Frontend Boilerplate
pipopotamasu
0
4.8k
新サービス・JOURNAL(ジャーナル)開発秘話
pipopotamasu
2
240
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
pipopotamasu
0
12k
MedPeer_JapaxTaxi_MeetUp_Actioncable
pipopotamasu
0
570
UXBridge_vol3_pipopotamasu
pipopotamasu
2
890
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Building an army of robots
kneath
306
45k
Embracing the Ebb and Flow
colly
86
4.7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Docker and Python
trallard
44
3.5k
Faster Mobile Websites
deanohume
307
31k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Designing for humans not robots
tammielis
253
25k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Transcript
Webpackerಋೖ࣌ʹ ͓͓͖͍͑ͯͨ͞ઃఆ ϝυϐΞגࣜձࣾ ΤϯδχΞ ଜ্ େ
self_introduce.json { “name”: “ଜ্େ”, “age”: 26, “github”: “pipopotamasu”, “company”: “ϝυϐΞגࣜձࣾ”,
“tech”: [“Ruby”, “PHP”, “Vue.js”, “React”], “hobby”: [“ٿ”, “өը”], }
None
ͱ͍͏Θ͚ͰൃදςʔϚ
Webpackerಋೖ࣌ʹ ͓͓͖͍͑ͯͨ͞ઃఆ
͜͜Ͱ࣭ʂ
ීஈRailsͬͯΔਓ (´ɾωɾ`)ϊγ
WebpackerͬͯΔਓ (ɾωɾ)ϊγ
Webpackerͱ • RailsͰwebpackΛѻ͏ͨΊͷϥούʔGem • Rails5.1͔Βಋೖ
Webpackͱ • JavaScriptcssϑΝΠϧͳͲͷґଘؔΛղ ܾ͠ɺͻͱ·ͱΊ(bundle)ͷϑΝΠϧͱͯ͠ ग़ྗͯ͘͠ΕΔπʔϧ • ઃఆ࣍ୈͰES6Ҏ߱ͷจ๏JSϑϨʔϜϫʔ ΫͳͲͷίʔυΛϒϥβ͕ಡΈࠐΊΔΑ͏ ʹมͯ͘͠ΕͨΓ͢Δ
͜ͷൃදͰհ͢Δ͜ͱ • ඞͣ͠ඞཁ͡Όͳ͍͚Ͳ͋ͬͨ΄͏͕͍͍ ઃఆ • Ε͕ͪͳઃఆ • ͳͲͳͲ
͜ͷൃදͷΰʔϧ • ͢ͰʹWebpackerΛ͍ͬͯΔਓ͕ઃఆΛݟ ͤΔΑ͏ʹ • ·ͩWebpackerΛೖΕ͍ͯͳ͍ਓͷࢀߟʹ
͋Ε?
֮͑ͯ·͔͢?
͜ͷษڧձͷςʔϚ
͜ͷษڧձͷςʔϚ • νʔϜͷ։ൃྗ্ • αʔϏεͷվળͷεϐʔυΞοϓ • RailsͷγεςϜҠߦ
͜ͷษڧձͷςʔϚ • νʔϜͷ։ൃྗ্ • αʔϏεͷվળͷεϐʔυΞοϓ • RailsͷγεςϜҠߦ
͜ͷษڧձͷςʔϚ • νʔϜͷ։ൃྗ্ • αʔϏεͷվળͷεϐʔυΞοϓ • RailsͷγεςϜҠߦ ࠓ͢༰ͷྖҬ
(∵ɾωɾʣšŖŤƃŇ
Webpackerಋೖ࣌ʹ ͓͓͖͍͑ͯͨ͞ઃఆ • CommonsChunkPlugin • ݹ͍ϒϥβରԠ • rails-ujs
͓͓͖͍͑ͯͨ͞ઃఆ ͦͷ1
CommonsChunkPlugin
CommonsChunkPlugin?
CommonsChunkPluginͱ • WebpackͷPlugin • ෳͷΤϯτϦʔϙΠϯτ(ϖʔδຖʹҰ൪࠷ॳʹݺͼग़͞ ΕΔJSϑΝΠϧ)ؒͰར༻͍ͯ͠Δڞ௨ϥΠϒϥϦʔɺϞ δϡʔϧΛόϯυϧͨ͠ϑΝΠϧΛग़ྗͯ͘͠ΕΔPlugin • ग़ྗ͞ΕͨϑΝΠϧChunk FileͱݺΕΔ
ΤϯτϦʔϑΝΠϧ?
Plugin?
ΤϯτϦʔϙΠϯτͱ ϖʔδຖʹҰ൪࠷ॳʹݺͼग़͞ΕΔJSϑΝΠϧ
Pluginͱ
Pluginͱ
Pluginͱ • WebpackͷػೳΛ֦ு͢Δͷ
௨ৗ index1.js index2.js index1.bundle.js index2.bundle.js
CommonsChunkPlugin༻ index1.js index2.js index1.bundle.js index2.bundle.js vendor.bundle.js
ϝϦοτ • શମͷϑΝΠϧαΠζ͕খ͘͞ͳΔ • ΤϯτϦʔϙΠϯτ͕มΘͬͯChunk File Ωϟογϡ͕ޮ͖ɺϑΝΠϧͷಡΈࠐΈ͕ ͘ͳΔ
Chunkઃఆ࣌ͷbundleίʔυ
௨ৗ࣌ͷbundleίʔυ
ൺֱ ௨ৗ CommonsChunkPlugin
CommonsChunkPluginઃఆ
ΤϯτϦʔϙΠϯτؒͷڞ௨Ϟδϡʔϧɾ ϥΠϒϥϦʔग़ྗϑΝΠϧͷઃఆ config/webpack/environment.js
CommonsChunkPlugin༻ index1.js index2.js index1.bundle.js index2.bundle.js vendor.bundle.js
ڞ௨ϞδϡʔϧɾϥΠϒϥϦʔΛΤϯτ ϦʔϙΠϯτ͕ಡΈࠐΉͨΊͷઃఆ config/webpack/environment.js
CommonsChunkPlugin༻ index1.js index2.js index1.bundle.js index2.bundle.js vendor.bundle.js
https://github.com/rails/webpacker/blob/ master/docs/webpack.md#add-common-chunks
͓͓͖͍͑ͯͨ͞ઃఆ ͦͷ2
ݹ͍ϒϥβରԠ
babel-polyfill
babel-polyfill ৽͍͠ϒϥβͰ͑ͯɺݹ͍ϒϥβͰ ͑ͳ͍ػೳΛ͑ΔΑ͏ʹมͯ͘͠ΕΔ Ұ෦άϩʔόϧείʔϓΛԚછ͢Δͷ͕͋Δ ɾΤϯτϦʔϙΠϯτͷઌ಄ʹಡΈࠐΉ͜ͱͰ ͑Δ
͍ํ
͔͠͠ɺɺɺ
ΤϯτϦʔϑΝΠϧ
ΤϯτϦʔϑΝΠϧ
ΤϯτϦʔϑΝΠϧ
ΤϯτϦʔϑΝΠϧ
ΤϯτϦʔϑΝΠϧ
େྔͷimport
ຖճΤϯτϦʔϑΝΠϧʹ import͢ΜͷΊΜͲ͘Ͷ?
babel-plugin-transform- runtime (͍ͷͰҎޙtransform-runtime)
transform-runtime ৽͍͠ϒϥβͰ͑ͯɺݹ͍ϒϥβͰ͑ͳ͍ ػೳΛ͑ΔΑ͏ʹมͯ͘͠ΕΔ άϩʔόϧԚછ͞Εͳ͍ ຖճಡΈࠐ·ͳ͍͍ͯ͘ Πϯελϯεϝιου͕มͰ͖ͳ͍
ຖճಡΈࠐ·ͳ͍͍ͯ͘ .babelrc
Πϯελϯεϝιου͕มͰ͖ͳ͍ • ͜Μͳͷ͕มͰ͖ͳ͍ • ྫ) Array ObjectͷΠϯελϯεϝιου
·ͱΊ
babel-polyfill ৽͍͠ϒϥβͰ͑ͯɺݹ͍ϒϥβͰ͑ ͳ͍ػೳΛ͑ΔΑ͏ʹมͯ͘͠ΕΔ Ұ෦άϩʔόϧείʔϓΛԚછ͢Δͷ͕͋Δ ΤϯτϦʔϙΠϯτͷઌ಄ʹಡΈࠐΉ͜ͱͰ ͑Δ
transform-runtime ৽͍͠ϒϥβͰ͑ͯɺݹ͍ϒϥβͰ͑ͳ͍ ػೳΛ͑ΔΑ͏ʹมͯ͘͠ΕΔ άϩʔόϧԚછ͞Εͳ͍ ຖճಡΈࠐ·ͳ͍͍ͯ͘ Πϯελϯεϝιου͕มͰ͖ͳ͍
polyfillɺtransform-runtime ڞʹϝϦοτσϝϦοτ͋Δ ͷͰ༻๏༻ྔΛक͍ͬͯ· ͠ΐ͏
ݹ͍ϒϥβαϙʔτඞਢͷ ߹ɺͲͪΒ͔ೖΕ·͠ΐ͏
͓͓͖͍͑ͯͨ͞ઃఆ ͦͷ3
rails-ujs
rails-ujs?
rails-ujs • Ajax௨৴ͷgetҎ֎ΛΑ͠ͳʹͬͯ͘ΕΔ (ϦΫΤετϔομʔʹCSRFτʔΫϯࠐΉͱ͔) • formϔϧύʔͷremote: true͕ಈ͘ͷ͍ͭ͜ͷ ͓͔͛ • ݩjquery-ujsͱ͍͏໊લ͕ͩͬͨɺjQueryґଘ
Λແͨ͘͠ͷͱͯ͠࡞ΒΕͨ
WebpackerͷAjaxॲཧ • ॳظͰrails-ujsͷઃఆ͕͞Ε͍ͯͳ͍ • ಛʹCSRFτʔΫϯ͕༩͞Ε͍ͯͳ͍ͨΊ POSTPUTͷΞΫγϣϯ͕ૹΕͳ͍
ී௨ʹAjaxॲཧΛ͢Δͱ…
WebpackerͰrails-ujsΛ ͍͍ײ͡ʹ͍͍ͨʂ
ઃఆํ๏
Step1: Assets Piplineͷrails-ujs Λআ • WebpackerͷํͰઃఆ͢ΔͨΊɺɹɹɹ Assets Pipeline Ͱআ͓ͯ͘͠ app/assets/javascripts/application.js
Step2: yarn install rails-ujs • ͦͷ·Μ·
Step3: WebpackerͰrails-ujsىಈ • WebpackerଆͰͷrails-ujsͷىಈॲཧ • ͓͔ͬͯͳ͍ͱformϔϧύʔͷremote: true͕ಈ͔ ͳ͘ͳΔ app/javascript/packs/rails-ujs.js app/javascript/packs/application.js
Step4: ajaxͷϦΫΤετϔομʔʹCSRF τʔΫϯΛຒΊࠐΉ app/javascript/packs/hoges/index.js
͔͠͠ɺɺɺ
JSϑΝΠϧ
ຖճAjaxΛ༻͢ΔϑΝΠϧ ʹCSRFઃఆ͢ΔͷͩΔ͍…
WebpackerͰࣗಈͰCSRF ઃఆ͍ͨ͠!
ઃఆํ๏ jquery-csrf.js index.js
WebpackerΛ͏ͱ͖͍͍ײ͡ ʹCSRFτʔΫϯΛઃఆ͠·͠ΐ͏
·ͱΊ • Commons Chunk Plugin • ݹ͍ϒϥβରԠ • rails-ujs ιʔε
https://github.com/pipopotamasu/medpeer-mwed
ָ͍͠WebpackerϥΠϑΛ!
None
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠