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

by pipopotamasu

Slide 1

Slide 1 text

Webpackerಋೖ࣌ʹ ͓͓͖͍͑ͯͨ͞ઃఆ ϝυϐΞגࣜձࣾ ΤϯδχΞ ଜ্ େ࿨

Slide 2

Slide 2 text

self_introduce.json { “name”: “ଜ্େ࿨”, “age”: 26, “github”: “pipopotamasu”, “company”: “ϝυϐΞגࣜձࣾ”, “tech”: [“Ruby”, “PHP”, “Vue.js”, “React”], “hobby”: [“໺ٿ”, “өը”], }

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

ͱ͍͏Θ͚ͰൃදςʔϚ

Slide 5

Slide 5 text

Webpackerಋೖ࣌ʹ ͓͓͖͍͑ͯͨ͞ઃఆ

Slide 6

Slide 6 text

͜͜Ͱ࣭໰ʂ

Slide 7

Slide 7 text

ීஈRails࢖ͬͯΔਓ (´ɾωɾ`)ϊγ

Slide 8

Slide 8 text

Webpacker࢖ͬͯΔਓ (ɾωɾ)ϊγ

Slide 9

Slide 9 text

Webpackerͱ͸ • RailsͰwebpackΛѻ͏ͨΊͷϥούʔGem • Rails5.1͔Βಋೖ

Slide 10

Slide 10 text

Webpackͱ͸ • JavaScript΍cssϑΝΠϧͳͲͷґଘؔ܎Λղ ܾ͠ɺͻͱ·ͱΊ(bundle)ͷϑΝΠϧͱͯ͠ ग़ྗͯ͘͠ΕΔπʔϧ • ઃఆ࣍ୈͰ͸ES6Ҏ߱ͷจ๏΍JSϑϨʔϜϫʔ ΫͳͲͷίʔυΛϒϥ΢β͕ಡΈࠐΊΔΑ͏ ʹม׵ͯ͘͠ΕͨΓ͢Δ

Slide 11

Slide 11 text

͜ͷൃදͰ঺հ͢Δ͜ͱ • ඞͣ͠΋ඞཁ͡Όͳ͍͚Ͳ͋ͬͨ΄͏͕͍͍ ઃఆ • ๨Ε͕ͪͳઃఆ • ͳͲͳͲ

Slide 12

Slide 12 text

͜ͷൃදͷΰʔϧ • ͢ͰʹWebpackerΛ࢖͍ͬͯΔਓ͕ઃఆΛݟ ௚ͤΔΑ͏ʹ • ·ͩWebpackerΛೖΕ͍ͯͳ͍ਓͷࢀߟʹ

Slide 13

Slide 13 text

͋Ε?

Slide 14

Slide 14 text

֮͑ͯ·͔͢?

Slide 15

Slide 15 text

͜ͷษڧձͷςʔϚ

Slide 16

Slide 16 text

͜ͷษڧձͷςʔϚ • νʔϜͷ։ൃྗ޲্ • αʔϏεͷվળͷεϐʔυΞοϓ • Rails΁ͷγεςϜҠߦ

Slide 17

Slide 17 text

͜ͷษڧձͷςʔϚ • νʔϜͷ։ൃྗ޲্ • αʔϏεͷվળͷεϐʔυΞοϓ • Rails΁ͷγεςϜҠߦ

Slide 18

Slide 18 text

͜ͷษڧձͷςʔϚ • νʔϜͷ։ൃྗ޲্ • αʔϏεͷվળͷεϐʔυΞοϓ • Rails΁ͷγεςϜҠߦ ࠓ೔࿩͢಺༰ͷྖҬ

Slide 19

Slide 19 text

(∵ɾωɾʣšŖŤƃŇ

Slide 20

Slide 20 text

Webpackerಋೖ࣌ʹ ͓͓͖͍͑ͯͨ͞ઃఆ • CommonsChunkPlugin • ݹ͍ϒϥ΢βରԠ • rails-ujs

Slide 21

Slide 21 text

͓͓͖͍͑ͯͨ͞ઃఆ ͦͷ1

Slide 22

Slide 22 text

CommonsChunkPlugin

Slide 23

Slide 23 text

CommonsChunkPlugin?

Slide 24

Slide 24 text

CommonsChunkPluginͱ͸ • WebpackͷPlugin • ෳ਺ͷΤϯτϦʔϙΠϯτ(ϖʔδຖʹҰ൪࠷ॳʹݺͼग़͞ ΕΔJSϑΝΠϧ)ؒͰར༻͍ͯ͠Δڞ௨ϥΠϒϥϦʔɺϞ δϡʔϧΛόϯυϧͨ͠ϑΝΠϧΛग़ྗͯ͘͠ΕΔPlugin • ग़ྗ͞ΕͨϑΝΠϧ͸Chunk Fileͱݺ͹ΕΔ

Slide 25

Slide 25 text

ΤϯτϦʔϑΝΠϧ?

Slide 26

Slide 26 text

Plugin?

Slide 27

Slide 27 text

ΤϯτϦʔϙΠϯτͱ͸ ϖʔδຖʹҰ൪࠷ॳʹݺͼग़͞ΕΔJSϑΝΠϧ

Slide 28

Slide 28 text

Pluginͱ͸

Slide 29

Slide 29 text

Pluginͱ͸

Slide 30

Slide 30 text

Pluginͱ͸ • WebpackͷػೳΛ֦ு͢Δ΋ͷ

Slide 31

Slide 31 text

௨ৗ index1.js index2.js index1.bundle.js index2.bundle.js

Slide 32

Slide 32 text

CommonsChunkPlugin࢖༻ index1.js index2.js index1.bundle.js index2.bundle.js vendor.bundle.js

Slide 33

Slide 33 text

ϝϦοτ • શମͷϑΝΠϧαΠζ͕খ͘͞ͳΔ • ΤϯτϦʔϙΠϯτ͕มΘͬͯ΋Chunk File ͸Ωϟογϡ͕ޮ͖ɺϑΝΠϧͷಡΈࠐΈ͕ ଎͘ͳΔ

Slide 34

Slide 34 text

Chunkઃఆ࣌ͷbundleίʔυ

Slide 35

Slide 35 text

௨ৗ࣌ͷbundleίʔυ

Slide 36

Slide 36 text

ൺֱ ௨ৗ CommonsChunkPlugin

Slide 37

Slide 37 text

CommonsChunkPluginઃఆ

Slide 38

Slide 38 text

ΤϯτϦʔϙΠϯτؒͷڞ௨Ϟδϡʔϧɾ ϥΠϒϥϦʔग़ྗϑΝΠϧͷઃఆ conﬁg/webpack/environment.js

Slide 39

Slide 39 text

CommonsChunkPlugin࢖༻ index1.js index2.js index1.bundle.js index2.bundle.js vendor.bundle.js

Slide 40

Slide 40 text

ڞ௨ϞδϡʔϧɾϥΠϒϥϦʔΛΤϯτ ϦʔϙΠϯτ͕ಡΈࠐΉͨΊͷઃఆ conﬁg/webpack/environment.js

Slide 41

Slide 41 text

CommonsChunkPlugin࢖༻ index1.js index2.js index1.bundle.js index2.bundle.js vendor.bundle.js

Slide 42

Slide 42 text

https://github.com/rails/webpacker/blob/ master/docs/webpack.md#add-common-chunks

Slide 43

Slide 43 text

͓͓͖͍͑ͯͨ͞ઃఆ ͦͷ2

Slide 44

Slide 44 text

ݹ͍ϒϥ΢βରԠ

Slide 45

Slide 45 text

babel-polyﬁll

Slide 46

Slide 46 text

babel-polyﬁll ৽͍͠ϒϥ΢βͰ࢖͑ͯɺݹ͍ϒϥ΢βͰ͸࢖ ͑ͳ͍ػೳΛ࢖͑ΔΑ͏ʹม׵ͯ͘͠ΕΔ Ұ෦άϩʔόϧείʔϓΛԚછ͢Δ΋ͷ͕͋Δ ɾΤϯτϦʔϙΠϯτͷઌ಄ʹಡΈࠐΉ͜ͱͰ࢖ ͑Δ

Slide 47

Slide 47 text

࢖͍ํ

Slide 48

Slide 48 text

͔͠͠ɺɺɺ

Slide 49

Slide 49 text

ΤϯτϦʔϑΝΠϧ

Slide 50

Slide 50 text

ΤϯτϦʔϑΝΠϧ

Slide 51

Slide 51 text

ΤϯτϦʔϑΝΠϧ

Slide 52

Slide 52 text

ΤϯτϦʔϑΝΠϧ

Slide 53

Slide 53 text

ΤϯτϦʔϑΝΠϧ

Slide 54

Slide 54 text

େྔͷimport

Slide 55

Slide 55 text

ຖճΤϯτϦʔϑΝΠϧʹ import͢ΜͷΊΜͲ͘Ͷ?

Slide 56

Slide 56 text

babel-plugin-transform- runtime (௕͍ͷͰҎޙtransform-runtime)

Slide 57

Slide 57 text

transform-runtime ৽͍͠ϒϥ΢βͰ࢖͑ͯɺݹ͍ϒϥ΢βͰ͸࢖͑ͳ͍ ػೳΛ࢖͑ΔΑ͏ʹม׵ͯ͘͠ΕΔ άϩʔόϧԚછ͞Εͳ͍ ຖճಡΈࠐ·ͳ͍͍ͯ͘ Πϯελϯεϝιου͕ม׵Ͱ͖ͳ͍

Slide 58

Slide 58 text

ຖճಡΈࠐ·ͳ͍͍ͯ͘ .babelrc

Slide 59

Slide 59 text

Πϯελϯεϝιου͕ม׵Ͱ͖ͳ͍ • ͜Μͳͷ͕ม׵Ͱ͖ͳ͍ • ྫ) Array ObjectͷΠϯελϯεϝιου

Slide 60

Slide 60 text

·ͱΊ

Slide 61

Slide 61 text

babel-polyﬁll ৽͍͠ϒϥ΢βͰ࢖͑ͯɺݹ͍ϒϥ΢βͰ͸࢖͑ ͳ͍ػೳΛ࢖͑ΔΑ͏ʹม׵ͯ͘͠ΕΔ Ұ෦άϩʔόϧείʔϓΛԚછ͢Δ΋ͷ͕͋Δ ΤϯτϦʔϙΠϯτͷઌ಄ʹಡΈࠐΉ͜ͱͰ࢖ ͑Δ

Slide 62

Slide 62 text

transform-runtime ৽͍͠ϒϥ΢βͰ࢖͑ͯɺݹ͍ϒϥ΢βͰ͸࢖͑ͳ͍ ػೳΛ࢖͑ΔΑ͏ʹม׵ͯ͘͠ΕΔ άϩʔόϧԚછ͞Εͳ͍ ຖճಡΈࠐ·ͳ͍͍ͯ͘ Πϯελϯεϝιου͕ม׵Ͱ͖ͳ͍

Slide 63

Slide 63 text

polyﬁllɺtransform-runtime ڞʹϝϦοτσϝϦοτ͋Δ ͷͰ༻๏༻ྔΛकͬͯ࢖͍· ͠ΐ͏

Slide 64

Slide 64 text

ݹ͍ϒϥ΢β΋αϙʔτඞਢͷ ৔߹ɺͲͪΒ͔͸ೖΕ·͠ΐ͏

Slide 65

Slide 65 text

͓͓͖͍͑ͯͨ͞ઃఆ ͦͷ3

Slide 66

Slide 66 text

rails-ujs

Slide 67

Slide 67 text

rails-ujs?

Slide 68

Slide 68 text

rails-ujs • Ajax௨৴ͷgetҎ֎ΛΑ͠ͳʹ΍ͬͯ͘ΕΔ (ϦΫΤετϔομʔʹCSRFτʔΫϯ࢓ࠐΉͱ͔) • formϔϧύʔͷremote: true͕ಈ͘ͷ͸͍ͭ͜ͷ ͓͔͛ • ݩ͸jquery-ujsͱ͍͏໊લ͕ͩͬͨɺjQueryґଘ Λແͨ͘͠΋ͷͱͯ͠࡞ΒΕͨ

Slide 69

Slide 69 text

WebpackerͷAjaxॲཧ • ॳظͰ͸rails-ujsͷઃఆ͕͞Ε͍ͯͳ͍ • ಛʹCSRFτʔΫϯ͕෇༩͞Ε͍ͯͳ͍ͨΊ POST΍PUTͷΞΫγϣϯ͕ૹΕͳ͍

Slide 70

Slide 70 text

ී௨ʹAjaxॲཧΛ͢Δͱ…

Slide 71

Slide 71 text

WebpackerͰ΋rails-ujsΛ ͍͍ײ͡ʹ࢖͍͍ͨʂ

Slide 72

Slide 72 text

ઃఆํ๏

Slide 73

Slide 73 text

Step1: Assets Piplineͷrails-ujs Λ࡟আ • WebpackerͷํͰ΋ઃఆ͢ΔͨΊɺɹɹɹ Assets Pipeline Ͱ͸࡟আ͓ͯ͘͠ app/assets/javascripts/application.js

Slide 74

Slide 74 text

Step2: yarn install rails-ujs • ͦͷ·Μ·

Slide 75

Slide 75 text

Step3: WebpackerͰrails-ujsىಈ • WebpackerଆͰͷrails-ujsͷىಈॲཧ • ΍͓͔ͬͯͳ͍ͱformϔϧύʔͷremote: true͕ಈ͔ ͳ͘ͳΔ app/javascript/packs/rails-ujs.js app/javascript/packs/application.js

Slide 76

Slide 76 text

Step4: ajaxͷϦΫΤετϔομʔʹCSRF τʔΫϯΛຒΊࠐΉ app/javascript/packs/hoges/index.js

Slide 77

Slide 77 text

͔͠͠ɺɺɺ

Slide 78

Slide 78 text

JSϑΝΠϧ

Slide 79

Slide 79 text

ຖճAjaxΛ࢖༻͢ΔϑΝΠϧ ʹCSRFઃఆ͢ΔͷͩΔ͍…

Slide 80

Slide 80 text

WebpackerͰ΋ࣗಈͰCSRF ઃఆ͍ͨ͠!

Slide 81

Slide 81 text

ઃఆํ๏ jquery-csrf.js index.js

Slide 82

Slide 82 text

WebpackerΛ࢖͏ͱ͖͸͍͍ײ͡ ʹCSRFτʔΫϯΛઃఆ͠·͠ΐ͏

Slide 83

Slide 83 text

·ͱΊ • Commons Chunk Plugin • ݹ͍ϒϥ΢βରԠ • rails-ujs ιʔε https://github.com/pipopotamasu/medpeer-mwed