Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドデザイン・開発におけるマークアップ設計の基礎 / frontend markup...
Search
Kou
May 20, 2018
Programming
4
2.7k
フロントエンドデザイン・開発におけるマークアップ設計の基礎 / frontend markup design basics
Kou
May 20, 2018
Tweet
Share
More Decks by Kou
See All by Kou
デザインを見ながらフロントエンドコーディングをするときの考え方 / design-coding
kkoudev
2
1.5k
React Nativeで作るiOSアプリケーションの環境構築設計 / react native env for ios
kkoudev
1
2.4k
フロントエンドコーディングにおけるPageSpeed Insights対策 / frontend pagespeed insights-
kkoudev
7
6.7k
Docker Compose利用者から見た Kubernetes 開発環境構築入門 / introduction to kubernetes for docker compose user
kkoudev
19
11k
Dockerを利用したローカル環境から本番環境までの構築設計 / Project structure design for docker application
kkoudev
0
310
Other Decks in Programming
See All in Programming
研究開発と実装OSSと プロダクトの好循環 / A virtuous cycle of research and development implementation OSS and products
linyows
1
140
Swift Testingのモチベを上げたい
stoticdev
2
250
보일러플레이트 코드가 진짜 나쁜 건가요?
gaeun5744
0
310
Expoによるアプリ開発の現在地とReact Server Componentsが切り開く未来
yukukotani
2
350
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
5
2.7k
もっと大きなデータを送りませんか? エラーがゴロゴロ出るようなデータです
sublimer
0
150
Functional APIから再考するLangGraphを使う理由
os1ma
4
570
‘무차별 LGTM~👍’만 외치던 우리가 ‘고봉밥 코드 리뷰’를?
hannah0731
0
430
AI Agentを利用したAndroid開発について
yuchan2215
0
160
CQRS+ES勉強会#1
rechellatek
0
190
読もう! Android build ドキュメント
andpad
1
170
Your Architecture as a Crime Scene:Forensic Analysis @bastacon 2025 in Frankfurt
manfredsteyer
PRO
0
150
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
521
39k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
KATA
mclloyd
29
14k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Embracing the Ebb and Flow
colly
84
4.6k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
The Invisible Side of Design
smashingmag
299
50k
Reflections from 52 weeks, 52 projects
jeffersonlam
349
20k
Designing Experiences People Love
moore
140
23k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
470
Transcript
ϑϩϯτΤϯυσβΠϯɾ։ൃ ʹ͓͚ΔϚʔΫΞοϓઃܭͷجૅ WEBΤϯδχΞษڧձ #07 Koichi Nagaoka
ࣗݾհ Ԭ ߒҰ (@kkoudev) ͍ΘΏΔϑϧελοΫΤϯδχΞͰ͢ɻ גࣜձࣾϛΫγΟͰΤϯδχΞͬͯ·͢ɻ ͖ͳݴޠRubyͱKotlin
օ͞ΜϚʔΫΞοϓͷ ܦݧ͕͋Γ·͔͢ʁ
ͦͦϚʔΫΞοϓͱ • ຊདྷͷҙຯͱͯ͠ɺίϯϐϡʔλ͕จॻߏΛೝࣝग़དྷΔΑ͏ʹจॻͷ ֤ཁૉʹҹΛ༩͑ͯߦ͘͜ͱΛࢦ͠·͢ • Webۀքʹ͓͍ͯओʹσβΠϯ(PSDSketchͳͲ)͔ΒHTMLΛ࡞͢Δ ͜ͱΛࢦ͠·͢ɻσβΠϯΛදݱ͢Δ্ؔɺݟͨಈ͖ʹؔΘΔCSS Ұ෦ͷJavaScriptͷίʔσΟϯάʹ͍ͭͯ͜ͷݴ༿ʹؚΊΔ͜ͱ͕ଟ͍ Ͱ͢
ͭ·ΓϚʔΫΞοϓͱɺWebͷੈքΛද ݱ͍ͯ͠ΔHTMLCSSΛίʔσΟϯά͢Δ ࠷جૅʹͨΔ࡞ۀʹͳΓ·͢ɻ HTMLͱCSSͳΜͯ؆୯ʂͱࢥ͍ͬͯΔํ ͍Δ͔Ε·ͤΜ͕ɾɾɾ “
ϚʔΫΞοϓ ͍͠ʂʂ
ԿނϚʔΫΞοϓ͍͠ͷ͔ • Ϩεϙϯγϒ͕ओྲྀͷࡢࠓͰPCɺεϚʔτϑΥϯɺλϒϨοτͱ͍ͬͨ ༷ʑͳσόΠεΛఆͨ͠ݟͨΛҙࣝͯ͠࡞͢Δඞཁ͕͋Δ • σβΠϯʴίʔσΟϯάͱ͍͏ɺ͋ΔҙຯσβΠφʔͱΤϯδχΞͷதؒʹ Ґஔ͢ΔεΩϧʹͳΔͨΊɺ͔ͬ͠Γઃܭɾߏஙग़དྷΔਓࡐํͷεΩ ϧʹ͋Δఔਫ਼௨͍ͯ͠Δඞཁ͕ग़ͯ͘Δ • αΠτͷن͕େ͖͘ͳΕͳΔ΄ͲCSSઃܭ͕ഁ͢Δʹ͋Γɺઃ
ܭ࣍ୈͰ̍ͭͷϧʔϧηοτΛมߋ͢Δ͚ͩͰଟͷϖʔδʹӨڹΛٴ ΅ͯ͠͠·͏
ͭ·ΓɺϚʔΫΞοϓͷ͠ ͞ͷຆͲݟͨ(≒CSS)ͷઃ ܭʹىҼ͠·͢
ຊ͓͢Δ͜ͱ • σβΠϯ࡞͔࣌ΒϚʔΫΞοϓ͚ͯҙ͓ࣝͯ͘͜͠ͱʹ͍ͭͯ • αΠτنʹΑͬͯ༗ޮͳCSSઃܭख๏ͷհͱɺνʔϜ։ൃʹద༻ͨ͠ ߹ʹੜ͡ΔӨڹʹ͍ͭͯ • ࣮ࡍʹϚʔΫΞοϓΛ͢Δࡍʹ༻ҙ͢ΔίʔσΟϯάڥྫʹ͍ͭͯ
1. σβΠϯ࡞ͱϚʔΫΞοϓͷؔ
WebσβΠϯ࡞࣌ʹ·ͣඞཁͳཁૉͱ • ϒϨΠΫϙΠϯτ • ίϯςϯπྖҬ෯ • ༨ന(margin, padding, line-height, letter-spacing)ͷϧʔϧ
͜ͷ̏Λ༧ΊܾΊ͓ͯ͘ͱɺεϜʔζʹσβΠϯ࡞ ͕ਐΊΒΕɺϚʔΫΞοϓ࣌ʹࠞཚ͢Δ͜ͱ͕গ ͳ͘ͳΓ·͢
ϒϨΠΫϙΠϯτͷܾΊํ ·ͣPCͱSPͷϒϨΠΫϙΠϯτΛܾΊ·͢ɻࡢࠓͩͱλϒϨοτ (iPad)ͷԣ෯Ͱ͋Δ768pxΛج४ͱ͢Δ͜ͱ͕ଟ͍Ͱ͢ɻͦͷ্Ͱɺ λϒϨοτͷॎදࣔ࣌ʹͲͪΒͷݟͤํΛ͍ͨ͠ͷ͔ͰҎԼͷΑ͏ ʹܾΊ·͢ɻ λϒϨοτॎදࣔͰSPσβΠϯදࣔͱ͢Δ߹ … 768pxҎԼΛSP λϒϨοτॎදࣔͰPCσβΠϯදࣔͱ͢Δ߹ …
767pxҎԼΛSP ͲͪΒʹ͢Δͷ͔σβΠϯίϯςϯπྔ࣍ୈͱͳΔͨΊɺ σβΠϯ࡞࣌ʹҙܾࣝͯ͠ఆ͢Δඞཁ͕͋Γ·͢ɻ
ίϯςϯπྖҬ෯ͷܾΊํ ݹ͔͘ΒΘΕΔͷ 960 άϦουγεςϜʹج͍ͮͨ 960px Ͱ͢ɻ ͨͩ͠ɺ͜ͷ 1024px ͷσΟεϓϨΠ෯Λલఏͱͨ͠ͷͳͷͰɺ ࡢࠓͰখ͍͞߹͕͋Γ·͢ɻ
ͦͷͨΊɺ960px Λϕʔεʹɺද͍ࣔͨ͠ίϯςϯπ͕ऩ·Γ͖Δ߹ 960pxɺऩ·ΓΒͳ͍߹ 8 ͷഒ୯ҐͰྖҬ෯Λ૿͍ͯ͠ ͖ɺ࠷దͳΛܾఆ͢Δͷ͕͓͢͢ΊͰ͢ɻ 8ͷഒͰ͋Δཧ༝ɺPCSPͷσΟεϓϨΠ͕8ͷഒαΠζͰ͋Δ ͜ͱʹج͍͍ͮͯ·͢ɻ8ͷഒͰ࡞͓ͯ͘͜͠ͱͰɺը໘ʹ៉ྷʹ ऩ·ΔΑ͏ʹ࡞͘͢͠ͳΓ·͢ɻ
༨നͷϧʔϧͷܾΊํ ༨നʹ͍ͭͯ 8 ͷഒ୯ҐͷΛࢦఆ͢Δͱ៉ྷʹ࡞ Ͱ͖·͢ɻͪ͜Β 8 ͷഒͰ͋Δͷίϯςϯπྖ Ҭ෯ͱಉ͘͡σΟεϓϨΠ෯ͷഒʹج͍͍ͮͯ·͕͢ɺ ഒΛར༻͢Δ͏̍ͭͷཧ༝ͱͯ͠ɺσβΠϯͷݪଇ ͷ̍ͭͰ͋Δʮ෮(Repetition)ʯʹͯΊ͍͢ͱ͍
͏ཧ༝͕͋Γ·͢ɻ
σβΠϯͷݪଇͰ͋Δ෮ͱ ਓؒنଇਖ਼͘͠܁Γฦ͞ΕΔͷΛඒ͘͠ײ͡Δੑ࣭ ͕͋Γ·͢ɻͦΕΛར༻ͨ͠ͷ͕෮Ͱ͢ɻ ಉ͡ഒͷ༨ന෯Λنఆ͢Δ͜ͱͰɺنଇਖ਼͘͠෮ ͍ͯ͠ΔΑ͏ʹσβΠϯΛݟͤΔ͜ͱ͕Ͱ͖·͢ɻ ͜ͷϧʔϧϚʔΫΞοϓ࣌ʹ༗ޮͰɺ༨ന෯͕ 8 ͷഒͰ͋Δͱཧղ͍ͯ͠Δ͜ͱͰίʔσΟϯά͢Δ ֨ஈʹ্͕Γɺ͔ͭݟͨඒ͘͠ͳΓ·͢ɻ
line-heightʹ͍ͭͯ line-heightจࣈͷಡΈ͢͞ʹେ͖͘ࠨӈ͞ΕΔͨΊɺσβΠϯ࡞͔࣌ Βҙࣝ͢Δ͜ͱඇৗʹॏཁͰ͢ɻຊޠͷ߹ɺline-height1.5ʙ1.8͋ ͨΓ͕ಡΈ͍͢ͱݴΘΕ͍ͯ·͢ͷͰɺͦͷத͔Βܾఆ͢Δͷ͕͓͢͢Ί Ͱ͢ɻ ·ͨɺline-heightΛҙࣝͨ͠σβΠϯख๏ͱͯ͠ɺVertical Rhythmͱ͍͏ख ๏͕͋Γ·͢ɻߦͷߴ͞Λಛఆͷഒͱ͢Δ͜ͱͰ෮ʹΑΔϦζϜΛ͚ͭɺ ՄಡੑΛ্͛ΔσβΠϯख๏Ͱ͢ɻ͜ΕΛϚʔΫΞοϓͰ࣮ݱͨ͘͢͠͠ line-height-step
ͱ͍͏ϓϩύςΟ͕W3CͰఏҊதͱͳ͍ͬͯ·͢ɻ (Chromeͷࢼݧӡ༻ػೳΛ༗ޮʹ͢Δͱ͑·͢)
letter-spacingʹ͍ͭͯ letter-spacingओʹݟग़͠ͷΑ͏ͳΞΫηϯτͱͳΔจࣈͷࣈؒͷௐʹར ༻͢Δ͜ͱ͕ଟ͍Ͱ͢ɻ ϚʔΫΞοϓʹ͓͍ͯɺletter-spacing em ୯ҐΛͬͯઃఆ͠·͢ɻ em୯ҐΛར༻͢Δ͜ͱͰϑΥϯταΠζʹԠͯ͡ࣈ͕ܾؒఆ͞Ε·͢ɻ
2. αΠτنʹԠͨ͡CSSͷઃܭ
খنαΠτΛ࡞Δ߹ɺσβΠϯϚʔ ΫΞοϓͷઃܭΛͦ͜·Ͱ໌֬ʹܾΊͳ͘ ͯͳ͍έʔε͋Γ·͢ɻୠ͠ɺͦ ͷޙαΠτͷอक͕͋Γɺن͕ঃʑʹେ ͖͘ͳ͍ͬͯ͘߹σβΠϯϚʔΫΞ οϓͷઃܭ͕อकੑΛେ͖͘ࠨӈ͠·͢ɻ “
ن͕େ͖͘ͳͬͨαΠτʹΑ͋͘Δ • CSSͷϧʔϧηοτΛՃͯ͠ద༻͞Εͳ͍ • ϧʔϧηοτͷϓϩύςΟͷ্ॻ͖͕ଟଘࡏ͢Δ • important͕ଟ༷͞ΕɺεύήοςΟCSSͱԽ͍ͯ͠Δ ͜ΕΒͷCSSઃܭͷͰɺϧʔϧηοτͷʮৄࡉ ʯ͕όϥόϥʹͳ͍ͬͯΔͨΊʹى͜Γ·͢
CSSͷৄࡉʹ͍ͭͯ CSSϑΝΠϧͷҰ൪Լʹهड़ͨ͠ϧʔϧηοτ͕༏ઌ͞ΕΔΘ͚Ͱͳ͘ɺ ৄࡉͱݺΕΔ༏ઌॱҐʹΑͬͯద༻͞ΕΔϧʔϧηοτ͕ܾ·Γ·͢ɻϧʔ ϧηοτͷৄࡉɺར༻͢ΔηϨΫλʹΑܾͬͯ·Γ·͢ɻ۩ମతʹɺҎ Լͷେখ͕ؔ͋Γ·͢ɻ importantͷϓϩύςΟ ʼ ΠϯϥΠϯελΠϧɹʼɹIDηϨΫλɹʼɹΫϥε/ଐੑηϨΫλɹ ʼɹཁૉηϨΫλ ্هͷେখؔͱ֤ηϨΫλͷ߹ܭʹΑͬͯৄࡉܾ·Γ·͢ɻ
ୠ͠ɺཁૉηϨΫλ͕ͲΕ͚ͩू·ͬͯɺΫϥε/ଐੑηϨΫλ1ͭΑΓৄࡉ ͕ߴ͘ͳΔ͜ͱͳ͘ɺಉ༷ʹΫϥεηϨΫλ͕ͲΕ͚ͩ૿͑ͯɺIDηϨ Ϋλ1ͭͷৄࡉΑΓߴ͘ͳΔ͜ͱ͋Γ·ͤΜɻ
ৄࡉΛͳΔ͘૿͞ͳ͍ίπ • IDηϨΫλར༻ېࢭʹ͢Δ • ཁૉηϨΫλॳظԽ࣌ͷΈར༻͠ɺྫ֎Λআ͍ͯΫϥεη ϨΫλͷΈͰϧʔϧηοτهड़͢Δ • importantར༻͍ͯ͠ΔϥΠϒϥϦ͕ੜ͢ΔΠϯϥΠϯ ελΠϧΛ্ॻ͖͍ͨ͠߹ͳͲɺࢭΉΛಘͳ͍έʔεΛআ ͍ͯར༻͠ͳ͍
CSSͷઃܭͰɺৄࡉΛߴΊͣʹ͍͔ʹ Ճɾมߋ͍͢͠ઃܭʹ͢Δ͔͕ॏཁͰ ͢ɻ CSSͷৄࡉΛͳΔ͘ۉҰʹ͢Δઃܭख ๏ʹͲͷΑ͏ͳͷ͕͋Δͷ͔ݟ͍͖ͯ ·͠ΐ͏ɻ “
2-1. CSSͷઃܭख๏ʹ͍ͭͯ
2-1-1. BEMʹ͍ͭͯ BEM࠷Α͘ΘΕ͍ͯΔCSSͷ໋໊نଇͰ͢ɻ Ϋϥε໊ΛʮBlockʢϒϩοΫʣʯʮElementʢࢠཁ ૉʣʯʮModifierʢम০ࢠʣʯͷ̏ͭʹ໋໊͚ͯ͢Δ ͜ͱͰɺׂΛϋοΩϦͤͭͭ͞ɺ໊শͷিಥ͕ى͖ͳ ͍Α͏ʹ͢Δख๏ʹͳΓ·͢ɻ
BEMͷྫ (CSS) /* ୯ޠ୯ҐͰϋΠϑϯ۠ΓͰهड़͢ΔɻϒϩοΫͱཁૉͷؒΞϯμʔείΞ̎ͭͰهड़͢Δ */ .top-page__head { display: block; font-size:
20px; font-weight: bold; } /* म০ࢠ(Modifier)ϋΠϑϯ̎ͭͷ͋ͱʹ໊শΛهड़͢Δ */ .top-page__head--red { color: red; }
BEMͷྫ (HTML) <!-- ௨ৗͷݟग़͠ --> <h1 class="top-page__head">τοϓϖʔδݟग़͠</h1> <!-- म০ࢠΛద༻ͨ͠ݟग़͠ -->
<h1 class="top-page__head top-page__head--red">τοϓϖʔδݟग़͠()</h1>
BEMͷ͋·Γྑ͘ͳ͍ྫ (CSS) /* ҎԼͷΑ͏ͳϒϩοΫͷதʹϒϩοΫΛೖΕࢠʹ͢ΔΑ͏ͳ໋໊ඇਪͰ͢ */ .top-page__head__sub-page__sub-head { display: block; font-size:
20px; } /* ModifierΛෳ༩͢ΔͷඇਪͰ͢ */ .top-page__head--red--hidden { display: none; color: red; }
BEMͷ͋·Γྑ͘ͳ͍ྫ (HTML) <!-- म০ࢠΛద༻ͨ͠ݟग़͠ --> <h1 class="top-page__head--red">τοϓϖʔδݟग़͠()</h1> ্هͷΫϥεʹModifierͱͳΔελΠϧ(͜͜Ͱ৭)͚ͩͰͳ͘ɺ ϑΥϯταΠζͷΑ͏ͳมԽ͢Δඞཁͷͳ͍ϕʔεͱͳΔϓϩύςΟؚ ΊͯશͯΛؚΊ͍ͯΔ͜ͱʹͳΓ·͢ɻ
࠷ॳʹհͨ͠BEMͷྫ (CSS) ʹ͋ΔΑ͏ʹɺϕʔεͱͳΔελΠϧʹ มԽ͢ΔϓϩύςΟ͚ͩΛఆٛͨ͠ελΠϧΛ߹Θͤͯࢦఆ͢Δ͜ͱ͕ BEMͱͯ͠ਪ͞Ε·͢ɻ
BEMͷCSSϑΝΠϧߏྫ blocksͱmodulesͷ2ͭͷσΟϨΫτϦΛ༻ҙ͠ɺblocksσΟϨΫτ ϦʹϒϩοΫ͝ͱͷελΠϧΛهड़͠·͢ɻ͜͜Ͱ͍͏ϒϩοΫ ͱWebαΠτʹ͓͚Δը໘·ͨػೳΛද͠ɺ֤ը໘·ͨػೳ ୯Ґ͝ͱʹ1ϑΝΠϧͣͭ࡞͠·͢ɻ modulesσΟϨΫτϦʹ֤ը໘ػೳͰԣஅతʹΘΕΔ൚༻త ͳύʔπΛఆٛ͢ΔελΠϧΛఆٛ͠·͢ɻ ͜ͷϑΝΠϧߏ؆қతͳαΠτΛߏங͢ΔࡍͷߏͰ͕͢ɺੈ ͷதతʹ MCSS
FLOCSS ͱ͍ͬͨBEMͱΈ߹Θͤͨͬͱ ࡉ͔͍ϧʔϧଘࡏ͢ΔͷͰɺ͜͜Ͱհ͠·ͤΜ͕ڵຯͷ͋Δ ํௐͯΈ͍ͯͩ͘͞ɻ
BEMͱৄࡉʹ͍ͭͯ BEMBlockɺElementɺModifierͱ͍͏ϧʔϧͰΫϥε Λ໋໊͢Δ͜ͱͰ΄΅ඃΒͳ໊͍শΛ࡞Δ͜ͱ͕Ͱ͖· ͢ɻͦͷ্Ͱɺجຊతʹ1ΫϥεηϨΫλͱͳΔͨΊɺৄ ࡉ͕ۉҰʹอͨΕ·͢ɻ(໋໊ͰϧʔϧηοτͷিಥΛ ճආ͍ͯ͠ΔͨΊɺΫϥεηϨΫλΛෳ݁߹ͨ͠ϧʔ ϧηοτ(ʹৄࡉ͕ߴ͘ͳΔϧʔϧηοτ)Λ࡞Δඞཁ ੑ͕ͳ͘ͳΓ·͢)
BEMΫϥε໊͕͘ͳΔ͜ͱΛআ͚ඇৗʹ༗ ޮͳखஈͰ͢ɻখنαΠτͰେنαΠτͰ ௨༻͢Δख๏ͳͷͰɺੋඇऔΓೖΕΔ͜ͱΛ͓ ͢͢Ί͠·͢ɻ “
2-1-2. Atomic Designʹ͍ͭͯ ۙྲྀߦΓͷσβΠϯɾCSSͷઃܭख๏Ͱ͢ɻ σβΠϯ࡞͔࣌ΒύʔπԽΛҙࣝͯ͠ઃܭ͢Δख๏ͱ ͳΓ·͢ɻAtomic DesignͰύʔπΛݪࢠʢAtomsʣɺ ࢠʢMoleculesʣɺ༗ػମʢOrganismsʣɺςϯϓϨʔ τʢTemplatesʣɺϖʔδʢPagesʣͷ5ͭͷ୯Ґʹ͚ ͯઃܭ͠ɺ࠷ऴతʹ͜ΕΒΛΈ߹ΘͤΔ͜ͱͰσβΠ
ϯΛදݱ͠·͢ɻ
ݪࢠʢAtomsʣ ࠷খ୯ҐͷύʔπͰ͋ΓɺओʹϘλϯɺΞΠίϯɺϥϕ ϧɺςΩετϘοΫεͱ͍ͬͨύʔπΛද͠·͢ɻ
ࢠʢMoleculesʣ ̎ͭҎ্ͷݪࢠΛෳΈ߹Θͤͨύʔπɻ ΞΠίϯ͖ͭݕࡧϘοΫεͷΑ͏ͳύʔπ͕֘͠·͢ɻ
༗ػମʢOrganismsʣ ݪࢠࢠΛෳΈ߹ΘͤͨύʔπͰɺ୯ಠͰཱ͢ ΔίϯςϯπΛද͠·͢ɻ ϔομɺϑολͳͲ͕ྫͱͯ֘͠͠·͢ɻ
ςϯϓϨʔτʢTemplatesʣ ݪࢠɺࢠɺ༗ػମΛෳΈ߹Θͤͨը໘ߏΛද͢ ύʔπͰɺϨΠΞτͷ͜ͱΛࢦ͠·͢ɻ
ϖʔδʢPagesʣ ը૾จষͳͲɺ࣮ࡍͷίϯςϯπ͕ࠩ͠ࠐ·Εͨը໘ Λද͠·͢ɻ
Atomic DesignͷCSSͷөํ๏ ReactVueͷΑ͏ͳϥΠϒϥϦͰ CSS Modulesͷ ΈΛͬͯɺCSSͷείʔϓΛ֤ίϯϙʔωϯτ୯Ґ Ͱดͯ͡هड़͢Δ͜ͱ͕ՄೳͰ͕͢ɺCSS ModulesΛ Θͳ͍έʔεͰগ͕͠ඞཁͰ͢ɻ
Atomic DesignͷCSSϑΝΠϧߏྫ ֤ύʔπ͝ͱʹσΟϨΫτϦΛ࡞͠ɺͦͷதʹίϯϙʔ ωϯτผʹϑΝΠϧΛ͚ͯελΠϧΛهड़͍͖ͯ͠· ͢ɻ໋໊ʹ͍ͭͯBEMΛ༻͠ɺύʔπͷछྨ͕Θ͔ ΔΑ͏ʹAtomsͳΒ a- ɺMoleculesͳΒ m- ͱ͍ͬͨ
಄ޠΛ༩͠·͢ɻ·ͨɺ͜ΕΒͷύʔπσΟϨΫτϦ ɺ֤ύʔπͷґଘॱͱͳΔ 1. Atoms 2. Molecules 3. Organisms 4. Templates 5. Pages ͷॱ൪ʹͦΕͧΕͷελΠϧΛಡΈࠐΈ·͢ɻ
Atomic Designͷཧ Atomic Design্͕ख͘ద༻Ͱ͖ΔͱɺσβΠϯͷมߋ͕ ඇৗʹ͘͢͠ͳΓ·͢ɻύʔπ୯ҐͰσβΠϯΛཧ ͍ͯ͠ΔͨΊɺ̍ͭͷύʔπΛมߋ͢Δ͜ͱͰͦͷύʔ πΛར༻͍ͯ͠Δશը໘มߋΛө͢Δ͜ͱ͕Մೳʹ ͳΓ·͢ɻ
Atomic Designͷݱ࣮ ͔͠͠ɺ࣮ࡍʹ͜ΕΛӡ༻͠Α͏ͱ͢Δͱن͕େ͖͘ ͳΕͳΔ΄ͲσβΠϯஈ֊Ͱͭ·͖ͮ·͢ɻ ಛʹࢠͱ༗ػମͷ۠ผ͕σβΠϯஈ֊ͰᐆດͰ͋Δ ͨΊɺ࡞͢ΔύʔπΛͲ͜ʹଐͤ͞Ε͍͍ͷ͔Θ͔ Βͳ͘ͳΔ͜ͱ͕ଟʑ͋Γ·͢ɻ࣮ࡍʹ࡞͢ΔσβΠ ϯʹԠͯ͡νʔϜͰೝࣝΛ߹Θͤͭͭ࡞͢ΔͷΛΦ εεϝ͠·͢ɻ
3. ίʔσΟϯάڥͷ࡞ྫ
࠷ޙʹɺϚʔΫΞοϓ͢ΔࡍͷίʔσΟϯ άڥʹ͍ͭͯɺීஈࢲ͕Α͘ར༻͍ͯ͠ ΔߏΛհ͍ͨ͠ͱࢥ͍·͢ɻ “
ϚʔΫΞοϓڥߏஙྫ HTML • Pug CSS • PostCSS (SugarSS) JavaScript •
Babel (ES2015Ҏ߱) Bundler • FuseBox λεΫϥϯφʔ • Θͳ͍ (npm-scriptsͷΈ)
Pugʹ͍ͭͯ PugΠϯσϯτʹΑͬͯ֊ߏΛදݱ͢ΔςϯϓϨʔτ Ͱɺ؆୯ʹݴ͏ͱHTMLΛด͡λάͳ͠ʹهड़Ͱ͖·͢ɻଞ ʹextendmixinsͷར༻ՄೳͳͨΊɺগͳ͍ίʔυྔͰ HTMLͷهड़͕ՄೳʹͳΔ͔Γ͔ɺग़ྗ͞ΕΔHTML ίʔυܗ͞Εͨ៉ྷͳHTMLͱͳΓ·͢ͷͰੋඇར༻͠· ͠ΐ͏ɻ
PostCSS (SugarSS)ʹ͍ͭͯ PostCSSϓϥάΠϯΛՃ͢Δ͜ͱͰ༷ʑͳػೳΛՃͰ͖·͢ɻͦͷத ͰSugarSSͱ͍͏ύʔαʔΛࢦఆ͢ΔͱɺSassͷΑ͏ͳΠϯσϯτʹΑΔ CSSϧʔϧηοτͷهड़͕ՄೳʹͳΓ·͢ɻଞʹSass૬ͷػೳΛ࣮ݱ ग़དྷΔΑ͏ʹ͍͔ͭ͘ϓϥάΠϯΛՃ͍ͯ͠·͢ɻͦΕͳΒSassͰ͍͍ͷ Ͱʁͱࢥ͏ํ͍ΔͱࢥΘΕ·͕͢ɺPostCSSΛ͑ͯ͏ཧ༝ͱͯ͠ PostCSSͰར༻ՄೳͳLinterͰ͋Δ stylelint ͷग़དྷ͕ྑ͘ɺࡉ͔͍ϧʔϧͷ
੍ޚ͕ՄೳͰ͋ΔͨΊͰ͢ɻ
Babel (ES2015Ҏ߱)ʹ͍ͭͯ ࡢࠓͷϑϩϯτΤϯυͷ࣮ͰES2015Ҏ߱ͷJavaScript͕ར༻͞ΕΔͨ ΊɺϚʔΫΞοϓ࣌ʹ͓͍ͯ͜Εʹ߹Θͤ·͢ɻ
FuseBoxʹ͍ͭͯ ੈؒͰ webpack Percel ͷํ͕༗໊Ͱ͕͢ɺݸਓతʹFuseBoxΛਪ͠ ͍ͯ·͢ɻͱʹ͔͘Ϗϧυ͕͍Ͱ͢ʂ ReactVueͷΑ͏ͳ༗໊ͳϥΠϒϥϦʹରԠ͍ͯ͠·͢ɻ
λεΫϥϯφʔΘͳ͍ λεΫϥϯφʔͱ͍͏ͱɺgulpGruntΛࢥ͍ු͔Δํ͕ଟ͍͔ͱࢥ͍·͢ ͕ɺgulp࣍όʔδϣϯͰ͋Δv4͕Կܦͬͯਖ਼ࣜϦϦʔε͞Εͣɺ(λά ΒΕ͍ͯΔ͕ npm ϦϙδτϦґવϦϦʔε͞Ε͍ͯͳ͍) Gruntʹ͍ͭͯ ࣄ্࣮։ൃ͕ఀࢭ͍ͯ͠·͢ɻNodeJSͷ࠷৽όʔδϣϯͷରԠ͞Ε͍ͯ ͳ͍ͨΊɺࠓޙར༻Ͱ͖ͳ͍ϥΠϒϥϦ͕ଟൃੜͯ͘͠Δ͜ͱ͕༧͞Ε· ͢ɻ
ͦͷͨΊɺnpm-scriptsͰίϚϯυͷ੍ޚΛߦ͍·͢ɻ PugPostCSSઐ༻ͷCLI͕͞Ε͓ͯΓɺwatchػೳ͋ΔͨΊ ຆͲͷέʔεͰͦΕΒͷCLIΛnpm-scriptsͰ࣮ߦ͢Δ͚ͩͰࣄΓ·͢ɻ
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
·ͱΊ
࠷ۙͷϚʔΫΞοϓԞ͕ਂ͍ ϚʔΫΞοϓ୯ͳΔHTMLͱCSSΛهड़͢Δ͚ͩͰ؆୯ͱ͍͏Α͏ͳઌೖ ؍ͰݟΒΕ͍ͯΔ͜ͱ͕ଟ͍Ͱ͕͢ɺ࣮ࡍσβΠϯͷݟͨಈ͖͚ͩͰ ͳ͘ɺίʔσΟϯάͷઃܭʹ͍ͭͯߟྀ͢Δඞཁ͕͋ΔͨΊɺ߹ʹΑͬ ͯ୯ͳΔJavaScriptͷϓϩάϥϛϯάΑΓ͍͜͠ͱ͕͋Γ·͢ɻ σβΠφʔͷํͪΖΜͷ͜ͱɺ࠷ۙReactVueʹڵຯΛ࣋ͪ࢝Ίͨ όοΫΤϯυग़ͷΤϯδχΞͷํɺϚʔΫΞοϓͷجૅΛ͑Δ͜ͱͰ ΑΓྑ͍αΠτͷ࡞͕ՄೳͱͳΓ·͢ͷͰɺੋඇڵຯΛ͍͚ͬͯͨͩΔ ͱخ͍͠Ͱ͢ɻ
ϚʔΫΞοϓ༻αϯϓϧϓϩδΣΫτ հͨ͠πʔϧϥΠϒϥϦΛར༻ͨ͠ϚʔΫΞοϓ༻ͷαϯϓϧϓϩδΣ ΫτΛ࡞͠·ͨ͠ɻҎԼͷURL͔ΒऔಘͰ͖·͢ͷͰɺڵຯͷ͋Δํ ৮ͬͯΈ͍ͯͩ͘͞ɻ https://github.com/kkoudev/markup-template
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠