DESIGN / CODE / INFRA / AI

ニュース

create-vite 9.3.1公開:TypeScript 6の指定と、生成後に確認したいこと

今日公開のcreate-vite 9.3.1は、TypeScriptテンプレートとTanStack向けコマンドを修正。生成ツールと依存関係の版を分け、一時フォルダで確かめる手順を紹介するよ。

create-vite 9.3.1公開:TypeScript 6の指定と、生成後に確認したいこと

create-vite 9.3.1が、日本時間2026年10月20日12時1分に公開されたよ。プロジェクトのひな形を作るツールの更新で、TypeScriptを使う一部のテンプレートと、TanStack向けの生成コマンドが修正されている。

新しくプロジェクトを作る人は、生成ツールの番号と、生成後のアプリで使う依存関係を分けて確認しよう。既存アプリへ一括で更新をかける必要がある、という発表ではないよ。

create-viteとVite本体は別の番号

ViteはWebアプリの開発やビルドに使うツール。create-viteは、そのViteなどを使うプロジェクトのファイルを用意する生成ツールだよ。

今回の9.3.1はcreate-viteの番号。生成先のpackage.jsonにあるviteやtypescriptのバージョン指定とは別に読む必要がある。たとえば今回のvanilla-tsテンプレートでは、Viteの指定は^8.3.4、TypeScriptの指定は~6.0.3だった。

これは依存関係の指定であり、実際にインストールされた版を確認した結果とは区別してね。

9.3.0から何が変わった?

公式リリースと修正コミットから、今回見るべき変更は二つ。

変更 確認できる内容 関係する場面
TypeScriptの指定 vanilla-ts、react-ts、preact-ts、lit-ts、solid-ts、qwik-tsのテンプレートで、~7.0.2から~6.0.3へ変更 これらのTypeScriptテンプレートで新しく作る場合
TanStackへの委譲 React・Solid向けのTanStack Start/Routerの生成コマンドに--build-tool viteを追加 対応するTanStackの選択肢から作る場合

前日の9.3.0では、可能な箇所でTypeScript 7を使う変更が入っていた。9.3.1では「当面TypeScript 6を使う」という修正になっているよ。今回の差分だけから、TypeScript 7全般の品質や、すべての既存プロジェクトの互換性について結論を広げないようにしよう。

TanStack側についても、確認したのはcreate-viteが呼び出すコマンドの差分。TanStackのすべての構成で生成・ビルドまで成功することを確認した、という意味ではないよ。

空の作業場所で、生成結果を確認する

Node.jsとnpmを使える環境で、既存のプロジェクトとは別の、新しいフォルダを作れる場所から試そう。9.3.1のpackage.jsonにあるNodeの条件は^20.19.0 || >=22.12.0。実際に作るフレームワークや依存パッケージ側の条件も合わせて確認してね。

npm create vite@9.3.1 demo-vite -- --template vanilla-ts --no-interactive --no-immediate
  • 9.3.1は、今回確認する生成ツールの版を固定する指定。
  • demo-viteは新しく作るフォルダ名。既存の作業フォルダを指定しない。
  • vanilla-tsは、フレームワークを追加しないTypeScriptテンプレート。
  • --no-interactiveは対話による選択を行わない指定。
  • --no-immediateは、生成に続けて依存関係のインストールや開発サーバー起動を行わない指定。

このコマンド自体は、npmを通じた生成ツールの取得・実行を伴うよ。--no-immediateは通信を一切しない指定ではないので、実行するパッケージと版を確認してから使おう。

生成後は、フォルダへ移動して設定を読む。

cd demo-vite
node -p "JSON.stringify(require('./package.json').devDependencies, null, 2)"

編集部ではNode 24環境の一時フォルダで上の生成コマンドを実行し、typescript: ~6.0.3とvite: ^8.3.4を確認した。依存パッケージのインストールと、生成アプリのビルドはこの確認には含めていないよ。

すでに9.3.0で作っていたら

既存アプリのフォルダへcreate-viteをもう一度実行して直そうとする前に、まず生成済みのpackage.jsonとロックファイルを確認しよう。

  1. どのテンプレートと生成ツールの版で作ったか確認する。
  2. typescript、型チェックに使うツール、viteの指定を読む。
  3. 実際のインストール結果や、型チェック・ビルドの失敗内容を確認する。
  4. 必要な変更だけを別ブランチなどで試し、差分とテスト結果を比較する。

このサイトのNuxtやTypeScriptの依存関係は、今回の記事公開に合わせて更新していないよ。生成ツールのニュースを、そのまま既存アプリの更新指示に置き換えないことが大切だね。

不具合を報告する場合は、再現手順をまとめるIssueフォームも使えるよ。変更を確認するときは、git diffで範囲を確かめる手順へ進んでみてね。

参考・出典

みんなのコメント 0

感想や、試してみたことを聞かせてね。コメント・返信は承認後に公開されます。

最初のコメントをどうぞ。