PostCSSの導入検証 / r&d_meetup_css_t_okkan

2022/3/23（水）19:00〜　ラクスR&D Meetup - CSSフレームワークでの発表資料です。

Transcript

1. ©2021 RAKUS Co., Ltd. PostCSSの導入検証 株式会社ラクス　Takuya Okamoto 1
2. Takuya Okamoto • Job ◦ 株式会社ラクス技術推進課に所属 ◦ 先行技術検証（技術推進PJ）の運営 ◦ 非エンジニア向けの技術勉強会の運営 • Career ◦ 2017年〜Webエンジニア ◦ Java、AWS ◦ Java研修講師、資格対策本の執筆 • Hobby ◦ 野球 ◦ 筋トレ 2
3. アジェンダ 1. 研究テーマの紹介 2. CSSプラットフォームとPostCSSについて ◦ CSSプラットフォーム ◦ PostCSSの機能と特徴 3. PostCSSの検証結果 4. まとめ ◦ PostCSSのメリット ◦ PostCSSのデメリット・注意点 ◦ 結論 3
4. ラクスR&D Meetup 4
5. ラクスR&D Meetup ラクスでは継続的にサービスを成長させるために、新しい技術要素を実際に導入する前 に先行検証する「技術推進プロジェクト」というプロジェクトを進めています。 このプロジェクト内で検証した結果については弊社テックブログでも紹介していますが、 勉強会という形式でも共有していこうと思います。 今回は「CSSプラットフォーム」の導入検証について当社事例を共有いたします。 5
6. 研究テーマの紹介 6
7. CSSプラットフォーム • ラクスの課題 ◦ フロントエンドのCSSでは、難読化やAltCSSなど機能を個別追加し都度拡張 ◦ 今後フロントエンドを強化するにあたり、メンテナンスや処理追加のコストが高くなるかも ◦ 体系的にCSS周りの処理を行うツールの導入を検討すべき • 想定するゴール ◦ PostCSSなどのツールを利用することにより、メンテナンスのしやすさ、 今後の処理追加を容易できるかを検証 ◦ それらのツールが開発標準ツールになりえるか評価 7
8. • PostCSSはCSSのビルドプロセスを統一し自動化できる • PostCSSは導入難易度は極めて低い • PostCSSは今後のフロントエンド開発での必須のツールになりうる 発表内容は弊社Techブログに掲載しています。 https://tech-blog.rakus.co.jp/entry/20210702/postcss 結論 8
9. CSSプラットフォームとPostCSS 9
10. CSSプラットフォーム 10
11. CSSプラットフォームの整理 • CSSプリプロセッサ ◦ mixinやネスト、継承などの独自の構文（ AltCSS）からCSSを生成する ◦ CSSの可読性と保守性を向上することができる ◦ Sass、LESS、cssnextなど • CSSポストプロセッサ ◦ CSSに特定の処理を加えてより良い新たな CSSを生成する ◦ 各ブラウザ環境への最適化やファイルの圧縮などができる ◦ autoprefixer、Minifier、Pleeeaseなどが存在する ALT CSS CSS CSS’ 11 preprocessor postprocessor
12. CSSのビルドプロセス 12 静 的 解 析 プ リ プ ロ セ ッ サ ポ ス ト プ ロ セ ッ サ 設 計 ・ 実 装 .css .scss .css .css .scss .html FLOCSS SMACSS BEM .css CSSのビルドプロセスは、上図のように細分化できる。 各フェーズで独立してツールを実行している。
13. PostCSS 13
14. PostCSSとは • 概要 ◦ CSSビルドプロセスの静的解析からプリプロセッサ、ポストプロセッサまでを担う OSS ◦ 300を超えるプラグインが存在し、様々な CSSの処理を自動化できる ◦ プラグインを組み合わせて CSSのビルドツールを自作するイメージ • モチベーション ◦ SassやLessなどの独自構文は使用せず、次世代の CSS標準構文で実装しCSSを統一化したい ◦ JavaScript界隈でCofeeScriptをやめてbabelに移行したことと似ている ◦ Tailwind CSSがスポンサーとして投資している 14
15. PostCSSのアーキテクチャ 15 • Parser ◦ 開発者が実装したCSSを抽象構文木（AST）に変換する機能 ◦ CSSはAltCSSでもPureなCSSでも良い。 • プラグイン ◦ Parserで生成したASTに対してプラグインを実行 ◦ プラグインの管理は postcss.config.jsで開発者が行う • Stringifier ◦ プラグインで変更された ASTをトランスパイルして CSSを生成する プラグインを使用しないと入力CSSがそのまま出力される
16. • 静的解析 ◦ CSSの整形、構文チェック、利用環境での CSSの対応状況調査 • プリプロセッサ ◦ AltCSSをPureなCSSにコンパイル ◦ プラグインを利用した独自 AltCSSの構築 ◦ W3Cで仕様策定中の次世代 CSS構文のトランスパイル • ポストプロセッサ ◦ 利用環境への最適化（ベンダープレフィックス・コード自動生成・ CSS圧縮） ◦ リリース作業の自動化できる • プラグインの開発 PostCSSでできること 16
17. PostCSSが扱うCSSビルドプロセスの範囲 17 静 的 解 析 プ リ プ ロ セ ッ サ ポ ス ト プ ロ セ ッ サ 設 計 ・ 実 装 .css .scss .css .css .scss .html FLOCSS SMACSS BEM .css PostCSSは静的解析〜ポストプロセッサまでを自動化できる PostCSS
18. デモ 18 body { & #header { & h1 { color: blue; } } & #body { color: green; } & #footer { color: red; } } a { &:hover { color: red; } &:link { color: #339; } } body #header h1 { color: blue; } body #body { color: green; } body #footer { color: red; } a:hover { color: red; } a:link { color: #339; } { "scripts": { "demo": "postcss css/**/*.css -d dist" }, "devDependencies": { "postcss": "^8.3.5", "postcss-cli": "^8.3.1", "postcss-nesting": "^8.0.1", "stylelint": "^13.13.1" }, "browserslist": [ "ie >= 11", "safari >= 14.1" ] } input.css output.css package.json module.exports = { plugins: [ require("postcss-nesting"), require("stylelint")({ fix: true }), ] } postcss.config.js
19. 業界でのPostCSSの評価 • The State of CSS 2021 ◦ CSSについて世界中のフロントエンド開発者にアンケートを実施した結果 • PostCSSについて ◦ プリプロセッサ・ポストプロセッサ部門 で評価されている ▪ 91%がPostCSSをまた使いたいと回答し、 Sass（84%）やStylus（35%）よりも高い ▪ 2019〜2021年にかけてPostCSSを導入したいや興味を持っているという回答の比率が高 まっている（Sassはほぼ横ばい） ◦ CSS全体のツールで最も満足度が高いツールとして紹介されている • 開発者の評価もよく注目度が高くなっているツール • 公にされていないが導入している企業は多い 19
20. PostCSSの導入検証 20
21. 検証内容 • 導入コストの検証 • 有効なプラグインの選定 • 理想的なビルドプロセスの考案 21
22. 各種環境へのPostCSSの導入コスト 22
23. 導入を調査した環境 • 導入した環境 ◦ npm script ◦ Gulp ◦ webpack ◦ Storybook • 調査した環境 ◦ vue-loader、vite、CSS in JS • 導入コストは総じて低い結果になった ◦ 各環境でライブラリやアドオンを導入するだけで良い ◦ 環境によってはPostCSSが組み込まれており、設定ファイルを追加するだけで良い 23
24. npm script • 最小構成でPostCSSを実行できる ◦ postcss-cliを導入し、npm scriptからPostCSSを実行する ◦ --watchオプションでファイル変更の監視も可能 • プラグインの管理はpostcss.config.jsで実装する ◦ 宣言順にプラグインが実行される 24 module.exports = { plugins: [ /* 宣言順にプラグインを実行 */ require('stylelint'), require('autoprefixer'), require('cssnano'), ] } { "scripts": { "postcss": "postcss css/**/*.css -d dist/css" }, "devDependencies": { "autoprefixer": "^10.2.5", "postcss": "^8.2.10", "postcss-cli": "^8.3.1", "stylelint": "^13.12.0", "cssnano": "^5.0.6", } } postcss.config.js package.json
25. Gulp • gulp-postcssを導入してパイプラインを追加するのみ 25 let gulp = require("gulp") const postcss = require('gulp-postcss') const sass = require('postcss-node-sass') const autoprefixer = require('autoprefixer') const cssnano = require('cssnano') gulp.task('sass', (done) => { gulp.src('./css/sass/*.scss') .pipe(postcss([ /* 宣言順にプラグインを実行 */ sass(), autoprefixer(), cssnano({ preset: 'default' }) ])) .pipe(gulp.dest('dist/sass')); done(); }); gulp.js
26. webpack • postcss-loaderを導入し、style-loaderやcss-loaderの前に実行する 26 module.exports = { 'module': { 'rules': [ { 'test': /\.scss/, use: ['style-loader','css-loader', { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ /* 宣言順にプラグインを実行 */ require('postcss-node-sass'), require('cssnano')({ preset: 'default' }),]}}},]}]}, 'mode': 'development' } webpack.config.js
27. Storybook • @storybook/addon-postcssを導入 27 module.exports = { "addons": [ "@storybook/addon-links", "@storybook/addon-essentials", "@storybook/preset-create-react-app", { name: " @storybook/addon-postcss", options: { postcssLoaderOptions: { implementation: require('postcss') } } } ], } module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, cssnano: {} } } postcss.config.js .storybook/main.js
28. その他対応している環境 • vue-loader ◦ vue-loaderでは読み込まれるCSSは全てPostCSSを通過して出力される仕組み ◦ 内部的にpostcss-loaderを組み込んでいるため設定ファイルの追加でプラグインを使用できる • vite ◦ VueやReactのファイルにインポートされている CSSは全てPostCSSが適用される仕組み ◦ 内部的にPostCSSを組み込んできるため設定ファイルを追加でプラグインを使用できる • CSS in JS ◦ postcss-loaderをCSSのloaderに追加することで導入できる 28
29. PostCSSの有効なプラグイン 29
30. • 静的解析 • プリプロセッサ • ポストプロセッサ プラグインの分類 30
31. • 静的解析 • プリプロセッサ • ポストプロセッサ プラグインの分類 31
32. 静的解析 • stylelint（ルール一覧） ◦ eslint, tslintと同様なCSSのlinterで、次世代CSS構文への対応や、AltCSSの解析も可能 ◦ CSSエラーやスタイル違反の発見とスタイルの自動修正ができる • postcss-reporter ◦ linterやその他プラグインが出力するログを統一化するプラグイン ◦ 警告メッセージをエラーメッセージに変換しビルドを失敗にすることもできる • doiuse ◦ Can I useを利用してCSSのブラウザサポートをチェックしてくれるプラグイン ◦ 設定ファイルで利用環境のブラウザのバージョンを指定してチェックできる 32
33. • 静的解析 • プリプロセッサ • ポストプロセッサ プラグインの分類 33
34. プリプロセッサ（AltCSS変換系） .scssファイルなどをSassではなくPostCSSのプラグインでコンパイルできる • postcss-node-sass ◦ NodeSass構文を解析しCSS構文に変換するプラグイン ◦ PostCSSのワークフロー内で Sassを変換できるため、Sassの環境構築が不要になる ◦ 例えばwebpack環境であればsass-loaderが不要になる • postcss-sass ◦ DartSass構文を解析しCSS構文に変換するプラグイン • postcss-less ◦ LESS構文を解析してCSSファイルに変換するプラグイン 34
35. プリプロセッサ（次世代CSSを変換） • postcss-preset-env ◦ cssnextの後継で、bable-preset-envのCSS版のような位置付け ◦ cssdbを参考にW3Cで将来CSSの仕様に採用される次世代構文を変換するプラグインを一覧化 ◦ CSSの便利な構文をAltCSSを導入せずに使用することができる ◦ 使用しないプラグインまでインストールされるので本体のインストールは不要 公式ページを参考に必要な仕様のプラグインのみインストールする 35 プラグイン名 機能 参考 postcss-custom-properties CSSで変数を利用できる postcss-preset-env (cssdb.org) postcss-nesting CSSでネストルールを利用できる postcss-preset-env (cssdb.org) postcss-image-set-function ユーザーの解像度に合わせて表示する画像を変更する postcss-preset-env (cssdb.org)
36. • 静的解析 • プリプロセッサ • ポストプロセッサ プラグインの分類 36
37. ポストプロセッサ • autoprefixer ◦ Cna I useを参考にCSSプロパティに自動でベンダープレフィックスを付与するツール ◦ 設定ファイルで指定した利用環境に応じてベンダープレフィックスを付与できる ◦ フロントエンド開発では必須になっているツール • cssnano ◦ 本番環境にデプロイする CSSファイルを可能な限り小さくする圧縮ツール ◦ CSSの構文を理解して最適化（ calc関数の展開など）してから圧縮を行うため なるべく最後に実行する ◦ 競合であるcssclearやcssoと比較したベンチマークが公開されている 37
38. ビルドプロセスの考案 38
39. PostCSSの導入前に PostCSSの導入時、プリプロセッサに何を利用するかを選択する必要がある 1. Sass導入済み環境 2. Sassを利用していない環境 に分けて考えます 39
40. Sass導入済み環境 • PostCSSでSassのコンパイルを実施する ◦ Sassで実装しPostCSSのプラグインでSassをコンパイルする ◦ PostCSSで静的解析→プリプロセッサ→ポストプロセッサの順でビルドを自動化 • Sassでコンパイルするとどうなるのか ◦ SassでコンパイルしてPostCSSでポストプロセッサを利用する ◦ PostCSSで静的解析を利用できないので、 stylelintを個別で実行する必要があり手間が増える ◦ SassのコンパイルをPostCSSに移行 40 SCSS CSS Sassでcssを実装 Sassをコンパイル PostCSSを実行 CSSを出力 SCSS CSS Sassでcssを実装 PostCSSを実行 CSSを出力
41. Sassを利用していない環境 • Sassを導入したい・Sassの機能を利用したい場合 ◦ Sassで.scssファイルを実装しPostCSSのプラグインでコンパイル • Sassを導入したくない場合・できない場合 ◦ PostCSSの次世代CSS構文プラグインで構文を拡張し実装 ◦ 年に1回しか更新しないような更新頻度が低い環境でも有効 新規プロダクトの場合もこの判断が必要になる 41
42. 理想的なCSSビルドプロセス 42 module.exports = { syntax: 'postcss-scss', plugins: [ // Analysis require('stylelint'), // Sass require('postcss-sass'), // Fallback require('autoprefixer'), // Analysis require('doiuse'), // Minifier require('cssnano') ] } SCSS CSS ①SassでCSSを実装 使用するプラグイン ②Bundler・TaskRunnerを実行 ③PostCSSを実行 ④デプロイ用CSS出力
43. PostCSSの評価 43
44. PostCSSのメリット・デメリット 44
45. PostCSSメリット • CSSのビルドプロセスを1つの処理として自動化できる • フロントエンドのアーキテクチャ変更に対応できる ◦ 対応環境が多くアーキテクチャ変更による CSSへの影響を抑えることができる • プラグインを組み合わせることで拡張性の高いCSSビルドシステムを構築 ◦ プラグインの実行順を変更でき、ポストプロセッサ実行後に doiuseで最適化チェックなど • AltCSSの学習コストを抑えれる ◦ 次世代CSS構文を利用しAltCSSと同等な機能をプラグインとして導入 ◦ Tailwind CSSでもプリプロセッサとして PostCSSを利用 45
46. PostCSSのデメリット • プラグインの選定コストが高い ◦ 300以上のプラグインがありメンテナンスされていないプラグインも存在 ◦ GitHub star数やリリースサイクル、導入事例から判断 • プラグインの管理コストがある ◦ プラグインのバージョン管理が大変 ◦ プラグインの実行順によってはエラーが起きたり、 CSSが変換されなかったりする • CSS構文を拡張しすぎると学習コストが高くなる ◦ プラグインを導入しすぎるとオレオレ CSSになる ◦ 利用したいAltCSSの機能によってはSassを利用する 46
47. 結論 47
48. 結論 • PostCSSはCSSのビルドプロセスを統一し自動化できる ◦ 個別のツールで実行ではなく、 PostCSSのプロセス内で完結できるため管理がしやすい ◦ ただしプリプロセッサのプラグインが肥大化する場合は Sassなどの導入を検討する • 導入難易度は極めて低い ◦ PostCSSは既に多くの環境で導入されている ◦ 「PostCSSの導入を検討してください」よりかは「 PostCSSをもっと活用してください」 • 今後のフロントエンド開発での必須のツールになりうる ◦ vue-loaderやviteでもCSSのビルドツールとして PostCSSが組み込まれている ◦ 開発者の評価も高く PostCSSの活用は今後活発になると思われる 48