Vue 3・Vite を触ってみる

Vue 3.0 が RC (Release Candidate) になったらしいので触ってみる。

目次

Vue のバージョン紛らわしい

Angular は各サービスと CLI のバージョンが揃えられているが、Vue の場合は本体と Vue CLI のバージョンがバラバラである。本稿執筆時点だと

という感じ。今回試すのは Vue 本体が v3.0 になるよーという話。

Vue CLI ではなく Vite を使う

上述の公式アナウンスのページを見てみると、コレまで使ってきた Vue CLI (@vue/cli) ではなく、Vue.js の作者が作った Vite (ヴィート) というツールを使用する方法が紹介されていた。

どちらかというとコチラの方が楽しみなので、やってみる。

検証環境

今回検証した環境は次のとおり。

プロジェクト雛形を用意する

まずは、公式アナウンスの記載に従って npm init vite-app を叩いてみよう。

$ npm init vite-app practice-vue-3
npx: 7個のパッケージを1.166秒でインストールしました。
Scaffolding project in /Users/Neos21/practice-vue-3...

Done. Now run:

  cd practice-vue-3
  npm install (or `yarn`)
  npm run dev (or `yarn dev`)

# npm init vite-app コマンドによりディレクトリが作成される
$ cd ./practice-vue-3/

npm init vite-app ってどういうコマンドなの？と思って調べてみると、npm init は特定の雛形プロジェクトを作れるオプションを用意しているようだ。

$ npm init foo と叩くと、内部的には $ npx create-foo というコマンドが実行されていて、create-foo パッケージにより雛形が作成されるという仕組みらしい。

コレを使えば npx create-react-app とせずに npm init react-app と叩いても同じ結果が得られるらしい。この npm init の仕様に合わせるために create- が接頭辞になっていたのか…！

というワケで、Vite に関しても create-vite-app という npm パッケージが別に公開されていた。コレを使ってるのね。

雛形を確認してみる

どんなファイルが用意されたのか確認してみる。

$ cd ./practice-vue-3/
$ tree
.
├── index.html
├── package.json
├── public
│   └── favicon.ico
└── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── HelloWorld.vue
    ├── index.css
    └── main.js

4 directories, 8 files

index.html がプロジェクトルートにある。それ以外は Vue v2 系と大して変わらないかな。

package.json の中身はこんな感じ。依存パッケージ少ない！

{
  "name": "practice-vue-3",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.0.0-rc.1"
  },
  "devDependencies": {
    "vite": "^1.0.0-rc.1",
    "@vue/compiler-sfc": "^3.0.0-rc.1"
  }
}

npm install してみて実際にインストールされたバージョンは次のとおり。

$ npm install

$ npm list --depth=0
[email protected] /Users/Neo/practice-vue-3
├── @vue/[email protected]
├── [email protected]
└── [email protected]

実際に動かしてみる

まずは雛形をそのまま動かしてみる。

$ npm run dev

http://localhost:3000/ で開発サーバが開く。適当に src/ 配下のファイルを編集してみたりして、動作することを確認。

Vite は Rollup をベースにしていて、TypeScript のトランスパイルに爆速で知られる esbuild を使っていて、.vue のような SFC (Single File Component) に対応していて、HMR (Hot Module Replacement) が出来て、とかなんとか、とりあえずイマドキのチョッパヤなビルドツールってことらしい。

確かにそのとおりで、ファイルを編集してから開発サーバのプレビューが更新されるまでが爆速だ。コレは素敵。

SCSS を使ってみる

src/index.css を見ると、素の CSS なことに気付いた。また、各コンポーネント内にも style 要素がなく、SCSS 対応はデフォルトではしていないようだった。

というワケで試しに SCSS 化してみる。

# css ファイルを scss にリネーム
$ mv src/index.css src/index.scss

$ vi main.js

main.js 内にある import './index.css' の行を import './index.scss' と変更したところ、npm run dev していたコンソールに

Error: Cannot find module 'sass' from '/Users/Neo/practice-vue-3'

なるエラーが表示された。そこで一度 npm run dev を終了し、sass をインストールしてみた。

$ npm install -D sass

そしたら $ npm run dev してもちゃんと SCSS が解釈されるようになった。

コンポーネントファイル内で次のように書いても、ちゃんと SCSS がトランスパイルされることを確認した。

<!-- ↓ lang 属性を指定する。scoped によるスコープも、Vue v2 と同様に作れた -->
<style lang="scss scoped>
p {
  code {
    color: #00f;
  }
}
</style>

依存パッケージに sass (node-sass ではなく dart-sass ですな) を入れてやれば、Vite はちゃんと SCSS を解釈できるようだ。

TypeScript でコーディングしてみる

続いて、素の JavaScript で書かれているところを TypeScript にしてみる。

<template>
  <!-- テキトーに data を参照する要素を配置してみる -->
  <p>{{ test }}</p>
</template>

<!-- ↓ lang 属性を付ける -->
<script lang="ts">
import HelloWorld from './components/HelloWorld.vue';

// 型定義をしてみる
const test: string = 'TEST';

export default {
  name: 'App',
  components: { HelloWorld },
  data: () => ({ test })
}

こんな感じのコードにしてみたところ、何の追加パッケージも要らずにトランスパイルされた。Vite の裏で esbuild がうまいことトランスパイルしてくれている様子。

なお、そのままだと型チェックが効かないので、

const test: number = 'My String';

のようなおかしなコードを書いてもとりあえず動いてしまう (バグる)。

こうした型チェックはどうしたらいいのかというと、ビルド時にやるんじゃなくて、IDE で開発中に検知しろってことみたい。確かにね。

tsconfig.json とかを置いて制御もできるっぽいが今回は割愛。

class 構文で書きたいなーと思っていたが、Vue v2 系で class 構文を実現していたサードパーティライブラリの開発が万全ではない。

なんだろ、Vue は class 構文避けるよね…？と思ったら、Vue 3 ではそもそも Class Component 自体がリジェクトされてるので、非推奨っぽい。

よー分からんけど、以下を見るに「複数の書き方が出来るのは混乱する」「TypeScript の型を厳格化するのが大変」とかそんな理由っぽい。まぁ色んな書き方できちゃうのは好かんし、class 構文を使わない方が型チェックが厳格にできるのであれば、それでもいいかなー。

プロダクションビルド

$ npm run dev による開発ビルドではなく、ちゃんと本番ビルドするには、

$ npm run build

を叩く。コチラもイイカンジ。何も考えなくて良いのが使いやすい。

以上

とにかく Vite のビルド速度が速くて驚いた。Vue 3 の正式リリース楽しみ。