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
96
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
オブザーバビリティが育むシステム理解と好奇心
maruloop
2
1.3k
CNCFの視点で捉えるPlatform Engineering - 最新動向と展望 / Platform Engineering from the CNCF Perspective
hhiroshell
0
140
AI時代におけるデータの重要性 ~データマネジメントの第一歩~
ryoichi_ota
0
720
re:Inventに行くまでにやっておきたいこと
nagisa53
0
350
CREが作る自己解決サイクルSlackワークフローに組み込んだAIによる社内ヘルプデスク改革 #cre_meetup
bengo4com
0
340
オブザーバビリティと育てた ID管理・認証認可基盤の歩み / The Journey of an ID Management, Authentication, and Authorization Platform Nurtured with Observability
kaminashi
1
730
AIとともに歩んでいくデザイナーの役割の変化
lycorptech_jp
PRO
0
890
プレイドのユニークな技術とインターンのリアル
plaidtech
PRO
1
370
OPENLOGI Company Profile for engineer
hr01
1
45k
SOTA競争から人間を超える画像認識へ
shinya7y
0
560
Retrospectiveを振り返ろう
nakasho
0
110
だいたい分かった気になる 『SREの知識地図』 / introduction-to-sre-knowledge-map-book
katsuhisa91
PRO
3
1.4k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
233
18k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Context Engineering - Making Every Token Count
addyosmani
8
300
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
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で公開しますー