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
300
Other Decks in Programming
See All in Programming
自力でTTSモデルを作った話
zgock999
0
110
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
630
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
170
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
160
iOSでQRコード生成奮闘記
ktcryomm
2
110
複数のAWSアカウントから横断で 利用する Lambda Authorizer の作り方
tc3jp
0
120
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
170
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
160
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
Amazon Bedrockマルチエージェントコラボレーションを諦めてLangGraphに入門してみた
akihisaikeda
1
150
Datadog Workflow Automation で圧倒的価値提供
showwin
1
280
Featured
See All Featured
Building Your Own Lightsaber
phodgson
104
6.2k
Product Roadmaps are Hard
iamctodd
PRO
51
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Embracing the Ebb and Flow
colly
84
4.6k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.4k
The Invisible Side of Design
smashingmag
299
50k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠