CodeZine(コードジン)

特集ページ一覧

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

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

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

ViteとVue.CLIで生成したプロジェクトの構成比較

 ここでは、上記の手順で生成したViteのプロジェクトと、前回記事の方法で生成したVue.CLIのプロジェクトについて、構成を比較します。プロジェクトを構成するファイル群は図7の通り似通っています。

図7:ViteとVue CLIプロジェクトの構成(左=Vite、右=Vue CLI)
図7:ViteとVue CLIプロジェクトの構成(左=Vite、右=Vue CLI)

 ここでは細かい違いを説明していきます。両プロジェクトではindex.htmlの配置場所が異なっているほか、Viteプロジェクトには.vscode配下にVisual Studio Codeの拡張機能についての設定ファイルextensions.jsonが含まれています。また、Viteプロジェクトのenv.d.tsと、Vue CLIプロジェクトのshims-vue.d.tsはほぼ同一内容で、Vue.jsのコンポーネント(*.vueファイル)をTypeScriptで記述するためのファイルです。

 Viteプロジェクトのみに存在するvite.config.tsは、Viteプロジェクトの設定ファイルです。設定ファイルの詳細は公式サイトで説明されています。設定を行うにはリスト3(1)の通り、defineConfigメソッドの引数に設定内容を与えます。デフォルトでは(2)の通り、Vue.js用のプラグインを使用するように設定されています。

[リスト3]Viteプロジェクトの設定ファイル(p001-vite/vite.config.ts)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({   // 設定を記述するメソッド ...(1)
  plugins: [vue()]              // Vue.jsのプラグインを使用 ...(2)
})

 Vue.jsのWebページ表示を記述する*.vueファイルの関係はどちらも同じで、ページ自体のコンポーネントApp.vueの内部に、ページ一部の内容を表すコンポーネントHelloWorld.vueが埋め込まれています。

[補足]Viteプロジェクトの*.vueファイルに含まれる「<script setup>」とは?

 前回記事でも説明した通り、Vue CLIプロジェクトでは、App.vueの<script>部で(1)のdefineComponentメソッドを利用して、自身のコンポーネント名と、使用するコンポーネントを指定しています。

[リスト4]Vue CLIプロジェクトに含まれるApp.vueの<script>部(p003-vue-cli/src/App.vue)
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
export default defineComponent({ // コンポーネントを定義 ...(1)
  name: 'App',  // 自身のコンポーネント名
  components: { // 使用するコンポーネントの指定
    HelloWorld
  }
});
</script>

 一方、ViteプロジェクトのApp.Vueでは、リスト5の通り、<script>部が「<script setup>」で始まっており、HelloWorldコンポーネントをimportする記述のみとなっています。

[リスト5]Viteプロジェクトに含まれるApp.vueの<script>部(p001-vite/src/App.vue)
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

 リスト5の「<script setup>」記述は、Vue.jsのバージョン3(Vue 3)で導入されたコンポーネントの記述方法「Composition API」をよりシンプルに記述できる糖衣構文(シンタックスシュガー)です。Composition APIを含め、Vue.jsではさまざまな記法でコンポーネントを記述できますが、これらの記述方法は本連載の将来記事で説明する予定です。

Viteの高速動作と、その仕組み

 Viteでプロジェクト生成が速いことを紹介しましたが、図8に示す通り、Viteではプロジェクトの実行も高速に行えます。

図8:Viteプロジェクト実行時の様子(p001-vite)

 同じPCで、生成直後のVue CLIプロジェクトを実行したときの様子は図9の通りです。Viteのほうが起動までの時間が早いことがわかります。

図9:Vue CLIプロジェクト実行時の様子(p003-vue-cli)

 初回の実行時だけではなく、ソースコードを編集してからブラウザーに反映されるまでの速度も、ViteはVue CLIより高速に動作します。この速度の違いを、ソースコード編集時の通信内容から説明します。F12ツールで通信内容を表示した状態で、ViteおよびVue CLIプロジェクトのソースコードを編集すると、図10に示す通信が発生することがわかります。

図10:ソースコード編集時の通信内容(上=Vite、下=Vue CLI)
図10:ソースコード編集時の通信内容(上=Vite、下=Vue CLI)

 Vue CLIでは「app~.js」というファイルが通信されています。これは、Vue CLIプロジェクトでは*.vueファイルや*.tsファイルをひとまとめにして(バンドルして)いることによります。起動時やソースコード編集時、その都度バンドルの処理が実行されるので、その分の処理時間を要します。

 一方、Viteでは「HelloWorld.vue」というファイルが通信されていることがわかります。Viteプロジェクトではバンドルを行わず、コンポーネント単位で差分だけを通信します。内部的にはVue.jsのコンポーネントをブラウザーで解釈できる「ECMAScript Modules」形式のモジュールに変換して送り、それをブラウザー側で解釈します。処理の一部をブラウザー側に肩代わりしてもらう分、Vue CLIより高速に動作するわけです。

[補足]Viteプロジェクトでバンドルを行う方法

 Viteのプロジェクトでは、開発用の実行時にはバンドルを行いませんが、最終的な成果物を作るときにはバンドルを行います。バンドルを行って、その成果物を実行するには、リスト6のコマンドを実行します。

[リスト6]Viteプロジェクトでバンドルを行って実行するコマンド
npm run build # バンドルの処理を実行して成果物を作る
npm run serve # 成果物を実行する

  • 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