はじめに 鹿児島らぐというLinux User Groupで月イチを目処に勉強会を行っています。現在は主にオンラインで活動しており、オープンソースのソフトウェアをVPSにセルフホストしてそれを利用してオンライン勉強会をし […]

この記事でわかること AivisSpeech（無料のローカル音声合成）＋ HyperFrames ＋ Claude Code の3つで、ナレーション・字幕・音声付きの解説動画が作れます。動画編集ソフトは使いません。 人間がやることは 「フォルダを1つ作る」「指示を2つ出す」「Claudeの質問に答える」 だけ。後は動画の完成まで待つだけで動画ができました。 ただし前提として Node.js と FFmpeg が必要です。入っているかは Claude が最初に点検してくれるので、足りなければその場で追加して貰えます。 音声モデルには ACML（Aivis Common Model License） が適用されます。 営利利用が禁止された ACML-NC 1.0 のモデルもある ので、使う前にどちらが適用されるかを 条文 で確認してください。 できたもの：3分26秒の解説動画 「生成AIの基礎」を、博士役と生徒役の会話で説明する動画です。中央のSVG図解が、そのとき話しているセリフに合わせて動きます。 https://www.youtube.com/watch?v=2lvo5-Ze4EU 中身の数字はこんな感じです。 項目 数字 尺 3分26秒（7トピック） 総フレーム数 5,400枚 MP4書き出し時間 1分55秒 着手から完成まで 約2時間 僕はイラストを描いていないし、音声も録っていないし、動画編集ソフトも開いていません。台本も書いていません。 :::message 本来は、できた動画の内容や台本を人の目で確認してから公開すべきです。ただ今回は「AIに任せるとこんな動画ができる」を知ってもらうため、 AIが作った動画をあえて無修正のまま 載せています。 実際、字幕で「生成AI」と書くべきところが「生成エーアイ」になっているミスが残っています。最後は人の目での確認が欠かせないことも、動画を見てもらえれば伝わるはずです。 ::: 役割分担：HyperFrames・AivisSpeech・Claude Code 登場人物が3つあるので、先に整理します。 ツール 役割 AivisSpeech 日本語の音声合成。テキストを渡すと喋ってくれる HyperFrames HTMLから動画（MP4）を書き出すフレームワーク。HeyGen製 Claude Code 上の2つを実際に組み立てる担当。台本もHTMLもコードも書く つまり「HyperFramesで動画を組む人」がClaude Code です。僕はClaudeに日本語で作りたい動画について指示して、Claudeからの質問に答えているだけです。 作業の全体像：7ステップ 細かい話の前に、全体の流れです。ここから先はこの順番で進みます。 # やること どこで 1 AivisSpeech をダウンロードして起動する アプリ 2 AivisHub から音声モデルを2つ以上追加する アプリ 3 フォルダを1つ作って Claude Code で開く ターミナル 4 指示を2つ送る Claude Code 5 Claude の質問に答える Claude Code 6 プレビューで確認する ブラウザ 7 MP4 に書き出す Claude Code 手を動かすのは1〜4までで、5から先はほとんど待っているだけです。 手順1：AivisSpeechをダウンロードして起動する 公式サイトからダウンロードしてインストールします。無料です。 https://aivis-project.com/ 起動するとこの画面になります。左に選択中の話者、右に話速や音高のスライダーがあります。 起動直後。この時点でテキストを打って再生ボタンを押せば、もう喋ってくれます ここで一度、適当なテキストを入れて再生してみてください。声が出れば準備OKです。 :::message このアプリは起動しているだけでいい 、というのが大事なポイントです。 AivisSpeechは裏側で音声合成のサーバー（ 127.0.0.1:10101 ）を立てていて、Claudeが書いたスクリプトはそこに話しかけて音声を作ります。人間がこのアプリを操作する場面は、実は一度もありません。 ::: 手順2：AivisHubから音声モデルを追加する デフォルトの声だけでもいいのですが、今回は「博士」と「生徒」の2人が会話するので、 声が2つ以上必要 です。声は AivisHub というサイトから追加します。 追加のしかたは2通りあります。アプリ内から探す方法と、ファイルをダウンロードして入れる方法です。メニューバーの「音声合成モデル」から両方に行けます。 「音声合成モデルのインストール・管理」と「AivisHubで音声合成モデルを探す」の2つが入口です AivisHubで探して選ぶ 「AivisHubで音声合成モデルを探す」を選ぶと、モデル一覧が開きます。ダウンロード数順に並んでいて、キャラクターの絵と「若い女性の声」「中年男性の声」といったタグ、それにスタイル数が見えます。 ダウンロード数の多い順。「6スタイル」「7スタイル」という表記が、その声で使える喋り方の種類です 気になったモデルをクリックすると詳細ページに行きます。今回博士役に使った「阿井田 茂」はこんなページです。 ボイスサンプルが聴けます。右側の「詳細情報」にライセンスとファイルサイズ（251.14MB）が書かれています ここで見るべきは3つです。 スタイル … ノーマル / Calm / Far / Heavy / Mid / Shout / Surprise のように、同じ声で複数の喋り方が使えます。今回は落ち着いて断定してほしかったので Calm を選びました。 ボイスサンプル … 実際の声を聴けます。声の印象は説明文だけではわからないので、聴いて頂くと、どれを使うかのイメージが湧きます。 ライセンス … ACML 1.0 と書かれています。ここは飛ばさないでください。 ACML-NC 1.0 のモデルは営利目的の利用が禁止 されているので、業務で使うなら必ず見る必要があります（詳しくは後述）。 AIVMXファイルをダウンロードして入れる 詳細ページの「AIVMX をダウンロード」を押すと .aivmx というファイルが落ちてきます。これを AivisSpeech に読み込ませる方法です。 Aivis Speechを開き、「音声合成モデル」→「音声合成モデルのインストール・管理」→ 右上の「インストール / 更新」を開きます。 「ファイルからインストール」でダウンロードした.aivmxを選ぶだけ。URL直指定もできます 入れ終わったら、管理画面で確認します。 5モデル入った状態。「まお」は6スタイルで、クレジット表記の指定まで書かれています 2つ以上入っていれば会話形式の動画が作れます。 手順3：フォルダを1つ作ってClaude Codeで開く ここからターミナルです。1行だけです。 mkdir hyperframes 動画制作用のフォルダを用意します。フォルダ名は何でもいいです。 空のフォルダで始めて、後はClaudeがこの中に必要なファイルを全部作ってくれます。 後は作ったフォルダをClaudeのアプリのClaude Codeで開くだけ。 手順4：指示は2つだけ 実際に打った文章をそのまま載せます。コピペして使えます。 Hyperframesで動画を作る為のプロジェクトのセットアップを行なって。公式のスキルもあるからそれもセットアップを行なって これを送るだけ。「公式のスキルも」と付けるのがポイントです HyperFramesには公式のスキル（Claudeへの取扱説明書のようなもの）が用意されていて、これを入れておくとClaudeがHyperFrames特有のルールを踏み外さなくなります。逆に、これがないとClaudeは手探りになります。 Aivis Speechを使って生徒役と博士役で会話しながら生成AIの基礎知識の説明動画を作成して。その際にSVGのアニメーションを最大限使って視覚的にもわかりやすい工夫もして。 この一文に入れた指定は4つだけです。 指定 書いた言葉 声をどうするか 「Aivis Speechを使って」 誰が喋るか 「生徒役と博士役で会話しながら」 何の動画か 「生成AIの基礎知識の説明動画」 見せ方 「SVGのアニメーションを最大限使って」 尺も、シーン数も、どの声を使うかも指定していません。 それはこの後Claudeが聞いてきます。 手順5：Claudeの3つの質問に答える 2つ目の指示を送ると、Claudeはいきなり作り始めません。まず環境を調べて、使える声を一覧にして、それから質問してきました。 質問1：尺とカバー範囲 動画の尺とカバーする範囲はどれくらいにしますか？（ここで台本量・シーン数・SVG図解の点数が全部決まります） 選択肢は「約90秒 / 3トピック」「約2分 / 4トピック」「約3分 / 6トピック（推奨）」「約5分 / 9トピック」。 推奨の3分を選びました。 質問2：声の配役 声の配役はどの組み合わせにしますか？（上のサンプルMP3を聴いてから選んでください） ここが良かったところで、 Claudeが先にサンプル音声を作って聴かせてくれました。 各モデルの説明文はAPIから取れなかったそうで、代わりに「各音声が自分の名前を名乗ってから博士／生徒のセリフを読む」音声を実際に合成してくれたんです。 聴いた上で「博士＝阿井田 茂 Calm / 生徒＝まお ふつー」を選びました。 質問3：画面の見せ方 画面の見せ方（SVGの使いどころ）はどれにしますか？ 「左右にSVGキャラ常駐＋中央に図解」「キャラなし・全画面図解＋話者バッジ」「キャラは小さくコーナー＋図解を大きく」「全身SVGキャラ＋ホワイトボード演出」の4択。選択肢にアスキーアートのレイアウト案が付いていたので、イメージしやすかったです。 「左右にキャラ＋中央に図解」を選びました。 台本のレビューは飛ばしてOK この後Claudeは台本（ SCRIPT.md ）を書いて、「ここで一度レビューを挟みます」と言ってきます。 :::message まず動画が作れるかどうかを試したいだけなら、 ここは読まずに「進めて」で大丈夫です。 台本を直したくなったら後からいくらでも直せます（詳しくは後述）。僕も1本目は流しました。 ::: 手順6：プレビューで確認する 台本ができて、音声が合成されて、HTMLが組み上がると、ブラウザで確認できます。ブラウザが立ち上がらなかったらClaudeにブラウザの立ち上げてプレビューしたい旨使えればOKです！ HyperFramesの編集画面（Studio）が開きます。 左が各シーンのファイル、中央がプレビュー、下がタイムライン。00:00 / 03:25 と尺が出ています この画面で見るところは3つです。 中央のプレビュー … 再生ボタンで実際に動きます。音も出ます。 下のタイムライン … Topic 1 〜 Topic 7 が時間順に並んでいます。どのシーンが何秒から何秒までかがひと目でわかります。 左の一覧 … 各シーンが compositions/topic-1.html のような別ファイルになっています。1つのシーンだけ直しても他に影響しません。 直したいところがあれば、Claudeに日本語で言えば直してくれます。「シーン3の図解が速すぎる」でも通じます。 手順7：MP4に書き出す プレビューでOKなら書き出します。動画を書き出してと伝えるだけでOKです！ 3分26秒の動画で 1分55秒 で終わりました。5,400フレームを1枚ずつ描いて繋げているので、尺が伸びるとその分時間がかかります。 これで out/seisei-ai-no-kiso.mp4 ができあがり。 完成度を上げるなら：台本チェックとキャラクターの用意 1本目は「作れるかどうか」の検証なので、流れに乗るだけでいいと思います。そのうえで、ちゃんとしたものを作るなら追加でやることが2つあります。 1. 台本（SCRIPT.md）をレビューする SCRIPT.md がこの動画の肝です。セリフはもちろん、尺・字幕・口パク・図解のタイミングまで、全部ここから逆算されて動画が出来上がります。 内容の正しさは人間しか判断できないので、社外に出す動画なら必ずここを読んでください 2. キャラクターを自分で用意する 今回のキャラクターは Claudeが描いたSVG です。動くし表情も変わりますが、見た目は簡素です。図解の方は十分見られるものになったので、伸びしろがあるのはキャラの絵の方でした。 作り込むなら、PSDなどで パーツごとにレイヤーを分けて 描くのがいいと思います。 ここのキャラクターの作り方はまた別の機会で試せたら紹介しますね！ 顔・体・目（開閉）・口（あ / い / う / え / お / 閉じ）を別レイヤーにする パーツごとに PNG か SVG で書き出す 書き出したファイルを1つのフォルダでまとめてClaudeに「このキャラに差し替えて」と伝える 口の形は「あいうえお＋閉じ」の6種類あれば足ります。AivisSpeechは音声を作るときに「どの母音を、いつ、どれだけの長さ発音するか」というデータを返してくれるので、そこから口の形が自動で切り替わります。だからパクパク動いているだけの口ではなく、実際の発音に合った口になります。 留意事項：社内ルールとライセンスの確認 ここは飛ばさずに読んでください。 各ツールの利用は所属会社のルールに沿って この記事で使ったツールはどれも外部サービスです。 業務で使う場合は、必ず所属する会社のルールや利用可否の基準に沿って利用してください。 何を入力していいのか、成果物をどこまで公開していいのかは会社ごとに違います。 AivisSpeechの音声モデルはライセンスを確認する 音声モデルには ACML（Aivis Common Model License） が適用されます。条文はGitHubで全文公開されているので、 使う前に必ずここを読んでください。 https://github.com/Aivis-Project/ACML/tree/master 一番大事なのは、 ACMLには2種類ある ということです。 ライセンス 営利利用 ACML 1.0 個人・法人・非営利・営利すべて可。 商用利用OK ACML-NC 1.0 営利目的の利用は禁止。 個人の私的な創作活動や、教育機関での教育・研究といった非営利利用のみ 同じAivisHubに並んでいても、 どちらが適用されるかはモデルごとに違います。 会社のブログやサービスで使うなら営利利用に当たる可能性があるので、 -NC が付いていないかを最初に確認してください。 ライセンス名は AivisHubの詳細ページの「詳細情報」欄 と、 AivisSpeechの管理画面 の両方に書かれています。今回博士役に使った「阿井田 茂」は ACML 1.0 でした。 禁止事項は両ライセンス共通で、次の7項目です。 話者や他者の本人・原作者・公式関係者であると誤解させる利用 話者のイメージ・尊厳・品位・社会的評価を傷つける利用 実在の人物・団体・商品などを批判・攻撃・嫌がらせ・誹謗中傷・差別する活動 虚偽の情報やコンテンツを流布する活動 虚偽・誇大表現によるマーケティング、倫理的に問題のあるビジネス 特定の政治的立場・宗教・陰謀論への賛同や反対を呼びかける活動 反社会的・犯罪目的での利用 クレジット表記は、ACML 1.0 と ACML-NC 1.0 のどちらでも「任意」 と明記されています。ただしモデル側から表記のしかたの希望が書かれている場合があるので都度確認をお願いします。 :::message alert 上のまとめは2026年9月時点の条文を読んだものです。条文は更新される可能性があるので、判断するときは必ず ACMLの原文 を確認してください。 ::: まとめ やったことを並べ直すと、こうなります。 AivisSpeechを入れて起動する AivisHubから声を2つ以上追加する フォルダを1つ作って、Claude Codeで開く 指示を2つ送る Claudeの質問に答える プレビューで見る 動画を書き出す 動画編集ソフトを開いていません。イラストも描いていません。台本も書いていません。 それでも音声・字幕・図解が揃った3分26秒の動画が出てきました。 一番の発見は、 「動画を作る」が日本語で発注できる作業になっていた ことでした。「生徒役と博士役で会話しながら」「SVGアニメーションを最大限使って」——このくらいの粒度で伝わります。細かいことは向こうが聞いてきます。 作りたい動画のイメージが頭にあるなら、フォルダを1つ作るところから試してみてください。1本目は台本レビューも飛ばして、まず出てくるかどうかを見るのがおすすめです。

はじめに 1. 注目した次世代ツールの魅力 1.1 Oxlint ── 「今すぐ、設定ゼロで爆速化」 1.2 Biome ── 「これ 1 つで全てが片付く、究極の一本化」 1.3 Deno ── 「セットアップ不要、最高にクリーンな開発体験」 1.4 Ezno ── 「型チェックまで Rust 化する、超未来のコンパイラ」 2. Vue特有の壁： の静的解析問題 3. チームでの議論：「設定ファイル2つは本当に必要か？」 4. 結果 5. 今後の展望 まとめ はじめに フロントエンドエンジニアをしている伊藤と申します。 昨今は、Rust 製のツールが数多く生み出されており、Linter もその波に乗っていると思います。 弊社でも移行をしたブログを書いており、是非下記の記事も読んでみてください。 https://tech.revcomm.co.jp/ai-lint-formatter-oxc 史上稀に見る大波が来ている時代に、私も颯爽と波に乗ろうとしました。 そしてどういった結論に至ったかご紹介させていただきます。 注: 本記事の検証は2026年9月10日時点、Oxlint v1.82.0 / Biome v2.5.12 で行っています。この領域は変化が速いため、お読みいただく時点では状況が変わっている可能性があります。 1. 注目した次世代ツールの魅力 1.1 Oxlint ── 「今すぐ、設定ゼロで爆速化」 最大の魅力：既存のプロジェクトにノーリスクで追加できる メリット ESLint の 50〜100 倍高速 ： 数万行のコードも一瞬でスキャンが終わります。 設定ファイルが不要 ： インストールして実行するだけで、プロ級のバグ検出ルールが最初から動きます。 既存の ESLint と併用可能 ： 重い処理（バグチェック）は Oxlint に任せ、複雑なカスタムルールだけ ESLint に残す「いいとこ取り」ができます。 1.2 Biome ── 「これ 1 つで全てが片付く、究極の一本化」 最大の魅力：Linter と Formatter が融合したオールインワン構造 メリット ESLint と Prettier の多くの用途を一本化できる ： 個別にプラグインを組み合わせる煩わしさから解放されます（ただし後述の通り、Vue の <template> 部分は現状 ESLint との併用が前提になる場面が残っています）。 設定の衝突ゼロ ： Linter と Formatter が同じ思想で作られているため、「Linter と Prettier のルールがバッティングして動かない」という定番のストレスがありません。 圧倒的な構文解析の正確さ ： エラーがあっても壊れたコードを器用にパースし、親切なエラーメッセージを出してくれます。 1.3 Deno ── 「セットアップ不要、最高にクリーンな開発体験」 最大の魅力：最初からすべてが揃っている「環境」そのもの メリット ： ツール選定やインストールの手間がゼロ ： deno lint と deno fmt が最初から内蔵されています。 package.json に大量の依存関係を書く必要がありません。 標準で Web 標準に準拠 ： ブラウザと同じ API をそのままサポートしているため、環境ごとの差異に悩まされません。 Node.js との互換性も強力 ： 近年は Node.js のパッケージもそのまま動くため、敷居が非常に低くなっています。 注意: Deno は Linter 単体のツールではなく、ランタイムとツールチェーンそのものです。既存の Node.js プロジェクトに deno lint だけを差し込むのではなく実行環境ごと移行する話になるため、Oxlint / Biome / Ezno とは比較の土俵・移行規模が異なる点に注意してください。 1.4 Ezno ── 「型チェックまで Rust 化する、超未来のコンパイラ」 最大の魅力：JavaScript の限界を超える、圧倒的に賢く高速な型解析 メリット ： TypeScript（tsc）より遥かに高速 ： 現在、フロントエンド開発で一番時間がかかる「型チェック」のプロセスを Rust で爆速にします。 型推論がスマート ： コードの型をより深く、正確に推論してくれるため、開発者が型定義を細かく書く手間を減らせます。 バグを未然に防ぐ先進性 ： 副作用（Side Effects）の検知など、従来の TypeScript よりもさらに一歩進んだ安全なコード検証が可能です。 注意: ただし Ezno は本記事執筆時点（2026年9月）でまだ feature-complete ではなく、tsc との完全互換を目指しているわけでもありません。既存の大規模プロジェクトの型チェックをそのまま置き換えられる段階ではなく、将来性に注目したい実験的プロジェクトという位置付けです。 どれも高速性を売りにしており、React では非常に乗り換えやすく恩恵も受けられます！ 実際に私もローカルでBiomeの設定を試してみましたが、かなり早かったです。 ではそのまま導入して、Rust の恩恵を受けようとしました。 ただ、Vue になると少し話が変わってくるんです・・・ 2. Vue特有の壁： の静的解析問題 Vue は、HTML5 の標準仕様である <template> を、独自の便利な形に拡張して使っています。 要素に v-if や v-for を付けたり、 <template> を .vue ファイルの枠組みとして使ったりしています。 普段の開発をしている中で、 v-if や v-for を使わないケースはほぼないと思います。 当然ですが、それらの値もチェックしてくれると思っていました。 ただ、 <template> 内は、Oxlint, Biome ともにチェックしてくれないんです。 実際に最新版（Oxlint v1.82.0 / Biome v2.5.12、2026年9月時点）で試した結果を、以下のサンプルコードとあわせてご紹介します。 <template > < div > <!-- ❌ 1. 壁：Linterがここを見ないため、存在しない変数（タイポ）をスルーする --> < p > {{ userNema }} </ p > <!-- ❌ 2. 壁：Linterがここを見ないため、「下で使われている」と認識できない --> < p > {{ unusedMessage }} </ p > </ div > < / template> <script setup lang="ts"> import { ref } from 'vue' const userMessage = ref ( 'こんにちは' ) // 🔴 <script> 内は見ているので、「定義したのに使われていない！」と怒られる // （実際には上の template で使いたいのに、Linterが template を読めないせいで孤立する） const unusedMessage = ref ( 'これはエラーになります' ) < / s cript> Oxlint（v1.82.0） デフォルトでも vue-plugin オプションを付けても、このサンプルに対しては何も警告を出しませんでした。 userNema のタイポも unusedMessage の誤検知も発生しない代わりに、テンプレート側の静的解析自体がまだ行われていない、というのが実態でした。 Biome（v2.5.12） デフォルト設定ではスクリプト側の noUnusedVariables ルールが .vue ファイルにも適用され、 userMessage・unusedMessage の両方を「未使用」としてエラーにします( unusedMessage は実際にはテンプレート側で使われているので、これは誤検知です)。 ただし html.experimentalFullSupportEnabled を有効にすると、Biomeはテンプレート内での参照を認識できるようになり、 unusedMessage の誤検知は解消されました(本当に未使用な userMessage は引き続き正しく検出されます)。 一方で、フラグを有効にしてもテンプレート内の userNema のようなタイポを検出するルールはまだ無く、不正な変数参照を見逃す問題は解消されません。 上記の検証からわかる通り、テンプレート内の静的解析はRust製Linter単体ではまだ完結できません。Biomeは実験的フラグ付きで一部の誤検知を解消できるようになってきていますが、テンプレート内のタイポ検出のような踏み込んだチェックまでは、依然として eslint-plugin-vue に頼る必要があります。 つまり、必要なVue固有のルールと各ツールの対応状況次第では、OxlintまたはBiomeとESLintを併用する必要があるということです。 3. チームでの議論：「設定ファイル2つは本当に必要か？」 Rust製Linter を導入するか、一旦は ESLint のままにするか。 どちらを選択するか検討するため、メリット・デメリットを出してみました。 メリット 圧倒的な高速化 ： 従来のJavaScriptなどで書かれたLinter（ESLintなど）に比べ、数倍〜数十倍高速に動作します。大規模なコードベースでも ミリ秒単位 で処理が終わるため、CI/CDの実行時間を大幅に短縮し、開発者の待ち時間をほぼゼロにします。 開発の快適化 ： 保存時の自動整形や pre-commit フックでの実行が劇的に速くなります。 簡単な導入 ： Rust製ツールはコンパイル済みのシングルバイナリとして配布されることが多いため、環境構築やCIでのセットアップが非常にシンプルになります。 デメリット 二重管理 ：（一番の懸念） Rust製フロントエンドLinter（BiomeやOxcなど）は、 .vue ファイルの構文（HTMLテンプレートやVue固有の構文ルール）を完全にサポートしていません。 そのため、Vue固有のルール（ vue/valid-template-root など）をチェックするには、結局従来の ESLint（eslint-plugin-vue） を残さなければならなくなります TypeScript/JavaScript部分： 爆速のRust製Linter（Biomeなど）でチェック Vueファイル・テンプレート部分： 従来のESLintでチェック プラグインエコシステムの未熟さ ： 歴史のあるESLintなどのように、コミュニティが作った無数のサードパーティ製プラグインを自由に追加することが難しい場合があります。独自のルールを追加したい場合のハードルが高めです。 ルールや構文の追従ラグ： 言語（特にJavaScript/TypeScriptやPython）の新機能や新しい構文が登場した際、Rust側でのパーサ（構文解析器）の対応にわずかなタイムラグが生じることがあります。 4. 結果 結果は、デメリット部分の二重管理の懸念部分が大きく、現状のESLint（eslint-plugin-vue）で管理する方を選びました。 手元の計測で速度については、申し分ないことが立証済みでした。 導入するメリットも大いに感じているものの、2つのLinterを併用する点を上回るほどではないと判断しました。 5. 今後の展望 Biome は既に html.experimentalFullSupportEnabled フラグで Vue SFC の実験的サポートを始めており、Oxlint も vue-plugin オプションなどVue向けの機能を増やしてきています。 「サポートされるのを待つ」というよりも、「実験的サポートがどこまで安定するか・テンプレート内のタイポ検出のような踏み込んだチェックまでカバーされるか」を継続的にウォッチしていく、というのが今の立ち位置です。 各プロジェクトの現状を、ご紹介いたします。 Biome v2.4(2026年2月)で Vue・Svelte・Astro 対応を実験的機能からプロダクション標準に近づける取り組みが発表されました。既存のリンティングルールを強化し、HTMLライクな言語でも機能するようにする方針です。 https://biomejs.dev/ja/blog/roadmap-2026/#2026-roadmap Oxlint 公式ドキュメント上の制限の記載に、Vue も含まれており、改善してくれるはずだと思います。そして、改善のための issue があり開発が進められているのがわかります。 https://github.com/oxc-project/oxc/issues/23207 https://oxc.rs/compatibility.html そしてなんといっても、Oxlint の開発を支援しているのが Vue の開発者である Evan You さんが立ち上げた VoidZero という会社なんです。 現在のフロントエンドの「ツールの断片化（Linter、Formatter、テストツール、ビルドツールがバラバラで設定が面倒かつ遅い）」という課題を根本から解決するためVite+（ヴィートプラス）が開発され、その中に Oxlint も含まれています。 Vue の開発者が、Vue を見放すはずがないんです！弊社が Oxlint にするのも近いですね！ まとめ Rust 製のツールは非常に高速で、すぐにでも乗り換えたいと思ってしまいます。 ただ、メリット・デメリットや今後の展望を踏まえて、検討するのが大事だなと今回の移行作業を通じて感じました。 どのツールにするかもしっかり検討したいです。 AI で開発を行うと、簡単に実行できるため、検討するのをサボりがちになってしまいます。 そういう意味でも今回はいい勉強になったと思います。 お読みいただきありがとうございました。 次は、Oxlint に移行した話でお会いしましょう。