こんにちわ、デザイナーのナコです。
これまでのらりくらりとCSS2コーディングをしていた私ですが
育児休業という３年間のバカンスから職場復帰すると
時代が進んでいてびっくりしました。
(浦島太郎状態なイラスト) 
タスクランナーやCSS拡張、テンプレートエンジンが普及していて
実案件でもちらほらと・・・
片仮名５文字以上になると覚えられない私には
新用語の羅列が呪文の様に聞こえます。
やべぇ
(パルシのルシがパージ状態のイラスト)
フロントエンジニアさんが何を言ってるか解らない・・・
そんな日々とおさらばする為、今回は最近良く見かけるフロントツール＆技術について
まとめてみました。
タスクランナー
タスクランナーとは、画像のファイルサイズ縮小やCSSの結合、min化などを自動で行ってくれる便利な代物です。
少し前まではRubyで動くものが主流だったのですが最近はNode.jsを使ったものが人気の様です。
今回はNode.jsを使った代表的な2つを紹介します。
読み方は【ガルブ】
私は社内で最初に【グルップ】と呼んでいた為
恥ずかしくて今更訂正して公言出来ない感じになっています。
やだ恥ずかしい！
package.jsonでバージョンやプロジェクト名等大枠の設定をして、
gulpfile.jsでどの処理を実行するか決めます。
読み方は【グラント】
すっと読める！いいねいいね。
Glupと同じ様にpackage.jsonでバージョンやプロジェクト名等大枠の設定をして、
Gruntfile.jsでどの処理を実行するか決めます。
CSS拡張メタ言語
CSSをプログラムライクに書けます。
IF文もループも変数だって使えてCSSを書くのが楽しくなります。
コンパイルが必要になるのでコンパイラーをインストールしないとダメです。
代表的なものにSCSS(Sass)とLESSがあります。
CSSフレームワーク
グリッドやボタンデザイン、プラグイン等WEBサイトの枠組みをまるっと提供してくれます。
読み方は【ブートストラップ】
Twitter社が提供しているCSSフレームワークです。
簡単にレスポンシブサイトが出来ます。
読み方は【ウエブスターターキット】
なんというダイレクトなネーミング。
Googleが提供するフレームワークです。
上にあるタスクランナーGlupを使います。
読み方は【コンパス】
Sassを拡張してくれるCSSフレームワークです。
よく使う定義(プログラムで言うライブラリ的なもの)を最初から用意してくれています。
CSSスプライトというサイトで使う画像を一枚で管理し表示速度を向上させる処理を
変数を利用し自動的に座標を書き出してくれます。
その他謎の単語達
npm
読み方は【エヌピーエム】
Node.js用パッケージ管理コマンド
読み方は【バウワー】
ブラウザーでは無いですバウワー
Twitter社が提供しているフロントエンド用パッケージマネージャーです
まとめ
今回はデザイナーさんも触れる機会が多であろうものをピックアップしました。
上記ツールや技術はサイトを作成する時にスピードアップや効率化を図る為に用意されています。 実案件で新しい事にチャレンジするのは時間も無く、不安感も多いですが
納期に余裕がある場合は少しづつでも取り入れていくと、今後作業効率が良くなると思います。
今回のおさらい すぐ使えるしったか例文
「すみませんコンパイルし忘れてました」
「タスクランナー何使ってます？」
「軽めのブートストラップ系フレームワークってあります？」
※参考 JSON Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 Gulp.js入門 – コーディングを10倍速くする環境を作る方法まとめ COMPASSで簡単CSSスプライト