2. イマドキのコーダー環境構築
2016
CSS Nite LP 47 Coder's High 2016
2016.09.24

3. SublimeText 3!!
森田 壮
@sou_lab
Gaji-Labo Inc.
Sou-Lab.

4. 「4年前の自分に届けたい。
イマドキのコーディングは
こうなっているんです」
今回のテーマ

6. から、ちょっと先の

7. 2年半前の私

8. 2014.2.15 CSS Nite LP, Disk 32「Sass」

9. 時代は変わった

10. Rubyが必要でもなくなった

11. node-sass
https://github.com/sass/node-sass

12. $ compass w
これだけおぼえておけばオケ

13. もう、オケではない

14. Compassの終焉

15. • CSSスプライト
• ベンダープリフィックス
• 便利Mixin
• 便利関数
Compass

16. • CSSスプライト あまり使わなくなってきた
• ベンダープリフィックス Autoprefixer
• 便利Mixin 依存が強い
• 便利関数 依存が強い
• 更新が2014年8月からない
• Ruby環境依存
Compassの終焉

17. • CSSスプライト あまり使わなくなってきた
• ベンダープリフィックス Autoprefixer
• 便利Mixin 依存が強い
• 便利関数 依存が強い
• 更新が2014年8月からない
• Ruby環境依存
Compassの終焉
Compassやめたい...

18. 一方、Sassは…

19. CSSプリプロセッサの
デファクトスタンダードに

20. The State of Front-End Tooling ‒ 2015
https://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results

21. The State of Front-End Tooling ‒ 2015
https://ashleynolan.co.uk/blog/frontend-tooling-survey-2015-results
Preprocessor Number of Votes Percentage
Sass 1297 63.95%
Less 308 15.19%
Stylus 76 3.75%
No Preprocessor 305 15.04%
Other 42 2.07%
• Update 12/10/2015
• 2028 responses

22. CSSプリプロセッサの
デファクトスタンダードに

23. Sassをコンパイル
する方法も変わってきた

24. Sass単体で使うことがあまりなくなった
（単体で満足しないという意味で）
$ sass . --watch --style expanded
sassコマンドは使わなくなった

25. フリーのコンパイラは、ほぼ更新されていない。
GUIコンパイラは死屍累々

26. 有償のコンパイラはメンテナンスされているが、
更新頻度は少なめ。
まだ使える！GUIコンパイラ2選！

27. その理由として

28. タスクランナー
でよくね？

29. タスクランナー

30. タスクランナー

31. Grunt からgulpへ

32. • ストリーミングで高速
• 設定ファイルが見やすく書きやすい
• Google Web Starter Kitで採用
• Gruntの開発が止まっていた
Grunt からgulpへ

33. そして、2016年

34. アジェンダ
1. Sass
2. PostCSS
3. gulp.js
4. Node.js

35. 1. Sass
2. PostCSS
3. gulp.js
4. Node.js
アジェンダ

36. Sass: Syntactically Awesome Style Sheets
http://sass-lang.com/

37. Sassの機能
• セレクタのネスト
• 変数
• 四則演算
• 関数
• Mixin、Extend
• ループ、条件分岐
• パーシャル
etc...

38. Web制作者のためのSassの教科書
https://www.amazon.co.jp/dp/B00FMLD7UC/

39. 現場で役立つ実践Sass | Adobe Creative Station
https://blogs.adobe.com/creativestation/serialization/web-sass-practice

40. Dreamweaverでも正式対応
2016年09月現在はベータ3が公開

41. Dreamweaverで覚える最新Web開発ワークフロー: Sass編
https://blogs.adobe.com/creativestation/web-dreamweaver-sass-compile-and-options

42. CSS設計にも欠かせない

43. SMACSS
https://smacss.com/

44. FLOCSS
https://github.com/hiloki/flocss

45. rscss
http://rscss.io/

46. ECSS
http://ecss.io/

47. BEMりやすい記法

48. BEM
http://bem.info/

49. MindBEMding ‒ getting your head ’round BEM syntax
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-

50. 「＆」を使ったセレクタ記法
CSS
.block {
display: block;
}
.block__element {
display: inline-block;
}
.block__element--modifier {
background-color: #f00;
}
SCSS
.block {
display: block;
&__element {
display: inline-block;
&--modifier {
background-color: #f00;
}
}
}

51. ブロック(モジュール)ごとのファイル分割

52. LibSass

53. RubySassとLibSass
Ruby製
Rubyのみで動作
C/C++製
様々な言語に対応

54. node-sass
https://github.com/sass/node-sass

55. Sass 3.5 Release Candidates
http://blog.sass-lang.com/posts/809572-sass-35-release

56. PostCSS Benchmarks
https://github.com/postcss/benchmark#preprocessors

57. PostCSS Benchmarks
https://github.com/postcss/benchmark#preprocessors

58. アジェンダ
1. Sass
2. PostCSS
3. gulp.js
4. Node.js

59. PostCSS - a tool for transforming CSS with JavaScript
http://postcss.org/

60. PostCSSって…？
• Sassの次？
• CSSプリプロセッサ？
• CSSポストプロセッサ？
• 次世代CSSが使えるもの？

61. どれも正解
（ある意味）

62. SassとPostCSSの基本機能比較
• セレクタのネスト
• 変数
• 四則演算
• 関数
• Mixin、Extend
• ループ、条件分岐
• パーシャル etc...

63. Sassに近い機能をPostCSSに
nested
simple-vars
calc
color-function等
sassy-mixins、extend
each、for、conditionals
partial-import
PostCSSプラグイン
• セレクタのネスト
• 変数
• 四則演算
• 関数
• Mixin、Extend
• ループ、条件分岐
• パーシャル

64. PostCSSプラグイン
CSSに関わる全ての処理を行うので、
プリ/ポストプロセッサーという概念はない
• セレクタのネスト
• 変数
• 四則演算
• 関数
• Mixin、Extend
• ループ、条件分岐
• パーシャル
• 一行コメント
• 画像サイズ取得
• 独自プロパティ
• 自動ベンダープリフィックス
• プロパティの並びかえ
• クラス名にハッシュ付与
• メディアクエリをまとめる
• flexboxバグ修正
• フォールバック
• コードチェック
• 画像インライン変換
• 出力コード整形
• minify（圧縮）

65. PostCSSは拡張してなんぼ

66. お好みのPostCSSレシピを

67. PostCSS.parts | A searchable catalog of PostCSS plugin
http://postcss.parts/

68. PreCSS
https://github.com/jonathantneal/precss

69. cssnext - Use tomorrow's CSS syntax, today.
http://cssnext.io/

70. PostCSS Japanese Stylesheets
https://github.com/ikkou/postcss-japanese-stylesheets

71. PostCSSの処理
お好みのプラグインを組み合わせてCSSをコンパイル

72. Sassから乗りかえ？

73. Sassでも使える
SCSSのみ対応
SassをSassにコンパイル
SassをCSSにコンパイルすることはできない

74. ポストプロセッサ的な使用法
SassでCSSにコンパイルしてから、
PostCSSでCSSをさらにコンパイル

75. Sassの前後でPostCSS
SassをSassにPostCSSしてから、SassでCSSに
コンパイルして、PostCSSでさらにコンパイル

76. で、どうやって
コンパイルするの？

77. 1. Sass
2. PostCSS
3. gulp.js
4. Node.js
アジェンダ

78. gulp.js - the streaming build system
http://gulpjs.com/

80. • CSSスプライト
• SVGスプライト
• SVG圧縮
• フォント作成
• 画像最適化（圧縮）
• 画像リサイズ
• スタイルガイド
• ファイル圧縮
• アップロード
• スクリーンショット
• 通知
• 各種言語コンパイル
• バリデート
• 構文チェック
• コード変換/置換
• 監視（ウォッチ）
• ライブリロード
• ローカルサーバー
• ファイル名変更
• ファイル結合
• ファイル分割
• ファイル/フォルダ削除

81. gulpの使い方

82. 設定はJavaScriptで

83. gulpfile.js

84. gulpfileの書き方
gulpfile.js
var gulp = require('gulp');
gulp.task('default', function() {
// place code for your default task here
});
タスク名
処理を書く
パッケージの読み込み

85. gulpfileの書き方
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css'));
});
タスク名
処理を書く
.pipeでつなぐ
パッケージの読み込み

86. gulpfileの書き方
gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css'));
});

87. gulpfileの書き方
gulpfile.coffee
gulp = require('gulp')
sass = require('gulp-sass')
sourcemaps = require('gulp-sourcemaps')
gulp.task 'sass', ->
gulp.src('./sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css'))

88. gulpfileの書き方
gulpfile.babel.js
import gulp from 'gulp';
import sass from 'gulp-sass';
import sourcemaps from 'gulp-sourcemaps';
gulp.task('sass', () => {
return gulp.src('./sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css'));
});

89. 大切なことはすべてREADME.mdが教えてくれた
gulp-sass
https://github.com/dlmanning/gulp-sass

90. 大切なことはすべてREADME.mdが教えてくれた
gulp-postcss
https://github.com/postcss/gulp-postcss

91. 実行は黒い画面で

92. $ gulp
defaultタスクはgulpコマンドのみで動作する
gulpの実行

93. $ gulp sass
それ以外のタスクはgulpコマンド + タスク名
gulpの実行

94. gulpコマンドの
インストールが必要

95. gulp - Getting Started
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
大切なことはすべてREADME.mdが教えてくれた

96. gulp - Getting Started
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
大切なことはすべてREADME.mdが教えてくれた
$ npm install --global gulp-cli

97. npmでインストール

98. npm？

99. 1. Sass
2. PostCSS
3. gulp,js
4. Node.js
アジェンダ

100. npmを使うには、
Node.jsをインストール

101. Node.js
https://nodejs.org/

102. Node.js
https://nodejs.org/

104. Project B
node v6.6.0
Project A
node v4.5.0
Project C
node v7.0.0
nodeのバージョン大混在

105. Project B
node v6.6.0
Project A
node v4.5.0
Project C
node v7.0.0
nodeのバージョン大混在
node v6.6.0
古くて動かないかも？ 新しくて動かないかも？

106. Node.js
https://nodejs.org/
🙅🙅

107. Node.jsの
バージョン管理をしよう

108. anyenv + ndenv
https://github.com/riywo/anyenv + https://github.com/riywo/ndenv

109. nodist
https://github.com/marcelklehr/nodist

110. node v4.5.0
.node-version
v7.0.0
.node-version
v6.6.0
Project B
node v6.6.0
Project A
node v4.5.0
Project C
node v7.0.0
nodeのバージョンを切り替えられる
.node-version
v4.5.0

111. node v6.6.0
.node-version
v7.0.0
.node-version
v6.6.0
Project B
node v6.6.0
Project A
node v4.5.0
Project C
node v7.0.0
nodeのバージョンを切り替えられる
.node-version
v4.5.0

112. node v7.0.0
.node-version
v7.0.0
.node-version
v6.6.0
Project B
node v6.6.0
Project A
node v4.5.0
Project C
node v7.0.0
nodeのバージョンを切り替えられる
.node-version
v4.5.0

113. (Node Package Manager)

114. npm
https://www.npmjs.com/

115. すべて、npmパッケージ
• node-sass
• postcss本体
• postcssプラグイン
• gulp本体
• gulpプラグイン

116. npm パッケージの
インストール

117. gulp - Getting Started
https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md
$ npm install --global gulp-cli

118. --global オプションはグローバルにインストール
どのディレクトリでも使えるコマンドになる
$ npm install --global gulp-cli
パッケージのグローバルインストール

119. $ npm install --global gulp-cli
パッケージのグローバルインストール
node_modules
node v6.6.0 gulp-cli

120. node_modulesnode_modulesnode_modules
Project B
node v6.6.0
Project A
node v4.5.0
Project C
node v7.0.0
ローカルインストール
「node_modules」フォルダに、
それぞれにnpmパッケージをインストールする

121. --save-dev オプションでpackage.json
にインストールしたパッケージが書き込まれる
$ npm install --save-dev gulp
パッケージのローカルインストール

122. package.jsonに書き込まれる
package.json
{
"devDependencies": {
"gulp": "^3.9.1",
"gulp-postcss": "^6.2.0",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^1.6.0"
}
}
--save-devオプションでインストールした
パッケージが自動で書き込まれる

123. package.json

124. npmの設定ファイル

125. node_modulesnode_modulesnode_modules
Project B
node v6.6.0
Project A
node v4.5.0
Project C
node v7.0.0
ローカルパッケージ
プロジェクトごとにpackage.jsonを作成
パッケージやスクリプトなどを管理する
package.json package.json package.json

126. 雛形のpackage.jsonを作成
$ npm init -y
package.jsonを作成

127. --save-dev オプションでpackage.json
にインストールしたパッケージが書き込まれる
$ npm install --save-dev gulp
パッケージのローカルインストール

128. installは i 、--save-devは -D と省略できる
$ npm i -D gulp
パッケージのローカルインストール

129. パッケージは複数まとめてインストールもできる
package.jsonにもまとめて書き込まれる
$ npm i -D gulp gulp-sass gulp-postcss
パッケージのローカルインストール

130. npm-shrinkwrap.jsonというファイルが
生成されパッケージのバージョンが固定される
$ npm shrinkwrap
パッケージのバージョンを固定する

131. npm-script
package.json
{
"scripts": {
"start": "gulp"
}
}
node_module内のコマンドを実行できる
ここではgulpコマンドを指定

132. npm-scriptに設定したコマンド（今回はgulp）
を実行できる
この方法だとグローバルのgulp-cliは不要
$ npm start
npm-script

133. つまり

134. package.jsonを渡せば
同じ環境が作れる

135. 他の設定ファイルも
全部共有しよう

136. 環境を作る流れ
1. .node-version でバージョン指定
2. $ npm init -y でプロジェクト作成
3. $ npm install --save-dev ◯◯
でパッケージインストール
4. gulpfile.js でタスクを書く
5. README.md で説明を書く
6. .gitignoreで「node_nodules」を無視

137. 渡す設定ファイル
• .node-version
• package.json
• (npm-shrinkwrap.json)
• gulpfile.js
• .gitignore

138. 設定ファイルを受け取る側

139. package.jsonに書かれている
パッケージがローカルインストールされる
$ npm install
npmパッケージのインストール

140. これだけ！

141. 1. リポジトリからクローン
2. $npm install
3. $gulp or $npm start
4. ッターーン！
5. プルリク
6. LGTM!!
繰り返す
環境を受け取ったイマドキのコーダー

142. サンプルファイル
https://github.com/sou-lab/cssnite-lp47

143. まとめ

144. 1. ndenv or nodist
2. Sass
3. PostCSS
4. gulp
5. 黒い画面
イマドキのコーダー環境

145. コーダーは怠惰であれ

146. 環境でとことんラクしよう！