ブログ
Oxfmt実践チュートリアル：コードフォーマットを爆速に
Oxfmtの使い方をマスターしよう。Prettierより10倍以上速いコードフォーマットツールを、インストール・設定からエディタ統合まで完全ガイド。
LibDoc Team 2026年3月4日 OXC 連載 43 分で読める
#oxc
#oxfmt
#prettier
#コードフォーマット
#rust
Oxfmt実践チュートリアル：コードフォーマットを爆速に
prettier --write "./src/**/*" を実行した後、ファイルリストがゆっくりスクロールするのを見ながら、数百のファイルのフォーマットに十数秒あるいはそれ以上かかったことはありませんか？
今日は、この体験を根本から変える「Oxfmt」を紹介します。OXCツールチェーンのフォーマットツールとして、高速であるだけでなく、Prettierとの高い互換性も持っています。
コードフォーマットとは？
Oxfmtに入る前に、「コードフォーマット」の意味を理解しましょう。
なぜコードをフォーマットする必要があるのか？
次のコードを見てください：
// フォーマットが乱れたコード
const user={name:"田中",age:25,email:"test@example.com"};
function getUserInfo( user ){
const{name,age}=user;
return `ユーザー${name}、年齢${age}`;
}フォーマット後：
// 整ったフォーマットのコード
const user = { name: "田中", age: 25, email: "test@example.com" };
function getUserInfo(user) {
const { name, age } = user;
return `ユーザー${name}、年齢${age}`;
}コードフォーマットのメリット：
- 可読性の向上：整ったコードは読みやすく理解しやすい
- 競合の削減：統一されたスタイルはコードレビューでの議論を減らす
- 効率の向上：自動フォーマットで手動調整の時間を節約
Prettierの普及度
Prettierは現在 最も人気のあるコードフォーマットツールで、ほぼすべてのフロントエンドプロジェクトで使用されています。特徴は：
- 設定より規約：合理的なデフォルトフォーマットを提供
- 多言語サポート：JavaScript、TypeScript、CSS、HTML、JSONなど
- 豊富なエコシステム：様々なエディタやツールチェーンと統合
Oxfmtの位置づけ
OxfmtはOXCプロジェクトの一部で、Rustで書かれ、Prettierの高性能代替として設計されています：
- 速度の優位性：Prettierより10-30倍速い
- 高い互換性：Prettier設定形式をサポート
- 継続的な進化：機能カバレッジが向上中
Oxfmtのインストール
方法1：グローバルインストール
# npmを使用
npm install -g oxfmt
# yarnを使用
yarn global add oxfmt
# pnpmを使用
pnpm add -g oxfmt方法2：プロジェクト内インストール
npm install oxfmt --save-devpackage.json にスクリプトを追加：
{
"scripts": {
"format": "oxfmt \"./src/**/*.{js,jsx,ts,tsx}\" --write",
"format:check": "oxfmt \"./src/**/*.{js,jsx,ts,tsx}\" --check"
}
}方法3：npxを使用
npx oxfmt "./src/**/*.{js,ts}" --writeクイックスタート
基本コマンド
# 単一ファイルをフォーマット
oxfmt src/main.js --write
# 複数ファイルをフォーマット（globパターン使用）
oxfmt "./src/**/*.{js,jsx,ts,tsx}" --write
# フォーマットが正しいかチェック（ファイルを変更しない）
oxfmt "./src/**/*.{js,ts}" --check
# フォーマットの差分を表示
oxfmt "./src/**/*.js" --diffコマンドラインオプション
| オプション | 説明 |
|---|---|
--write | ファイルを直接変更 |
--check | チェックのみ、変更せず、終了コードを返す |
--diff | フォーマット前後の差分を表示 |
--config <path> | 設定ファイルのパスを指定 |
実践：最初のプロジェクトをフォーマット
一通り演练してみましょう。
ステップ1：テストファイルの作成
src/example.js を作成：
// 意図的にフォーマットを乱して記述
const config={
debug: true,
api:"https://api.example.com",
timeout:5000
}
function fetchData( endpoint ){
const url = config.api+endpoint
return fetch(url,{timeout:config.timeout})
.then(response=>response.json())
.catch(error=>{
console.error('Error:',error)
throw error
})
}
export{config,fetchData}ステップ2：フォーマットの実行
oxfmt src/example.js --writeステップ3：フォーマット結果の確認
フォーマット後のコード：
// 整ったフォーマット
const config = {
debug: true,
api: "https://api.example.com",
timeout: 5000,
};
function fetchData(endpoint) {
const url = config.api + endpoint;
return fetch(url, { timeout: config.timeout })
.then((response) => response.json())
.catch((error) => {
console.error("Error:", error);
throw error;
});
}
export { config, fetchData };ステップ4：—diffで差分を確認
oxfmt src/example.js --diff出力例：
--- src/example.js
+++ src/example.js (formatted)
@@ -1,13 +1,15 @@
-const config={
- debug: true,
- api:"https://api.example.com",
- timeout:5000
+const config = {
+ debug: true,
+ api: "https://api.example.com",
+ timeout: 5000,
}設定ファイル
Oxfmtは設定ファイルでフォーマットルールをカスタマイズできます。
設定ファイルの作成
プロジェクトのルートに .oxfmtrc または oxfmt.config.js を作成：
// .oxfmtrc
{
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"useTabs": false,
"trailingComma": "es5",
"printWidth": 80,
"bracketSpacing": true,
"arrowParens": "always"
}設定オプション詳細
| オプション | 型 | デフォルト値 | 説明 |
|---|---|---|---|
semi | boolean | true | 文の末尾にセミコロンを追加するか |
singleQuote | boolean | false | シングルクォートかダブルクォートか |
tabWidth | number | 2 | インデントのスペース数 |
useTabs | boolean | false | タブかスペースでインデントするか |
trailingComma | string | "es5" | 末尾カンマのルール |
printWidth | number | 80 | 1行の最大文字数 |
bracketSpacing | boolean | true | オブジェクトリテラルの波括弧内のスペース |
arrowParens | string | "always" | アロー関数の引数の括弧 |
trailingCommaオプション
// "none" - 末尾カンマを使用しない
const obj = {
a: 1,
b: 2
};
// "es5" - ES5がサポートする場所で使用（オブジェクト、配列）
const obj = {
a: 1,
b: 2,
};
// "all" - すべての場所で使用（関数引数を含む）
function example(
a,
b,
) {}arrowParensオプション
// "always" - 常に括弧を使用
const fn = (x) => x * 2;
// "avoid" - 単一引数の場合は括弧を省略
const fn = x => x * 2;エディタ統合
エディタで自動フォーマットを行うと、開発効率が大幅に向上します。
VS Code設定
方法1：Oxcプラグインを使用
- 「Oxc - Oxidation Compiler」プラグインをインストール
.vscode/settings.jsonで設定：
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "oxc.oxc-vscode",
"[javascript]": {
"editor.defaultFormatter": "oxc.oxc-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "oxc.oxc-vscode"
}
}方法2：コマンドライン + 保存時実行を使用
.vscode/settings.json で：
{
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.format": true
}
}package.json に追加：
{
"scripts": {
"format": "oxfmt \"./src/**/*.{js,ts,jsx,tsx}\" --write"
}
}WebStorm / IntelliJ IDEA
- Settings → Tools → External Tools を開く
- 新しいツールを追加：
- Name:
Oxfmt - Program:
npx - Arguments:
oxfmt "$FilePath$" --write
- Name:
- ショートカットキーまたはファイル保存時の自動実行を設定
Prettierとの互換性
OxfmtはPrettierとの高い互換性を目指していますが、一部の機能はまだ開発中です。
サポート済みの機能
| 機能 | ステータス |
|---|---|
| JavaScript/TypeScriptフォーマット | ✅ サポート |
| JSX/TSXフォーマット | ✅ サポート |
| JSONフォーマット | ✅ サポート |
| 基本設定オプション | ✅ サポート |
.prettierrc 設定の読み込み | ✅ サポート |
開発中の機能
| 機能 | ステータス |
|---|---|
| CSS/SCSSフォーマット | 🚧 開発中 |
| HTMLフォーマット | 🚧 開発中 |
| Markdownフォーマット | 🚧 開発中 |
| プラグインシステム | 🚧 計画中 |
移行の提案
Prettierを使用している場合、次のように移行できます：
- Prettier設定ファイルを保持
Oxfmtは .prettierrc または prettier.config.js を直接読み込めます：
// prettier.config.js
module.exports = {
semi: true,
singleQuote: true,
tabWidth: 2,
trailingComma: 'es5',
printWidth: 100,
};- 段階的な置き換え
{
"scripts": {
"format": "oxfmt \"./src/**/*.{js,ts}\" --write",
"format:prettier": "prettier --write \"./src/**/*.{css,html,md}\""
}
}OxfmtでJS/TSを処理し、Prettierで他のファイルタイプを処理します。
パフォーマンス比較
OxfmtとPrettierのパフォーマンス差を見てみましょう。
テスト環境
- ファイル数：200個のTypeScriptファイル
- 総コード量：約50,000行
- マシン：MacBook Pro M1
テスト結果
| ツール | 初回実行時間 | 2回目の実行時間 |
|---|---|---|
| Prettier | 3.2秒 | 2.8秒 |
| Oxfmt | 0.15秒 | 0.12秒 |
OxfmtはPrettierより約20倍速い！
実際の影響
大規模プロジェクトやCI/CD環境では、この差がより顕著になります：
| シーン | Prettier | Oxfmt |
|---|---|---|
| pre-commitフック | 10-30秒 | 0.5-2秒 |
| CIフォーマットチェック | 1-2分 | 3-5秒 |
| 全プロジェクトフォーマット | 数分 | 数秒 |
実用テクニック
特定ファイルを除外
.oxfmtignore ファイルを作成：
# .oxfmtignore
node_modules/
dist/
build/
*.min.js
*.d.ts
coverage/特定範囲をフォーマット
globパターンで正確に制御：
# srcディレクトリのコンポーネントファイルのみフォーマット
oxfmt "./src/components/**/*.{jsx,tsx}" --write
# テストファイルを除外
oxfmt "./src/**/*.ts" --ignore "./src/**/*.test.ts" --writelint-stagedとの連携
package.json で：
{
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"oxfmt --write"
]
}
}huskyと組み合わせてpre-commitの自動フォーマットを実現：
{
"scripts": {
"prepare": "husky install"
}
}よくある質問
OxfmtとPrettierの出力が異なる？
実装の違いにより、一部のエッジケースでは出力が完全に一致しない場合があります。設定を調整して差異を減らすことができます。
Prettierがサポートしないファイルをどう処理する？
Prettierをバックアップとして保持：
{
"scripts": {
"format": "oxfmt \"./src/**/*.{js,ts,jsx,tsx,json}\" --write && prettier --write \"./src/**/*.{css,scss,html,md}\""
}
}Oxfmtはどの言語をサポート？
現在サポート：
- JavaScript (
.js,.mjs,.cjs) - TypeScript (
.ts,.tsx,.mts,.cts) - JSX (
.jsx) - JSON (
.json)
まとめ
この記事ではOxfmtの核心的な使い方を紹介しました：
| 内容 | コマンド |
|---|---|
| ファイルのフォーマット | oxfmt ./src --write |
| フォーマットのチェック | oxfmt ./src --check |
| 差分の確認 | oxfmt ./src --diff |
| 設定ファイル | .oxfmtrc または oxfmt.config.js |
Oxfmtの核心価値：コードフォーマットを「待つ」から「瞬時に完了」へ。
次のステップ
Oxfmtの設定オプションをさらに知りたいですか？**OXC日本語ドキュメント - Formatterセクション**をご覧ください。
次回の記事では、OXC Parser を深く掘り下げます — コード解析の魔法を探り、ASTがどのように機能するかを理解しましょう！
💡 関連記事：