## 自己紹介
りんたろーです。
学生してます。緑の会社で Web エンジニアもしてます。
初めて登壇するのでガチガチに緊張していますが、よろしくお願いします。
## 今までの JS ツールチェイン
突然ですが、これまでの私達の開発を支えてきたツールチェインを振り返ってみましょう。
- Webpack
- Babel
- ESLint
- Prettier
これらのツールに共通している点はなんでしょう？それは...
**JavaScript(TypeScript)で実装されているという点**
## 昨今の JS ツールチェイン
では、昨今登場しているJSツールチェインを見てみましょう。
- Vite
- esbuild
- swc
- Rolldown
- Biome
- Oxc
これらのツールに共通している点はなんでしょう？それは...
## なぜ Rust で書かれることが多いのだろう？
前提として、私は Golang が書けない読めない人なので、 Golang については語れません。
Rust が JS ツールチェインの実装言語として選ばれる理由はいくつか考えられます。
- ライフタイムアノテーション
- ゼロコスト抽象化
- `napi_rs`の存在
これらの言語仕様やライブラリによって、開発者はアルゴリズムの複雑さにのみ注意するだけでよくなるため、より高速なツールチェインを簡単に実装することができます。
それでは今日の本題です。
## Oxc ってなんでしょう？
Oxc とは、パーサー、リンター、フォーマッタ、トランスパイラ、ミニファイア、リゾルバなど、JavaScriptに不可欠なコンパイラツールのコレクションです。
また、Rolldownなどの次世代のツールチェインのサポートをしているのもOxcです。
## なぜ Oxc なのか？
では次に Oxc の思想についてです。
Oxc では以下のような思想で開発されています。
- パフォーマンス
- 拡張性
- 信頼性
それぞれ詳しく見ていきましょう。
まずはパフォーマンスです。
無駄のない設計により、Oxc は高速な処理を実現しています。
Oxc TypeScript + JSX トランスフォーマーは swc よりおよそ2倍高速です。
### ではなぜ Oxc は高速なのでしょうか？
ここでは Oxc が高速な理由について少し紹介します。
1. アリーナアロケーターを用いた AST の高速なメモリ割り当てと解放
- `bumpalo` と呼ばれるライブラリを使用しています。これはバンプアロケーターを提供していて、定数時間でのメモリ割り当てを可能にし、メモリの断片化を減らします。
- 以下のように AST にライフタイムアノテーションを付与することで AST node がアリーナに依存していることを明示でき、アリーナが解法されると AST node も解法されるようになります。
```rs
pub enum Statement<'a> {
Expression(ExpressionNode<'a>),
}
```
Oxc はここ以外でヒープの確保が行われません。
2. パフォーマンスの問題（ランタイムとコンパイル速度）はすべてバグとみなすポリシー。
- Oxc チームの決断の多くはこのポリシーに基づいている。
- https://oxc.rs/docs/contribute/rules.html#development-policy
memo: compact_str に関する記述がドキュメントにあるが、現在 Oxc は oxc_span 以外で使用していない。なぜなら bumpalow と組み合わせるとメモリリークすることが判明したから
3. データ指向な設計思想で実装されている。
ゲーム開発の現場などでは有名な話ですが、一般的にメモリ IO は CPU IO に比べてボトルネックとなりやすいです。
Rustはその型システムにて堅牢なデータ指向プログラミングを可能にしています。
Oxc では以下のように enum の大きさが小さくなるようにテストで強制しています。
```rs
#[cfg(all(target_arch = "x86_64", target_pointer_width = "64"))]
#[test]
fn no_bloat_enum_sizes() {
use std::mem::size_of;
use crate::ast::*;
assert_eq!(size_of::<Statement>(), 16);
assert_eq!(size_of::<Expression>(), 16);
assert_eq!(size_of::<Declaration>(), 16);
}
```
次に拡張性についてです。
Oxc は最初から他のプロジェクトのコンポーネントとして使えるように設計されています。
以下に Oxc を使用しているプロジェクトをいくつか紹介します。
- Rolldown
- https://github.com/rolldown/rolldown
- Biome
- https://github.com/biomejs/biome
- tauri
- https://github.com/tauri-apps/tauri
- kuma-ui
- https://github.com/kuma-ui/kuma-ui
Oxc はコードの正しさと信頼性を保証するために、コード周りのインフラに重点を置いています。
Oxc では以下の結果を公開しています
- Test262, Babel, TypeScriptのテストスイートのパス率
- パフォーマンスベンチマーク
- パッケージサイズ
特に注目すべきは oxc_parser のテストスイートのパス率です。
これらのデータは `oxc_parser`, `swc_ecma_parser`, `biome` のそれぞれのテストスイートのパス率を比較、まとめたものです。
| パーサー | test262 | Babel | TypeScript |
| --------------- | ------- | ------- | ---------- |
| oxc_parser | 100% | 90% | 99% |
| swc_ecma_parser | 54% | No data | No data |
| biome | 97% | 92% | 76% |
特徴的なのは、oxc_parser が 他の Rust 実装のパーサーに比べて高く、精密な結果を出していることです。
## Oxc の未来
Oxc は"第3世代"の JS ツールチェインです。
先人たちのツールチェインを参考にしつつ、Oxc は次のような特徴を持っています。
- 最適な選択を基礎に取り込む
- edge bundling
- JS とのシームレスな相互運用性
- 無駄がない
- swc や biome はアーキテクチャによる制約があったりコンパイラのユースケースを考慮されていない
私達の焦点はパフォーマンスのためのパフォーマンスではなく、その JS ツールチェインを次のレベルに引き上げる能力を"買う"ためのパフォーマンスです。