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

1. ϑϩϯτΤϯυσβΠϯɾ։ൃ ʹ͓͚ΔϚʔΫΞοϓઃܭͷجૅ WEBΤϯδχΞษڧձ #07 Koichi Nagaoka
2. ࣗݾ঺հ ௕Ԭ ߒҰ (@kkoudev) ͍ΘΏΔϑϧελοΫΤϯδχΞͰ͢ɻ גࣜձࣾϛΫγΟͰΤϯδχΞ΍ͬͯ·͢ɻ ޷͖ͳݴޠ͸RubyͱKotlin
3. օ͞Μ͸ϚʔΫΞοϓͷ ܦݧ͕͋Γ·͔͢ʁ
4. ͦ΋ͦ΋ϚʔΫΞοϓͱ͸ • ຊདྷͷҙຯͱͯ͠͸ɺίϯϐϡʔλ͕จॻߏ଄Λೝࣝग़དྷΔΑ͏ʹจॻͷ ֤ཁૉʹ໨ҹΛ༩͑ͯߦ͘͜ͱΛࢦ͠·͢ • Webۀքʹ͓͍ͯ͸ओʹσβΠϯ(PSD΍SketchͳͲ)͔ΒHTMLΛ࡞੒͢Δ ͜ͱΛࢦ͠·͢ɻσβΠϯΛදݱ͢Δؔ܎্ɺݟͨ໨΍ಈ͖ʹؔΘΔCSS ΍Ұ෦ͷJavaScriptͷίʔσΟϯάʹ͍ͭͯ΋͜ͷݴ༿ʹؚΊΔ͜ͱ͕ଟ͍ Ͱ͢
5. ͭ·ΓϚʔΫΞοϓͱ͸ɺWebͷੈքΛද ݱ͍ͯ͠ΔHTML΍CSSΛίʔσΟϯά͢Δ ࠷΋جૅʹ౰ͨΔ࡞ۀʹͳΓ·͢ɻ HTMLͱCSSͳΜͯ؆୯ʂͱࢥ͍ͬͯΔํ΋ ͍Δ͔΋஌Ε·ͤΜ͕ɾɾɾ “
6. ϚʔΫΞοϓ͸ ೉͍͠ʂʂ
7. ԿނϚʔΫΞοϓ͸೉͍͠ͷ͔ • Ϩεϙϯγϒ͕ओྲྀͷࡢࠓͰ͸PCɺεϚʔτϑΥϯɺλϒϨοτͱ͍ͬͨ ༷ʑͳσόΠεΛ૝ఆͨ͠ݟͨ໨Λҙࣝͯ͠࡞੒͢Δඞཁ͕͋Δ • σβΠϯʴίʔσΟϯάͱ͍͏ɺ͋ΔҙຯσβΠφʔͱΤϯδχΞͷதؒʹ Ґஔ͢ΔεΩϧʹͳΔͨΊɺ͔ͬ͠Γઃܭɾߏஙग़དྷΔਓࡐ͸૒ํͷεΩ ϧʹ͋Δఔ౓ਫ਼௨͍ͯ͠Δඞཁ͕ग़ͯ͘Δ • αΠτͷن໛͕େ͖͘ͳΕ͹ͳΔ΄ͲCSSઃܭ͕ഁ୼͢Δ܏޲ʹ͋Γɺઃ ܭ࣍ୈͰ͸̍ͭͷϧʔϧηοτΛมߋ͢Δ͚ͩͰଟ਺ͷϖʔδʹӨڹΛٴ ΅ͯ͠͠·͏
8. ͭ·ΓɺϚʔΫΞοϓͷ೉͠ ͞ͷຆͲ͸ݟͨ໨(≒CSS)ͷઃ ܭ໰୊ʹىҼ͠·͢
9. ຊ೔͓࿩͢Δ͜ͱ • σβΠϯ࡞੒͔࣌ΒϚʔΫΞοϓ΁޲͚ͯҙ͓ࣝͯ͘͜͠ͱʹ͍ͭͯ • αΠτن໛ʹΑͬͯ༗ޮͳCSSઃܭख๏ͷ঺հͱɺνʔϜ։ൃʹద༻ͨ͠৔ ߹ʹੜ͡ΔӨڹʹ͍ͭͯ • ࣮ࡍʹϚʔΫΞοϓΛ͢Δࡍʹ༻ҙ͢ΔίʔσΟϯά؀ڥྫʹ͍ͭͯ
10. 1. σβΠϯ࡞੒ͱϚʔΫΞοϓͷؔ܎
11. WebσβΠϯ࡞੒࣌ʹ·ͣඞཁͳཁૉͱ͸ • ϒϨΠΫϙΠϯτ • ίϯςϯπྖҬ෯ • ༨ന(margin, padding, line-height, letter-spacing)ͷϧʔϧ ͜ͷ̏఺Λ༧ΊܾΊ͓ͯ͘ͱɺεϜʔζʹσβΠϯ࡞ ੒͕ਐΊΒΕɺϚʔΫΞοϓ࣌ʹ΋ࠞཚ͢Δ͜ͱ͕গ ͳ͘ͳΓ·͢
12. ϒϨΠΫϙΠϯτͷܾΊํ ·ͣ͸PCͱSPͷϒϨΠΫϙΠϯτΛܾΊ·͢ɻࡢࠓͩͱλϒϨοτ (iPad)ͷԣ෯Ͱ͋Δ768pxΛج४ͱ͢Δ͜ͱ͕ଟ͍Ͱ͢ɻͦͷ্Ͱɺ λϒϨοτͷॎදࣔ࣌ʹͲͪΒͷݟͤํΛ͍ͨ͠ͷ͔ͰҎԼͷΑ͏ ʹܾΊ·͢ɻ λϒϨοτॎදࣔͰSPσβΠϯදࣔͱ͢Δ৔߹ … 768pxҎԼΛSP λϒϨοτॎදࣔͰPCσβΠϯදࣔͱ͢Δ৔߹ … 767pxҎԼΛSP ͲͪΒʹ͢Δͷ͔͸σβΠϯ΍ίϯςϯπྔ࣍ୈͱͳΔͨΊɺ σβΠϯ࡞੒࣌ʹҙܾࣝͯ͠ఆ͢Δඞཁ͕͋Γ·͢ɻ
13. ίϯςϯπྖҬ෯ͷܾΊํ ݹ͔͘Β࢖ΘΕΔͷ͸ 960 άϦουγεςϜʹج͍ͮͨ 960px Ͱ͢ɻ ͨͩ͠ɺ͜ͷ਺஋͸ 1024px ͷσΟεϓϨΠ෯Λલఏͱͨ͠΋ͷͳͷͰɺ ࡢࠓͰ͸খ͍͞৔߹͕͋Γ·͢ɻ ͦͷͨΊɺ960px Λϕʔεʹɺද͍ࣔͨ͠ίϯςϯπ͕ऩ·Γ͖Δ৔߹ ͸ 960pxɺऩ·Γ੾Βͳ͍৔߹͸ 8 ͷഒ਺୯ҐͰྖҬ෯Λ૿΍͍ͯ͠ ͖ɺ࠷దͳ஋Λܾఆ͢Δͷ͕͓͢͢ΊͰ͢ɻ 8ͷഒ਺Ͱ͋Δཧ༝͸ɺPC΍SPͷσΟεϓϨΠ͕8ͷഒ਺αΠζͰ͋Δ ͜ͱʹج͍͍ͮͯ·͢ɻ8ͷഒ਺Ͱ࡞੒͓ͯ͘͜͠ͱͰɺը໘಺ʹ៉ྷʹ ऩ·ΔΑ͏ʹ࡞੒͠΍͘͢ͳΓ·͢ɻ
14. ༨നͷϧʔϧͷܾΊํ ༨നʹ͍ͭͯ΋ 8 ͷഒ਺୯Ґͷ஋Λࢦఆ͢Δͱ៉ྷʹ࡞ ੒Ͱ͖·͢ɻͪ͜Β΋ 8 ͷഒ਺Ͱ͋Δͷ͸ίϯςϯπྖ Ҭ෯ͱಉ͘͡σΟεϓϨΠ෯ͷഒ਺ʹج͍͍ͮͯ·͕͢ɺ ഒ਺Λར༻͢Δ΋͏̍ͭͷཧ༝ͱͯ͠ɺσβΠϯͷݪଇ ͷ̍ͭͰ͋Δʮ൓෮(Repetition)ʯʹ౰ͯ͸Ί΍͍͢ͱ͍ ͏ཧ༝͕͋Γ·͢ɻ
15. σβΠϯͷݪଇͰ͋Δ൓෮ͱ͸ ਓؒ͸نଇਖ਼͘͠܁Γฦ͞ΕΔ΋ͷΛඒ͘͠ײ͡Δੑ࣭ ͕͋Γ·͢ɻͦΕΛར༻ͨ͠ͷ͕൓෮Ͱ͢ɻ ಉ͡ഒ਺ͷ༨ന΍෯Λنఆ͢Δ͜ͱͰɺنଇਖ਼͘͠൓෮ ͍ͯ͠ΔΑ͏ʹσβΠϯΛݟͤΔ͜ͱ͕Ͱ͖·͢ɻ ͜ͷϧʔϧ͸ϚʔΫΞοϓ࣌ʹ΋༗ޮͰɺ༨ന΍෯͕ 8 ͷഒ਺Ͱ͋Δͱཧղ͍ͯ͠Δ͜ͱͰίʔσΟϯά͢Δ଎ ౓΋֨ஈʹ্͕Γɺ͔ͭݟͨ໨΋ඒ͘͠ͳΓ·͢ɻ
16. line-heightʹ͍ͭͯ line-height͸จࣈͷಡΈ΍͢͞ʹେ͖͘ࠨӈ͞ΕΔͨΊɺσβΠϯ࡞੒͔࣌ Βҙࣝ͢Δ͜ͱ͸ඇৗʹॏཁͰ͢ɻ೔ຊޠͷ৔߹ɺline-height͸1.5ʙ1.8͋ ͨΓ͕ಡΈ΍͍͢ͱݴΘΕ͍ͯ·͢ͷͰɺͦͷத͔Βܾఆ͢Δͷ͕͓͢͢Ί Ͱ͢ɻ ·ͨɺline-heightΛҙࣝͨ͠σβΠϯख๏ͱͯ͠ɺVertical Rhythmͱ͍͏ख ๏͕͋Γ·͢ɻߦͷߴ͞Λಛఆͷഒ਺ͱ͢Δ͜ͱͰ൓෮ʹΑΔϦζϜΛ͚ͭɺ ՄಡੑΛ্͛ΔσβΠϯख๏Ͱ͢ɻ͜ΕΛϚʔΫΞοϓͰ࣮ݱ͠΍ͨ͘͢͠ line-height-step ͱ͍͏ϓϩύςΟ͕W3CͰఏҊதͱͳ͍ͬͯ·͢ɻ (Chromeͷࢼݧӡ༻ػೳΛ༗ޮʹ͢Δͱ࢖͑·͢)
17. letter-spacingʹ͍ͭͯ letter-spacing͸ओʹݟग़͠ͷΑ͏ͳΞΫηϯτͱͳΔจࣈͷࣈؒͷௐ੔ʹར ༻͢Δ͜ͱ͕ଟ͍Ͱ͢ɻ ϚʔΫΞοϓʹ͓͍ͯɺletter-spacing͸ em ୯ҐΛ࢖ͬͯઃఆ͠·͢ɻ em୯ҐΛར༻͢Δ͜ͱͰϑΥϯταΠζʹԠͯ͡ࣈ͕ܾؒఆ͞Ε·͢ɻ
18. 2. αΠτن໛ʹԠͨ͡CSSͷઃܭ
19. খن໛αΠτΛ࡞Δ৔߹ɺσβΠϯ΍Ϛʔ ΫΞοϓͷઃܭΛͦ͜·Ͱ໌֬ʹܾΊͳ͘ ͯ΋໰୊ͳ͍έʔε͸͋Γ·͢ɻୠ͠ɺͦ ͷޙαΠτͷอक͕͋Γɺن໛͕ঃʑʹେ ͖͘ͳ͍ͬͯ͘৔߹͸σβΠϯ΍ϚʔΫΞ οϓͷઃܭ͕อकੑΛେ͖͘ࠨӈ͠·͢ɻ “
20. ن໛͕େ͖͘ͳͬͨαΠτʹΑ͋͘Δ໰୊ • CSSͷϧʔϧηοτΛ௥Ճͯ͠΋ద༻͞Εͳ͍ • ϧʔϧηοτͷϓϩύςΟͷ্ॻ͖͕ଟ਺ଘࡏ͢Δ • important͕ଟ༷͞ΕɺεύήοςΟCSSͱԽ͍ͯ͠Δ ͜ΕΒͷ໰୊͸CSSઃܭͷ໰୊Ͱɺϧʔϧηοτͷʮৄࡉ ౓ʯ͕όϥόϥʹͳ͍ͬͯΔͨΊʹى͜Γ·͢
21. CSSͷৄࡉ౓ʹ͍ͭͯ CSS͸ϑΝΠϧͷҰ൪Լʹهड़ͨ͠ϧʔϧηοτ͕༏ઌ͞ΕΔΘ͚Ͱ͸ͳ͘ɺ ৄࡉ౓ͱݺ͹ΕΔ༏ઌॱҐʹΑͬͯద༻͞ΕΔϧʔϧηοτ͕ܾ·Γ·͢ɻϧʔ ϧηοτͷৄࡉ౓͸ɺར༻͢ΔηϨΫλʹΑܾͬͯ·Γ·͢ɻ۩ମతʹ͸ɺҎ Լͷେখؔ܎͕͋Γ·͢ɻ importantͷϓϩύςΟ ʼ ΠϯϥΠϯελΠϧɹʼɹIDηϨΫλɹʼɹΫϥε/ଐੑηϨΫλɹ ʼɹཁૉηϨΫλ ্هͷେখؔ܎ͱ֤ηϨΫλͷ߹ܭ਺ʹΑͬͯৄࡉ౓͸ܾ·Γ·͢ɻ ୠ͠ɺཁૉηϨΫλ͕ͲΕ͚ͩू·ͬͯ΋ɺΫϥε/ଐੑηϨΫλ1ͭΑΓৄࡉ ౓͕ߴ͘ͳΔ͜ͱ͸ͳ͘ɺಉ༷ʹΫϥεηϨΫλ͕ͲΕ͚ͩ૿͑ͯ΋ɺIDηϨ Ϋλ1ͭͷৄࡉ౓ΑΓߴ͘ͳΔ͜ͱ͸͋Γ·ͤΜɻ
22. ৄࡉ౓ΛͳΔ΂͘૿΍͞ͳ͍ίπ • IDηϨΫλ͸ར༻ېࢭʹ͢Δ • ཁૉηϨΫλ͸ॳظԽ࣌ͷΈར༻͠ɺྫ֎Λআ͍ͯΫϥεη ϨΫλͷΈͰϧʔϧηοτ͸هड़͢Δ • important͸ར༻͍ͯ͠ΔϥΠϒϥϦ͕ੜ੒͢ΔΠϯϥΠϯ ελΠϧΛ্ॻ͖͍ͨ͠৔߹ͳͲɺࢭΉΛಘͳ͍έʔεΛআ ͍ͯ͸ར༻͠ͳ͍
23. CSSͷઃܭͰ͸ɺৄࡉ౓ΛߴΊͣʹ͍͔ʹ ௥Ճɾมߋ͠΍͍͢ઃܭʹ͢Δ͔͕ॏཁͰ ͢ɻ CSSͷৄࡉ౓ΛͳΔ΂͘ۉҰʹ͢Δઃܭख ๏ʹ͸ͲͷΑ͏ͳ΋ͷ͕͋Δͷ͔ݟ͍͖ͯ ·͠ΐ͏ɻ “
24. 2-1. CSSͷઃܭख๏ʹ͍ͭͯ
25. 2-1-1. BEMʹ͍ͭͯ BEM͸࠷΋Α͘࢖ΘΕ͍ͯΔCSSͷ໋໊نଇͰ͢ɻ Ϋϥε໊ΛʮBlockʢϒϩοΫʣʯʮElementʢࢠཁ ૉʣʯʮModifierʢम০ࢠʣʯͷ̏ͭʹ෼໋໊͚ͯ͢Δ ͜ͱͰɺ໾ׂΛϋοΩϦͤͭͭ͞ɺ໊শͷিಥ͕ى͖ͳ ͍Α͏ʹ͢Δख๏ʹͳΓ·͢ɻ
26. BEMͷྫ (CSS) /* ୯ޠ୯ҐͰϋΠϑϯ۠੾ΓͰهड़͢ΔɻϒϩοΫͱཁૉͷؒ͸ΞϯμʔείΞ̎ͭͰهड़͢Δ */ .top-page__head { display: block; font-size: 20px; font-weight: bold; } /* म০ࢠ(Modifier)͸ϋΠϑϯ̎ͭͷ͋ͱʹ໊শΛهड़͢Δ */ .top-page__head--red { color: red; }
27. BEMͷྫ (HTML) <!-- ௨ৗͷݟग़͠ --> <h1 class="top-page__head">τοϓϖʔδݟग़͠</h1> <!-- म০ࢠΛద༻ͨ͠ݟग़͠ --> <h1 class="top-page__head top-page__head--red">τοϓϖʔδݟग़͠(੺)</h1>
28. BEMͷ͋·Γྑ͘ͳ͍ྫ (CSS) /* ҎԼͷΑ͏ͳϒϩοΫͷதʹϒϩοΫΛೖΕࢠʹ͢ΔΑ͏ͳ໋໊͸ඇਪ঑Ͱ͢ */ .top-page__head__sub-page__sub-head { display: block; font-size: 20px; } /* ModifierΛෳ਺෇༩͢Δͷ΋ඇਪ঑Ͱ͢ */ .top-page__head--red--hidden { display: none; color: red; }
29. BEMͷ͋·Γྑ͘ͳ͍ྫ (HTML) <!-- म০ࢠΛద༻ͨ͠ݟग़͠ --> <h1 class="top-page__head--red">τοϓϖʔδݟग़͠(੺)</h1> ্هͷΫϥεʹ͸ModifierͱͳΔελΠϧ(͜͜Ͱ͸৭)͚ͩͰͳ͘ɺ
 ϑΥϯταΠζͷΑ͏ͳมԽ͢Δඞཁͷͳ͍ϕʔεͱͳΔϓϩύςΟ΋ؚ ΊͯશͯΛؚΊ͍ͯΔ͜ͱʹͳΓ·͢ɻ ࠷ॳʹ঺հͨ͠BEMͷྫ (CSS) ʹ͋ΔΑ͏ʹɺϕʔεͱͳΔελΠϧʹ มԽ͢ΔϓϩύςΟ͚ͩΛఆٛͨ͠ελΠϧΛ߹Θͤͯࢦఆ͢Δ͜ͱ͕ BEMͱͯ͠͸ਪ঑͞Ε·͢ɻ
30. BEMͷCSSϑΝΠϧߏ੒ྫ blocksͱmodulesͷ2ͭͷσΟϨΫτϦΛ༻ҙ͠ɺblocksσΟϨΫτ Ϧʹ͸ϒϩοΫ͝ͱͷελΠϧΛهड़͠·͢ɻ͜͜Ͱ͍͏ϒϩοΫ ͱ͸WebαΠτʹ͓͚Δը໘·ͨ͸ػೳΛද͠ɺ֤ը໘·ͨ͸ػೳ ୯Ґ͝ͱʹ1ϑΝΠϧͣͭ࡞੒͠·͢ɻ modulesσΟϨΫτϦʹ͸֤ը໘΍ػೳͰԣஅతʹ࢖ΘΕΔ൚༻త ͳύʔπΛఆٛ͢ΔελΠϧΛఆٛ͠·͢ɻ ͜ͷϑΝΠϧߏ੒͸؆қతͳαΠτΛߏங͢Δࡍͷߏ੒Ͱ͕͢ɺੈ ͷதతʹ͸ MCSS ΍ FLOCSS ͱ͍ͬͨBEMͱ૊Έ߹Θͤͨ΋ͬͱ ࡉ͔͍ϧʔϧ΋ଘࡏ͢ΔͷͰɺ͜͜Ͱ͸঺հ͠·ͤΜ͕ڵຯͷ͋Δ ํ͸ௐ΂ͯΈ͍ͯͩ͘͞ɻ
31. BEMͱৄࡉ౓ʹ͍ͭͯ BEM͸BlockɺElementɺModifierͱ͍͏ϧʔϧͰΫϥε Λ໋໊͢Δ͜ͱͰ΄΅ඃΒͳ໊͍শΛ࡞Δ͜ͱ͕Ͱ͖· ͢ɻͦͷ্Ͱɺجຊతʹ1ΫϥεηϨΫλͱͳΔͨΊɺৄ ࡉ౓͕ۉҰʹอͨΕ·͢ɻ(໋໊ͰϧʔϧηοτͷিಥΛ ճආ͍ͯ͠ΔͨΊɺΫϥεηϨΫλΛෳ਺݁߹ͨ͠ϧʔ ϧηοτ(ʹৄࡉ౓͕ߴ͘ͳΔϧʔϧηοτ)Λ࡞Δඞཁ ੑ͕ͳ͘ͳΓ·͢)
32. BEM͸Ϋϥε໊͕௕͘ͳΔ͜ͱΛআ͚͹ඇৗʹ༗ ޮͳखஈͰ͢ɻখن໛αΠτͰ΋େن໛αΠτͰ ΋௨༻͢Δख๏ͳͷͰɺੋඇऔΓೖΕΔ͜ͱΛ͓ ͢͢Ί͠·͢ɻ “
33. 2-1-2. Atomic Designʹ͍ͭͯ ۙ೥ྲྀߦΓͷσβΠϯɾCSSͷઃܭख๏Ͱ͢ɻ σβΠϯ࡞੒͔࣌ΒύʔπԽΛҙࣝͯ͠ઃܭ͢Δख๏ͱ ͳΓ·͢ɻAtomic DesignͰ͸ύʔπΛݪࢠʢAtomsʣɺ ෼ࢠʢMoleculesʣɺ༗ػମʢOrganismsʣɺςϯϓϨʔ τʢTemplatesʣɺϖʔδʢPagesʣͷ5ͭͷ୯Ґʹ෼͚ ͯઃܭ͠ɺ࠷ऴతʹ͜ΕΒΛ૊Έ߹ΘͤΔ͜ͱͰσβΠ ϯΛදݱ͠·͢ɻ
34. ݪࢠʢAtomsʣ ࠷খ୯ҐͷύʔπͰ͋ΓɺओʹϘλϯɺΞΠίϯɺϥϕ ϧɺςΩετϘοΫεͱ͍ͬͨύʔπΛද͠·͢ɻ
35. ෼ࢠʢMoleculesʣ ̎ͭҎ্ͷݪࢠΛෳ਺૊Έ߹Θͤͨύʔπɻ ΞΠίϯ͖ͭݕࡧϘοΫεͷΑ͏ͳύʔπ͕֘౰͠·͢ɻ
36. ༗ػମʢOrganismsʣ ݪࢠ΍෼ࢠΛෳ਺૊Έ߹ΘͤͨύʔπͰɺ୯ಠͰ੒ཱ͢ ΔίϯςϯπΛද͠·͢ɻ ϔομɺϑολͳͲ͕ྫͱͯ֘͠౰͠·͢ɻ
37. ςϯϓϨʔτʢTemplatesʣ ݪࢠɺ෼ࢠɺ༗ػମΛෳ਺૊Έ߹Θͤͨը໘ߏ଄Λද͢ ύʔπͰɺϨΠΞ΢τͷ͜ͱΛࢦ͠·͢ɻ
38. ϖʔδʢPagesʣ ը૾΍จষͳͲɺ࣮ࡍͷίϯςϯπ͕ࠩ͠ࠐ·Εͨը໘ Λද͠·͢ɻ
39. Atomic DesignͷCSS΁ͷ൓өํ๏ React΍VueͷΑ͏ͳϥΠϒϥϦͰ͸ CSS Modulesͷ࢓ ૊ΈΛ࢖ͬͯɺCSSͷείʔϓΛ֤ίϯϙʔωϯτ୯Ґ Ͱดͯ͡هड़͢Δ͜ͱ͕ՄೳͰ͕͢ɺCSS ModulesΛ࢖ Θͳ͍έʔεͰ͸গ͠޻෉͕ඞཁͰ͢ɻ
40. Atomic DesignͷCSSϑΝΠϧߏ੒ྫ ֤ύʔπ͝ͱʹσΟϨΫτϦΛ࡞੒͠ɺͦͷதʹίϯϙʔ ωϯτผʹϑΝΠϧΛ෼͚ͯελΠϧΛهड़͍͖ͯ͠· ͢ɻ໋໊ʹ͍ͭͯ͸BEMΛ࢖༻͠ɺύʔπͷछྨ͕Θ͔ ΔΑ͏ʹAtomsͳΒ a- ɺMoleculesͳΒ m- ͱ͍ͬͨ઀ ಄ޠΛ෇༩͠·͢ɻ·ͨɺ͜ΕΒͷύʔπσΟϨΫτϦ ͸ɺ֤ύʔπͷґଘॱͱͳΔ 1. Atoms 2. Molecules 3. Organisms 4. Templates 5. Pages ͷॱ൪ʹͦΕͧΕͷελΠϧΛಡΈࠐΈ·͢ɻ
41. Atomic Designͷཧ૝ Atomic Design্͕ख͘ద༻Ͱ͖ΔͱɺσβΠϯͷมߋ͕ ඇৗʹ͠΍͘͢ͳΓ·͢ɻύʔπ୯ҐͰσβΠϯΛ؅ཧ ͍ͯ͠ΔͨΊɺ̍ͭͷύʔπΛมߋ͢Δ͜ͱͰͦͷύʔ πΛར༻͍ͯ͠Δશը໘΁มߋΛ൓ө͢Δ͜ͱ͕Մೳʹ ͳΓ·͢ɻ
42. Atomic Designͷݱ࣮ ͔͠͠ɺ࣮ࡍʹ͜ΕΛӡ༻͠Α͏ͱ͢Δͱن໛͕େ͖͘ ͳΕ͹ͳΔ΄ͲσβΠϯஈ֊Ͱͭ·͖ͮ·͢ɻ ಛʹ෼ࢠͱ༗ػମͷ۠ผ͕σβΠϯஈ֊Ͱ͸ᐆດͰ͋Δ ͨΊɺ࡞੒͢ΔύʔπΛͲ͜ʹଐͤ͞Ε͹͍͍ͷ͔Θ͔ Βͳ͘ͳΔ͜ͱ͕ଟʑ͋Γ·͢ɻ࣮ࡍʹ࡞੒͢ΔσβΠ ϯʹԠͯ͡νʔϜ಺ͰೝࣝΛ߹Θͤͭͭ࡞੒͢ΔͷΛΦ εεϝ͠·͢ɻ
43. 3. ίʔσΟϯά؀ڥͷ࡞੒ྫ
44. ࠷ޙʹɺϚʔΫΞοϓ͢ΔࡍͷίʔσΟϯ ά؀ڥʹ͍ͭͯɺීஈࢲ͕Α͘ར༻͍ͯ͠ Δߏ੒Λ঺հ͍ͨ͠ͱࢥ͍·͢ɻ “
45. ϚʔΫΞοϓ؀ڥߏஙྫ HTML • Pug CSS • PostCSS (SugarSS) JavaScript • Babel (ES2015Ҏ߱) Bundler • FuseBox λεΫϥϯφʔ • ࢖Θͳ͍ (npm-scriptsͷΈ)
46. Pugʹ͍ͭͯ Pug͸ΠϯσϯτʹΑͬͯ֊૚ߏ଄Λදݱ͢ΔςϯϓϨʔτ Ͱɺ؆୯ʹݴ͏ͱHTMLΛด͡λάͳ͠ʹهड़Ͱ͖·͢ɻଞ ʹ΋extend΍mixinsͷར༻΋ՄೳͳͨΊɺগͳ͍ίʔυྔͰ HTMLͷهड़͕ՄೳʹͳΔ͹͔Γ͔ɺग़ྗ͞ΕΔHTML΋ ίʔυ੔ܗ͞Εͨ៉ྷͳHTMLͱͳΓ·͢ͷͰੋඇར༻͠· ͠ΐ͏ɻ
47. PostCSS (SugarSS)ʹ͍ͭͯ PostCSS͸ϓϥάΠϯΛ௥Ճ͢Δ͜ͱͰ༷ʑͳػೳΛ௥ՃͰ͖·͢ɻͦͷத ͰSugarSSͱ͍͏ύʔαʔΛࢦఆ͢ΔͱɺSassͷΑ͏ͳΠϯσϯτʹΑΔ CSSϧʔϧηοτͷهड़͕ՄೳʹͳΓ·͢ɻଞʹ΋Sass૬౰ͷػೳΛ࣮ݱ ग़དྷΔΑ͏ʹ͍͔ͭ͘ϓϥάΠϯΛ௥Ճ͍ͯ͠·͢ɻͦΕͳΒSassͰ͍͍ͷ Ͱ͸ʁͱࢥ͏ํ΋͍ΔͱࢥΘΕ·͕͢ɺPostCSSΛ׶͑ͯ࢖͏ཧ༝ͱͯ͠͸ PostCSSͰར༻ՄೳͳLinterͰ͋Δ stylelint ͷग़དྷ͕ྑ͘ɺࡉ͔͍ϧʔϧͷ ੍ޚ͕ՄೳͰ͋ΔͨΊͰ͢ɻ
48. Babel (ES2015Ҏ߱)ʹ͍ͭͯ ࡢࠓͷϑϩϯτΤϯυͷ࣮૷Ͱ͸ES2015Ҏ߱ͷJavaScript͕ར༻͞ΕΔͨ ΊɺϚʔΫΞοϓ࣌ʹ͓͍ͯ΋͜Εʹ߹Θͤ·͢ɻ
49. FuseBoxʹ͍ͭͯ ੈؒͰ͸ webpack ΍ Percel ͷํ͕༗໊Ͱ͕͢ɺݸਓతʹ͸FuseBoxΛਪ͠ ͍ͯ·͢ɻͱʹ͔͘Ϗϧυ͕଎͍Ͱ͢ʂ React΍VueͷΑ͏ͳ༗໊ͳϥΠϒϥϦʹ΋ରԠ͍ͯ͠·͢ɻ
50. λεΫϥϯφʔ͸࢖Θͳ͍ λεΫϥϯφʔͱ͍͏ͱɺgulp΍GruntΛࢥ͍ු͔΂Δํ͕ଟ͍͔ͱࢥ͍·͢ ͕ɺgulp͸࣍όʔδϣϯͰ͋Δv4͕Կ೥ܦͬͯ΋ਖ਼ࣜϦϦʔε͞Εͣɺ(λά͸ ੾ΒΕ͍ͯΔ͕ npm ϦϙδτϦ΁͸ґવϦϦʔε͞Ε͍ͯͳ͍) Gruntʹ͍ͭͯ ͸ࣄ্࣮։ൃ͕ఀࢭ͍ͯ͠·͢ɻNodeJSͷ࠷৽όʔδϣϯ΁ͷରԠ΋͞Ε͍ͯ ͳ͍ͨΊɺࠓޙར༻Ͱ͖ͳ͍ϥΠϒϥϦ͕ଟ਺ൃੜͯ͘͠Δ͜ͱ͕༧૝͞Ε· ͢ɻ ͦͷͨΊɺnpm-scriptsͰ௚઀ίϚϯυͷ੍ޚΛߦ͍·͢ɻ Pug΍PostCSS͸ઐ༻ͷCLI͕഑෍͞Ε͓ͯΓɺwatchػೳ΋͋ΔͨΊ ຆͲͷέʔεͰ͸ͦΕΒͷCLIΛnpm-scriptsͰ࣮ߦ͢Δ͚ͩͰࣄ଍Γ·͢ɻ
51. 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
52. ·ͱΊ
53. ࠷ۙͷϚʔΫΞοϓ͸Ԟ͕ਂ͍ ϚʔΫΞοϓ͸୯ͳΔHTMLͱCSSΛهड़͢Δ͚ͩͰ؆୯ͱ͍͏Α͏ͳઌೖ ؍ͰݟΒΕ͍ͯΔ͜ͱ͕ଟ͍Ͱ͕͢ɺ࣮ࡍ͸σβΠϯͷݟͨ໨΍ಈ͖͚ͩͰ ͳ͘ɺίʔσΟϯάͷઃܭʹ͍ͭͯ΋ߟྀ͢Δඞཁ͕͋ΔͨΊɺ৔߹ʹΑͬ ͯ͸୯ͳΔJavaScriptͷϓϩάϥϛϯάΑΓ΋೉͍͜͠ͱ͕͋Γ·͢ɻ σβΠφʔͷํ͸΋ͪΖΜͷ͜ͱɺ࠷ۙReact΍VueʹڵຯΛ࣋ͪ࢝Ίͨ όοΫΤϯυग़਎ͷΤϯδχΞͷํ΋ɺϚʔΫΞοϓͷجૅΛ཈͑Δ͜ͱͰ ΑΓྑ͍αΠτͷ࡞੒͕ՄೳͱͳΓ·͢ͷͰɺੋඇڵຯΛ΋͍͚ͬͯͨͩΔ ͱخ͍͠Ͱ͢ɻ
54. ϚʔΫΞοϓ༻αϯϓϧϓϩδΣΫτ ঺հͨ͠πʔϧ΍ϥΠϒϥϦΛར༻ͨ͠ϚʔΫΞοϓ༻ͷαϯϓϧϓϩδΣ ΫτΛ࡞੒͠·ͨ͠ɻҎԼͷURL͔ΒऔಘͰ͖·͢ͷͰɺڵຯͷ͋Δํ͸ ৮ͬͯΈ͍ͯͩ͘͞ɻ https://github.com/kkoudev/markup-template
55. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠