Tweet
Tweet

Slide 1

Slide 1 text

Ϗϧυϓϩηε͔Βߟ͑Δ CSSΞϯνύλʔϯ HTML5 Conference 2018 גࣜձࣾΧϒΫ ࠓଜݠ࢜ @kimamula

Slide 2

Slide 2 text

CSSͷ࿩Λ͠·͢

Slide 3

Slide 3 text

ϑϩϯτΤϯυΤϯδχΞͱCSSͱࢲ CSSಘҙ੎ CSSۤख੎

Slide 4

Slide 4 text

CSSಘҙ੎ CSSۤख੎ ࢲ ϑϩϯτΤϯυΤϯδχΞͱCSSͱࢲ

Slide 5

Slide 5 text

ͦΜͳࢲͰ͕͢

Slide 6

Slide 6 text

৭ʑ͋ͬͯɺ CSSͱਅ݋ʹ޲͖߹Θͳ͚Ε͹ ͳΒͳ͍ͱ͖͕͖ͨ…

Slide 7

Slide 7 text

਺ϲ݄ܦա

Slide 8

Slide 8 text

ؾ͕͍ͭͨ͜ͱ

Slide 9

Slide 9 text

Flexbox, Grid LayoutΛ࢖͑͹ CSS͸ͦΜͳʹͭΒ͘ͳ͍

Slide 10

Slide 10 text

Flexbox, Grid LayoutΛ࢖͑͹ CSS͸ͦΜͳʹͭΒ͘ͳ͍ ͜ͷ࿩͸͠·ͤΜ

Slide 11

Slide 11 text

Ϗϧυϓϩηε͔Βߟ͑Δͱɺ CSSͷઃܭ͕ߟ͑΍͍͢

Slide 12

Slide 12 text

Ϗϧυϓϩηε͔Βߟ͑Δͱɺ CSSͷઃܭ͕ߟ͑΍͍͢ ͜ͷ࿩Λ͠·͢

Slide 13

Slide 13 text

Ϗϧυϓϩηε͔Βߟ͑Δ CSSΞϯνύλʔϯ

Slide 14

Slide 14 text

Ξϯνύλʔϯ1

Slide 15

Slide 15 text

ίϯϙʔωϯτϕʔεͳͷʹ CSS͸άϩʔόϧ

Slide 16

Slide 16 text

ͦ΋ͦ΋CSSͱ޲͖߹͏͜ͱ Λܾҙͨ͠ݩڟݪҼͷҰͭ

Slide 17

Slide 17 text

• ϑϩϯτΤϯυ։ൃ͸ίϯϙʔωϯτϕʔε͕ ओྲྀ • ࠶ར༻ • είʔϓ෼ׂ ίϯϙʔωϯτϕʔε։ൃ

Slide 18

Slide 18 text

ͦΜͳதɺCSS͚ͩάϩʔόϧ άϩʔόϧ ίϯϙʔωϯτ ͱ͔ ಠࣗͷCSSͱ͔

Slide 19

Slide 19 text

άϩʔόϧ ίϯϙʔωϯτ ͱ͔ ಠࣗͷCSSͱ͔ ͦΜͳதɺCSS͚ͩάϩʔόϧ ͜ͷґଘ͸όϯυϥʔ ͔Βݟ͑ͳ͍

Slide 20

Slide 20 text

όϯυϥʔʹΑΔޮ཰తͳ code splitting͕Ͱ͖ͳ͍ • ଟ͔Εগͳ͔Ε࢖ΘΕ͍ͯͳ͍CSS͕όϯυϧ ʹࠞೖ͢Δ • ಛʹϖʔδॳظදࣔͰɺ࠷௿ݶඞཁͳCSS͚ͩ ΛHTMLʹΠϯϥΠϯͰຒΊࠐΉΑ͏ͳߴ଎Խ ࢪࡦͷಋೖ͕೉͘͠ͳΔ • ϖʔδͷද͕ࣔ஗͘ͳΔ

Slide 21

Slide 21 text

άϩʔόϧωʔϜεϖʔε • CSSΛ࣮࣭తʹϩʔΧϧείʔϓԽ͢Δٕज़Λ ࢖͑ͳ͍ • ϑϨʔϜϫʔΫඪ४ • CSS Modules • ͦͷଞCSS in JS • ఻౷తͳCSSͷͭΒΈͱBEMͳͲͷख๏Ͱઓ Θͳ͚Ε͹ͳΒͳ͍

Slide 22

Slide 22 text

ϙʔλϏϦςΟ͕Լ͕Δ • ίϯϙʔωϯτΛϓϩδΣΫτ֎Ͱ࠶ར༻͢ Δ೉қ౓্͕͕Δ • ͦͷίϯϙʔωϯτ͕ґଘ͢ΔελΠϧΛ࠶ ར༻ઌͰ༻ҙͯ͋͛͠ͳ͚Ε͹ͳΒͳ͍

Slide 23

Slide 23 text

ղܾࡦ

Slide 24

Slide 24 text

CSSΛίϯϙʔωϯτʹؚΊΔ άϩʔόϧ ίϯϙʔωϯτ X

Slide 25

Slide 25 text

ϝϦοτ • ίϯϙʔωϯτͱCSSͷґଘؔ܎͕໌֬ʹͳ Γɺcode splitting͕ՄೳʹͳΔ • ίϯϙʔωϯτʹดͨ͡ϩʔΧϧͳωʔϜε ϖʔε͕࢖͑Δ • ϙʔλϏϦςΟ͕޲্͢Δ

Slide 26

Slide 26 text

Ξϯνύλʔϯ2

Slide 27

Slide 27 text

ίʔυ͸DRYɺग़ྗ͸ඇDRY

Slide 28

Slide 28 text

CSS in JSΛ֮͑ͨͯͷࠒͷࢲ ώϟοϋʔʂJSͰclassΛ֦ுͰ͖Δʔ̇ const basicButton = { textAlign: 'center', cursor: 'pointer', fontWeight: 700, // ... }; const redButton = { ...basicButton, backgroundColor: 'red' };

Slide 29

Slide 29 text

Ϗϧυޙͷίʔυͷ͜ͱΛ ߟ͍͑ͯͳ͔ͬͨ

Slide 30

Slide 30 text

ग़ྗ͞ΕΔCSS .basic-button { text-align: center; cursor: pointer; font-weight: 700; // ... } .red-button { text-align: center; cursor: pointer; font-weight: 700; background-color: red; // … }

Slide 31

Slide 31 text

ग़ྗ͞ΕΔCSS .basic-button { text-align: center; cursor: pointer; font-weight: 700; // ... } .red-button { text-align: center; cursor: pointer; font-weight: 700; background-color: red; // … } DRY͡Όͳ͍

Slide 32

Slide 32 text

ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles

Slide 33

Slide 33 text

ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles

Slide 34

Slide 34 text

ͪͳΈʹstyled components https://www.styled-components.com/docs/basics#extending-styles ʊਓਓਓਓਓਓਓਓਓਓਓʊ ʼɹDRY͡Όͳ͍ʂʂɹʻ ʉY^Y^Y^Y^Y^Y^Y^Y^Yʉ

Slide 35

Slide 35 text

ͻΐͬͱͯ͠ճආࡦ͕͋Δʁ styled componentsৄ͍͠ํ ڭ͍͑ͯͩ͘͞

Slide 36

Slide 36 text

ίʔυ͕DRYͰ΋ ग़ྗ͕DRYͰͳ͍ͱ͸ݶΒͳ͍ ※SASSͷ@extends΍ɺCSS Modulesͷcomposes͸ग़ྗ΋DRYͰ͢

Slide 37

Slide 37 text

ղܾࡦ

Slide 38

Slide 38 text

൚༻తͳελΠϧΛෳ਺ͷ ίϯϙʔωϯτͰ࢖͍ճ͍ͨ࣌͠ • ͦͷελΠϧͦͷ΋ͷΛίϯϙʔωϯτʹׅ Γͩ͠ɺίϯϙʔωϯτ୯ҐͰ࢖͍ճ͢ • ίϯϙʔωϯτ୯ҐͰͷ࢖͍ճ͠ͳΒɺಉ͡ Α͏ͳclass͕ॏෳͯ͠ग़ྗ͞ΕΔ͜ͱ͸ͳ͍ -> ΄ͱΜͲελΠϧ͚ͩͷখ͍͞ίϯϙʔωϯ τ͕ͨ͘͞ΜͰ͖Δ

Slide 39

Slide 39 text

෦෼తʹελΠϧΛม͍͑ͨ࣌ • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css'; function Button(props) { return ( {props.children} ); }

Slide 40

Slide 40 text

෦෼తʹελΠϧΛม͍͑ͨ࣌ • ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css'; function Button(props) { return ( {props.children} ); } ͜͜ʹ΋஫໨ w ར༻ଆ͔Βʮத਎ʯΛ౉ͤΔ Α͏ʹ͢Δ w 8FC$PNQPOFOUT 7VFKT ͳΒTMPU w "OHVMBSͳΒOHDPOUFOU

Slide 41

Slide 41 text

• ίϯϙʔωϯτͷϓϩύςΟͰ੍ޚ͢Δ import { button, red } from './style.css'; function Button(props) { return ( {props.text} ); } ͜Ε͸Α͘ͳ͍ ෦෼తʹελΠϧΛม͍͑ͨ࣌

Slide 42

Slide 42 text

ར༻ଆ͔Βݟͨ৔߹ // ྑ͍ྫ: ॊೈ Click Me! Click Me! Click Me! // ѱ͍ྫ: ॊೈͰͳ͍ // ଟ༷ͳཁ݅ʹରԠ͠Α͏ͱ͢Δͱɺ // ίϯϙʔωϯτͷ࣮૷͕ͲΜͲΜෳࡶʹ ͜Ε΋Ξϯνύλʔϯ ˞$44ࣗମͷ΋ͷͰ͸ͳ͍͕

Slide 43

Slide 43 text

ͭ·Γ

Slide 44

Slide 44 text

ίϯϙʔωϯτϕʔεΛపఈ͢Δ -> ͍͍ίʔυ͕Ϗϧυ͞ΕΔ • CSSΛίϯϙʔωϯτʹؚΊΔ • ελΠϧͷ࠶ར༻ͷ୯ҐΛίϯϙʔωϯτʹ ͢Δ • slotΛ࢖ͬͯॊೈੑΛ֬อ͢Δ

Slide 45

Slide 45 text

ॳΊ͸ෆ҆ͩͬͨ • ओͳݒ೦఺ • ίϯϙʔωϯτ୯ҐͰͷελΠϧͷ࢖͍ճ͠ Ͱ͸ཻ౓͕ߥ͗ͯ͢ɺ݁ہclass୯Ґͷ࢖͍ճ ͠ͷັྗʹ߅͑ͳ͍ͷͰ͸ʁ -> ࠓͷͱ͜Ζᐜ༕

Slide 46

Slide 46 text

Atomic Design?

Slide 47

Slide 47 text

͏·Έ͕Α͘෼͔͍ͬͯͳ͍ • ͏·͍ͷ͔΋͠Εͳ͍ • ͜ͷઌߦ͖٧·ͬͨΒऔΓೖΕΔ͔΋ • Atoms, Molecules, Organismsͷ۠෼͚͕೉͠ ͍ͱ͍͏࿩ΛΑ͘ฉ͘ -> ࠓͷ΍Γํ͸ɺϏϧυ݁Ռͱ͍͏࣮རϕʔε ͷઃܭͰ࣮֬ʹ͏·͘ɺ͔ͭͦͷ؍఺Ͱઃܭʹ ໎͏͜ͱ͕ࠓͷͱ͜Ζ͋·Γͳ͍

Slide 48

Slide 48 text

Thank you!