Tweet
Tweet

Slide 1

Slide 1 text

Bootstrap4ͷΧελ ϚΠζ 2018-03-17 ໦ଜ ݑن

Slide 2

Slide 2 text

#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ

Slide 3

Slide 3 text

#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ

Slide 4

Slide 4 text

2018-01-18ʹBootstrap4͕ϦϦʔε

Slide 5

Slide 5 text

લόʔδϣϯͱൺֱͯ͠ ΧελϚΠζ͕ඇৗʹ΍Γ΍͘͢ͳͬͨ • Sassͷ࠾༻ • JSϑΝΠϧͷػೳ͝ͱͷ෼ׂ
 ʢ͜Ε͸લ͔Βʁʣ

Slide 6

Slide 6 text

Πϯετʔϧํ๏ $ npm install --save-dev bootstrap

Slide 7

Slide 7 text

#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ

Slide 8

Slide 8 text

CSSͷΧελϚΠζ SassʹΑͬͯॻ͔Ε͍ͯΔ લόʔδϣϯ͸lessͩͬͨͷͰΫη͕͋ͬͨ

Slide 9

Slide 9 text

Sassͱ͸ http://sass-lang.com/ Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. ˠ$44֦ுݴޠ

Slide 10

Slide 10 text

SassͱSCSS 4BTT DTTͰසग़͢Δηϛίϩϯ΍೾ׅހ ͳͲΛলུ 4$44 DTTͷߏจͦͷ··ʹɺηϨΫλʔ ͷೖΕࢠ΍ม਺ͳͲͷػೳΛ௥Ճ

Slide 11

Slide 11 text

SassͱSCSS 4BTT DTTͰසग़͢Δηϛίϩϯ΍೾ׅހ ͳͲΛলུ 4$44 DTTͷߏจͦͷ··ʹɺηϨΫλʔ ͷೖΕࢠ΍ม਺ͳͲͷػೳΛ௥Ճ

Slide 12

Slide 12 text

Πϯετʔϧ Node.js൛Λ࢖༻͢Δ $ npm install --save-dev node-sass

Slide 13

Slide 13 text

ϑΥϧμߏ੒

Slide 14

Slide 14 text

ΧελϚΠζͷྫ ࢖༻͢Δ߲໨ͷΈΠϯϙʔτ src/custom.scss

Slide 15

Slide 15 text

SCSSΛCSSʹม׵ SCSS͸ϒϥ΢β͕ղऍͰ͖ͳ͍ͷͰCSSʹม׵ $ npx node-sass src/custom.scss docs/bundle.css

Slide 16

Slide 16 text

αΠζൺֱ ϑΝΠϧαΠζ͕໿60KB࡟ݮ

Slide 17

Slide 17 text

#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ

Slide 18

Slide 18 text

JavaScriptͷΧελϚΠζ node_module/bootstrap/js/srcʹػೳ͝ͱʹ෼ ׂͯ͠ଘࡏ ECMAScript2017Ͱهड़ jQuery, popper.jsʹґଘ ݁߹ͱτϥϯεύΠϧ͕ඞཁ

Slide 19

Slide 19 text

ϑΥϧμߏ੒

Slide 20

Slide 20 text

ΧελϚΠζྫ src/index.js ඞཁͳػೳͷΈimport

Slide 21

Slide 21 text

docs/bundle.jsੜ੒ͷྲྀΕ WebPackͰෳ਺ͷϑΝΠϧΛ݁߹ʢόϯυϧʣ babelͰ݁߹ͨ͠ϑΝΠϧΛτϥϯεύΠϧ

Slide 22

Slide 22 text

WebPackͷΠϯετʔϧ $ npm install --save-dev webpack webpack-cli

Slide 23

Slide 23 text

WebPackͷ࣮ߦ $ npx webpack src/index.js --output-path="./tmp" --output-filename="bundle.js" --mode=production tmp/bundle.js͕ੜ੒

Slide 24

Slide 24 text

babelͷΠϯετʔϧ $ npm install --save-dev babel-cli babel-preset- env babel-plugin-transform-object-rest-spread

Slide 25

Slide 25 text

babelͷઃఆ { "presets": ["env"], "plugins": ["transform-object-rest-spread"] } .babelrc

Slide 26

Slide 26 text

babelͷ࣮ߦ $ npx babel tmp/bundle.js -o docs/bundle.js docs/bundle.js͕ੜ੒

Slide 27

Slide 27 text

αΠζൺֱ ϑΝΠϧαΠζ͕໿86KB࡟ݮ

Slide 28

Slide 28 text

#PPUTUSBQʹ͍ͭͯ $44ͷΧελϚΠζ +BWB4DSJQUͷΧελϚΠζ