決断力を消耗しないSass開発環境構築 / Set up Sass development environment

Sassのコンパイル、ベンダープレフィックス自動付加、Lint、自動フォーマット、pre-commit hookなど、チーム開発に最適なSass開発環境をステップ・バイ・ステップで構築していく。

デザイナーにもオススメ！シンプルですぐできるSass（SCSS）開発環境構築
https://kuroeveryday.blogspot.com/2018/10/setup-sass-development-environment.html

https://twitter.com/bc_rikko

Transcript

1. 決断⼒を消耗しない
   Sass開発環境構築
   フロントエンド交流会 - 2019/08/22
   ダーシノ（@bc_rikko)
   

   View Slide

2. さくらインターネット
   フロントエンドエンジニア
   ダーシノ
   NES.css
   ファミコン⾵CSSフレームワーク
   GitHub Stars: 13,000+
   世界ランク 4位
   

   View Slide

3. 1⽇に使える決断⼒に
   上限があることを
   知っていますか？
   ＼突然ですが／
   

   View Slide

4. 決断⼒を消耗すると
   ミスしやすくなる
   https://ja.wikipedia.org/wiki/決断疲れ
   

   View Slide

5. どんな⼩さな決定でも
   決断⼒を消費する
   

   View Slide

6. I really want to clear my life to
   make it so that I have to make as
   few decisions as possible about
   anything except how to best
   serve this community.
   - Mark Zuckerberg
   画像: https://en.wikipedia.org/wiki/Mark_Zuckerberg
   引⽤元: https://www.cnbc.com/2017/01/05/mark-zuckerberg-and-john-paul-dejorias-simple-wardrobe-trick.html
   

   View Slide

7. Iʼm trying to pare down decisions.
   I donʼt want to make decisions
   about what Iʼm eating or
   wearing. Because I have too
   many other decisions to make,
   - Brack Obama
   画像: https://en.wikipedia.org/wiki/Barack_Obama
   引⽤元: https://www.vanityfair.com/news/2012/09/barack-obama-michael-lewis
   

   View Slide

8. 決断を減らすように
   努⼒している
   

   View Slide

9. 今⽇着る服も、
   晩ごはんの献⽴も、
   コーディングスタイルも。
   

   View Slide

10. 決断⼒を消耗しない
    開発環境をつくりましょう
    

    View Slide

11. やること
    1. Node.jsのインストール
    2. プロジェクト作成
    3. Sass→CSSのコンパイル
    4. ベンダープレフィックス付加
    5. コーディングスタイルの統⼀
    6. ⾃動フォーマット
    7. ファイル圧縮
    8. エディタ上で⾃動フォーマット
    9. コミット前にLintチェック
    参考: https://kuroeveryday.blogspot.com/2018/10/setup-sass-development-environment.html
    

    View Slide

12. TL;DR
    

    View Slide

13. // package.json
    {
    "name": "sass-project",
    "scripts": {
    "watch": "npm run sass -- --fix",
    "build": "npm run stylelint && npm run clean && npm run sass && npm run autoprefix && npm run minify",
    "sass": "node-sass --output-style expended --source-map true scss/style.scss css/style.css",
    "clean": "rimraf css",
    "autoprefix": "postcss --use autoprefixer --map false --output css/style.css css/style.css",
    "stylelint": "stylelint ./scss/**/*.scss --fix",
    "minify": "cleancss -o css/style.min.css css/style.css"
    },
    "devDependencies": {
    "autoprefixer": "^9.6.1",
    "clean-css-cli": "^4.3.0",
    "husky": "^3.0.2",
    "lint-staged": "^9.2.1",
    "node-sass": "^4.12.0",
    "postcss-cli": "^6.1.3",
    "prettier": "^1.18.2",
    "rimraf": "^2.6.3",
    "stylelint": "^10.1.0",
    "stylelint-config-recess-order": "^2.0.3",
    "stylelint-config-standard": "^18.3.0",
    "stylelint-prettier": "^1.1.1",
    "stylelint-scss": "^3.9.3"
    },
    "browserslist": [ ">= 1% in JP", "ie >= 10" ],
    "stylelint": {
    "plugins": [ "stylelint-scss", "stylelint-prettier" ],
    "extends": [ "stylelint-config-standard", "stylelint-config-recess-order" ],
    "rules": { "prettier/prettier": true, "at-rule-no-unknown": null, "scss/at-rule-no-unknown": true }
    },
    "husky": { "hooks": { "pre-commit": "lint-staged" } },
    "lint-staged": { "scss/**/*.scss": [ "npm run stylelint", "git add" ] }
    }
    

    View Slide

14. 1. Node.jsのインストール
    • nodejs.orgからインストーラーをダウン
    ロードして、Node.jsをインストールする
    • LTS（推奨版）を選べば間違いない
    • -envのようなバージョン管理ツールは必要
    に応じて使う
    

    View Slide

15. 2. プロジェクト作成
    Sass開発環境のプロジェクト（ディレクトリ）を作成し、npmの初期設定を⾏う

    ※ npm: Node.jsのパッケージ管理ツール
    # ディレクトリを作成する
    $ mkdir sass-project && cd sass-project
    # npmの初期設定（package.json）が作成される
    $ npm init
    

    View Slide

16. 3. Sass→CSSのコンパイル
    # ディレクトリを作成する
    ./sass-project
    ┣ css // コンパイルされたCSSのコードを格納する
    ┗ scss // Sass(scss)のコードを格納する
    # Sassをコンパイルするツールをインストールする
    $ npm install -D node-sass
    補⾜情報
    • npm installでライブラリをインストールできる
    • -Dは開発環境の依存関係を保存するためのオプション
    

    View Slide

17. 3. Sass→CSSのコンパイル
    補⾜情報
    • npm run sassを実⾏するとSass→CSSにコンパイルされる
    • オプション
    • —output-style expanded: 出⼒されたCSSが読みやすくなる
    • —source-map true: ブラウザのdevtoolsを⾒たときにSassファイルを参照してくれる
    • 最終形（オススメ）
    • node-sass

    —output-style expanded —source-map true

    scss/style.scss css/style.css
    {
    "scripts": {
    "sass": "node-sass scss/style.scss css/style.css"
    }
    }
    ./package.json
    

    View Slide

18. 3. Sass→CSSのコンパイル
    ./cssにゴミが残ることがあるのでコンパイル前に削除する
    # rimraf（rm -rfを実⾏してくれるツール）
    $ npm install -D rimraf
    # package.json
    補⾜情報
    • npm run buildを実⾏するとclean→sassの順番で実⾏してくれる
    {
    "scripts": {
    "build": "npm run clean && npm run sass",
    "sass": "...",
    "clean": "rimraf css"
    }
    }
    

    View Slide

19. 3. Sass→CSSのコンパイル
    エディタで修正したら⾃動でコンパイルしてほしいとき
    # package.json
    # ファイルの変更を監視して⾃動でコンパイルする
    $ npm run watch
    {
    "scripts": {
    "watch": "npm run sass -- --watch",
    "build": "...",
    "sass": "...",
    "clean": “..."
    }
    }
    

    View Slide

20. 4. ベンダープレフィックス付加
    -ms-, -o-, -moz-, -webkit-とか調べるのが⾯倒なので⾃動で付加する
    # PostCSS（CSSに対していろいろやってくれる）
    $ npm install -D postcss-cli
    # PostCSSのプラグイン
    # Autoprefixer（⾃動でベンダープレフィックスをつけてくれる）
    $ npm install -D autoprefixer
    # package.json
    # browserslistで国内1%以上のシェアとIE10に対応させる
    {
    "scripts": {},
    "browserslist": [ ">= 1% in JP", "ie >= 10”]
    }
    補⾜情報
    • browserslistでサポート対象のブラウザバーションを指定する
    • 詳細は https://browsersl.ist/ で確認できる
    

    View Slide

21. 4. ベンダープレフィックス付加
    # package.json
    {
    "scripts": {
    "watch": "...",
    "build": "npm run clean && npm run sass
    && npm run autoprefix",
    "clean": "...",
    “sass" : "...",
    "autoprefix": "postcss --use autoprefixer
    --map false
    ―output css/style.css css/style.css"
    },
    "browserslist": [ ">= 1% in JP", "ie >= 10"]
    }
    補⾜情報
    • npm run buildを実⾏するとclean→sass→autoprefixが実⾏される
    

    View Slide

22. 4. ベンダープレフィックス付加
    // コンパイル前
    $color: black;
    body {
    background-color: $color;
    }
    .flex {
    display: flex;
    }
    IE10⽤にベンダープレフィックを
    ⾃動でつけてくれる
    // コンパイル後
    body {
    background-color: black;
    }
    .flex {
    display: -ms-flexbox;
    display: flex;
    }
    

    View Slide

23. 5. コーディングスタイルの統⼀
    個⼈差をなくすためにコーディングスタイルを統⼀する
    # Stylelint（CSSのコーディングスタイルをチェックしてくれる）
    $ npm install -D stylelint
    # StylelintのSCSS⽤プラグイン
    $ npm install -D stylelint-scss
    # 標準的なコーディングスタイルのルール
    $ npm install -D stylelint-config-standard
    # プロパティ順を強制するプラグイン
    $ npm install -D stylelint-config-recess-order
    

    View Slide

24. 5. コーディングスタイルの統⼀
    Stylelintのルールを設定する
    {
    "scripts": {},
    "browserslist": [],
    "stylelint": {
    "plugins": [ "stylelint-scss" ],
    "extends": [
    "stylelint-config-standard",
    "stylelint-config-recess-order"
    ],
    "rules": {
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true
    }
    }
    }
    # package.json
    補⾜情報
    • rulesのat-rule-no-unknowはSCSSの@mixinや@functionをエラーにしないための設定
    

    View Slide

25. 5. コーディングスタイルの統⼀
    # package.json
    補⾜情報
    • npm run stylelintを実⾏するとルールにしたがって⾃動でコードを修正してくれる
    • npm run buildを実⾏するとclean→stylelint→sass→autoprefixが実⾏される
    {
    "scripts": {
    "watch": "...",
    "build": "npm run clean
    && npm run stylelint
    && npm run sass
    && npm run autoprefix",
    "clean": "...",
    "sass": "...",
    "autoprefix": "...",
    "stylelint": "stylelint scss/**/*.scss --fix"
    }
    }
    

    View Slide

26. 6. ⾃動フォーマット
    stylelint ̶fixでは直しきれない部分を⾃動で修正する
    # StylelintでPrettierを使うためのプラグイン
    # (いろんなコードをフォーマットしてくれる)
    $ npm install -D prettier stylelint-prettier
    # package.json
    {
    "stylelint": {
    "rules": {
    "prettier/prettier": true ←追加
    }
    }
    }
    

    View Slide

27. 6. ⾃動フォーマット
    // Before
    .my-style {
    width: 100px;
    height: 500px;
    background-color: #333333;
    padding: 10px;
    position: relative;
    margin: 10px;
    color: #ffffff;
    }
    // After
    .my-style {
    position: relative;
    width: 100px;
    height: 500px;
    padding: 10px;
    margin: 10px;
    color: #fff;
    background-color: #333;
    }
    

    View Slide

28. 7. ファイル圧縮
    不要なコメントやスペースを削除してファイルを圧縮する
    # clean-css(コメントやスペースを削除して圧縮してくれる)
    $ npm install -D clean-css-cli
    # package.json
    {
    "scripts": {
    "watch": "...",
    "build": "npm run clean && npm run stylelint
    && npm run sass && npm run autoprefix
    && npm run minify",
    "clean": "...",
    "sass": "...",
    "autoprefix": "...",
    "stylelint": "...",
    "minify": "cleancss -o css/style.min.css css/style.css"
    }
    }
    

    View Slide

29. 7. ファイル圧縮
    // Before
    .my-style {
    position: relative;
    width: 100px;
    height: 500px;
    padding: 10px;
    margin: 10px;
    color: #fff;
    background-color: #333;
    }
    // After
    .my-
    style{position:relative;wi
    dth:100px;height:
    500px;padding:10px;margin:
    10px;color:#fff;background
    -color:#333}
    

    View Slide

30. 8. エディタ上で⾃動フォーマット
    VSCode上で保存したときに⾃動フォーマットする
    ※ prettier-vscode, vscode-stylelintの拡張機能必須
    # .vscode/settings.json
    {
    "editor.formatOnSave": true,
    "prettier.stylelintIntegration": true
    }
    

    View Slide

31. 9. コミット前にLintチェック
    最終防衛ライン（pre-commit hook）でLintチェックする
    # husky(git hooksを使いやすくしてくれる)
    $ npm install -D husky
    # lint-staged(ステージングされたファイルをチェックする)
    $ npm install -D lint-staged
    # package.json
    {
    "husky": {
    "hooks": { "pre-commit": "lint-staged" }
    },
    "lint-staged": {
    "scss/**/*.scss": ["npm run build:stylelint", "git add"]
    }
    }
    

    View Slide

32. 9. コミット前にLintチェック
    # エラーが含まれているとコミットできない
    $ git commit -m “エラーが含まれています”
    husky > pre-commit (node v8.16.0)
    ↓ Stashing changes... [skipped]
    → No partially staged files found...
    › Running tasks...
    › Running tasks for scss/**/*.scss
    ✖ npm run stylelint
    git add
    ✖npm run stylelint found some errors. Please fix them and
    try committing again.
    # エラーがなければコミット前に⾃動フォーマットする
    $ git commit -m “⾃動フォーマットされます”
    husky > pre-commit (node v8.16.0)
    ↓ Stashing changes... [skipped]
    → No partially staged files found...
    ✔ Running tasks...
    [master c28cbea] haha
    1 file changed, 1 insertion(+), 8 deletions(-)
    

    View Slide

33. 参考サイト
    https://kuroeveryday.blogspot.com/2018/10/setup-sass-development-environment.html
    デザイナーにもオススメ！
    シンプルですぐできるSass（SCSS）開発環境構築
    

    View Slide