初心者でも分かるscssのメディアクエリをまとめる「mqpacker」の使い方

今回は、scssのメディアクエリをまとめる方法を探して試行錯誤していたけど、他のどの記事も説明が抜けてたり、ソースミスでエラーばっかりだった経験から、初心者でも1回で分かる「mqpacker」の使い方を徹底解説します。

今回の完成形
まずはNode.jsをインストール
- コマンドラインを起動する
- package.jsonの作成
Gulpのインストール
処理を実行する
まとめ

今回の完成形

今回やりたいことは、Sass/Scssで下記のようにバラバラになったメディアクエリをまとめることです。

.test-1 {
  margin-top: 16px;
  font-size: 16px;
}
@media screen and (min-width: 600px) {
  .test-1 {
    margin-top: 24px;
    font-size: 18px;
  }
}
@media screen and (min-width: 960px) {
  .test-1 {
    margin-top: 32px;
    font-size: 20px;
  }
}
.test-2 {
  margin-top: 10px;
}
@media screen and (min-width: 600px) {
  .test-2 {
    margin-top: 20px;
  }
}
@media screen and (min-width: 960px) {
  .test-2 {
    margin-top: 30px;
  }
}

Sass/Scssを使っていると、上のソースコードのようにメディアクエリがひとつひとつについてしまい、容量が増えてしまうことや、可読性が低くなりますよね。

GulpとPostCSSの「mqpacker」というプラグインを使えば、下記のようにメディアクエリを綺麗に1つにまとめることができます。

.test-1 {
  margin-top: 16px;
  font-size: 16px;
}
.test-2 {
  margin-top: 10px;
}
@media screen and (min-width: 600px) {
  .test-1 {
    margin-top: 24px;
    font-size: 18px;
  }
  .test-2 {
    margin-top: 20px;
  }
}
@media screen and (min-width: 960px) {
  .test-1 {
    margin-top: 32px;
    font-size: 20px;
  }
  .test-2 {
    margin-top: 30px;
  }
}

まずはNode.jsをインストール

「mqpacker」を使うには、GulpとPostCSSが必要になります。ややこしそうに見えますが、導入やインストールはすぐに終わるので、説明に従って進めていきましょう。

まずは、Gulpを使うためにNode.jsを公式サイトからダウンロードします。

画像ダウンロードページに、「推奨版」と「最新版」の2つがありますが、個人的には、推奨版で十分かと思います。

ダウンロードしたら手順に従ってインストールして下さい。

基本、「次へ」を押して進んでいくだけで大丈夫です。

これで、Node.jsのインストールが完了しました！

コマンドラインを起動する

コマンドラインとは、パソコンについている黒い背景のアレです(笑)。

Windowsは、コマンドプロンプト(左下の検索からコマンドプロンプトと検索して起動)で、Macは、ターミナル(フォルダのアプリケーション→ユーティリティ→ターミナル)です。

コマンドラインを起動して、黒い背景が出たら、下記のコマンドを入力し、Enterキーを押し、バージョンの情報(例：v12.16.1)が表示されたら正常にインストールができています。

node -v

package.jsonの作成

package.jsonとは、プログラムがたくさん入ったファイルみたいな感じです(今回は、「とりあえずこのファイルが必要なんだな」くらいで大丈夫です)。

まず、コマンドラインから任意(メディアクエリをまとめたいファイルがある)フォルダに移動します。

cd C:¥Users¥〇〇¥yourfile

↑Windowsのフォルダーの移動のコマンド↑

cd /Users/〇〇/yourfile

↑Macのフォルダーの移動のコマンド↑

cdの後ろの半角スペースを忘れずに入力して下さいね。

コマンドを入力した後は、Enterキーで実行します(これから下の説明でも同じ)。

「cd」とは

ちなみに、「cd」というのは、チェンジ・ディレクトリの略です。

フォルダの移動が成功していると、自分の指定したフォルダの階層(C:文字列)が表示されていると思います。

次に、下記のコマンドを実行すると、package.jsonファイルが生成されると思います。

npm init -y

このファイルは、触らなくてOKなので、次に進みましょう！

Gulpのインストール

ここで、下記のコマンドからGulpをインストールします。

npm i -D gulp

インストールが完了すると、「node_modules」というフォルダが生成されていると思います。

これで、Gulpが使える状態になりました！

Scssをコンパイルできるように設定

ここまで準備できたら、もう少しですよ！

まずは、Scssをコンパイルするために下記の2つをインストールします。

・Gulp本体
・glup-sass(コンパイルするプラグイン)

npm i -D gulp gulp-sass

mqpackerをインストール

次にコンパイルした後に、今回の目的であるメディアクエリをまとめるために、下記の4つをインストールします。

一応、そのほかにも便利なものを入れています。

PostCSS(cssをコンパイルできる)
mqpacker(メディアクエリをまとめるプラグイン)
autoprefixer（ベンダープレフィックスを自動付与）
declaration-sorter（プロパティの順序を揃える）

npm i -D css-mqpacker gulp-postcss  autoprefixer css-declaration-sorter

gulpfile.jsを作成する

フォルダの直下に、「gulpfile.js」というファイルを作成します。

作成した「gulpfile.js」に下記コードをコピペして下さい。

// gulpプラグインの読み込み
var gulp = require("gulp");
var sass = require("gulp-sass");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var mqpacker = require("css-mqpacker");
var cssdeclsort = require("css-declaration-sorter");

// scssの監視タスクを作成する
gulp.task("default", function () {
  // scssファイルを監視
  return gulp.watch("sass/*.scss", function () {
    // scssの更新があった場合の処理
    // scssファイルを取得
    return (
      gulp
        .src("sass/*.scss")
        // Sassのコンパイルを実行
        .pipe(
          sass({
            outputStyle: "compressed",
          })
            // Sassのコンパイルエラーを表示
            // (これがないと自動的に止まってしまう)
            .on("error", sass.logError)
        )
        // sassの後に指定
        .pipe(postcss([cssdeclsort({ order: "smacss" })]))
        .pipe(postcss([autoprefixer()]))
        .pipe(postcss([mqpacker()]))
        // cssフォルダー以下に保存
        .pipe(gulp.dest("css"))
    );
  });
});

.src('scss/*.scss')

scssフォルダの中にある全てのscssファイルを取得(*をstyleに変えるとstyle.scssを指定できる)。

outputStyle

アウトプットスタイルの指定。

mqpacker()

メディアクエリをまとめる

尚、sassの後にmqpackerを指定すること。

gulp.dest('css')

cssフォルダの中にアウトプットする。