Vue × Nuxt × Oxc どこまで使える？実運用の現在地

小泉 佑太郎 @ykoizumi0903
2026 年 5 月 16 日
v-tokyo Meetup #25

Transcript

1. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 Vue × Nuxt × Oxc どこまで使える？実運用の現在地 株式会社 アンドパッド 開発部 Tech Lead 小泉佑太郎 2026.06.16 v-tokyo Meetup #25
2. © 2024 ANDPAD All Rights Reserved. Confidential Yutaro Koizumi (@ykoizumi0903) • 2019年 アンドパッドに入社 • ERP（引合粗利管理）フロントエンドチーム テックリード 過去の登壇 • Nuxt × Vue Router の 力を最大限に引き出す機能を紹介 (Vue Fes Japan 2024) • Vue・React マルチプロダクト開発を支える Vite (#vuefes_fec_tokyo) • Vue にまつわる3つのよくある誤解と、私がVueを選ぶ4つの理由 (Next.js vs Nuxt それぞれの良さを知る Frontend Night) 自己紹介
3. © 2024 ANDPAD All Rights Reserved. Confidential ANDPAD とは スマホで撮影した写真、 チャットで共有された 資料や各現場の図面 ANDPADは現場の効率化から経営改善まで一元管理できる クラウド型建設プロジェクト管理サービスです ※ データ 入力 データ 活用 データを活用して、 ・資料作成 ・検査報告書作成 ・帳票作成 ・データ資産... 検査 受発注 引合粗利 図面 チャット 工程表 報告 写真 クラウド上で最新の情報を共有 ※『建設業マネジメントクラウドサービス市場の動向とベンダシェア（ミックITリポート 2024年12月号）』（デロイト トーマツ ミック経済研究所調べ）
4. © 2024 ANDPAD All Rights Reserved. Confidential のプロダクト おうちノート アプリ マーケット 入退場管理 早受取 検査 引合粗利管理 施工管理 ボード 請求管理 黒板 資料承認 (設定) 受発注 チャット … 一部コンポーネントで Svelte を利用 図面 資料承認 BIM ※ここに載っていないものや、未発表のプロダクトもあります Tsukuri (社内デザインシステム) ANDPAD のフロントエンド 施工管理 引合粗利管理 （一部のページ） and more...
5. © 2024 ANDPAD All Rights Reserved. Confidential 1. Oxc への移行を選択した理由 2. Vue (Nuxt) に Oxlint を導入する 3. Vue (Nuxt) に Oxfmt を導入する 4. まとめ アジェンダ
6. © 2024 ANDPAD All Rights Reserved. Confidential Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 1. Oxc への移行を選択した理由
7. © 2024 ANDPAD All Rights Reserved. Confidential Oxc とは？ • JS/TS向けに Rust で書かれた、ハイパフォーマンスな ツールチェーンのコレクション ◦ VoidZero のプロジェクトの一環として提供され、 Vite の次世代バンドラ Rolldown の基盤 • Eslint 互換の Oxlint、Prettier 互換の Oxfmt が 単体でも使えるライブラリとして提供されている ◦ 今日メインに取り上げるのはこの2つです
8. © 2024 ANDPAD All Rights Reserved. Confidential Oxlint / Oxfmt の特徴 Oxlint • ESLint との互換性、高いパフォーマンス • メジャーな ESLint Plugin 機能を内蔵プラグインでサポート （import, react, vue, jsx-a11y など） • ESLint Plugins との互換性を持った JS Plugin 機能が提供（現在は Alpha 版） Oxfmt • Prettier と 100% の互換性、高いパフォーマンス • メジャーな Prettier Plugin を標準機能としてサポート （import 文の sort、Tailwind class の sort, CSS-in-JS のフォーマット など）
9. © 2024 ANDPAD All Rights Reserved. Confidential どの Linter & Formatter を選ぶ？ Biome vs Oxc vs ESLint/Prettier 速度面 • Oxc と Biome はどちらも Rust 製で圧倒的に速く、可能な限り ESLint/Prettier から 乗り換える価値がある ◦ AI で PR 数が加速する中で、CI 時間削減の価値も上がっている • Oxc と Biome の速度差は、よほど大規模なプロダクトでなければ誤差の範囲 （どちらも十分に速い） Vue ファイル（SFC）のサポート • Oxlint と Biome は発展途上であり、まだ ESLint を完全に置き換えるのはまだ難しい
10. © 2024 ANDPAD All Rights Reserved. Confidential どの Linter & Formatter を選ぶ？ チーム内で出した結論  Linter Oxlint と ESLint を組み合わせて使う  Formatter Oxfmt に全面移行する
11. © 2024 ANDPAD All Rights Reserved. Confidential Biome ではなく Oxc を選んだ理由 ① ESLint および Prettier との高い互換性 Biome は lint と format を同時に行うため、原理的に ESLint / Prettier との完全 互換にはならない。Oxc よりも既存プロジェクトに入れる場合のリスクが大きい ② oxlint-plugin-eslint による段階的な移行が可能 Oxlint が既にサポートしている ESLint のルールだけを無効化して高速化する公式 プラグインが提供されているため、導入しやすい ③ VoidZero によるJSツールチェーンの統一という未来への期待 Vue / Vite を使う以上、VoidZero プロダクト間の連携が今後さらに進んだ際に 恩恵を受けやすい構成にしておきたい（e.g. Vite Plus）
12. © 2024 ANDPAD All Rights Reserved. Confidential Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 2. Vue (Nuxt) に Oxlint を導入する
13. © 2024 ANDPAD All Rights Reserved. Confidential Vue プロジェクトが Oxlint に全面移行できない理由 .vue ファイルの Parser に Oxlint がまだ対応していない eslint-plugin-vue （ルールセット）と vue-eslint-parser （パーサー）は別、 Oxlint が jsPlugins で読み込めるのは前者のみ 例： <template> ブロックで参照されている変数が未使用扱いとなる → script ブロックの Lint であっても、 oxlint に任せることはまだできない
14. © 2024 ANDPAD All Rights Reserved. Confidential Vue プロジェクトが Oxlint に全面移行できない理由 JS/TSファイルは eslint-plugin-vue ルールも含めて全面移行しても問題ない Vue ファイルは script ブロックであっても ESLint でのチェックが必須 → ESLint は Vue ファイルのみを対象にチェックし、JS/TS ファイルは対象から除外 　JS/TS ファイルは Oxlint のみでチェックすることで、大幅な高速化を目指す方針 ※ Oxlint で検知できないルールや、 @nuxt/eslint からの移行が難しいルールもあるので、 本当に ESLint を対象外にして良いかはケースバイケースです
15. © 2024 ANDPAD All Rights Reserved. Confidential ESLint から Oxlint に全面移行した結果 Oxlint との併用でも若干の改善、JS/TSファイルを Oxlint のみにすることで大幅な高速化！ ※ Oxlint で先にエラーを検知できれば ESLint 実行前に終わるので、 総合時間だけを見て効果が薄いとは 言えない
16. © 2024 ANDPAD All Rights Reserved. Confidential .vscode/settings.json .oxlintrc.json Oxlint のオススメしたい設定 • no-unused-vars で fix.imports = “safe-fix” を指定することで、Oxc の VSCode 拡張機能でも保存時に未使用 import を自動削除できる（#18301） • eslint.config.mjs の globalIgnores で ts ファイルを除外 { "$schema": "./node_modules/oxlint/configuration_schema.json", "rules": { "no-unused-vars": [ "error", { "fix": { "imports": "safe-fix", "variables": "suggestion" } } ] { "oxc.path.oxlint": "node_modules/.bin/oxlint", "oxc.enable.oxlint": true, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit", "source.fixAll.oxc": "explicit" }, } eslint.config.mjs import { globalIgnores } from '@eslint/config-helpers' import withNuxt from "./.nuxt/eslint.config.mjs"; export default withNuxt( globalIgnores(['**/*.ts', '**/*.tsx', '**/*.mts']),
17. © 2024 ANDPAD All Rights Reserved. Confidential Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 3. Vue (Nuxt) に Oxfmt を導入する
18. © 2024 ANDPAD All Rights Reserved. Confidential Oxfmt × Vue Prettier から今すぐ移行しても何の問題もありません！！ • Prettier に対する100%の互換を実現 • Prettier からの移行が簡単 ◦ oxfmt --migrate=prettier コマンド ◦ 移行ガイド Migrate from Prettier | Oxfmt | The JavaScript Oxidation Compiler • VSCode 拡張機能による、自動フォーマットをサポート（ editor.defaultFormatter ） • Non-JS ファイルのフォーマット 詳しくは： 乗り換えるなら今！ Prettier から Oxfmt への移行を試してみた - ANDPAD Tech Blog
19. © 2024 ANDPAD All Rights Reserved. Confidential Prettier から Oxfmtに全面移行した結果 JS/TS ファイルに絞ると48倍という圧倒的な高速化、Vue ファイルを含めても約4倍に
20. © 2024 ANDPAD All Rights Reserved. Confidential Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 4. まとめ
21. © 2024 ANDPAD All Rights Reserved. Confidential まとめ • Oxc 移行の改善効果は絶大！！ • Oxlint への全面移行は難しいものの、部分的・段階的な導入でも効果があります • 既存PJ への導入の場合、まずは Oxfmt だけでも入れるのがオススメです • Oxc の更なる進化、そして個人的には Vue への完全対応を期待しています💚
22. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. 無断転載・無断複製の禁止 Confidential 幸せを築く人を、幸せに。 住まいをつくる。ビルや施設をつくる。街をつくる。 生活を豊かにする建築・建設業は、幸せづくりと例えられます。 私たちは、その幸せづくりをする人たちをテクノロジーの力で 後押ししていきたい。心からそう考えてます。 我々はこれからもお客様の声をサービスに反映して、 建設業界及び建設業従事者様の業務効率化、 DX化を支援してまいります。 Mission We are hiring !! カジュアル面談 応募フォーム 開発部公式 X アカウント @andpad_dev エンジニア採用ページ