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
1k
MedPeer X みんなのウェディング合同勉強会
pipopotamasu
January 18, 2018
Tweet
Share
More Decks by pipopotamasu
See All by pipopotamasu
How JS Works
pipopotamasu
0
160
vue-function-tester
pipopotamasu
2
1.1k
Dive into vue-test-utils ~~Road of 1.0.0~~
pipopotamasu
0
87
medpacker_introduction_20190523
pipopotamasu
0
460
Introduction of medpacker: RoR Frontend Boilerplate
pipopotamasu
0
4.6k
新サービス・JOURNAL(ジャーナル)開発秘話
pipopotamasu
2
200
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
pipopotamasu
0
12k
MedPeer_JapaxTaxi_MeetUp_Actioncable
pipopotamasu
0
440
UXBridge_vol3_pipopotamasu
pipopotamasu
2
840
Featured
See All Featured
Thoughts on Productivity
jonyablonski
67
4.3k
A Philosophy of Restraint
colly
203
16k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Designing for Performance
lara
604
68k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.2k
GitHub's CSS Performance
jonrohan
1030
450k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
RailsConf 2023
tenderlove
28
860
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
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠