初心者でも大丈夫!怖くない!Sassの開発環境構築

2019年8月23日

1. はじめに

初めまして!デザイナーのツネカワです!
ブログ初投稿は「【デザイナー活動報告】新卒デザイナー3世代全員で勉強会を開催しました」で紹介されている、ぐるみ勉強会で行った「Sass開発環境構築」についてしたためようと思います!

デザイナーなのに開発環境構築なんてやるのか! みたいなツッコミもあるでしょう。しかし、Webデザイナーの職域が広がっている現在、こういったスキルがあると色々便利なこともあります。この記事を読んでいただけると、何かしら得られるものがあるかもしれません!

2. Sassで開発したいですよね!?

弊社のWeb開発にはSassが導入されており、デザイナーのコーディング業務においては当たり前のように利用されています。

僕が入社した頃はすでにSassが導入されていたので、Sass歴も3年を超えたことになります。今となってはCSSを直接触るなんて考えたくもないくらい、Sassでの開発は快適です。

そんなとっても便利なSassですが、利用するには色々と環境を整えなければいけません。

デザイナーの方で「Sassでのweb開発をしたいけど、どうすればいいのか分からない。」や「Sassの開発環境を構築してみようとしたけど、途中で挫折した。」という方もいらっしゃると思います。
非エンジニアにとって開発環境の構築はハードルが高いものだと思います。

実際に私も最初に開発環境を構築した時は分からないことだらけで、エンジニアの方にたくさんお世話になりました。

ですが、弊社では基本的にHTML/CSSのコーディング業務はデザイナーが担っているためデザイナーでSassの開発環境をある程度、構築・保守運用していける状態が望まれます。

そのため、フロントエンド領域のスキルが高いエンジニアの元で何人かのデザイナーが環境構築について勉強を行い、一定以上のノウハウを蓄積してきました!

そんな非エンジニアが抱える苦労を踏まえて今回は、弊社のデザイナーが実際に利用している開発環境の1つを元に、Sass開発環境の構築手順をできるだけ噛み砕いて紹介していきます!

3. 今回の構築する内容を説明します!

今回は以下の機能を実装していきます!
① Sassのコンパイル
② CSSへのベンダープレフィックス付与
③ CSSのミニファイ

それぞれどういった内容か確認していきます。

3.1 Sassのコンパイルとは

「Sassのコンパイル」とはSassをCSSに変換することです。
Sassのままではブラウザはスタイルシートとして認識することができないため、Sassを利用するためには必ず必要な手順になります。

以下の画像の様にSassの記述をCSSの記述に変換します!

3.2 CSSへのベンダープレフィックス付与とは

CSS3で採用される予定の機能は、各ブラウザで先行実装されることがあります。
それらの機能を動作させるために必要な接頭辞(プレフィックス)が「ベンダープレフィックス」です。
現在はあまり必要な場面が減ってきましたが、開発時にそれらを手動で付与することや、ベンダープレフィックスが不要になった際のコード保守にも労力が必要になってしまいます。
そこで、ベンダープレフィックス付与を自動化することで、それらの労力を削減することが目的です。

3.3 CSSのミニファイとは

「CSSのミニファイ」とはSass/CSSのコーディング時に意図的に記述する改行やインデントを全て削除することです。
改行やインデントは可読性を向上させるために必要なものですが、ブラウザが認識する際には不要なものなので、少しでもファイルを小さくすることで読み込み速度を向上させることが目的です。
Sassから生成されたCSSをミニファイするだけなので、Sassファイル自体に影響はなく、運用への支障はありません!

4. Sass開発環境を実際に構築していきます!

作業を始める前に事前の準備を行います!
以下のリンクから「gulp-study.zip」をダウンロードして任意の場所に解凍してください!
gulp-study

それでは実際の作業を始めましょう!

4.1 nvmのインストール

今回はnode Sassを使った開発環境を構築するので、nodeをインストールする必要があります。
nodeは基本的に1つのバージョンしかマシンにインストールできませんできません。しかし、プロジェクトごとに使用しているバージョンが異なることがあるため、nodeのバージョンを管理を行う必要があります!
nodeのバージョン管理ツールは様々な種類がありますが、今回は「nvm」を使用します!

コマンドラインツールで以下のコマンドを実行してください。

nvmのインストール
$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

インストールが完了した後にhomeディレクトリの.bash_profileを確認します。
.bash_profileは不可視ファイルなので、以下の様に確認してください。

不可視ファイル確認コマンド
$ ls -a

以下の記述がされていれば、okです!

.bash_profileの内容

[[ -s ~/.nvm/nvm.sh ]] && . ~/.nvm/nvm.sh
nvm use default
npm_dir=${NVM_PATH}_modules
export NODE_PATH=$npm_dir

見当たらなかった場合は作成してください!

4.2 node 10.15.2をインストール

①10.15.2というバージョンのnodeをインストールします!(2019/05/21時点の最新安定版)
$ nvm install 10.15.2

②nodeのインストールが完了後、念のためちゃんとインストールできているか確認を行います!
$ nvm list

4.3 gulpをインストールしよう!

次に「gulp」をインストールします!!
gulpを利用することで様々なタスクを管理し、gulpコマンドでタスクを実行することができます。

①npmを利用する準備としてpackage.jsonを用意します!
$ npm init -y

②gulpをインストールしましょう!
gulp cliとgulp 3.9.1をインストールしてください!
gulpは2018年12月に4系がリリースされましたが、3系までとは記述方法が変わっています。
弊社では3.9.1を利用しているため、3系の記述方法で紹介します。

$npm install gulp-cli -g
$npm install -D gulp@3.9.1

③gulpのインストールができたら、こちらも念のためにインストールできているか確認をしましょう!
$gulp -v

4.4 Sassをcssに変換しよう!

それではSassをCSSにコンパイルしましょう!

①Sassのコンパイルに必要な「gulp-sass」をnpmを利用してインストールします!
$npm install -D gulp-sass

②gulpfile.jsに以下のソースを記述しましょう!

//npmでインストールしたライブラリを読み込む
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('build',function(){
    // ここにgulpを叩いた時に実行したい処理を書く

    return gulp.src('sass/*.scss') //対象のSassファイルを指定する
        .pipe(sass()) //Sassファイルコンパイルする
        .pipe(gulp.dest('css')); //コンパイルして生成されたcssファイルをcssディレクトリに吐き出す
});

③コマンドラインツールでgulpタスクを実行しよう!

コマンドラインツールでgulp-studyに移動しbuildタスクを実行してみましょう!
$gulp build

buildタスクが無事実行されるとgulp-study直下にcssディレクトリが生成され、その中にtest.cssが生成されているはずです!
確認できれば、SassをCSSコンパイルする環境の完成です!

4.5 コンパイルの際にベンダープレフィックス付与しよう!

次にベンダープレフィックスを自動で付与する機能を実装します!

①postcssをインストールする
$npm install -D gulp-postcss

②autoprefixerをインストールする
$npm install -D autoprefixer

③gulpfile.jsを修正する
ベンダープレフィックスを自動で付与する様にgulpタスクを以下の内容に変更してください!

//npmでインストールしたライブラリを読み込む
var gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');

gulp.task('build',function(){
    // ここにgulpを叩いた時に実行したい処理を書く

    var plugins = [
        autoprefixer({browsers: ['last 1 version','ie >= 9','Android >= 4.0']}) //対象のブラウザバージョンを指定する
    ];

    return gulp.src('sass/*.scss') //対象のSassファイルを指定する
        .pipe(sass()) //Sassファイルコンパイルする
        .pipe(postcss(plugins)) //autoprefixerを起動してベンダープレフィックスをつける
        .pipe(gulp.dest('css')); //コンパイルして生成されたcssファイルをcssディレクトリに吐き出す
});

「autoprefixer」について少しだけ解説します。
「autoprefixer」には様々なオプションが存在しています。
今回は以下の部分で、「IEは9以上、Androidは4.0以上、その他は最新バージョンで必要なベンダープレフィックスを付与する」という内容のオプションを設定しています。

 var plugins = [
    autoprefixer({browsers: ['last 1 version','ie >= 9','Android >= 4.0']}) //対象のブラウザバージョンを指定する
 ];

公式のGitHubでオプションの説明を行なっているので、さらに詳しく知りたい方はご覧ください!
https://github.com/postcss/autoprefixer#options

④コマンドラインツールでgulpタスクを実行する
コマンドラインツールでgulp-studyに移動しbuildタスクを実行してみましょう!

buildタスクが無事実行されると、生成されたCSSにベンダープレフィックスが付与されています!ご確認ください!

4.6 コンパイルの際にCSSをミニファイしよう!

CSSのミニファイは簡単です!

①gulpfile.jsを修正する
gulpfile.jspでSassファイルをコンパイルしている部分の設定を変更するだけです!

//npmでインストールしたライブラリを読み込む
var gulp = require('gulp');
var sass = require('gulp-sass');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');

gulp.task('build',function(){
    // ここにgulpを叩いた時に実行したい処理を書く

    var plugins = [
        autoprefixer({browsers: ['last 1 version','ie >= 9','Android >= 4.0']}) //対象のブラウザバージョンを指定する
    ];

    return gulp.src('sass/*.scss') //対象のSassファイルを指定する
        .pipe(sass({outputStyle: 'compressed'})) //Sassファイルコンパイルすてミニファイする
        .pipe(postcss(plugins)) //autoprefixerを起動してベンダープレフィックスをつける
        .pipe(gulp.dest('css')); //コンパイルして生成されたcssファイルをcssディレクトリに吐き出す
});

②コマンドラインツールでgulpタスクを実行する

buildタスクが無事実行されると、生成されたCSSが1行にまとまっています!
ご確認ください!

以上で今回の開発環境構築は終了です!

5 最後に

最後までお付き合いいただきありがとうございました!
今回は簡単なSass開発環境を構築してみました!
ハンズオン形式を前提につくった資料のため、もしかしたら至らない点などあったかもしれませんが、ちゃんとひとつひとつ抑えていけば実際に動くものを作ることができるはずです!

フロントエンドに苦手意識を持っているデザイナーの方が、この記事で少しでも克服していただければ幸いです!