フロントエンド開発必携！今から始める[Sass][Compass][Gulp]

11チャンネルグループ定期ブログマガジン
Elevens

こちらは「これから風俗大手グループで “社会人として” 新たな一歩を踏み出す未来のアナタ 」に送る定期ブログマガジンです。

 

開発者向けツールで作業効率化・品質の標準化を！

前回に引き続き、技術系のTipsを失礼いたします！WEB制作スタッフの345(みよこ)です。

今現在、WEB制作スタッフを目指していて、HTML/CSSやJavaScriptなどのフロントエンド開発を勉強中の方の中には …

Dreamweaverなんかを使わないで、手書きである程度かけるようにはなってきたけど … 開発の速度も、効率も、全然上がらない！

なんて方も多いのではないでしょうか？

また「制作の度に似たようなコードを一からコーディングしてしまって … もっと効率的にするにはどうしたらいいの？」と言うような声も、新米WEBデザイナーさん(私のコト)の良くある悩みの種だと思います。

よくわかります。コーディングをしていて、各言語の情報はWEB上に山ほどありますが どんな風に仕事を進めたら効率的なのか？とか制作のプロはどんなふうにコーディングしているのか？なんてことは、以外と誰も触れていない情報ですもんね。

普段の業務でそういった制作に携わっているヒトは先輩に教えてもらったりできますが、現在独学で勉強中 … という方はなかなか覚える機会がないのがリアルなトコロだと思います。

そこで！

今回はフロントエンド開発最前線。当社WEB制作スタッフが普段の作業で使っている様々なお役立ちツールを紹介して「プロのコーディングの現場ではこんな風に作業が進められているんだ！」というのを皆さまにご紹介いたします！

この記事を書いてるヒト


名前：345(みよこ)
所属：本社WEB制作スタッフ
好きなことば：「動いてる間は触るな」

参考：　フロントエンド開発
一昔前まで「Webデザイナー」が担当していたWEB制作の分野。業界が成熟し業務を細分化していく動きが進んだことにより、画像編集ソフトなどでサイトの見た目をデザインする「デザイナー」／HTML・CSS・JavaScriptのコーディングで実装を行う「フロントエンド・エンジニア」／DB連携やサーバサイドプログラムの実装を行う「サーバサイド・エンジニア」／サーバー自体の実装・保守運用を行う「インフラ・エンジニア」などの肩書が生まれた。

 

CSSの手書きって「正直しんどい」

HTMLやCSSはプログラミング言語ではないため、その言語内で「演算」や「変数」などのプログラミング言語なら当然持っている機能が使えません。

その分「簡単な言語でわかりやすい」とも言えますが、「適当に書けてしまう分、どんどん冗長になってしまう・後から変更したりするのが大変・コードを再利用したりしづらい」のが欠点でもあります。

t-color--primary {
    color: #234560;
}
t-bg-color--primary {
    background-color: #234560;
}
↑のようにサイト内で何度も使うカラーコードを
同じ変数にまとめられたら楽なのに...

 

CSSメタ言語「Sass」とその拡張フレームワーク「Compass」の導入

そこで今回は Sass という「CSSを拡張してプログラミングちっくに書けるようになる」CSSメタ言語を紹介したいと思います。

Sass が何なのか？と言えば … CSSの上位互換みたいなもんだと思ってください。実際は「プログラミングっぽく書いたCSSコードを一度コンパイルして、生CSSファイルを吐き出す」ためのCSSプリプロセッサです。(※メタ言語,プリプロセッサ＝ある言語を作成する為の言語)

とりあえず使ってみた方が早い！ということで、以下より早速インストールしていきます！Sass の詳細について気になる方はWEBで調べてみてください。ちなみに、OSは【Windows】を想定しています。

1. まずは Ruby をインストール

Sass はRubyというプログラミング言語をインストールしないと動きません。まずはRuby公式サイトから、RubyをDL→インストールします。

インストール時「Rubyの実行ファイルへ環境変数PATHを設定する」にチェックを入れておきます。後でコマンドプロンプトでどこからでも実行できるようにしておく為です。

インストールが終了したら[Win+R]→[cmd.exe]でコマンドプロンプトを出して、以下のコードを入力。バージョン情報が返ってきたら無事インストール完了です。

gem --version

2. 続いて Sass をインストール

コマンドプロンプトから以下コードを入力して Sass をインストールします。

gem install Sass -v 3.4.19

Ruby の　Sass バージョン問題
2016-01-29現在、Ruby内の Sassバージョン[3.4.20]および[3.4.21]でこの後の作業でエラーが出てしまいました。暫くは上記[3.4.19]の利用をオススメします。

インストール中に良く使う機能をさらっと覚えてしまいます！

  1. セレクタの入れ子：　[ネスト] [&]

    セレクターの入れ子機能

    .l-container {
    background-color: red;
    .t-bg--orange {
        background-color: orange;
    }
}

/* ↓コンパイル後↓ */

.l-container {
  background-color: red;
}
.l-container .t-bg--orange {
  background-color: orange;
}

    &を使った「親セレクタの参照」

    a.btn {
    background-color: pink;
    &:hover{
        background-color: orange;
    }
}

    /* ↓コンパイル後↓ */

a.btn {
    background-color: pink;
}
a.btn:hover {
    background-color: orange;
}
  2. セレクタの継承：　[@extend]

    あるセレクタにあてたCSSを、そっくりそのまま別のセレクタに継承できる機能です。

    .c-btn {
    background-color: black;
    color: white;
}

.c-btn--bold {
    @extend .c-btn;   /* ".c-btn"のCSSを適用 */
    font-weight: bold; 
}
  3. 変数：　[$]

    プログラムには必須の「変数」は「＄」で以下のように記述します。また、四則演算もOK。

    $primary-color: #1B95E0;
$container-width: 640px;

.l-container {
    background-color: $primary-color;
    width: $container-width + 300px;            
}
  4. Mixin：　[@mixin,@include]

    こちらはプログラムでいうところの「関数」「function」に近い機能です。テンプレート名を命名、プロパティと値をセットして、Sass内のどこでも呼び出すことができます。

    @mixin radius{
    border-radius: 5px;
}
.c-btn--blue {
    @include radius;
    background-color: blue;
}

/* 引数ありパターン */
@mixin border($color){
    border: 1px solid $color;
}
.border--gray {
    @include border(#ccc);
}
  5. 他CSS/Sassのインポート：　[@import]

    普通、CSSの[@import]はパフォーマンスの問題から非推奨と言われていますが、Sassではパフォーマンスを気にせずじゃんじゃん使えます。一般的に、コンパイル前の複数のSassファイルをを分割読み込みして一つのメインSassに落とし込み、最後にCSSへコンパイル。そのCSSをHTMLの head で読む … みたいな使われ方をしています。

    通常のCSSの読み込みは @import “base.css”;みたいな感じですが、読み込みファイルがSassの場合は_ (アンダースコア)を利用します。

    @import "_module.scss";

/* アンダースコアと拡張子は省略できます */
@import "module";

    この場合、呼び出されたSassファイルのことをpartialと呼び、記述された箇所にそっくりそのまま【呼び出すけれどコンパイルは未だしていない状態のSass】が書き出されることになります。

    「CSSにコンパイルして読んでくれたらいいのに … 」って思うかもしれませんが、partialで呼び出すことにより 複数の分割されたSassファイルを最終的に一つのSassにまとめて一気にコンパイルすることが出来る ので、作業分担をする前提だとこちらの方が管理が楽ちんなのです。

3. ついでに Compass もインストール

Compass とは、Sassをもっと使いやすくするためのフレームワークです。CUI(シェル)を使った操作になってしまうのですが、このCompassを経由してSassを記述することで作業がぐっと楽チンになるので覚えておいた方が良いです！

黒い画面ヤダ！
一応GUIアプリ経由でも Sass を使うことは使えます。(codekit,scout等)
ただ、フロントエンド開発ではシェル(Windowsのコマンドプロンプト・Macのターミナル)を使った利用が一般的なのでウチでもCompassを採用しています。
是非この機会に、黒い画面と慣れ親しんでおくことをオススメします。

コマンドプロンプトのTIPS

  • 通称：「シェル」「ターミナル(mac,linux)」「DOS窓(windows)」
  • 呼び出し：Win+R > cmd.exe (windows)
  • コピペとか範囲選択：[Alt+Space] > [E]
  • 作動中のスクリプトを停止：[Ctrl+C]
gem update --system

一度上記コードで Ruby をアップデートして …

gem install compass

Compass をインストール！！インストール中に、Compassでよく使うコマンドを覚えます。

用途 書きかた 動作
プロジェクト新規作成 compass create #プロジェクト名 プロジェクト名という作業フォルダを作りCompassの構成ファイルを入れる
監視→自動コンパイル compass watch ディレクトリ内のSassを監視し、変更されたらCSSにコンパイルする。

インストールが完了したら早速、コマンドプロンプトで好きなディレクトリへ移動し、以下コマンドでプロジェクトフォルダを作成してみます。

compass create demo

※demo というフォルダ配下に
Compassの基本ファイル群が生成されます

プロジェクトを作成したら、早速sassフォルダ内の.scssファイルの先頭に以下のコードを記述し Compass フレームワークを呼び出しましょう。

@import "compass";

[公式リファレンス](http://compass-style.org/reference/compass/)を参照し、適当なモジュールを@includeしてみる。

そしたらコマンドプロンプトから [ compass watch ] をコマンド。自動コンパイルされ、生成されたCSSにはベンダープレフィックス等が自動で付与されているのが解るかと思います。便利！！

特にCSS3系はブラウザ対応状況の変化が激しいので、compassモジュールを積極的に使うと良いですね。

この他にも複数の画像を一括でスプライト背景画像として出力→CSS上で位置まで自動算出なんて機能など、ここでは紹介しきれない様々な便利機能がCompassには備わっているので、ぜひ調べてみてください。

キャッシュを無効化
Compass でプロジェクトを作成すると、自動的にキャッシュファイルが保存されまくってしまいます。ファイル共有とかバージョン管理の時に邪魔くさいので、作成されたプロジェクトディレクトリの中のconfig.rbの末尾に

cache = false

を書き加えておくと無効化できます。お好みで。

5. ここまででアナタもフロントエンド中級者！

これでようやく、コマンドプロンプトで作業ディレクトリまで移動してcompass watchを打てば「Sassを編集しながらリアルタイムにCSSを生成できる」環境が整いました！

ここまで来て、適当に弄ってみれば Sass+Compassを用いた開発がいかに効率的かつスタイリッシュ(死語)か、アナタも体感してくれているのではないでしょうか？

それでは良いCSSライフを！お疲れさまでした！

…

…

と言いたいトコロですが！！

今回はより高みを目指すのアナタのために！より作業を効率化し、チームでの出力を標準化するために、もう一歩踏み込んで「タスクランナー」を使った作業の登録＋自動化までやっちゃいたいと思います！

 

「Gulp」を使ってタスクの自動化を図ろう

さて、「Sass＋Compass」でCSS開発をずっと効率的にできるようになりました。

しかし、個人で作業をしている分にはこれでまったく問題ないのですが、チームで作業をしていると「コンパイル方式をプロジェクト毎にカスタムしたい」とか「CSS以外の作業も自動化してチーム内でその機能を共有したい」とか色々要望が出てきます。

そこで最後に、今巷で話題になっている「タスクランナー」と呼ばれるアプリケーションGulpをインストールして、Sass+Compassのコンパイルタスクを自動化しちゃいたいと思います。

タスクランナーとは
Sassのコンパイルをはじめとした様々なフロントエンド開発に関わる処理を登録＋自動化できるCUIアプリケーションです。

1. node.jsのインストール

Gulp はnode.jsで動くアプリケーションなので、まずは公式サイトから本体をDL→インストールします。

2. 環境変数の設定

node.jsのインストーラはコマンドプロンプトにパスを通してくれません(不親切ですね←)。

[コンピュータのプロパティ] > [システムの詳細設定] > [詳細設定] > [環境変数] と進んで、システム環境変数とユーザ環境変数に以下の２つを登録します。

  • nodejsのインストールされたフォルダ
おそらくこの辺　→　C:\Program Files\nodejs
  • nodejsのパッケージ管理ソフトnpmのインストールされたフォルダ
おそらくこの辺　→　%USERPROFILE%\AppData\Roaming\npm

環境変数を設定しなおしたら、コマンドプロンプトを再起動して以下バージョンチェックコマンドが全て通るか確認します。

node -v
npm -v
gulp -v

3. node.js の構成ファイル群をプロジェクトフォルダにぶっこむ

ここからは各プロジェクトフォルダ毎に、使用するファイルをインストールする形になります。コマンドプロンプトのcdコマンドで、Compassで作成したプロジェクトフォルダに移動します。

npm init

上記コマンドでpackage.jsonを生成(引数は全てEnterでOK)します。これは「このプロジェクトフォルダで使用する様々なパッケージライブラリの管理リスト」みたいなものです。次に …

npm install --save-dev gulp

でやっとこGulpのインストール完了です。仕上げに以下コマンドを打って「Gulpが用意しているCompass用のパッケージライブラリ」もインストールしておきます

npm install --save-dev gulp-compass

Gulpのオススメパッケージ
上記の他にも便利なパッケージがたくさん用意されています。ここではその一部をご紹介。

  • gulp-cssmin : CSSの圧縮
  • gulp-rename　：　ファイルのリネームを行う
  • gulp-concat　：　複数のファイルを1つに結合する
  • gulp-imagemin : 画像の圧縮を行う
  • gulp-image-resize : 画像のリサイズ

下記のように欲しいパッケージ名をつらつらと書いていけば、まとめてインストールできます。

npm install --save-dev gulp-cssmin gulp-rename gulp-imagemin

3. Gulpを動作させる為のJavaScriptを記述する

さて、ここまで来たらいよいよ Gulp を動作させる為の命令を JavaScript で書いていきます。

プロジェクトフォルダ内にgulpfile.jsを作成し、中に以下の様な記述をしてください。(※書きかたは各Gulpパッケージの公開元で詳しく解説されています)

// ライブラリ呼び出し
    var gulp = require('gulp');
    var compass = require('gulp-compass');

// default - [gulp]コマンド時に実行されるfunctionを指定
    gulp.task('default', function(){
        gulp.run('watch');
    });
 
// compass - compass経由でコンパイル,[gulp compass]コマンドで実行
    gulp.task('compass', function(){
        gulp.src('sass/**/*.scss').pipe(compass({
            config_file: 'config.rb',
            comments: false,
            css: 'stylesheets/',
            sass: 'sass/'
        }));
    });
     
// watch - 上記compassタスクを自動化(ファイル変更がトリガ),[gulp watch]コマンドで実行
    gulp.task('watch', function(){
        gulp.watch('sass/**/*.scss', function(event) {
            gulp.run('compass');
        });
    });

4. [gulpfile.js]に書いたfunctionを実行して、実際にGulpを走らせる

それでは、コマンドプロンプトでプロジェクトフォルダに移動し、早速 Gulp タスクを走らせてみます。以下のコマンドを入力します。

gulp watch

「watchタスク」が作動し、sassフォルダ内のscssファイルを修正・保存したタイミングで、stylesheetsフォルダのcssが自動コンパイルされていれば成功です！恐らく以下の様な画面になると思います。

[15:23:58] Starting 'watch'...
[15:23:58] Finished 'watch' after 23 ms
[15:23:58] Finished 'default' after 26 ms
[15:24:01] Starting 'compass'...
[15:24:01] Finished 'compass' after 22 ms
    write stylesheets/style.css

ここまでくれば成功です！お疲れさまでした!!

 

導入してみて …

今回ここまででざっと以下のようなことをお勉強してまいりました。

  1. CSSファイルを手書きでなく、プリプロセッサSassで書けるようになり、CSS内で変数やセレクタのネスト、テンプレート(mixin/include)機能が使えるようになった。

  2. SassをCompassというフレームワーク経由で操作することで、フレームワークが提供するSass記述の為の補助機能を使えるようになった。

  3. タスクランナーGulpを導入し、タスクランナー経由でCompassを動作させることで、「フレームワークの動かし方」や「Sass以外のファイルの処理」についても自動化・チーム内で標準化できるようになった

WEBの知識は本当に入れ替わりが早いので、数年後のフロントエンド開発がどうなっているかは分かりません。しかし、全ての知識・技術には歴史があり、過去の文脈を受けて進化し続けています。

一度このような「フロントエンド開発の今」をしっかりと取り入れておけば、後あときっと役に立つはずです。

次回は「git」を使ったバージョン管理について書きたいと思います。それでは！

社員採用へのご応募・お問い合わせ

お電話の受付・メールの返信は、店舗スタッフではなく人事部の女性スタッフが対応しますので、給与面や待遇など些細なことでもお気軽にご相談ください。

メールする

電話する

TEL：0120-879-490（受付時間：平日10時～17時 ※通話無料）

仕事内容をもっと見てみる

風俗を「ビジネス」と考える、11CHANNEL GROUP の企業ポリシー

当グループ「11チャンネルグループ」は、都内に自社ビル11棟を所有し、安定経営・多角化展開中です。 風俗ビジネスにおいても、30年の営業実績を誇り、他グループには負けない確固たる地位を確立しております。 世間的に不真面目にみられがちな「風俗」という業界ですが、ビジネスとして真面目に経営することを信念とし、 反社会的勢力とも一切関係をもたず、常に一線を画しております。

  • 〒160-0021 東京都新宿区歌舞伎町1-13-4
  • TEL 0120-879-490
プライバシーポリシー 求人へのお問い合わせ サイトマップ
当サイト上のデータおよび画像を許可なく転用・複製して利用することを禁じます。 © 2018 高収入男性風俗求人の11CHANNEL 求人サイト