Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
vue-browscan
Search
cyber_snufkin
August 20, 2025
Technology
2
89
vue-browscan
cyber_snufkin
August 20, 2025
Tweet
Share
More Decks by cyber_snufkin
See All by cyber_snufkin
2023/10/28 Vue Fes Tokyo Vue.js プロジェクト設計のベストプラクティスを求めて
cyber_snufkin
5
3.6k
Vue.jsの今までをざっくり
cyber_snufkin
1
2.8k
PWAの"A"から始まる話
cyber_snufkin
2
1.3k
Other Decks in Technology
See All in Technology
いまさら聞けない ABテスト入門
skmr2348
1
200
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
190
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
170
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
200
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
270
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.5k
動画データのポテンシャルを引き出す! Databricks と AI活用への奮闘記(現在進行形)
databricksjapan
0
140
AI駆動開発を推進するためにサービス開発チームで 取り組んでいること
noayaoshiro
0
170
Goにおける 生成AIによるコード生成の ベンチマーク評価入門
daisuketakeda
2
100
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
280
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
120
KMP の Swift export
kokihirokawa
0
330
Featured
See All Featured
Facilitating Awesome Meetings
lara
56
6.6k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
51k
Designing Experiences People Love
moore
142
24k
Embracing the Ebb and Flow
colly
88
4.8k
Transcript
解析ツール作ってる話
自己紹介 安積洋 (@cyber_snufkin) Software Engineer LAMP環境何でも屋 > Vueでフロントエンド(ver0.11の頃) > スマートフォンアプリ
PjM > 行動解析 > リーガルテックのフロントエンド Vue.jsはVer0.11 > Ver1 > Ver2 > Ver3 Vue Fes 2023 登壇
日常
vue-browscan SFCごとの「このCSSを理解できる最小ブラウザ」を静的解析で算出するCLI (読み:ビューブラウスキャン / Vue Browser Scan)
なぜ必要? • プロジェクトで「どのブラウザをどこまでサポートできるか」が曖昧になりがち • PostCSSのターゲット指定だけでは、実際に書かれたCSS機能を網羅できない • Vue SFCは template/script/style の多言語混在で見落としが発生
• リリース判断で「最小UAの根拠」を即提示できず、レビュー工数が増える
None
何をするツール? • SFCごと(ブロック解析→ファイル集計)に、CSS機能から最小対応ブラウザを計算 • 互換データ:@mdn/browser-compat-data(BCD) • 解析基盤:Stylelint(API) • 出力:JSON(ブロック単位)/CSV(ファイル単位) •
付加情報:ブラウザのバージョン+リリース日
どう動く?(フロー) • 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集計は将来)
使い方(デモ想定) • 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
得られる価値 • リリース会議で即答:「このコンポーネントは Safari 15 以上必須」 • レビュー効率:差分で“要件を引き上げるCSS”が一目でわかる • CIガード:既定のサポート範囲を超えたら
Fail 可能 • 説明責任:機能→最小バージョン→リリース日まで根拠付きで提示
アーキテクチャ(要点) • Node 22+ / ESM / pnpm • Plugin式:analyze(content,
context)(関数型・ステートレス) • AnalyzeResult:usedFeatures(Blink降順)/ browsers{version,releaseDate} / mimeHint / lang / startRow / rowCount • JSONはブロック単位、CSVはファイル単位(template/script/style列)
現状と次の一歩 • Done:CSV出力 / SFC分解・並列解析の土台 / Biome+Stylelint 整備 • Next:CSS機能→BCDマッピングの精度強化、releaseDate付与の拡充、ディレクト
リ集計の仕上げ(Route集計は設計ドラフト)
制約(MVP) • CSSにフォーカス(HTML/JS/TSは次フェーズ) • JS↔CSSの動的依存(v-bind()のCSS変数、DOM操作でのstyle変更)は未対応 • URLスキャン/パフォーマンス/SEO/監査系は対象外
ご清聴ありがとうございました! 反応があるようならnpmで公開しますー