準備編 | Vite 環境で Vue 3.0 の CompositionAPI に触れてみる

f:id:show-hei:20200906211013p:plain 秋の気配とともに Vue.js の 3.0 のリリースの匂いがしてきました。

特に注目されている機能である CompositionAPI に触れてみようと思いますが、サクッと試すなら Vite でいけるよ、ってことで触れてみました。

2020/09/06現在、Vite であれば Vue 3.0 + TypeScript サポートしているので、お試し環境として最適でしょう。ただし、vue-router などアプリケーションを作る上で必要になるプラグインがなかったりするので、必要なものを適宜入れていくスタイルになります。

Vite の環境作成

基本的には公式にそって実行すれば OK です。

公式 Github リポジトリ

GitHub - vitejs/vite: Native-ESM powered web dev build tool. It's fast.

インストールから実行まで

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
$ npm run dev

Vite のディレクトリ構造

project-name/
　├ node_module/
　├ public/
　├ index.html
　└ src/
　 　├ assets/
　 　│　└ logo.png
　 　├ components/
　 　│　└ HelloWorld.vue
　 　├ App.vue
　 　├ index.css
　 　└ main.js

index.html で main.js を呼び出し

Vue のアプリケーション部分を描画する構造はシンプルで、index.html の <div id="app"></div> に対して、main.js がアプリケーションをマウントさせているのが分かります。

index.html

<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>

main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

アプリケーション部分

main.js では App.vue を呼び出して、それを index.html に描画しています。

App.vue を見てみるとロゴ画像とコンポーネントである HelloWorld.vue を呼び出しているのが分かります。HelloWorld.vue 内ではクリックカウンターの処理とテキストを表示しています。

TypeScript 化

Vite では TypeScript をサポートしています。試しに App.vue のスクリプト部分を TS 化してみます。

やり方はかんたんで、script タグに lang="ts" という属性を追加するのみです。参考までに以下のように data に型を与えてみました。

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
  <p>{{ test }}</p>
</template>

<script lang="ts">
import HelloWorld from './components/HelloWorld.vue'

interface TestData {
  text: string
}

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data: (): TestData => ({
    text: 'テスト文字列'
  })
}
</script>

data は TestData 型となっているので、型定義されていない値が入るとエディタ上でエラーを表示します。

f:id:show-hei:20200906202214p:plain

おわり

とても簡単に準備が整いましたね。

OVERFLOW: AUTO;

Aiming to be modern, practical skilled front-end engineer.