【ツール活用｜初心者向け】CSS/SCSSの品質を保つ！Stylelint入門

はじめに：なぜStylelintが重要なのか？

WebサイトやWebアプリケーションの開発において、CSSやSCSS（Sass）は見た目を整えるために欠かせない技術です。しかし、プロジェクトが大きくなるにつれて、スタイルシートの記述がバラバラになったり、意図しない重複が発生したり、さらにはパフォーマンスに影響するような記述が現れたりすることがあります。

Stylelintは、このようなCSS/SCSSの記述ルールを自動でチェックしてくれる静的解析ツールです。これにより、

  • コード品質の維持: チーム開発でも一貫したコーディングスタイルを保てます。
  • バグの早期発見: 記述ミスや無効なプロパティの使用などを早期に検知し、デバッグの手間を省きます。
  • メンテナンス性の向上: 整理されたコードは、後から修正や機能追加を行う際に理解しやすく、作業効率を高めます。
  • 設計ルールの強制: BEMのようなCSS設計手法を採用している場合、そのルールからの逸脱を防ぐのに役立ちます。

これらのメリットから、Stylelintはフロントエンド開発における品質維持の要と言えます。

Stylelintの基礎知識

Stylelintは、JavaScriptで書かれたコードを解析するESLintのCSS版のようなものと考えると理解しやすいでしょう。設定ファイルに基づいて、CSS/SCSSのコードを解析し、定義されたルールに違反している箇所を検出します。

主な機能:

  • 構文エラーの検出: タイプミスや不正なプロパティ値などを検出します。
  • コーディングスタイルのチェック: インデント、セミコロンの有無、プロパティの順序などを統一できます。
  • 非推奨プロパティ/値の警告: パフォーマンスに影響を与えたり、将来的に廃止される可能性のあるプロパティや値の使用を警告します。
  • 重複プロパティの検出: 同じセレクタ内で同じプロパティが複数定義されている場合に警告します。
  • 無効な値の検出: 存在しない色名や単位などを検出します。

関連用語:

  • 静的解析: プログラムを実行せずに、ソースコードを解析してエラーやバグ、コードスタイルなどを検出する手法です。
  • CSS Lint: Stylelintと同様の目的を持つ、古いCSS静的解析ツールの総称です。Stylelintが現在主流となっています。
  • SCSS整形: SCSS（Sass）のコードを、定義されたルールに従って自動的に整形することです。Stylelintは整形機能も一部持ちますが、Prettierなどのフォーマッターと併用されることも多いです。
  • BEM (Block, Element, Modifier): CSSの命名規則の一つで、コンポーネントの構造を明確にし、CSSの管理を容易にするための手法です。StylelintでBEMの命名規則に沿っているかチェックすることも可能です。

Stylelintを導入してみよう

ここでは、Node.js環境でのStylelintの基本的な導入方法を説明します。

1. プロジェクトへのインストール

まず、プロジェクトのディレクトリで以下のコマンドを実行し、Stylelint本体と、よく使われる設定（`stylelint-config-standard`）をインストールします。

npm install stylelint stylelint-config-standard –save-dev
または yarn を使う場合
yarn add stylelint stylelint-config-standard –dev

2. 設定ファイル (.stylelintrc.js) の作成

プロジェクトのルートディレクトリに `.stylelintrc.js` という名前の設定ファイルを作成します。このファイルで、Stylelintにどのようなルールを適用するかを定義します。

// .stylelintrc.js
module.exports = {
// 継承する設定を指定します。ここでは標準的な設定を継承します。
extends: ‘stylelint-config-standard’,
// ここに、標準設定を上書きしたり、独自のルールを追加したりできます。
rules: {
// 例: インデントをスペース4つにする（標準は2つ）
‘indentation’: 4,
// 例: プロパティの末尾にセミコロンを必須にする（標準は許可）
‘declaration-block-trailing-semicolon’: ‘always’,
// 例: 未使用のCSSプロパティを検出するルールを有効にする (別途 stylelint-no-unused-selectors のインストールが必要になる場合あり)
// ‘no-unused-selectors’: true,
},
// 特定のファイルやディレクトリを無視する設定
ignoreFiles: [
‘/node_modules/‘,
‘/dist/‘,
‘/build/‘
]
};

3. CSS/SCSSファイルでの実行

インストールと設定が完了したら、ターミナルで以下のコマンドを実行して、プロジェクト内のCSS/SCSSファイルをチェックできます。

npx stylelint “/.css” “/.scss”

このコマンドは、プロジェクト内の全ての `.css` および `.scss` ファイルに対してStylelintを実行し、検出された問題点を表示します。

サンプルプログラム (設定ファイルと実行例)

ここでは、より具体的な設定例と、その設定でStylelintを実行した場合の出力例を示します。

設定ファイル: `.stylelintrc.js`

// .stylelintrc.js
module.exports = {
// 標準的なCSS/SCSSのルールセットを継承します。
extends: ‘stylelint-config-standard’,
// SCSS用のプラグインを有効にします。
plugins: [
‘stylelint-scss’
],
// ここで、デフォルトのルールを上書きしたり、独自のルールを追加したりできます。
rules: {
// CSSのインデントをスペース2つに設定します。
‘indentation’: 2,
// プロパティの末尾のセミコロンは必須とします。
‘declaration-block-trailing-semicolon’: ‘always’,
// 関数名にケバブケース（例: my-function）を要求します（SCSS用）。
‘scss/function-name-convention’: ‘kebab-case’,
// プロパティの順序を規定します (例: box-model, typography, visual, animation, misc)。
// このルールは stylelint-config-recess などからインポートして使うこともできます。
‘order/properties-order’: [
{
‘emptyLineBefore’: ‘always’,
‘properties’: [‘display’, ‘flex’, ‘flex-grow’, ‘flex-shrink’, ‘flex-basis’, ‘align-items’, ‘justify-content’]
},
{
‘emptyLineBefore’: ‘always’,
‘properties’: [‘width’, ‘height’, ‘margin’, ‘padding’, ‘border’]
},
{
‘emptyLineBefore’: ‘always’,
‘properties’: [‘color’, ‘background’, ‘font-size’, ‘line-height’, ‘font-weight’]
}
],
// 数値の0に単位をつけないことを許可します。
‘value-no-unknown-properties’: null, // これで不明なプロパティの検出を無効化（必要に応じて）
‘unit-allowed-list’: [‘px’, ‘em’, ‘rem’, ‘%’, ‘vh’, ‘vw’, ‘deg’, ‘s’], // 許可する単位のリスト
},
// 特定のファイルやディレクトリを解析対象から除外します。
ignoreFiles: [
‘/normalize.css’, // 通常、normalize.cssのようなライブラリはチェック対象外とします。
‘/vendor/‘
]
};

チェック対象のSCSSファイル: `styles.scss`

// styles.scss

.button {
display: inline-block;
padding: 10px 20px; // ここに空行がない
background-color: #007bff;
color: white;
border-radius: 5px;
font-size: 16px;
margin-top: 10px; // displayの前にmargin-topがある（順序違反）
&:hover {
background-color: #0056b3;
}
}

.card {
width: 300px;
border: 1px solid #ccc;
box-shadow: 2px 2px 5px rgba(0,0,0,0.1); // ‘box-shadow’ は order/properties-order で定義されていない
padding: 20px;
background: #f8f9fa;

&__title {
font-size: 1.2em;
margin-bottom: 15px;
color: #333;
}

&__content {
line-height: 1.5;
color: #555;
}
}

実行コマンド

npx stylelint “/.scss”

想定される出力例

styles.scss
4:3 ✖ Expected an empty line before this declaration (declaration-block-trailing-semicolon)
9:3 ✖ Invalid property name “margin-top” (order/properties-order)
9:3 ✖ Expected an empty line before this declaration (order/properties-order)
17:5 ✖ Invalid property name “box-shadow” (order/properties-order)
17:5 ✖ Expected an empty line before this declaration (order/properties-order)

この出力は、`styles.scss` ファイル内で検出された問題点を示しています。例えば、`.button` クラスの `padding` の行に空行がないこと、`margin-top` が `display` の前に配置されていることなどが指摘されています。

応用・注意点

  • エディタ連携: Visual Studio Codeなどの多くのコードエディタにはStylelintの拡張機能があります。これを導入すると、コードを書いている最中にリアルタイムでエラーを検出してくれるため、非常に効率的です。
  • Prettierとの併用: Stylelintはコードの「品質」や「ルール」をチェックするのに特化していますが、コードの「見た目」を統一する（フォーマットする）のはPrettierが得意とするところです。StylelintとPrettierを併用することで、コード品質と見た目の両方を高いレベルで保つことができます。Prettierの設定でStylelintのルールと競合しないように注意が必要です。
  • プロジェクト固有のルール: `stylelint-config-standard` は一般的なルールセットですが、プロジェクトの要件に合わせて独自のルールを追加・変更できます。例えば、特定のプロパティの使用を禁止したり、命名規則を厳格に定義したりすることが可能です。
  • SCSS/Sass特有のルール: SCSS/Sassの機能（ミックスイン、変数など）に関するチェックを行いたい場合は、`stylelint-scss` プラグインをインストールし、設定ファイルで有効にする必要があります。
  • CI/CDへの組み込み: Gitのコミット前フック（Huskyなど）や、GitHub ActionsなどのCI/CDパイプラインにStylelintの実行を組み込むことで、コードがマージされる前に自動的に品質チェックが行われるようになり、品質管理をさらに徹底できます。

Stylelintを使いこなすことで、フロントエンド開発の品質とメンテナンス性を大きく向上させることができます。ぜひ、あなたのプロジェクトにも導入してみてください。

スポンサーリンク
タイトルとURLをコピーしました