5/22 社内ビアバッシュ公開

1. Gruntで
フロントの生産性UP
品質管理課 後藤 和良

2. 近況

3. 前職最後の仕事が世に出ました。
4/8にOSS版「Aipo8」リリース

4. • 1ゲーム10分程度で終わる手軽さ。
• プロトーナメントがあるほどの人気。
• ほとんどのプラットフォーム版あり。
HearthStoneにハマる。

5. Gruntとは

6. 何でも自動化してくれるイノシシ
• node.jsで動くタスクランナー（自動化プログラム）
• ローカルで動作し、プラグイン次第で様々な処理を行う

7. なぜGruntを使うのか

8. フロント開発の
タスクが増えたから

9. しかもそれぞれ職能が違う。
フロントデザイン
（設計）
HTML/CSS
JavaScript
リッチ表現
パフォーマンス改善 デザインルール策定 etc...

10. 生産性高めないと
死ぬ！

11. まずは簡単・ポピュラーで
効果の分かりやすいものから

12. SASS

13. CSSコーディングの生産性UP
Sass記法をGruntがCSSにコンパイル。
Sass
<3
<3
CSS

14. CSS
.hoge {
∼∼∼
}
.hoge p {
∼∼∼
}
.hoge .head {
∼∼∼
}
.hoge .head a {
∼∼∼
}
.hoge .title a {
∼∼∼
}
クラス「hoge」内の
スタイルの定義

15. SASSのネスト記法
.hoge {
∼∼∼
p {∼∼∼}
.head {
∼∼∼
a {∼∼∼}
}
.title a {∼∼∼}
}

16. SASSのネスト記法
.hoge {
∼∼∼
p {∼∼∼}
.head {
∼∼∼
a {∼∼∼}
}
.title a {∼∼∼}
}
親元のクラスに
ネストして記述できる。
!
記述量が減る。

17. SASSのネスト記法
.hoge-hoge {
∼∼∼
p {∼∼∼}
.head {
∼∼∼
a {∼∼∼}
}
.title a {∼∼∼}
}
クラス名を変えても
一箇所の変更で済む。

18. 変数が使える
$main-color: #f00;
$sub-color: #0f0;
$font-size: 12px;
!
.hoge {
color: $main-color;
}
.poge {
color: $sub-color;
font-size: $font-size;
}
変数を設定しておいて…
値を使いまわせる。

19. mixin
@mixin circle {
border-radius: 50%;
width: 100px;
}
!
.hoge {
@include circle;
background: #f00;
}
関数のように
スタイルを定義して…
内容を使いまわせる。

20. mixinに引数
@mixin circle($size) {
border-radius: 50%;
width: $size;
height: $size;
}
!
.hoge {
@include circle(50px);
background: #f00;
}
引数の設定もできる。

21. SASS以外のメタ言語
HAML
(HTML)
Less
(CSS)
CoffeeScript
(JavaScript)
TypeScript
(JavaScript)

22. パフォーマンス改善

23. 圧縮・軽量化で自動改善
Code Code
<3
<3
画像
画像

24. コードの圧縮
.hoge {
∼∼∼
}
.hoge p {
∼∼∼
}
.hoge .head {
∼∼∼
}
.hoge .head a {
∼∼∼
}
.hoge .title a {
∼∼∼
}
.hoge {∼∼∼}.hoge p {∼
∼∼}.hoge .head {∼∼
∼}.hoge .head a {∼∼∼}
.hoge .title a {∼∼∼}

25. 画像の圧縮・最適化
500KB 250KB

26. CSSスプライト自動生成
複数の画像を1つに結合して
画像サイズとHTTPリクエスト数を削減する
職人芸的テクニック

27. コンパイルで機械的に
出力しているメリット

28. フォーマットルールの制定、
コード整理も自動化できる。
コーダーはルールを覚える必要もない。

29. フロントやる人は
この先生きのるため

30. Gruntオススメします。

31. Gruntの同種
できることはほぼ変わらない。
肌に合うのを使えばOK
Gulp Brunch

32. ご静聴
ありがとうございました。