CodeZine(コードジン)

特集ページ一覧

話題の爆速CLIツール「Vite」をVue.jsの定番ツール「Vue CLI」と徹底比較!

TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法 第3回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

Viteで利用できるプロジェクトテンプレート

 前回記事で説明した通り、Vue CLIではプロジェクト生成時に使用する言語(JavaScript・TypeScript)やVue.jsのバージョンなど、さまざまなオプション設定ができました。一方、ViteのVue.jsプロジェクトでは、前述の通り使用言語の選択ができる程度で、Vue CLIのような細かいオプション設定はありません。

 その代わりViteでは、コミュニティが作成したさまざまなプロジェクトテンプレートが利用できます(図11)。

図11:Viteプロジェクトのテンプレート一覧ページ(https://github.com/vitejs/awesome-vite#templates)
図11:Viteプロジェクトのテンプレート一覧ページ(https://github.com/vitejs/awesome-vite#templates

 これらのテンプレートを利用するには、GitHubのリポジトリからテンプレートをコピーするツールdegitを利用して、リスト7の通り実行します。

[リスト7]GitHub上のテンプレートからViteプロジェクトを生成するコマンド
npx degit <ユーザー名>/<プロジェクト名>#<ブランチ名> <生成するプロジェクト名>

 例えば「vite-ts-tailwind-starter」のmainブランチから「p004-vite-template」プロジェクトを生成する場合のコマンドはリスト8となります。

[リスト8]GitHub上のテンプレートからViteプロジェクトを生成するコマンドの例
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の通り記述されています。

[リスト9]Tailwind CSSの利用例(p004-vite-template/src/components/HelloWorld.vue)
<button class="px-3 py-2 border border-gray-300 rounded-md shadow"(略)>
(略)
</button>

 このボタンには、表3のユーティリティクラスが指定されています。

表3:リスト9で指定されているTailwind CSSのユーティリティクラス
クラス 指定する項目
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の活用を交えて紹介していきます。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5