AST で JavaScript のコードを変換する - 30歳からのプログラミング
ソースコードを AST（抽象構文木）と呼ばれるデータ構造に変換することで、ソースコードの検証や変換をプログラムによって行えるようになる。 例えば ESLint では、ソースコードを AST に変換して、それに対してチェックを行っている。 また、V8 などの JavaScript エンジンも、対象の JavaScript ソースコードを AST に変換してから、後続の処理を行う。 AST を使えるようになると、ソースコードの検証や変換を行うツールを自作できるようになる。 この記事では、JavaScript AST を扱うための方法を見ていく。 この記事で使用しているライブラリのバージョンは以下の通り。 esprima@4.0.1 estraverse@5.2.0 escodegen@2.0.0 動作環境は Node.js のv12.17.0で行っている。 また、この記事に出てくる木構造の画像
作って理解する Babel プラグイン - Techtouch Developers Blog
エンジニアの伊藤です。 ようやく梅雨が開けたと思ったらすでに立秋。残暑は残るどころか日に日に増している感じさえあります… 🥵 。 この記事では、普段の開発で非常にお世話になっているツール Babel のプラグインを作成する方法と、Babel プラグインの例としての処理時間を計測するプロファイラを紹介します。Babel プラグインに踏み込んでいきたいのですが、理解を助けるためにまず Babel が何をするツールなのかから説明します。 Babelとは Babel の処理の流れ AST (Abstract Syntax Tree) Babel プラグイン Babel プラグイン プロジェクト最小構成 Hello World 「プロファイラ」で何をするのか まとめ Babel プラグイン開発に参考になったサイト おまけ Babelとは フロントエンドの開発を行っている方にはお馴染みな Babel
大統一 Node ツールチェイン Rome の野望 現状の実装
つい先日 beta リリースされたフロントエンドのツールチェインの Rome について、その思想とコードを読んだ結果の現状について。 Rome Frontend Toolchain この記事は公式ドキュメント以外にもソースを読んで得られた undocumented な部分も含んでいるので、すぐ古くなる。その前提で読むように。 問題の認識とその解決手段 フロントエンドの最適化は実行前のプリプロセスに、エコシステムの開発リソースの多くが当てられている。Node のツールチェインが発達するにつれて、自前の パーサ+AST 定義を持つ実装が増えていった歴史がある。 acorn(estree) babel prettier typescript terser それぞれのツールの生成する AST はそのツールの都合で微妙に/もしくは大幅に定義がずれている。typescript に至っては完全に別物。こ
Svelteコンパイラのコードを読む Part.1 - console.lealog();
気になるもののコードは読むべし、ということで。 ちなみにコードを読み始めた時点でのバージョンは、`v3.23.2`です。 自分のコードリーディング用のメモ記事なので、他の人が読んでわかりやすいかは保証できません！ 読みすすめ方 GitHub - sveltejs/svelte: Cybernetically enhanced web apps Svelteには、`runtime`と`compiler`のコードがある。 いずれはどっちにも目を通すつもりでいるけど、まずは`compiler`から読んでいく。 ただ`compiler`のコードをそのまま使うことはほぼないと思うので、実際にモジュールとしてどういう使われ方をするのかが知りたい場合は、Rollupなどバンドラーのプラグインのコードも見ることになりそう。 この記事ではコードの中身を1行ずつ（もちろん端折るけど）読んでいく。 svelte
TypeScriptのcompiler APIをいじる - asterisc
はじめに これを作っているときに、もともとのagreedとswaggerの型の帳尻を合わせるために、TypeScriptのASTをいじっていろいろやりました。 そのときに調べたことなどをメモ代わりにまとめます。この内容は調べたこと+僕独自の解釈が入っている可能性があり、正確ではないかもしれませんが、ご了承ください。 TypeScript Compiler API 何ができるようになるか TypeScript Compilerを使うことにより、TypeScriptのASTの解析や編集などを行うことができます。linterや、静的解析、自動生成系のツールを作る際によく使う機能です。 例えば前述のagreed-typedではTypeScriptの型定義やコメントをASTを解析することにより抜き出し、そこからOpenAPI2.0(Swagger)を生成しています。 実際のアプリケーションコードを書
Prettier Plugins
フロントエンド 年越し LT忘年会 2019でPrettier PluginsについてLTをしました。 イベントページ( https://kfug.connpass.com/event/153648/ ) Prettier Pluginsを使って何ができるか、ASTについて話しました。 Prettier PluginsによりJavaやRuby、PHP、Kotlin、Elmなどの言語へのPrettierの実行が可能になります。また、JavaScript / TypeScriptなどPrettier本体がサポートしている言語に関しても機能拡張できます。
JavaScript ASTを使ったツール(自作、ESLint、Babel、jscodeshift)を実装する話
JavaScript ASTを使ったツール(自作、ESLint、Babel、jscodeshift)を実装する話 Dive into ASTというJavaScriptのASTを使ったツールの作り方を見ていく話を書きました。 自作の正規表現、ASTチェックツール、ESLint、Babel、jscodeshiftでそれぞれ動くツールを実装してるので、リポジトリにまとめてあります。 スライドではCode Surferを使ってASTや書き方をインタラクティブに解説しています。 スライド: Dive into AST リポジトリ: azu/dive-into-ast: JavaScriptを中心にしたAST(Abstract Syntax Tree)を使ったツールの作り方についての資料です！ 自作ASTツール、ESLint、Babel、jscodeshift それぞれでASTを使ったツールをどう実装
JavaScriptのリファクタリングツール「jscodeshift」の使い方 - Qiita
はじめに JavaScriptのコードを一括で変換したり修正したい場合、正規表現などを使い置換しますか？ シンプルなケースであればそれでも問題ないですが、複雑な変換であればASTベースでコードを自在に変換できる「jscodeshift」が便利です。 jscodeshiftを利用すると、以下のようなことができます。 例) functionで書かれた関数をアロー関数に一括で変換 target/arrow-function/index.js const fn = function() { console.log("foo"); }.bind(this); [1, 2, 3].map(function(v) { return v * v; }); Promise.resolve() .then(function() { console.log("foo"); }) .then(function()
Sebastian McKenzie: JavaScript Transformation | JSConf US 2015
I made the open source project Babel and will be presenting on how JavaScript transformation and ES6 can help improve developer workflow and how it can futur...
.d.tsを解析して破壊的変更を検知する
話すことTypeScript の ASTJS API（CLI コマンド以外から扱う）LanguageServiceTypeScript を日常的に使ってる方がターゲット Conventional Commitfeat, chore, fix, test, docs などのプレフィックスのコミット 「人間が」どのタイプの変更か判断して手動で振ってるその判断結果をベースに諸々効率化する
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - rwjblue/codemod-cli
jsx/AST.md at main · facebook/jsx
Dive into AST
Let’s try to hack AST of JavaScript