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
ナレッジイネイブリングにAIを活用してみる ゆるSRE勉強会 #9
nealle
0
150
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
150
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
140
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
460
React 19アップデートのために必要なこと
uhyo
8
1.5k
ML.NETで始める機械学習
ymd65536
0
230
Unity Android XR入門
sakutama_11
0
180
Flutter × Firebase Genkit で加速する生成 AI アプリ開発
coborinai
0
170
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.5k
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
980
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
260
生成AIで加速するテスト実装 - ロリポップ for Gamersの事例と 生成AIエディタの活用
kinosuke01
0
110
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Practical Orchestrator
shlominoach
186
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
30
4.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Done Done
chrislema
182
16k
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
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠