vue-browscan

Transcript

1. 解析ツール作ってる話
2. 自己紹介 安積洋 (@cyber_snufkin) Software Engineer LAMP環境何でも屋 > Vueでフロントエンド（ver0.11の頃) > スマートフォンアプリ PjM > 行動解析 > リーガルテックのフロントエンド Vue.jsはVer0.11 > Ver1 > Ver2 > Ver3 Vue Fes 2023 登壇
3. 日常
4. vue-browscan SFCごとの「このCSSを理解できる最小ブラウザ」を静的解析で算出するCLI （読み：ビューブラウスキャン / Vue Browser Scan）
5. なぜ必要？ • プロジェクトで「どのブラウザをどこまでサポートできるか」が曖昧になりがち • PostCSSのターゲット指定だけでは、実際に書かれたCSS機能を網羅できない • Vue SFCは template/script/style の多言語混在で見落としが発生 • リリース判断で「最小UAの根拠」を即提示できず、レビュー工数が増える
7. 何をするツール？ • SFCごと（ブロック解析→ファイル集計）に、CSS機能から最小対応ブラウザを計算 • 互換データ：@mdn/browser-compat-data（BCD） • 解析基盤：Stylelint（API） • 出力：JSON（ブロック単位）／CSV（ファイル単位） • 付加情報：ブラウザのバージョン＋リリース日
8. どう動く？（フロー） • 1) ディレクトリを再帰走査 → .vue/.css/.scss/.less/.pcss • 2) Vue SFCを template/script/style に分解 • 3) <style> と外部CSS系を Stylelintで解析 → 機能ID抽出 • 4) BCDで各ブラウザの最小バージョンと releaseDate を決定 • 5) usedFeatures は Blinkバージョン降順に並べ替え • 6) ブロック→ファイル→ディレクトリへ集計（Route集計は将来）
9. 使い方（デモ想定） • pnpm vue-browscan analyze "src/**/*.{vue,css,scss,less,pcss}" --format json,csv --out ./reports • （オプション）--upload で Google Sheets へアップロード • VUEBROWSCAN_SHEET_ID 未設定なら起動時にIDを対話入力 • CSV：ファイル1行、chrome_style / firefox_style / safari_style / edge_style / usedFeatures_top
10. 得られる価値 • リリース会議で即答：「このコンポーネントは Safari 15 以上必須」 • レビュー効率：差分で“要件を引き上げるCSS”が一目でわかる • CIガード：既定のサポート範囲を超えたら Fail 可能 • 説明責任：機能→最小バージョン→リリース日まで根拠付きで提示
11. アーキテクチャ（要点） • Node 22+ / ESM / pnpm • Plugin式：analyze(content, context)（関数型・ステートレス） • AnalyzeResult：usedFeatures（Blink降順）/ browsers{version,releaseDate} / mimeHint / lang / startRow / rowCount • JSONはブロック単位、CSVはファイル単位（template/script/style列）
12. 現状と次の一歩 • Done：CSV出力 / SFC分解・並列解析の土台 / Biome＋Stylelint 整備 • Next：CSS機能→BCDマッピングの精度強化、releaseDate付与の拡充、ディレクト リ集計の仕上げ（Route集計は設計ドラフト）
13. 制約（MVP） • CSSにフォーカス（HTML/JS/TSは次フェーズ） • JS↔CSSの動的依存（v-bind()のCSS変数、DOM操作でのstyle変更）は未対応 • URLスキャン/パフォーマンス/SEO/監査系は対象外
14. ご清聴ありがとうございました！ 反応があるようならnpmで公開しますー