ast-grep VSCode: 構造検索と置換の強力なツール

こんにちは、 ast-grepの作者Herringtonです。

正規表現でコードを検索したことがある方なら、複数行のマッチングや入れ子構造の処理、コメントの無視などに苦労したことがあるかもしれません。

そこで、ast-grep VSCodeという新しい拡張を紹介します。これは、構造的検索と置換（SSR）という技術を利用して、より正確で効率的な検索と置換を実現するツールです。

構造検索は？

テキスト検索と置換の限界

例えば、JavaScriptコードをリファクタリングして、lodash の _.filter 関数をネイティブの Array.prototype.filter メソッド に置き換えたいとします。単純なテキスト検索と置換は次のようになります:

// 検索
_.filter\((\.+), (.+)\)
// 置換
$1.filter($2)

これは一部のケースではうまくいくかもしれませんが、いくつかの問題があります。

• 一行の式しかマッチングできません。コードが複数行にまたがっている場合、マッチング漏れや不正確な置換が発生します。
• 括弧や角括弧、波括弧などの入れ子構造を扱えません。コードに複雑な式が含まれている場合、不正確なマッチングや置換が発生します。
• コメントの部分を無視できません。コードに検索パターンを含むコメントがある場合、望ましくないマッチングや置換が発生します。
• 関数の引数を保持するために、一致グループや名前付きキャプチャグループを使う必要があります。これは、引数が多かったり、関数が入れ子になっていたりする場合、面倒でエラーが起きやすいです。

構造検索と置換が助けに来る

検索アルゴリズムをもっと賢くし、コードをもっと理解しやすくし、使いやすくすることはできないでしょうか？はい！構造的検索と置換（SSR）が素晴らしい解決策となります！

構造検索と置換 (Structural Search/Replace) は、コードパターンをその構文と意味に基づいて検索および変更する技術です。単なるテキストとしてではなく、SSRは、タイプ、プロパティ、および関係を持つノードのコレクションとしてコードを扱います。

ast-grep は、SSRを実装したコマンドラインツールです。上記のlodashの例のクエリは非常にシンプルです。

// 検索パターン:
_.filter($ARR, $FUNC)
// 書き換え:
$ARR.filter($FUNC)

このパターンは、ast-grepの基本的な使い方を示しています。$ARRと$FUNCはメタ変数です。メタ変数は、正規表現のドット.と似ていますが、文字ではなくASTノードにマッチします。また、置換パターンでキャプチャされたメタ変数を使うこともできます。

メタ変数以外は、パターンと置換が自明であるとおもいます。

このクエリは、テキストベースの検索と置換に比べていくつかの利点があります。

• 構文的に有効であれば、複数行にまたがる式にもマッチングできます。
• 括弧や角括弧、波括弧などの入れ子構造も扱えます。それらはASTの一部だからです。
• コメントやコードと関係のない部分を無視できます。それらはASTの一部ではないからです。
• マッチンググループや名前付きキャプチャグループは必要ありません。メタ変数は、検索パターンで名前でアクセスできるからです。

ast-grepのユニークな機能

ast-grepは、多くのプログラミング言語に対応した高速で堅牢なパーサーであるtree-sitterライブラリを使用しています。ast-grepでは、コードに似たシンプルなパターン構文を使ってクエリを書き、コードのファイルやディレクトリに適用することができます。ast-grepのユニークな機能の一部は以下の通りです。

• JavaScript, TypeScript, Python, Ruby, Java, C#, Go, Rustなど、多くの言語をサポートしています。また、設定でtree-sitter文法を登録することで、新しい言語のサポートを追加することができます。
• Rustで書かれているため、非常に高速でメモリ効率が良いです。大規模なコードベースを数秒で処理することができます。
• ドライラン、インタラクティブモード、カラーアウトプットなど、豊富なオプションとフラグを持っています。SSRの体験を自分の好みに合わせてカスタマイズすることができます。

しかし、ast-grepは今のところコマンドラインインターフェースしかありません。ターミナルとエディターを切り替えるのではなく、手元でその力を使えるようになることはできないでしょうか？

ast-grep VSCode: CLIとエディターの橋渡し

ast-grep VSCodeは、ast-grepをVisual Studio Codeという人気の高いコードエディターと統合する新しい拡張機能です。ast-grep VSCodeを使えば、エディター内でSSRを使うことができ、ワークフローから離れることなくコードを改善できます。

構造的検索、置換、その他

ast-grep VSCodeの機能の一部は以下の通りです。

• SSRクエリを書いたり実行したりするためのユーザーインターフェースを提供し、サイドバーでクエリの結果をプレビューや差分とともに見ることができます。
• リンティングやコード修正もサポートしています。ast-grepプロジェクトを設定して、自分のニーズに合わせたカスタムルールを書くことができます。
• VSCodeのネイティブUIのように感じられるように、シームレスな統合と一貫したデザインを備えています。

機能	スクリーンショット
検索パターン
フォルダ内検索
置換プレビュー
置換コミット
コードリンティング

他のSSRツールとの比較

他にもSSRツールや拡張機能はあります。しかし、ast-grep VSCodeがVSCodeの中で最高のSSR拡張機能の一つだと思っています。なぜなら：

• ネイティブ言語で書かれたマルチスレッドCLIによる高性能を持っています。
• コミュニティによって広く使われているtree-sitter文法を利用して、複数の言語をサポートしています。
• VSCodeのビルトイン機能のように感じられる、ユーザーフレンドリーで直感的なインターフェースを持っています。youtube動画。

最後に、ast-grep VSCodeで使われているReactのテクニックのいくつかを紹介します。これらはast-grep VSCodeを高速でレスポンシブにするのに役立っています。

• useSyncExternalStoreは、ast-grep CLIからのストリーミング結果を管理するのに使われました。このフックは、コンポーネントが外部の可変なデータソースにサブスクライブして、レンダリングを適切に更新することを可能にします。このようにして、拡張機能は結果をすぐに表示することができます。
• useDeferredValueは、結果リストのレンダリングを遅延させました。このフックは、派生した状態の更新を次の並行レンダーまで遅らせることで、ユーザー入力をブロックすることを避け、UIのパフォーマンスを向上させることができます。
• JavaScriptの負荷を減らすために、memoやCSSのテクニックを丁寧に多用しています。

まとめ

この記事がSSRのメリットやast-grep VSCodeの機能について理解するのに役立つと思います。もし試してみたいと思ったら、VSCode Marketplaceからインストールすることができます。ast-grep VSCodeはまだ開発中で、改善の余地がたくさんあります。フィードバックや提案を聞きたいので、GitHubでイシューやプルリクエストを気軽に開いてください。また、SoonIterさん、Steven Loveさん、Nyakku Shigureさん、ssr.nvimにも、貢献やインスピレーションをありがとうと言いたいです！

楽しく grep しましょう！