フロントエンドデザイン・開発におけるマークアップ設計の基礎 / frontend markup design basics

by Kou

Slide 1

Slide 1 text

ϑϩϯτΤϯυσβΠϯɾ։ൃ ʹ͓͚ΔϚʔΫΞοϓઃܭͷجૅ WEBΤϯδχΞษڧձ #07 Koichi Nagaoka

Slide 2

Slide 2 text

ࣗݾ঺հ ௕Ԭ ߒҰ (@kkoudev) ͍ΘΏΔϑϧελοΫΤϯδχΞͰ͢ɻ גࣜձࣾϛΫγΟͰΤϯδχΞ΍ͬͯ·͢ɻ ޷͖ͳݴޠ͸RubyͱKotlin

Slide 3

Slide 3 text

օ͞Μ͸ϚʔΫΞοϓͷ ܦݧ͕͋Γ·͔͢ʁ

Slide 4

Slide 4 text

ͦ΋ͦ΋ϚʔΫΞοϓͱ͸ • ຊདྷͷҙຯͱͯ͠͸ɺίϯϐϡʔλ͕จॻߏ଄Λೝࣝग़དྷΔΑ͏ʹจॻͷ ֤ཁૉʹ໨ҹΛ༩͑ͯߦ͘͜ͱΛࢦ͠·͢ • Webۀքʹ͓͍ͯ͸ओʹσβΠϯ(PSD΍SketchͳͲ)͔ΒHTMLΛ࡞੒͢Δ ͜ͱΛࢦ͠·͢ɻσβΠϯΛදݱ͢Δؔ܎্ɺݟͨ໨΍ಈ͖ʹؔΘΔCSS ΍Ұ෦ͷJavaScriptͷίʔσΟϯάʹ͍ͭͯ΋͜ͷݴ༿ʹؚΊΔ͜ͱ͕ଟ͍ Ͱ͢

Slide 5

Slide 5 text

ͭ·ΓϚʔΫΞοϓͱ͸ɺWebͷੈքΛද ݱ͍ͯ͠ΔHTML΍CSSΛίʔσΟϯά͢Δ ࠷΋جૅʹ౰ͨΔ࡞ۀʹͳΓ·͢ɻ HTMLͱCSSͳΜͯ؆୯ʂͱࢥ͍ͬͯΔํ΋ ͍Δ͔΋஌Ε·ͤΜ͕ɾɾɾ “

Slide 6

Slide 6 text

ϚʔΫΞοϓ͸ ೉͍͠ʂʂ

Slide 7

Slide 7 text

ԿނϚʔΫΞοϓ͸೉͍͠ͷ͔ • Ϩεϙϯγϒ͕ओྲྀͷࡢࠓͰ͸PCɺεϚʔτϑΥϯɺλϒϨοτͱ͍ͬͨ ༷ʑͳσόΠεΛ૝ఆͨ͠ݟͨ໨Λҙࣝͯ͠࡞੒͢Δඞཁ͕͋Δ • σβΠϯʴίʔσΟϯάͱ͍͏ɺ͋ΔҙຯσβΠφʔͱΤϯδχΞͷதؒʹ Ґஔ͢ΔεΩϧʹͳΔͨΊɺ͔ͬ͠Γઃܭɾߏஙग़དྷΔਓࡐ͸૒ํͷεΩ ϧʹ͋Δఔ౓ਫ਼௨͍ͯ͠Δඞཁ͕ग़ͯ͘Δ • αΠτͷن໛͕େ͖͘ͳΕ͹ͳΔ΄ͲCSSઃܭ͕ഁ୼͢Δ܏޲ʹ͋Γɺઃ ܭ࣍ୈͰ͸̍ͭͷϧʔϧηοτΛมߋ͢Δ͚ͩͰଟ਺ͷϖʔδʹӨڹΛٴ ΅ͯ͠͠·͏

Slide 8

Slide 8 text

ͭ·ΓɺϚʔΫΞοϓͷ೉͠ ͞ͷຆͲ͸ݟͨ໨(≒CSS)ͷઃ ܭ໰୊ʹىҼ͠·͢

Slide 9

Slide 9 text

ຊ೔͓࿩͢Δ͜ͱ • σβΠϯ࡞੒͔࣌ΒϚʔΫΞοϓ΁޲͚ͯҙ͓ࣝͯ͘͜͠ͱʹ͍ͭͯ • αΠτن໛ʹΑͬͯ༗ޮͳCSSઃܭख๏ͷ঺հͱɺνʔϜ։ൃʹద༻ͨ͠৔ ߹ʹੜ͡ΔӨڹʹ͍ͭͯ • ࣮ࡍʹϚʔΫΞοϓΛ͢Δࡍʹ༻ҙ͢ΔίʔσΟϯά؀ڥྫʹ͍ͭͯ

Slide 10

Slide 10 text

1. σβΠϯ࡞੒ͱϚʔΫΞοϓͷؔ܎

Slide 11

Slide 11 text

WebσβΠϯ࡞੒࣌ʹ·ͣඞཁͳཁૉͱ͸ • ϒϨΠΫϙΠϯτ • ίϯςϯπྖҬ෯ • ༨ന(margin, padding, line-height, letter-spacing)ͷϧʔϧ ͜ͷ̏఺Λ༧ΊܾΊ͓ͯ͘ͱɺεϜʔζʹσβΠϯ࡞ ੒͕ਐΊΒΕɺϚʔΫΞοϓ࣌ʹ΋ࠞཚ͢Δ͜ͱ͕গ ͳ͘ͳΓ·͢

Slide 12

Slide 12 text

ϒϨΠΫϙΠϯτͷܾΊํ ·ͣ͸PCͱSPͷϒϨΠΫϙΠϯτΛܾΊ·͢ɻࡢࠓͩͱλϒϨοτ (iPad)ͷԣ෯Ͱ͋Δ768pxΛج४ͱ͢Δ͜ͱ͕ଟ͍Ͱ͢ɻͦͷ্Ͱɺ λϒϨοτͷॎදࣔ࣌ʹͲͪΒͷݟͤํΛ͍ͨ͠ͷ͔ͰҎԼͷΑ͏ ʹܾΊ·͢ɻ λϒϨοτॎදࣔͰSPσβΠϯදࣔͱ͢Δ৔߹ … 768pxҎԼΛSP λϒϨοτॎදࣔͰPCσβΠϯදࣔͱ͢Δ৔߹ … 767pxҎԼΛSP ͲͪΒʹ͢Δͷ͔͸σβΠϯ΍ίϯςϯπྔ࣍ୈͱͳΔͨΊɺ σβΠϯ࡞੒࣌ʹҙܾࣝͯ͠ఆ͢Δඞཁ͕͋Γ·͢ɻ

Slide 13

Slide 13 text

ίϯςϯπྖҬ෯ͷܾΊํ ݹ͔͘Β࢖ΘΕΔͷ͸ 960 άϦουγεςϜʹج͍ͮͨ 960px Ͱ͢ɻ ͨͩ͠ɺ͜ͷ਺஋͸ 1024px ͷσΟεϓϨΠ෯Λલఏͱͨ͠΋ͷͳͷͰɺ ࡢࠓͰ͸খ͍͞৔߹͕͋Γ·͢ɻ ͦͷͨΊɺ960px Λϕʔεʹɺද͍ࣔͨ͠ίϯςϯπ͕ऩ·Γ͖Δ৔߹ ͸ 960pxɺऩ·Γ੾Βͳ͍৔߹͸ 8 ͷഒ਺୯ҐͰྖҬ෯Λ૿΍͍ͯ͠ ͖ɺ࠷దͳ஋Λܾఆ͢Δͷ͕͓͢͢ΊͰ͢ɻ 8ͷഒ਺Ͱ͋Δཧ༝͸ɺPC΍SPͷσΟεϓϨΠ͕8ͷഒ਺αΠζͰ͋Δ ͜ͱʹج͍͍ͮͯ·͢ɻ8ͷഒ਺Ͱ࡞੒͓ͯ͘͜͠ͱͰɺը໘಺ʹ៉ྷʹ ऩ·ΔΑ͏ʹ࡞੒͠΍͘͢ͳΓ·͢ɻ

Slide 14

Slide 14 text

༨നͷϧʔϧͷܾΊํ ༨നʹ͍ͭͯ΋ 8 ͷഒ਺୯Ґͷ஋Λࢦఆ͢Δͱ៉ྷʹ࡞ ੒Ͱ͖·͢ɻͪ͜Β΋ 8 ͷഒ਺Ͱ͋Δͷ͸ίϯςϯπྖ Ҭ෯ͱಉ͘͡σΟεϓϨΠ෯ͷഒ਺ʹج͍͍ͮͯ·͕͢ɺ ഒ਺Λར༻͢Δ΋͏̍ͭͷཧ༝ͱͯ͠ɺσβΠϯͷݪଇ ͷ̍ͭͰ͋Δʮ൓෮(Repetition)ʯʹ౰ͯ͸Ί΍͍͢ͱ͍ ͏ཧ༝͕͋Γ·͢ɻ

Slide 15

Slide 15 text

σβΠϯͷݪଇͰ͋Δ൓෮ͱ͸ ਓؒ͸نଇਖ਼͘͠܁Γฦ͞ΕΔ΋ͷΛඒ͘͠ײ͡Δੑ࣭ ͕͋Γ·͢ɻͦΕΛར༻ͨ͠ͷ͕൓෮Ͱ͢ɻ ಉ͡ഒ਺ͷ༨ന΍෯Λنఆ͢Δ͜ͱͰɺنଇਖ਼͘͠൓෮ ͍ͯ͠ΔΑ͏ʹσβΠϯΛݟͤΔ͜ͱ͕Ͱ͖·͢ɻ ͜ͷϧʔϧ͸ϚʔΫΞοϓ࣌ʹ΋༗ޮͰɺ༨ന΍෯͕ 8 ͷഒ਺Ͱ͋Δͱཧղ͍ͯ͠Δ͜ͱͰίʔσΟϯά͢Δ଎ ౓΋֨ஈʹ্͕Γɺ͔ͭݟͨ໨΋ඒ͘͠ͳΓ·͢ɻ

Slide 16

Slide 16 text

line-heightʹ͍ͭͯ line-height͸จࣈͷಡΈ΍͢͞ʹେ͖͘ࠨӈ͞ΕΔͨΊɺσβΠϯ࡞੒͔࣌ Βҙࣝ͢Δ͜ͱ͸ඇৗʹॏཁͰ͢ɻ೔ຊޠͷ৔߹ɺline-height͸1.5ʙ1.8͋ ͨΓ͕ಡΈ΍͍͢ͱݴΘΕ͍ͯ·͢ͷͰɺͦͷத͔Βܾఆ͢Δͷ͕͓͢͢Ί Ͱ͢ɻ ·ͨɺline-heightΛҙࣝͨ͠σβΠϯख๏ͱͯ͠ɺVertical Rhythmͱ͍͏ख ๏͕͋Γ·͢ɻߦͷߴ͞Λಛఆͷഒ਺ͱ͢Δ͜ͱͰ൓෮ʹΑΔϦζϜΛ͚ͭɺ ՄಡੑΛ্͛ΔσβΠϯख๏Ͱ͢ɻ͜ΕΛϚʔΫΞοϓͰ࣮ݱ͠΍ͨ͘͢͠ line-height-step ͱ͍͏ϓϩύςΟ͕W3CͰఏҊதͱͳ͍ͬͯ·͢ɻ (Chromeͷࢼݧӡ༻ػೳΛ༗ޮʹ͢Δͱ࢖͑·͢)

Slide 17

Slide 17 text

letter-spacingʹ͍ͭͯ letter-spacing͸ओʹݟग़͠ͷΑ͏ͳΞΫηϯτͱͳΔจࣈͷࣈؒͷௐ੔ʹར ༻͢Δ͜ͱ͕ଟ͍Ͱ͢ɻ ϚʔΫΞοϓʹ͓͍ͯɺletter-spacing͸ em ୯ҐΛ࢖ͬͯઃఆ͠·͢ɻ em୯ҐΛར༻͢Δ͜ͱͰϑΥϯταΠζʹԠͯ͡ࣈ͕ܾؒఆ͞Ε·͢ɻ

Slide 18

Slide 18 text

2. αΠτن໛ʹԠͨ͡CSSͷઃܭ

Slide 19

Slide 19 text

খن໛αΠτΛ࡞Δ৔߹ɺσβΠϯ΍Ϛʔ ΫΞοϓͷઃܭΛͦ͜·Ͱ໌֬ʹܾΊͳ͘ ͯ΋໰୊ͳ͍έʔε͸͋Γ·͢ɻୠ͠ɺͦ ͷޙαΠτͷอक͕͋Γɺن໛͕ঃʑʹେ ͖͘ͳ͍ͬͯ͘৔߹͸σβΠϯ΍ϚʔΫΞ οϓͷઃܭ͕อकੑΛେ͖͘ࠨӈ͠·͢ɻ “

Slide 20

Slide 20 text

ن໛͕େ͖͘ͳͬͨαΠτʹΑ͋͘Δ໰୊ • CSSͷϧʔϧηοτΛ௥Ճͯ͠΋ద༻͞Εͳ͍ • ϧʔϧηοτͷϓϩύςΟͷ্ॻ͖͕ଟ਺ଘࡏ͢Δ • important͕ଟ༷͞ΕɺεύήοςΟCSSͱԽ͍ͯ͠Δ ͜ΕΒͷ໰୊͸CSSઃܭͷ໰୊Ͱɺϧʔϧηοτͷʮৄࡉ ౓ʯ͕όϥόϥʹͳ͍ͬͯΔͨΊʹى͜Γ·͢

Slide 21

Slide 21 text

CSSͷৄࡉ౓ʹ͍ͭͯ CSS͸ϑΝΠϧͷҰ൪Լʹهड़ͨ͠ϧʔϧηοτ͕༏ઌ͞ΕΔΘ͚Ͱ͸ͳ͘ɺ ৄࡉ౓ͱݺ͹ΕΔ༏ઌॱҐʹΑͬͯద༻͞ΕΔϧʔϧηοτ͕ܾ·Γ·͢ɻϧʔ ϧηοτͷৄࡉ౓͸ɺར༻͢ΔηϨΫλʹΑܾͬͯ·Γ·͢ɻ۩ମతʹ͸ɺҎ Լͷେখؔ܎͕͋Γ·͢ɻ importantͷϓϩύςΟ ʼ ΠϯϥΠϯελΠϧɹʼɹIDηϨΫλɹʼɹΫϥε/ଐੑηϨΫλɹ ʼɹཁૉηϨΫλ ্هͷେখؔ܎ͱ֤ηϨΫλͷ߹ܭ਺ʹΑͬͯৄࡉ౓͸ܾ·Γ·͢ɻ ୠ͠ɺཁૉηϨΫλ͕ͲΕ͚ͩू·ͬͯ΋ɺΫϥε/ଐੑηϨΫλ1ͭΑΓৄࡉ ౓͕ߴ͘ͳΔ͜ͱ͸ͳ͘ɺಉ༷ʹΫϥεηϨΫλ͕ͲΕ͚ͩ૿͑ͯ΋ɺIDηϨ Ϋλ1ͭͷৄࡉ౓ΑΓߴ͘ͳΔ͜ͱ͸͋Γ·ͤΜɻ

Slide 22

Slide 22 text

ৄࡉ౓ΛͳΔ΂͘૿΍͞ͳ͍ίπ • IDηϨΫλ͸ར༻ېࢭʹ͢Δ • ཁૉηϨΫλ͸ॳظԽ࣌ͷΈར༻͠ɺྫ֎Λআ͍ͯΫϥεη ϨΫλͷΈͰϧʔϧηοτ͸هड़͢Δ • important͸ར༻͍ͯ͠ΔϥΠϒϥϦ͕ੜ੒͢ΔΠϯϥΠϯ ελΠϧΛ্ॻ͖͍ͨ͠৔߹ͳͲɺࢭΉΛಘͳ͍έʔεΛআ ͍ͯ͸ར༻͠ͳ͍

Slide 23

Slide 23 text

CSSͷઃܭͰ͸ɺৄࡉ౓ΛߴΊͣʹ͍͔ʹ ௥Ճɾมߋ͠΍͍͢ઃܭʹ͢Δ͔͕ॏཁͰ ͢ɻ CSSͷৄࡉ౓ΛͳΔ΂͘ۉҰʹ͢Δઃܭख ๏ʹ͸ͲͷΑ͏ͳ΋ͷ͕͋Δͷ͔ݟ͍͖ͯ ·͠ΐ͏ɻ “

Slide 24

Slide 24 text

2-1. CSSͷઃܭख๏ʹ͍ͭͯ

Slide 25

Slide 25 text

2-1-1. BEMʹ͍ͭͯ BEM͸࠷΋Α͘࢖ΘΕ͍ͯΔCSSͷ໋໊نଇͰ͢ɻ Ϋϥε໊ΛʮBlockʢϒϩοΫʣʯʮElementʢࢠཁ ૉʣʯʮModifierʢम০ࢠʣʯͷ̏ͭʹ෼໋໊͚ͯ͢Δ ͜ͱͰɺ໾ׂΛϋοΩϦͤͭͭ͞ɺ໊শͷিಥ͕ى͖ͳ ͍Α͏ʹ͢Δख๏ʹͳΓ·͢ɻ

Slide 26

Slide 26 text

BEMͷྫ (CSS) /* ୯ޠ୯ҐͰϋΠϑϯ۠੾ΓͰهड़͢ΔɻϒϩοΫͱཁૉͷؒ͸ΞϯμʔείΞ̎ͭͰهड़͢Δ */ .top-page__head { display: block; font-size: 20px; font-weight: bold; } /* म০ࢠ(Modifier)͸ϋΠϑϯ̎ͭͷ͋ͱʹ໊শΛهड़͢Δ */ .top-page__head--red { color: red; }

Slide 27

Slide 27 text

BEMͷྫ (HTML)

τοϓϖʔδݟग़͠

τοϓϖʔδݟग़͠(੺)

Slide 28

Slide 28 text

BEMͷ͋·Γྑ͘ͳ͍ྫ (CSS) /* ҎԼͷΑ͏ͳϒϩοΫͷதʹϒϩοΫΛೖΕࢠʹ͢ΔΑ͏ͳ໋໊͸ඇਪ঑Ͱ͢ */ .top-page__head__sub-page__sub-head { display: block; font-size: 20px; } /* ModifierΛෳ਺෇༩͢Δͷ΋ඇਪ঑Ͱ͢ */ .top-page__head--red--hidden { display: none; color: red; }

Slide 29

Slide 29 text

BEMͷ͋·Γྑ͘ͳ͍ྫ (HTML)

τοϓϖʔδݟग़͠(੺)

্هͷΫϥεʹ͸ModifierͱͳΔελΠϧ(͜͜Ͱ͸৭)͚ͩͰͳ͘ɺ  ϑΥϯταΠζͷΑ͏ͳมԽ͢Δඞཁͷͳ͍ϕʔεͱͳΔϓϩύςΟ΋ؚ ΊͯશͯΛؚΊ͍ͯΔ͜ͱʹͳΓ·͢ɻ ࠷ॳʹ঺հͨ͠BEMͷྫ (CSS) ʹ͋ΔΑ͏ʹɺϕʔεͱͳΔελΠϧʹ มԽ͢ΔϓϩύςΟ͚ͩΛఆٛͨ͠ελΠϧΛ߹Θͤͯࢦఆ͢Δ͜ͱ͕ BEMͱͯ͠͸ਪ঑͞Ε·͢ɻ

Slide 30

Slide 30 text

BEMͷCSSϑΝΠϧߏ੒ྫ blocksͱmodulesͷ2ͭͷσΟϨΫτϦΛ༻ҙ͠ɺblocksσΟϨΫτ Ϧʹ͸ϒϩοΫ͝ͱͷελΠϧΛهड़͠·͢ɻ͜͜Ͱ͍͏ϒϩοΫ ͱ͸WebαΠτʹ͓͚Δը໘·ͨ͸ػೳΛද͠ɺ֤ը໘·ͨ͸ػೳ ୯Ґ͝ͱʹ1ϑΝΠϧͣͭ࡞੒͠·͢ɻ modulesσΟϨΫτϦʹ͸֤ը໘΍ػೳͰԣஅతʹ࢖ΘΕΔ൚༻త ͳύʔπΛఆٛ͢ΔελΠϧΛఆٛ͠·͢ɻ ͜ͷϑΝΠϧߏ੒͸؆қతͳαΠτΛߏங͢Δࡍͷߏ੒Ͱ͕͢ɺੈ ͷதతʹ͸ MCSS ΍ FLOCSS ͱ͍ͬͨBEMͱ૊Έ߹Θͤͨ΋ͬͱ ࡉ͔͍ϧʔϧ΋ଘࡏ͢ΔͷͰɺ͜͜Ͱ͸঺հ͠·ͤΜ͕ڵຯͷ͋Δ ํ͸ௐ΂ͯΈ͍ͯͩ͘͞ɻ

Slide 31

Slide 31 text

BEMͱৄࡉ౓ʹ͍ͭͯ BEM͸BlockɺElementɺModifierͱ͍͏ϧʔϧͰΫϥε Λ໋໊͢Δ͜ͱͰ΄΅ඃΒͳ໊͍শΛ࡞Δ͜ͱ͕Ͱ͖· ͢ɻͦͷ্Ͱɺجຊతʹ1ΫϥεηϨΫλͱͳΔͨΊɺৄ ࡉ౓͕ۉҰʹอͨΕ·͢ɻ(໋໊ͰϧʔϧηοτͷিಥΛ ճආ͍ͯ͠ΔͨΊɺΫϥεηϨΫλΛෳ਺݁߹ͨ͠ϧʔ ϧηοτ(ʹৄࡉ౓͕ߴ͘ͳΔϧʔϧηοτ)Λ࡞Δඞཁ ੑ͕ͳ͘ͳΓ·͢)

Slide 32

Slide 32 text

BEM͸Ϋϥε໊͕௕͘ͳΔ͜ͱΛআ͚͹ඇৗʹ༗ ޮͳखஈͰ͢ɻখن໛αΠτͰ΋େن໛αΠτͰ ΋௨༻͢Δख๏ͳͷͰɺੋඇऔΓೖΕΔ͜ͱΛ͓ ͢͢Ί͠·͢ɻ “

Slide 33

Slide 33 text

2-1-2. Atomic Designʹ͍ͭͯ ۙ೥ྲྀߦΓͷσβΠϯɾCSSͷઃܭख๏Ͱ͢ɻ σβΠϯ࡞੒͔࣌ΒύʔπԽΛҙࣝͯ͠ઃܭ͢Δख๏ͱ ͳΓ·͢ɻAtomic DesignͰ͸ύʔπΛݪࢠʢAtomsʣɺ ෼ࢠʢMoleculesʣɺ༗ػମʢOrganismsʣɺςϯϓϨʔ τʢTemplatesʣɺϖʔδʢPagesʣͷ5ͭͷ୯Ґʹ෼͚ ͯઃܭ͠ɺ࠷ऴతʹ͜ΕΒΛ૊Έ߹ΘͤΔ͜ͱͰσβΠ ϯΛදݱ͠·͢ɻ

Slide 34

Slide 34 text

ݪࢠʢAtomsʣ ࠷খ୯ҐͷύʔπͰ͋ΓɺओʹϘλϯɺΞΠίϯɺϥϕ ϧɺςΩετϘοΫεͱ͍ͬͨύʔπΛද͠·͢ɻ

Slide 35

Slide 35 text

෼ࢠʢMoleculesʣ ̎ͭҎ্ͷݪࢠΛෳ਺૊Έ߹Θͤͨύʔπɻ ΞΠίϯ͖ͭݕࡧϘοΫεͷΑ͏ͳύʔπ͕֘౰͠·͢ɻ

Slide 36

Slide 36 text

༗ػମʢOrganismsʣ ݪࢠ΍෼ࢠΛෳ਺૊Έ߹ΘͤͨύʔπͰɺ୯ಠͰ੒ཱ͢ ΔίϯςϯπΛද͠·͢ɻ ϔομɺϑολͳͲ͕ྫͱͯ֘͠౰͠·͢ɻ

Slide 37

Slide 37 text

ςϯϓϨʔτʢTemplatesʣ ݪࢠɺ෼ࢠɺ༗ػମΛෳ਺૊Έ߹Θͤͨը໘ߏ଄Λද͢ ύʔπͰɺϨΠΞ΢τͷ͜ͱΛࢦ͠·͢ɻ

Slide 38

Slide 38 text

ϖʔδʢPagesʣ ը૾΍จষͳͲɺ࣮ࡍͷίϯςϯπ͕ࠩ͠ࠐ·Εͨը໘ Λද͠·͢ɻ

Slide 39

Slide 39 text

Atomic DesignͷCSS΁ͷ൓өํ๏ React΍VueͷΑ͏ͳϥΠϒϥϦͰ͸ CSS Modulesͷ࢓ ૊ΈΛ࢖ͬͯɺCSSͷείʔϓΛ֤ίϯϙʔωϯτ୯Ґ Ͱดͯ͡هड़͢Δ͜ͱ͕ՄೳͰ͕͢ɺCSS ModulesΛ࢖ Θͳ͍έʔεͰ͸গ͠޻෉͕ඞཁͰ͢ɻ

Slide 40

Slide 40 text

Atomic DesignͷCSSϑΝΠϧߏ੒ྫ ֤ύʔπ͝ͱʹσΟϨΫτϦΛ࡞੒͠ɺͦͷதʹίϯϙʔ ωϯτผʹϑΝΠϧΛ෼͚ͯελΠϧΛهड़͍͖ͯ͠· ͢ɻ໋໊ʹ͍ͭͯ͸BEMΛ࢖༻͠ɺύʔπͷछྨ͕Θ͔ ΔΑ͏ʹAtomsͳΒ a- ɺMoleculesͳΒ m- ͱ͍ͬͨ઀ ಄ޠΛ෇༩͠·͢ɻ·ͨɺ͜ΕΒͷύʔπσΟϨΫτϦ ͸ɺ֤ύʔπͷґଘॱͱͳΔ 1. Atoms 2. Molecules 3. Organisms 4. Templates 5. Pages ͷॱ൪ʹͦΕͧΕͷελΠϧΛಡΈࠐΈ·͢ɻ

Slide 41

Slide 41 text

Atomic Designͷཧ૝ Atomic Design্͕ख͘ద༻Ͱ͖ΔͱɺσβΠϯͷมߋ͕ ඇৗʹ͠΍͘͢ͳΓ·͢ɻύʔπ୯ҐͰσβΠϯΛ؅ཧ ͍ͯ͠ΔͨΊɺ̍ͭͷύʔπΛมߋ͢Δ͜ͱͰͦͷύʔ πΛར༻͍ͯ͠Δશը໘΁มߋΛ൓ө͢Δ͜ͱ͕Մೳʹ ͳΓ·͢ɻ

Slide 42

Slide 42 text

Atomic Designͷݱ࣮ ͔͠͠ɺ࣮ࡍʹ͜ΕΛӡ༻͠Α͏ͱ͢Δͱن໛͕େ͖͘ ͳΕ͹ͳΔ΄ͲσβΠϯஈ֊Ͱͭ·͖ͮ·͢ɻ ಛʹ෼ࢠͱ༗ػମͷ۠ผ͕σβΠϯஈ֊Ͱ͸ᐆດͰ͋Δ ͨΊɺ࡞੒͢ΔύʔπΛͲ͜ʹଐͤ͞Ε͹͍͍ͷ͔Θ͔ Βͳ͘ͳΔ͜ͱ͕ଟʑ͋Γ·͢ɻ࣮ࡍʹ࡞੒͢ΔσβΠ ϯʹԠͯ͡νʔϜ಺ͰೝࣝΛ߹Θͤͭͭ࡞੒͢ΔͷΛΦ εεϝ͠·͢ɻ

Slide 43

Slide 43 text

3. ίʔσΟϯά؀ڥͷ࡞੒ྫ

Slide 44

Slide 44 text

࠷ޙʹɺϚʔΫΞοϓ͢ΔࡍͷίʔσΟϯ ά؀ڥʹ͍ͭͯɺීஈࢲ͕Α͘ར༻͍ͯ͠ Δߏ੒Λ঺հ͍ͨ͠ͱࢥ͍·͢ɻ “

Slide 45

Slide 45 text

ϚʔΫΞοϓ؀ڥߏஙྫ HTML • Pug CSS • PostCSS (SugarSS) JavaScript • Babel (ES2015Ҏ߱) Bundler • FuseBox λεΫϥϯφʔ • ࢖Θͳ͍ (npm-scriptsͷΈ)

Slide 46

Slide 46 text

Pugʹ͍ͭͯ Pug͸ΠϯσϯτʹΑͬͯ֊૚ߏ଄Λදݱ͢ΔςϯϓϨʔτ Ͱɺ؆୯ʹݴ͏ͱHTMLΛด͡λάͳ͠ʹهड़Ͱ͖·͢ɻଞ ʹ΋extend΍mixinsͷར༻΋ՄೳͳͨΊɺগͳ͍ίʔυྔͰ HTMLͷهड़͕ՄೳʹͳΔ͹͔Γ͔ɺग़ྗ͞ΕΔHTML΋ ίʔυ੔ܗ͞Εͨ៉ྷͳHTMLͱͳΓ·͢ͷͰੋඇར༻͠· ͠ΐ͏ɻ

Slide 47

Slide 47 text

PostCSS (SugarSS)ʹ͍ͭͯ PostCSS͸ϓϥάΠϯΛ௥Ճ͢Δ͜ͱͰ༷ʑͳػೳΛ௥ՃͰ͖·͢ɻͦͷத ͰSugarSSͱ͍͏ύʔαʔΛࢦఆ͢ΔͱɺSassͷΑ͏ͳΠϯσϯτʹΑΔ CSSϧʔϧηοτͷهड़͕ՄೳʹͳΓ·͢ɻଞʹ΋Sass૬౰ͷػೳΛ࣮ݱ ग़དྷΔΑ͏ʹ͍͔ͭ͘ϓϥάΠϯΛ௥Ճ͍ͯ͠·͢ɻͦΕͳΒSassͰ͍͍ͷ Ͱ͸ʁͱࢥ͏ํ΋͍ΔͱࢥΘΕ·͕͢ɺPostCSSΛ׶͑ͯ࢖͏ཧ༝ͱͯ͠͸ PostCSSͰར༻ՄೳͳLinterͰ͋Δ stylelint ͷग़དྷ͕ྑ͘ɺࡉ͔͍ϧʔϧͷ ੍ޚ͕ՄೳͰ͋ΔͨΊͰ͢ɻ

Slide 48

Slide 48 text

Babel (ES2015Ҏ߱)ʹ͍ͭͯ ࡢࠓͷϑϩϯτΤϯυͷ࣮૷Ͱ͸ES2015Ҏ߱ͷJavaScript͕ར༻͞ΕΔͨ ΊɺϚʔΫΞοϓ࣌ʹ͓͍ͯ΋͜Εʹ߹Θͤ·͢ɻ

Slide 49

Slide 49 text

FuseBoxʹ͍ͭͯ ੈؒͰ͸ webpack ΍ Percel ͷํ͕༗໊Ͱ͕͢ɺݸਓతʹ͸FuseBoxΛਪ͠ ͍ͯ·͢ɻͱʹ͔͘Ϗϧυ͕଎͍Ͱ͢ʂ React΍VueͷΑ͏ͳ༗໊ͳϥΠϒϥϦʹ΋ରԠ͍ͯ͠·͢ɻ

Slide 50

Slide 50 text

λεΫϥϯφʔ͸࢖Θͳ͍ λεΫϥϯφʔͱ͍͏ͱɺgulp΍GruntΛࢥ͍ු͔΂Δํ͕ଟ͍͔ͱࢥ͍·͢ ͕ɺgulp͸࣍όʔδϣϯͰ͋Δv4͕Կ೥ܦͬͯ΋ਖ਼ࣜϦϦʔε͞Εͣɺ(λά͸ ੾ΒΕ͍ͯΔ͕ npm ϦϙδτϦ΁͸ґવϦϦʔε͞Ε͍ͯͳ͍) Gruntʹ͍ͭͯ ͸ࣄ্࣮։ൃ͕ఀࢭ͍ͯ͠·͢ɻNodeJSͷ࠷৽όʔδϣϯ΁ͷରԠ΋͞Ε͍ͯ ͳ͍ͨΊɺࠓޙར༻Ͱ͖ͳ͍ϥΠϒϥϦ͕ଟ਺ൃੜͯ͘͠Δ͜ͱ͕༧૝͞Ε· ͢ɻ ͦͷͨΊɺnpm-scriptsͰ௚઀ίϚϯυͷ੍ޚΛߦ͍·͢ɻ Pug΍PostCSS͸ઐ༻ͷCLI͕഑෍͞Ε͓ͯΓɺwatchػೳ΋͋ΔͨΊ ຆͲͷέʔεͰ͸ͦΕΒͷCLIΛnpm-scriptsͰ࣮ߦ͢Δ͚ͩͰࣄ଍Γ·͢ɻ

Slide 51

Slide 51 text

npm-scriptsʹ͍ͭͯ npm-scripts ͸ package.json ͷ scripts ͱ͍͏߲໨ʹهड़ͨ͠ίϚϯυΛ࣮ߦ͢ ΔػೳͰ͢ɻ௨ৗͷίϚϯυ࣮ߦͱͷҧ͍͸PATHʹnode_modules/.bin σΟϨ ΫτϦ͕ࣗಈతʹ௥Ճ͞Εͨঢ়ଶͰίϚϯυΛ࣮ߦͰ͖Δͱ͜Ζʹ͋Γ·͢ɻ { "name": "my-package", "scripts": { "build": "babel src -d lib", "test": "jest" } } ҎԼͷίϚϯυͰ࣮ߦՄೳ ʲyarnͷ৔߹ʳ yarn build ʲnpmͷ৔߹ʳ npm run build

Slide 52

Slide 52 text

·ͱΊ

Slide 53

Slide 53 text

࠷ۙͷϚʔΫΞοϓ͸Ԟ͕ਂ͍ ϚʔΫΞοϓ͸୯ͳΔHTMLͱCSSΛهड़͢Δ͚ͩͰ؆୯ͱ͍͏Α͏ͳઌೖ ؍ͰݟΒΕ͍ͯΔ͜ͱ͕ଟ͍Ͱ͕͢ɺ࣮ࡍ͸σβΠϯͷݟͨ໨΍ಈ͖͚ͩͰ ͳ͘ɺίʔσΟϯάͷઃܭʹ͍ͭͯ΋ߟྀ͢Δඞཁ͕͋ΔͨΊɺ৔߹ʹΑͬ ͯ͸୯ͳΔJavaScriptͷϓϩάϥϛϯάΑΓ΋೉͍͜͠ͱ͕͋Γ·͢ɻ σβΠφʔͷํ͸΋ͪΖΜͷ͜ͱɺ࠷ۙReact΍VueʹڵຯΛ࣋ͪ࢝Ίͨ όοΫΤϯυग़਎ͷΤϯδχΞͷํ΋ɺϚʔΫΞοϓͷجૅΛ཈͑Δ͜ͱͰ ΑΓྑ͍αΠτͷ࡞੒͕ՄೳͱͳΓ·͢ͷͰɺੋඇڵຯΛ΋͍͚ͬͯͨͩΔ ͱخ͍͠Ͱ͢ɻ

Slide 54

Slide 54 text

ϚʔΫΞοϓ༻αϯϓϧϓϩδΣΫτ ঺հͨ͠πʔϧ΍ϥΠϒϥϦΛར༻ͨ͠ϚʔΫΞοϓ༻ͷαϯϓϧϓϩδΣ ΫτΛ࡞੒͠·ͨ͠ɻҎԼͷURL͔ΒऔಘͰ͖·͢ͷͰɺڵຯͷ͋Δํ͸ ৮ͬͯΈ͍ͯͩ͘͞ɻ https://github.com/kkoudev/markup-template

Slide 55

Slide 55 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠