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
920
MedPeer X みんなのウェディング合同勉強会
pipopotamasu
January 18, 2018
Tweet
Share
More Decks by pipopotamasu
See All by pipopotamasu
How JS Works
pipopotamasu
0
150
vue-function-tester
pipopotamasu
2
1k
Dive into vue-test-utils ~~Road of 1.0.0~~
pipopotamasu
0
81
medpacker_introduction_20190523
pipopotamasu
0
420
Introduction of medpacker: RoR Frontend Boilerplate
pipopotamasu
0
4.4k
新サービス・JOURNAL(ジャーナル)開発秘話
pipopotamasu
2
180
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
pipopotamasu
0
11k
MedPeer_JapaxTaxi_MeetUp_Actioncable
pipopotamasu
0
380
UXBridge_vol3_pipopotamasu
pipopotamasu
2
810
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
60
3.9k
Bash Introduction
62gerente
604
210k
Product Roadmaps are Hard
iamctodd
44
9.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
187
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
A better future with KSS
kneath
231
16k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
How GitHub (no longer) Works
holman
304
140k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
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
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠