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
怖くない!GritQLでBiomeプラグインを作ろうよ
Search
晴れ井戸
July 23, 2025
Technology
1
240
怖くない!GritQLでBiomeプラグインを作ろうよ
2025/7/23に開催された、Biome v2リリース記念 公式LTパーティ のLT発表資料です
晴れ井戸
July 23, 2025
Tweet
Share
More Decks by 晴れ井戸
See All by 晴れ井戸
JSX - 歴史を振り返り、⾯⽩がって、エモくなろう
pal4de
5
1.3k
Other Decks in Technology
See All in Technology
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
140
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
4
600
pprof vs runtime/trace (FlightRecorder)
task4233
0
170
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
130
実装で解き明かす並行処理の歴史
zozotech
PRO
1
420
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
110
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
270
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
0
140
Why Governance Matters: The Key to Reducing Risk Without Slowing Down
sarahjwells
0
110
Green Tea Garbage Collector の今
zchee
PRO
2
390
バイブコーディングと継続的デプロイメント
nwiizo
2
430
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
Six Lessons from altMBA
skipperchong
28
4k
A better future with KSS
kneath
239
17k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Making Projects Easy
brettharned
119
6.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Building Applications with DynamoDB
mza
96
6.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Transcript
怖くない! GritQLでBiomeプラグイン GritQLが採⽤された理由を知り、基本を学んで、仲良くなろう Biome v2リリース記念 公式LTパーティ 2025/7/23
⾃⼰紹介 AIでノーコードで エッジコンピューティングな ⼤学発ベンチャーの 株式会社TechSwordで インターフェースやデザインなどの ソフトウェアエンジニアを やっています 晴れ井⼾ @pal4de
お断り これは短期間のキャッチアップの成果物です >< 網羅的にGritを知ろうと努めましたが ヘンなところがあったら教えてください ><
v2.0おめでとうございます • 型推論 • 設定ファイルの再構成 • ルールの⾒直し • Biome Assistの導⼊
• モノレポ対応 • ✨ プラグイン (ベータ) ✨ 等々...
プラグインの 指定⽅法... ESLint PluginはJS/TSで 定義できるのとは違い... Biomeのプラグインは .gritとかいう 気味の悪い 拡張⼦ のファイルで表現される
{ "plugins": ["./path-to-plugin.grit"] } ?!??!???!?👆
.gritの雰囲気 これは確かに 不気味かも `$fn($args)` where { $fn <: `Object.assign`, register_diagnostic(
span = $fn, message = "Prefer object spread instead of" + " `Object.assign()`" ) }
なぜGritなんだろう Biome PluginのRFCを読み解こう
RFCを⾒てみる プラグインに関する 決定の経緯と今後の⽅針は、 RFCとしてまとめられている RFC: Biome Plugins Proposal https://github.com/biomejs/biome/discussions/1762
JS/TSで書きたいんだけど A. わかる でもJS/TSはBiomeにとってパフォーマンスが⾜りない… から最初に取り組むべきではない… ⾼速で柔軟で便利な技術、ないかな…!
候補となった技術たち Comby テキストベースの コード検索‧置換技術 ⾼速で便利! だけど、柔軟性が ⾜りない Semgrep / ast-grep
ASTベースのコード 検索‧置換技術 ⾼速で柔軟! だけど、使い勝⼿に クセあり 巨⼤なYAMLを 書かないといけない Grit ASTベースのコード 検索‧置換技術 柔軟で便利で、 ⼗分に⾼速! これでは!?
最後の後押しになったのは ✨ 2つのチームの邂逅 ✨ Biomeチーム 🤝 Gritチーム Gritが候補に上がった時、すぐにコンタクトを取ってくれた 激アツの協業体制
GritQLと仲良くなろう GritQLで書くBiomeプラグインを学ぶ
改めてGritのイメージ Gritに期待される機能性を ⾝近なもので例えるなら VSCodeの 検索/置換機能とか awkとか なイメージ パターンを書く ↓ マッチ
↓ 置換などのアクション
ASTベースの強み テキストベース 単純⼀致や正規表現に対するマッチ コーディングスタイルの 変化に弱い インデントや引⽤符、セミコロンの有無など... ASTベース プログラムの構造に対するマッチ プログラムを⽂字の並びと してではなく、
意味の塊で認識 コーディングスタイルの 変化に対して強い!
ASTを⾒てみよう ASTはコードの構造を咀嚼したデータのこと 例えばこんなコードのASTを⾒てみよう console.log("Hello, World!");
⽣のAST あまり向き合いたくない { "type": "Program", "start": 0, "end": 29, "body":
[ { "type": "ExpressionStatement", "start": 0, "end": 29, "expression": { "type": "CallExpression", "start": 0, "end": 28, "callee": { "type": "MemberExpression", "start": 0, "end": 11, "object": { "type": "Identifier", "start": 0, "end": 7, "name": "console" }, "property": { "type": "Identifier", "start": 8, "end": 11, "name": "log" },
GritQLなら こう書ける これは なんか すごいぞ `console.log("Hello, World!");`
GritQLを書くときの考え⽅ やりたいことを下記の形で⾔い換える: [ASTのパターン] に⼀致する時、 [置換などのアクション] する ※ ただし、今の所は「警告する」しかアクションがない
カスタムルール の基本型 ルールの数だけ 右記の記述を繰り返す パターン where { 条件..., register_diagnostic( severity=重大度,
span=波線引く範囲への参照, message=メッセージ ) }
パターン 先ほど⾒た `console.log` とかを 書ける場所 `useEffect` とか `42`とか `const` とか書いていい
パターン where { 条件..., register_diagnostic( severity=重大度, span=波線引く範囲への参照, message=メッセージ ) }
メタ変数 Gritの重要な登場⼈物として 「メタ変数」というものがある プレースホルダやワイルドカードのようなイメージ `console.log($msg)` とか `$fn($$$arguments)` とか `Object.assign($target, $...)`とか
$$$hoge は列挙した値を丸ごとキャプチャ する記述 $_ や $... で無名のメタ変数を使える パターン where { 条件..., register_diagnostic( severity=重大度, span=波線引く範囲への参照, message=メッセージ ) }
追加条件 パターンで表現しきれない 追加の条件を記述できる 「左辺が右辺の条件を満たす」 という趣旨の演算⼦ <: を使ったり $arr <: `[]`
とか $fn <: includes `useEffect` とか パターン where { 条件..., register_diagnostic( severity=重大度, span=波線引く範囲への参照, message=メッセージ ) }
registerなんちゃら register_diagnosticは マッチするルールが あったことを、Biome に通知する関数 ここは直感通りの使い勝⼿です パターン where { 条件...,
register_diagnostic( severity=重大度, span=波線引く範囲への参照, message=メッセージ ) }
具体例 Object.assignを ⾒つけたら報告する例 ⾒慣れたら意外ともう怖くない `$fn($args)` where { $fn <: `Object.assign`,
register_diagnostic( span = $fn, message = "`Object.assign()`じゃなくて" + "スプレッド構文を使ってね " ) }
具体例 `$fn($_, [])` where { $fn <: includes `useEffect`, register_diagnostic(
span = $fn, message = "依存配列が空だよ", severity = "error" ) } useEffectの 依存配列が空だったら 報告する例 これは正規表現では難しいヤツだ...!
パターンや条件の論理演算 and { … } や or { … }
豊かな表現⼒を⽰唆する⾯⽩キーワード contains within bubble some before after … 他にもGritの機能盛りだくさん
⾒てると楽しいよ!勉強してみてね! Linter プラグイン | Biome https://biomejs.dev/ja/linter/plugins BiomeでGritQLがどう扱えるか丁寧に解説されています GritQL Reference https://docs.grit.io/language/syntax
GritQLの仕様が⼀覧できる 細かいことがわからなくてもみてて楽しい
Biomeプラグインのこれから Grit以外の選択肢もあるし、Girtでやりたいこともある
でもJS/TSで 書きたいよう! import Biome, { matches, transform, into } from
"$biome-plugin"; Biome.traversal.onEnter({ kind: "JsLogicalExpression", operator: "&&" }, (expr) => { if ( expr.right.kind === "JsCallExpression" && matches( expr.left, expr.right.callee ) ) { transform(expr, into`${expr.left}?.()`); } }); 構想はあるよ これも楽しみだね
auto fixは...? 多分 もうすぐできるように なるよ GritQLの本領発揮! `$path && $path()` =>
`$path?.()`
他にも楽しみなこと オリジナルのGritではサポートされている機能に 追従していくみたい • 複数ファイルにまたがる修正 • カスタムルールのsuppression • シーケンシャルな処理 対応状況は
https://github.com/biomejs/biome/issues/2582 で⾒れるよ