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の活用を交えて紹介していきます。
