CSSã¢ãµãŒãã«ãŒã«ã®å æ¬çãªã¬ã€ããCSSã³ãŒãããŒã¹ã§ã¢ãµãŒã·ã§ã³ãã¹ããå®è£ ããèŠèŠçãªäžè²«æ§ã確ä¿ãããªã°ã¬ãã·ã§ã³ãé²ãããã®åŒ·åãªãã¯ããã¯ã§ãã
CSSã¢ãµãŒãã«ãŒã«ïŒå ç¢ãªãŠã§ãéçºã®ããã®ã¢ãµãŒã·ã§ã³ãã¹ãã®å®è£
ãŠã§ãéçºã®çµ¶ãéãªãé²åã®äžã§ãèŠèŠçãªäžè²«æ§ã確ä¿ãããªã°ã¬ãã·ã§ã³ãé²ãããšãæãéèŠã§ããåŸæ¥ã®ãã¹ãæ¹æ³ã§ã¯ãCSSã®ãã¥ã¢ã³ã¹ãèŠèœãšãããæœåšçãªèŠèŠçãªãã°ãæ€åºãããªããŸãŸã«ãªãããšããããããŸããCSSã¢ãµãŒãã«ãŒã«ã¯ããã®ã®ã£ãããåããããã®åŒ·åãªãã¯ããã¯ãšããŠç»å Žããéçºè ã¯CSSã³ãŒãããŒã¹å ã§çŽæ¥ã¢ãµãŒã·ã§ã³ãã¹ããå®è£ ã§ããŸãããã®å æ¬çãªã¬ã€ãã§ã¯ãCSSã¢ãµãŒãã«ãŒã«ã®æŠå¿µãæãäžãããã®å©ç¹ãå®è£ æŠç¥ãããã³å ç¢ã§ã¡ã³ããã³ã¹å¯èœãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ãäœæããããã®ãã¹ããã©ã¯ãã£ã¹ãæ¢æ±ããŸãã
CSSã¢ãµãŒãã«ãŒã«ãšã¯ïŒ
CSSã¢ãµãŒãã«ãŒã«ã¯ãå€ãã®å ŽåãSassãLessãªã©ã®ããªããã»ããµããŸãã¯PostCSSãã©ã°ã€ã³ã䜿çšããŠå®è£ ãããéçºè ã¯ã¹ã¿ã€ã«ã·ãŒãå ã§çŽæ¥ã¢ãµãŒã·ã§ã³ãå®çŸ©ã§ããŸãããããã®ã¢ãµãŒã·ã§ã³ã¯ãç¹å®ã®CSSããããã£ã®å€ãèŠçŽ ã®ã¹ã¿ã€ã«ããŸãã¯ç¹å®ã®ã¯ã©ã¹ã®ååšã確èªã§ããŸããã¢ãµãŒã·ã§ã³ã倱æãããšãæœåšçãªèŠèŠçãªãªã°ã¬ãã·ã§ã³ãŸãã¯CSSã®äžæŽåã瀺ããŸããJavaScriptããžãã¯ã«çŠç¹ãåœãŠãåŸæ¥ã®ãŠããããã¹ããšã¯ç°ãªããCSSã¢ãµãŒãã«ãŒã«ã¯èŠèŠçãªã¬ã€ã€ãŒãã¿ãŒã²ããã«ããã¬ã³ããªã³ã°ãããåºåãæå³ãããã¶ã€ã³ãšäžèŽããããšãä¿èšŒããŸãã
CSSã¢ãµãŒãã«ãŒã«ã®äž»ãªå©ç¹
- æ©æã®ãã°æ€åºïŒéçºãµã€ã¯ã«ã®æ©ã段éã§èŠèŠçãªãªã°ã¬ãã·ã§ã³ãç¹å®ããæ¬çªç°å¢ã«å°éããã®ãé²ããŸãã
- èŠèŠçãªäžè²«æ§ã®åäžïŒãã¶ã€ã³æšæºãé©çšããç°ãªããã©ãŠã¶ãããã€ã¹éã§äžè²«ããã¹ã¿ã€ãªã³ã°ãä¿èšŒããŸãã
- æåãã¹ãã®åæžïŒèŠèŠçãªãã¹ããèªååããæåæ€æ»ãžã®äŸåãæžãããä»ã®ã¿ã¹ã¯ã«è²Žéãªæéãè²»ããããšãã§ããŸãã
- ã³ãŒãå質ã®åäžïŒã¹ã¿ã€ãªã³ã°ãšãã®ãŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãžã®åœ±é¿ã«ã€ããŠæ¹å€çã«èããããã«éçºè ãä¿ãããšã§ãããã¯ãªãŒã³ã§ã¡ã³ããã³ã¹å¯èœãªCSSã³ãŒããä¿é²ããŸãã
- èªä¿¡ã®åäžïŒå€æŽã«ãã£ãŠäºæããªãèŠèŠçãªåé¡ãçºçããªãããšãç¥ã£ãŠãCSSã³ãŒãããŒã¹ãžã®èªä¿¡ãæ·±ããŸãã
- çããããã¥ã¡ã³ãïŒã¢ãµãŒã·ã§ã³ã¯çããããã¥ã¡ã³ããšããŠæ©èœããCSSã¹ã¿ã€ã«ã®æåŸ ãããåäœãæç¢ºã«å®çŸ©ããŸãã
å®è£ æŠç¥
CSSã¢ãµãŒãã«ãŒã«ãå®è£ ããã«ã¯ãããã€ãã®ã¢ãããŒãããããããããã«ç¬èªã®å©ç¹ã𿬠ç¹ããããŸããã¡ãœããã®éžæã¯ããããžã§ã¯ãã®ç¹å®ã®èŠä»¶ãšéçºããŒã ã®å¥œã¿ã«äŸåããŸãã
1. CSSããªããã»ããµã®äœ¿çšïŒSassãLessïŒ
SassãLessãªã©ã®CSSããªããã»ããµã¯ã倿°ãmixinã颿°ãªã©ã®åŒ·åãªæ©èœãæäŸããããããå©çšããŠã¢ãµãŒã·ã§ã³ã«ãŒã«ãäœæã§ããŸãããã®ã¢ãããŒãã¯ããã§ã«CSSããªããã»ããµã䜿çšããŠãããããžã§ã¯ãã«é©ããŠããŸãã
äŸïŒSassïŒ
ãã©ã€ããªãã¿ã³ã®èæ¯è²ã#007bffã§ããããšãã¢ãµãŒãããããšããŸãã
@function assert-equal($expected, $actual, $message: "") {
@if $expected != $actual {
@error "Assertion failed: #{$message} Expected: #{$expected}, Actual: #{$actual}";
}
}
.btn-primary {
background-color: #007bff;
$expected-color: #007bff;
$actual-color: background-color;
@debug $actual-color;
@include assert-equal($expected-color, #007bff, "Primary button background color");
}
説æïŒ
assert-equal颿°ã¯ãæåŸ å€ãšå®éã®å€ãæ¯èŒããŸããäžèŽããªãå Žåã説æçãªã¡ãã»ãŒãžãšãšãã«ãšã©ãŒãã¹ããŒããŸãã.btn-primaryã¯ã©ã¹ãèæ¯è²ã§å®çŸ©ããŸãã- 次ã«ã
assert-equal颿°ã䜿çšããŠãå®éã®èæ¯è²ãæåŸ ãããè²ãšäžèŽãããã©ããã確èªããŸãã
泚ïŒãã®ã¢ãããŒãã¯ãããªããã»ããµã®ãšã©ãŒåŠçæ©èœã«äŸåããŠããŸããã¢ãµãŒã·ã§ã³ã倱æãããšãããªããã»ããµã¯ã³ã³ãã€ã«äžã«ãšã©ãŒãã¹ããŒããŸãã
2. PostCSSãã©ã°ã€ã³ã®äœ¿çš
PostCSSã¯ãJavaScriptãã©ã°ã€ã³ã䜿çšããŠCSSã倿ããããã®åŒ·åãªããŒã«ã§ããããã€ãã®PostCSSãã©ã°ã€ã³ã䜿çšããŠCSSã¢ãµãŒãã«ãŒã«ãå®è£ ã§ãããã¹ãããã»ã¹ãããæè»ã«å¶åŸ¡ã§ããŸãã
äŸïŒpostcss-assertïŒ
postcss-assertãã©ã°ã€ã³ã䜿çšãããšãã«ã¹ã¿ã ããããã£ãšã¡ãã£ã¢ã¯ãšãªã䜿çšããŠã¢ãµãŒã·ã§ã³ãå®çŸ©ã§ããŸãã
/* Install the plugin: npm install postcss-assert */
:root {
--expected-primary-color: #007bff;
}
.btn-primary {
background-color: #007bff;
}
@media (--assert-primary-button-color) {
.btn-primary {
--actual-primary-color: var(--btn-primary-background);
--assert-equal: eval(var(--actual-primary-color) == var(--expected-primary-color));
assert: var(--assert-equal);
message: "Primary button background color should be #007bff";
}
}
説æïŒ
- ã«ã¹ã¿ã ããããã£ïŒ
--expected-primary-colorïŒã䜿çšããŠãæåŸ ãããèæ¯è²ãå®çŸ©ããŸãã .btn-primaryã¯ã©ã¹ã«èæ¯è²ãé©çšããŸãã- ã«ã¹ã¿ã ããããã£ïŒ
--assert-primary-button-colorïŒãæã€ã¡ãã£ã¢ã¯ãšãªã䜿çšããŠãã¢ãµãŒã·ã§ã³ããžãã¯ãã«ãã»ã«åããŸãã - ã¡ãã£ã¢ã¯ãšãªå
ã§ãã«ã¹ã¿ã ããããã£ïŒ
--actual-primary-colorïŒãå®çŸ©ããŠãå®éã®èæ¯è²ãæ ŒçŽããŸãã eval()颿°ã䜿çšããŠãæåŸ ãããè²ãšå®éã®è²ãæ¯èŒããçµæã--assert-equalã«ã¹ã¿ã ããããã£ã«æ ŒçŽããŸãã- 次ã«ã
assertããããã£ã䜿çšããŠã--assert-equalã®å€ã«åºã¥ããŠã¢ãµãŒã·ã§ã³ãããªã¬ãŒããŸãã messageããããã£ã¯ãã¢ãµãŒã·ã§ã³ã倱æããå Žåã«èª¬æçãªã¡ãã»ãŒãžãæäŸããŸãã
æ§æïŒ
// postcss.config.js
module.exports = {
plugins: [
require('postcss-assert')({
// Options (optional)
})
]
}
3. JavaScriptããŒã¹ã®ãã¹ããã¬ãŒã ã¯ãŒã¯ã®äœ¿çšïŒäŸïŒJestãCypressïŒ
CSSã¢ãµãŒãã«ãŒã«ã¯äž»ã«CSSå ã®ã¢ãµãŒã·ã§ã³ã«çŠç¹ãåœãŠãŠããŸãããJestãCypressãªã©ã®JavaScriptããŒã¹ã®ãã¹ããã¬ãŒã ã¯ãŒã¯ãçµ±åããŠãããå æ¬çãªèŠèŠçãªãã¹ããå®è¡ã§ããŸãããããã®ãã¬ãŒã ã¯ãŒã¯ã䜿çšãããšãã³ã³ããŒãã³ããŸãã¯ããŒãžãã¬ã³ããªã³ã°ããã¢ãµãŒã·ã§ã³ã©ã€ãã©ãªã䜿çšããŠç¹å®ã®CSSã¹ã¿ã€ã«ã確èªã§ããŸãã
äŸïŒCypressïŒ
// cypress/integration/button.spec.js
describe('Button Styles', () => {
it('should have the correct background color', () => {
cy.visit('/button'); // Assuming you have a route /button
cy.get('.btn-primary')
.should('have.css', 'background-color', 'rgb(0, 123, 255)'); // Equivalent to #007bff
});
});
説æïŒ
- ãã®äŸã§ã¯ãCypressã䜿çšããŠããã©ã€ããªãã¿ã³ïŒ
.btn-primaryïŒãå«ãããŒãžã«ã¢ã¯ã»ã¹ããŸãã - 次ã«ã
should('have.css', 'background-color', 'rgb(0, 123, 255)')ã¢ãµãŒã·ã§ã³ã䜿çšããŠããã¿ã³ã®èæ¯è²ãæåŸ ãããå€ãšäžèŽãããã©ããã確èªããŸãã
泚ïŒãã®ã¢ãããŒãã§ã¯ããã¹ãç°å¢ããã¹ã察象ã®ã³ã³ããŒãã³ããŸãã¯ããŒãžãã¬ã³ããªã³ã°ããæ¹æ³ãªã©ãããè€éãªèšå®ãå¿ èŠã§ãããã ãããã¹ãããã»ã¹ãããæè»ã«å¶åŸ¡ã§ããŸãã
CSSã¢ãµãŒãã«ãŒã«ãå®è£ ããããã®ãã¹ããã©ã¯ãã£ã¹
CSSã¢ãµãŒãã«ãŒã«ã广çã«å®è£ ããã«ã¯ã次ã®ãã¹ããã©ã¯ãã£ã¹ãèæ ®ããŠãã ããã
- å°ããå§ããïŒãªã°ã¬ãã·ã§ã³ãçºçããããéèŠãªã³ã³ããŒãã³ããŸãã¯ã¹ã¿ã€ã«ã«å¯ŸããŠã¢ãµãŒã·ã§ã³ãå®è£ ããããšããå§ããŸãã
- æç¢ºã§ç°¡æœãªã¢ãµãŒã·ã§ã³ãäœæããïŒã¢ãµãŒã·ã§ã³ã®ç®çãšã倱æããå Žåã«äœãèµ·ããããæç¢ºã«èª¬æãã説æçãªã¡ãã»ãŒãžã䜿çšããŸãã
- äž»èŠãªèŠèŠçããããã£ã«çŠç¹ãåœãŠãïŒè²ããã©ã³ããééãã¬ã€ã¢ãŠããªã©ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã«çŽæ¥åœ±é¿ããããããã£ã®ã¢ãµãŒã·ã§ã³ãåªå ããŸãã
- 倿°ãšmixinã䜿çšããïŒCSSããªããã»ããµã®å€æ°ãmixinãªã©ã®æ©èœãå©çšããŠãåå©çšå¯èœãªã¢ãµãŒã·ã§ã³ã«ãŒã«ãäœæããã³ãŒãã®éè€ãæžãããŸãã
- CI/CDãã€ãã©ã€ã³ãšã®çµ±åïŒå€æŽããããã€åã«èªåçã«æ€èšŒãããããã«ãCI/CDãã€ãã©ã€ã³ã®äžéšãšããŠCSSãã¹ããèªååããŸãã
- ã¢ãµãŒã·ã§ã³ã®ä¿å®ãšæŽæ°ïŒCSSã³ãŒãããŒã¹ã®é²åã«äŒŽããã¢ãµãŒã·ã§ã³ã宿çã«èŠçŽãã倿Žãåæ ããé¢é£æ§ãç¶æããããã«æŽæ°ããŸãã
- éå°ãªã¢ãµãŒããããªãïŒã¢ãµãŒã·ã§ã³ãå€ããããšããã¹ãããã»ã¹ãé ãç ©éã«ãªãå¯èœæ§ããããããé¿ããŠãã ãããCSSã®æãéèŠãªåŽé¢ã«çŠç¹ãåœãŠãŸãã
- ãã©ãŠã¶ã®äºææ§ãèæ ®ããïŒã¢ãµãŒã·ã§ã³ãäœæãããšãã¯ããã©ãŠã¶ã®äºææ§ã«æ³šæããŠãã ãããç¹ã«ãç°ãªããã©ãŠã¶éã§ç°ãªãæ¹æ³ã§ã¬ã³ããªã³ã°ãããå¯èœæ§ãããããããã£ã«ã€ããŠã¯æ³šæãå¿ èŠã§ãã
- æå³ã®ããã¡ãã»ãŒãžã䜿çšããïŒãšã©ãŒã¡ãã»ãŒãžãéçºè ãæ ¹æ¬çãªåå ã«å°ãããã«ããŸããäžè¬çãªãã¢ãµãŒã·ã§ã³ã倱æããŸãããã®ä»£ããã«ãããã¿ã³ã®é«ãã¯40ãã¯ã»ã«ã§ããå¿ èŠããããŸããã38ãã¯ã»ã«ã§ããã®ãããªã¡ãã»ãŒãžãæäŸããŸãã
å®éã®ã·ããªãªã§ã®CSSã¢ãµãŒãã«ãŒã«ã®äŸ
å®éã®ã·ããªãªã§CSSã¢ãµãŒãã«ãŒã«ãã©ã®ããã«é©çšã§ãããã®å®çšçãªäŸãèŠãŠã¿ãŸãããã
1. äžè²«æ§ã®ããã«ã©ãŒãã¬ããã®ç¢ºä¿
äžè¬çãªèŠä»¶ã¯ããŠã§ããµã€ããŸãã¯ã¢ããªã±ãŒã·ã§ã³å šäœã§äžè²«æ§ã®ããã«ã©ãŒãã¬ãããç¶æããããšã§ããCSSã¢ãµãŒãã«ãŒã«ã䜿çšããŠãç¹å®ã®èŠçŽ ãæ£ããè²ã䜿çšããŠããããšã確èªã§ããŸãã
// Sass example
$primary-color: #007bff;
$secondary-color: #6c757d;
.button-primary {
background-color: $primary-color;
color: white;
@include assert-equal($primary-color, background-color, "Primary button background color");
}
.button-secondary {
background-color: $secondary-color;
color: white;
@include assert-equal($secondary-color, background-color, "Secondary button background color");
}
2. ã¿ã€ãã°ã©ãã£ã¹ã¿ã€ã«ã®æ€èšŒ
ã¿ã€ãã°ã©ãã£ã¯ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã«ãããŠéèŠãªåœ¹å²ãæãããŸããCSSã¢ãµãŒãã«ãŒã«ã䜿çšããŠãèŠåºããæ®µèœãããã³ãã®ä»ã®ããã¹ãèŠçŽ ãæ£ãããã©ã³ããã¡ããªãŒããµã€ãºãããã³å€ªãã䜿çšããŠããããšã確èªã§ããŸãã
// Sass example
$heading-font-size: 24px;
$paragraph-font-size: 16px;
h1 {
font-size: $heading-font-size;
@include assert-equal($heading-font-size, font-size, "Heading font size");
}
p {
font-size: $paragraph-font-size;
@include assert-equal($paragraph-font-size, font-size, "Paragraph font size");
}
3. ééãšã¬ã€ã¢ãŠãã®ç¢ºèª
äžè²«æ§ã®ããééãšã¬ã€ã¢ãŠãã¯ãèŠèŠçã«é åçã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªã€ã³ã¿ãŒãã§ãŒã¹ãäœæããããã«äžå¯æ¬ ã§ããCSSã¢ãµãŒãã«ãŒã«ã䜿çšããŠãèŠçŽ ãé©åã«é 眮ãããééãèšå®ãããŠããããšã確èªã§ããŸãã
// Sass example
$grid-gutter: 20px;
.grid-item {
margin-right: $grid-gutter;
@include assert-equal($grid-gutter, margin-right, "Grid item margin right");
}
4. ã¬ã¹ãã³ã·ããã¶ã€ã³ã®æ€èšŒ
ã¬ã¹ãã³ã·ããã¶ã€ã³ã§ã¯ãã¹ã¿ã€ã«ã¯ç»é¢ãµã€ãºã«åºã¥ããŠå€åããããšããããããŸããã¢ãµãŒã·ã§ã³ãã¡ãã£ã¢ã¯ãšãªå ã«é 眮ããŠãç°ãªããã¬ãŒã¯ãã€ã³ãã§æ£ããã¹ã¿ã€ã«ãé©çšãããããã«ããããšãã§ããŸãã
// Sass Example
$mobile-font-size: 14px;
$desktop-font-size: 16px;
p {
font-size: $desktop-font-size;
@media (max-width: 768px) {
font-size: $mobile-font-size;
@include assert-equal($mobile-font-size, font-size, "Mobile paragraph font size");
}
@media (min-width: 769px) {
@include assert-equal($desktop-font-size, font-size, "Desktop paragraph font size");
}
}
é«åºŠãªãã¯ããã¯ãšèæ ®äºé
1. èšç®ãããå€ã®ãã¹ã
å Žåã«ãã£ãŠã¯ãCSSããããã£ã®æ£ç¢ºãªå€ãäºåã«ãããããèšç®ã«äŸåããå ŽåããããŸãããããã®å Žåãèšç®ã®çµæã«å¯ŸããŠã¢ãµãŒã·ã§ã³ãè¡ãããšãã§ããŸãã
2. ã«ã¹ã¿ã ãããã£ãŒã®äœ¿çš
æååå ã®ç¹å®ã®ãã¿ãŒã³ã®ååšã確èªãããªã©ãè€éãªã¢ãµãŒã·ã§ã³ã®å Žåãã«ã¹ã¿ã ãããã£ãŒãäœæã§ããŸãã
3. ããã©ãŒãã³ã¹ã«é¢ããèæ ®äºé
CSSã¢ãµãŒãã«ãŒã«ã¯å€§ããªå©ç¹ãæäŸããŸãããããã©ãŒãã³ã¹ã«æ³šæããããšãéèŠã§ããé床ãªã¢ãµãŒã·ã§ã³ã¯ãç¹ã«å€§èŠæš¡ãªãããžã§ã¯ãã§ã¯ãã³ã³ãã€ã«ããã»ã¹ãé ãããå¯èœæ§ããããŸãããããã£ãŠãåŸ¹åºæ§ãšããã©ãŒãã³ã¹ã®ãã©ã³ã¹ãåãããšãéèŠã§ãã
4. ã°ããŒãã«ã¹ã¿ã€ã«ãªã»ããã®åœ±é¿
ã¢ãµãŒã·ã§ã³ã«å¯Ÿããã°ããŒãã«ã¹ã¿ã€ã«ãªã»ããïŒnormalize.cssãreset.cssãªã©ïŒã®åœ±é¿ãèæ ®ããŠãã ãããã¢ãµãŒã·ã§ã³ããããã®ãªã»ããã§å®çŸ©ãããããŒã¹ã©ã€ã³ã¹ã¿ã€ã«ãèæ ®ããŠããããšã確èªããŠãã ããã
5. CSSç¹ç°æ§ã®ç«¶å
CSSç¹ç°æ§ã¯ãäºæããªãçµæã«ã€ãªããå¯èœæ§ããããŸããã¢ãµãŒã·ã§ã³ã倱æããå Žåã¯ããã¹ã察象ã®ã¹ã¿ã€ã«ã®ç¹ç°æ§ãå確èªããŠãã ããã
çµè«
CSSã¢ãµãŒãã«ãŒã«ã¯ããŠã§ãã¢ããªã±ãŒã·ã§ã³ã®èŠèŠçãªäžè²«æ§ã確ä¿ãããªã°ã¬ãã·ã§ã³ãé²ãããã®è²Žéãªãã¯ããã¯ã§ããCSSã³ãŒãããŒã¹å ã§çŽæ¥ã¢ãµãŒã·ã§ã³ãå®è£ ããããšã«ãããéçºãµã€ã¯ã«ã®æ©ã段éã§æœåšçãªèŠèŠçãªãã°ããã£ããããã³ãŒãå質ãåäžãããCSSãžã®èªä¿¡ãæ·±ããããšãã§ããŸããCSSããªããã»ããµãPostCSSãã©ã°ã€ã³ããŸãã¯JavaScriptããŒã¹ã®ãã¹ããã¬ãŒã ã¯ãŒã¯ã®ãããã䜿çšããå Žåã§ããéèŠãªã®ã¯ãCSSãã¹ãã«å¯Ÿããäžè²«æ§ã®ããäœç³»çãªã¢ãããŒããæ¡çšããããšã§ãããŠã§ãéçºã®ç¶æ³ãé²åãç¶ããã«ã€ããŠãCSSã¢ãµãŒãã«ãŒã«ã¯ãã·ãŒã ã¬ã¹ãªãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãæäŸãããå ç¢ã§ã¡ã³ããã³ã¹å¯èœãªãŠã§ãã¢ããªã±ãŒã·ã§ã³ãäœæããäžã§ãŸããŸãéèŠãªåœ¹å²ãæããã§ãããã