SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

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 # 成果物を実行する

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

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
TypeScriptで学ぶJavaScriptフレームワーク「Vue.js」の利用法連載記事一覧

もっと読む

この記事の著者

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

WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS Twitter: @yyamada(公式)、@yyamada/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本格入門」「これからはじめるReact実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/14939 2021/10/07 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング