話題の爆速CLIツール「Vite」をVue.jsの定番ツール「Vue CLI」と徹底比較！
TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法 第3回
ダウンロード サンプルファイル (367.2 KB)
Viteで利用できるプロジェクトテンプレート
前回記事で説明した通り、Vue CLIではプロジェクト生成時に使用する言語（JavaScript・TypeScript）やVue.jsのバージョンなど、さまざまなオプション設定ができました。一方、ViteのVue.jsプロジェクトでは、前述の通り使用言語の選択ができる程度で、Vue CLIのような細かいオプション設定はありません。
その代わりViteでは、コミュニティが作成したさまざまなプロジェクトテンプレートが利用できます（図11）。
これらのテンプレートを利用するには、GitHubのリポジトリからテンプレートをコピーするツールdegitを利用して、リスト7の通り実行します。
npx degit <ユーザー名>/<プロジェクト名>#<ブランチ名> <生成するプロジェクト名>
例えば「vite-ts-tailwind-starter」のmainブランチから「p004-vite-template」プロジェクトを生成する場合のコマンドはリスト8となります。
npx degit Uninen/vite-ts-tailwind-starter#main p004-vite-template
［補足］vite-ts-tailwind-starterの概要
リスト8で利用した「vite-ts-tailwind-starter」は、Vue 3とTypeScriptのほかに「Tailwind CSS」と呼ばれるCSSフレームワークを利用するテンプレートです。Tailwind CSSでは、CSSを直接記述する代わりに、Tailwind CSSが提供するユーティリティクラスを利用してスタイルを設定します。例えば、テンプレートに含まれるボタンはリスト9の通り記述されています。
<button class="px-3 py-2 border border-gray-300 rounded-md shadow"（略）> （略） </button>
このボタンには、表3のユーティリティクラスが指定されています。
| クラス | 指定する項目 |
|---|---|
| px-3 |
x方向（左右）のパディング
|
| py-2 | y方向（上下）のパディング |
| border | 枠線の幅 |
|
border-gray-300 |
枠線の色 |
| rounded-md | 枠線の角丸 |
| shadow | 要素周辺の影 |
Tailwind CSSの詳細は公式ページを参照してください。提供されるユーティリティクラスや、クラスで設定されるスタイルの内容を、公式ページで調べることができます。
ViteとVue CLI、どちらを使う？
ここまでViteの特徴を説明してきましたが、本連載のテーマである「TypeScriptによるVue.js開発」を学んでいくにあたって、Vue CLIとViteのどちらを使っていけばよいでしょうか。
Viteは全体的に動作が高速である反面、TypeScriptの有無程度しかプロジェクトをカスタマイズする余地がありません。さまざまな利用目的のテンプレートがコミュニティから提供されているものの、これからVue.jsを学ぼうとする人にとって、適切なテンプレートを選ぶこと自体が困難といえます。
一方でVue CLIは、動作速度はViteに後れを取りますが、URLによるルーティングに利用するVue Routerや、Webページ全体の状態管理を行うVuexなどを、必要に応じてプロジェクトに追加してカスタマイズできます。カスタマイズで追加されたコードは、学習を行う最初の導入として有効です。
以上を踏まえて、本連載では次回以降、Vue CLIを利用したプロジェクトをもとに説明を進めていきます。十分にVue.jsを理解したならば、Viteを試してみてもいいでしょう。
まとめ
本記事では、Vue.jsなどのプロジェクトを生成できるCLIツール「Vite」について説明しました。Viteはプロジェクト生成や実行、ソースコード変更時に高速に動作し、より快適な開発環境を提供します。
次回からは連載の本筋に戻って、Vue.jsでWebページを記述する上での基本的な記法を、TypeScriptの活用を交えて紹介していきます。
参考資料
この記事は参考になりましたか？
既に会員の方はを行ってください。
- TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法連載記事一覧
- この記事の著者
-
WINGSプロジェクト 吉川 英一（ヨシカワ エイイチ）
＜WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info（公式）、@WingsPro_info/wings（メンバーリスト） Facebook
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
-
山田 祥寛（ヤマダ ヨシヒロ）
静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数。
※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です
この記事は参考になりましたか？
この記事をシェア
