CodeZine(コードジン)

特集ページ一覧

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

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

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

 本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようにJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue.jsのプロジェクト作成などができるツール「Vue CLI」を紹介しました。今回は少し寄り道をして、Vue.jsだけではなく、Reactなどのプロジェクトをより高速に生成・実行できるCLIツール「Vite」(ヴィート)を紹介します。

目次

はじめに

 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS(コンパイルしてJavaScriptにする言語)であるTypeScriptで活用する方法を説明しています。前回記事では、Vue.jsのプロジェクト作成や実行などができるCLI(コマンドライン)ツール「Vue CLI」の利用法を説明しました。

 一方、Vue.jsのプロジェクト作成や実行ができるツールとして最近話題になっているのが「Vite」です。Vue.jsの作者であるEvan You氏とオープンソースコミュニティで開発されているこのツールは、「ヴィート」(フランス語で「高速」の意味)という名の通り、プロジェクト作成や実行をより高速に行うことを主眼に作られています。Vue.jsだけでなく、Reactなどさまざまな形式のプロジェクトに対応するのもポイントです。

図1:Viteの公式サイト(https://vitejs.dev/)
図1:Viteの公式サイト(https://vitejs.dev/

 本記事では、Vue.jsとTypeScriptでの開発という本連載のテーマから少しだけ寄り道をして、CLIツールViteの特徴や利用法などを説明していきます。

対象読者

  • Vue CLIの動作速度に不満な方
  • Vue.js以外の開発にも興味がある方
  • サクサクとリズムよく開発を進めていきたい方

必要な環境

 本記事のサンプルコードは、以下の環境で動作を確認しています。

OSなどの環境

  • Windows 10 64bit版
  • Node.js v14.17.6 64bit版
  • Microsoft Edge 93.0.961.47

Vite

  • Vite 2.5.6
  • Vue.js 3.2.11
  • TypeScript 4.4.3

Vue CLI

  • Vue CLI 4.5.13
  • Vue.js 3.2.11
  • TypeScript 4.1.6

 ViteやVue CLIで生成されたプロジェクトをもとに実装したサンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリーをダウンロード後、実行コマンドでプログラムを起動して、WebブラウザーでWebページのURLを表示します。

 ViteとVue CLIでは実行コマンドやURLが異なります(表1)。ここで利用した以外のViteのコマンドは本記事で説明します。Vue CLIのコマンドについては前回記事を参照してください。

表1:サンプルコードを実行するコマンドとWebブラウザーで表示するURL
サンプルの種類 実行コマンド URL
Vite npm run dev http://localhost:3000/
Vue CLI npm run serve http://localhost:8080/

Viteでプロジェクトを作って実行してみる

 最初に、Vue.jsとTypeScriptを利用するプロジェクトをViteで作って、そのまま実行してみます。実行すると図2の通り表示されます。

図2:Viteで生成したVue.js + TypeScriptのプロジェクト(p001-vite)
図2:Viteで生成したVue.js + TypeScriptのプロジェクト(p001-vite)

 Viteでプロジェクトを生成するには、Node.jsのパッケージマネージャーNPMを利用して、リスト1の通り実行します。Viteを事前にインストールする必要はありません。コマンドに含まれる「vite@latest」は、Viteの最新版を利用することを表します。なお、NPM以外(Yarn、PNPM)を利用する場合のコマンドは、公式ページで説明されています。

[リスト1]Viteでプロジェクトを生成するコマンド
npm init vite@latest

 リスト1を実行すると、コマンドライン上でプロジェクト名を聞かれるので入力します。次に、生成するプロジェクトの種類が図3の通りリストされるので選択します。

図3:Viteで生成するプロジェクトの種類を選択する表示
図3:Viteで生成するプロジェクトの種類を選択する表示

 図3の各選択肢により、Viteでは表2のフレームワークやライブラリーを利用したプロジェクトを作成できます。ここでは「vue」(Vue.js)を選択します。Vue.js以外のフレームワークやライブラリーについては表2の参考URLを参照してください。

表2:Viteのコマンドラインで選択できるプロジェクトの種類
選択肢 使用ライブラリー・フレームワーク 参考URL
vanilla なし(JavaScriptのみ使用) -
vue Vue.js https://v3.ja.vuejs.org/
react React
preact Preact(軽量なReact互換ライブラリー) https://preactjs.com/
lit-element LitElement(WebComponent作成用ライブラリー)
svelte Svelte(UIフレームワーク) https://svelte.dev/

 次に図4の選択肢が表示され、TypeScriptの利用有無を設定します。「vue」はTypeScriptを利用しない選択肢、「vue-ts」は利用する選択肢です。本連載ではTypeScriptを利用するので「vue-ts」を選択します。表2に示した各種類のプロジェクトのそれぞれで、TypeScriptの利用有無を選択できます。

図4:ViteでTypeScriptの利用有無を選択する表示
図4:ViteでTypeScriptの利用有無を選択する表示

 図4の選択が終わると、プロジェクトの生成が完了します。図5の通り、生成はほとんど一瞬で完了します。

図5:Viteでプロジェクトの生成が完了する様子

図5:Viteでプロジェクトの生成が完了する様子

 ただし、Viteで生成した直後のプロジェクトには、実行に必要なパッケージがインストールされていないため、リスト2の通りプロジェクトのフォルダーに移動して「npm install」コマンドを実行し、パッケージをインストールします。

[リスト2]Viteプロジェクトにパッケージをインストールするコマンド(p001-vite)
cd p001-vite # プロジェクトフォルダーに移動
npm install  # パッケージをインストール

 パッケージのインストールが完了後、「npm run dev」コマンドを実行すると開発用のWebサーバーが起動するので、ブラウザーで「http://localhost:3000/」にアクセスすると、図2の通り表示されます。

[補足]ViteでReactプロジェクトを作成する例

 上述の通り、Viteでは表2に示した種類のプロジェクトが生成できます。例えば、図3の選択肢で「react」を選択し、その後の言語選択で「react-ts」を選択すると、TypeScriptを利用したReactのプロジェクトが生成でき、実行すると図6の通り表示されます。

図6:Viteで生成したReactプロジェクト(p002-vite-react)
図6:Viteで生成したReactプロジェクト(p002-vite-react)

 高速な起動やソースコード編集の反映といったViteの特徴(詳細は後述)は、Vue.js以外のプロジェクトでも利用できます。


  • 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