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
200
vue-function-tester
pipopotamasu
2
1.2k
Dive into vue-test-utils ~~Road of 1.0.0~~
pipopotamasu
0
96
medpacker_introduction_20190523
pipopotamasu
0
500
Introduction of medpacker: RoR Frontend Boilerplate
pipopotamasu
0
4.9k
新サービス・JOURNAL(ジャーナル)開発秘話
pipopotamasu
2
250
メドピアにおけるライブラリアップデート_MedBeer_20180912.pdf
pipopotamasu
0
12k
MedPeer_JapaxTaxi_MeetUp_Actioncable
pipopotamasu
0
600
UXBridge_vol3_pipopotamasu
pipopotamasu
2
890
Featured
See All Featured
Leading Effective Engineering Teams in the AI Era
addyosmani
5
430
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.6k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
33
2.3k
Become a Pro
speakerdeck
PRO
29
5.5k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
Writing Fast Ruby
sferik
629
62k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Facilitating Awesome Meetings
lara
56
6.6k
How to Ace a Technical Interview
jacobian
280
24k
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
͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠