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.8k
フロントエンドデザイン・開発におけるマークアップ設計の基礎 / frontend markup design basics
Kou
May 20, 2018
Tweet
Share
More Decks by Kou
See All by Kou
デザインを見ながらフロントエンドコーディングをするときの考え方 / design-coding
kkoudev
2
1.6k
React Nativeで作るiOSアプリケーションの環境構築設計 / react native env for ios
kkoudev
1
2.5k
フロントエンドコーディングにおけるPageSpeed Insights対策 / frontend pagespeed insights-
kkoudev
7
6.9k
Docker Compose利用者から見た Kubernetes 開発環境構築入門 / introduction to kubernetes for docker compose user
kkoudev
19
11k
Dockerを利用したローカル環境から本番環境までの構築設計 / Project structure design for docker application
kkoudev
0
340
Other Decks in Programming
See All in Programming
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
1.3k
Leading Effective Engineering Teams in the AI Era
addyosmani
5
420
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
170
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
110
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
120
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
180
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
170
What's new in Spring Modulith?
olivergierke
1
150
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
1
350
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
570
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
220
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
130
Featured
See All Featured
Scaling GitHub
holman
463
140k
Statistics for Hackers
jakevdp
799
220k
Code Reviewing Like a Champion
maltzj
526
40k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Speed Design
sergeychernyshev
32
1.2k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
For a Future-Friendly Web
brad_frost
180
9.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
33
2.3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠