はじめに
Vue 3がとうとう来ましたね。試しましょう。
https://github.com/vuejs/vue-next/releases/tag/v3.0.0
この記事の概要
タイトルどおり、Vue 3 + TypeScriptはどんな感じなのかを試すためのプロジェクトを作成します。
この記事に記載されている内容は下記の通りです。
- 環境を作る手順。
- 「class-style使います？」という質問に対しては、「No」と答えましょう。
- 手順で聞かれるclass-styleって何？
vue-cliをグローバルにインストール
npm i -g @vue/cli
# インストール後にバージョンを確認
vue --version
# @vue/cli 4.5.6
プロジェクトを作る
コマンドを打つ
プロジェクトを作りたい場所でコマンドを打ちます。
my-vue-3は任意のプロジェクト名です。ご自由に決めてください。
vue create my-vue-3
対話側のCLIでどんなプロジェクトにするか決める
対話型のUIが出てくるので、Manually select features(手動で構成を選ぶ)を選択しましょう。
Vue CLI v4.5.6
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features
TypeScriptが試したいので、spaceキーでTypeScriptにチェックを入れましょう。
Choose Vue versionは最初からチェックが入っていると思うので、外さないようにしましょう。
他の項目は自由に決めて頂いて大丈夫です。決まったらEnterです。
Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Choose Vue version
◉ Babel
❯◉ TypeScript
◯ Progressive Web App (PWA) Support
◯ Router
◯ Vuex
◉ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
Vueのバージョンを聞かれます。もちろんVueは3.x (Preview) を選びましょう。
Vue CLI v4.5.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with
2.x
❯ 3.x (Preview)
次の質問が出てきます。Use class-style component syntax?(class-styleを使いますか？)
一応デフォルトだとNoにはなっているのですが、質問に対して「よくわからんからヨシ！」とyを脳死で打ってしまう人もいると思います。しかしこの質問は結構大事なポイントです。
? Use class-style component syntax? (y/N)
この質問に回答するにはある程度の前提知識が必要です。
Vue + TypeScriptでは2つの書き方が存在します。
それは、
- Class style
- Object style
の2つです。
Class style
対話で質問されているclass-style componentは、Vue 2の時に一般的だったVue + TypeScriptの書き方です。Vue 2の頃にTypeScriptを書いたことのある人ならばわかると思いますが、vue-class-componentやvue-property-decoratorからimportしてあれこれしましたよね。その書き方です。
もし、class-style componentを選択したら、App.vueのscriptは下記のように生成されます。vue-class-componentからimportしているのが分かると思います。
<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from './components/HelloWorld.vue';
@Options({
components: {
HelloWorld,
},
})
export default class App extends Vue {}
</script>
この例だと分かりにくいですが、TS無しのVueと比較して、class-styleだと書き方がかなり変わります。
様々な情報サイトでVueの例として紹介されるコードは基本的にバニラのVueなので、そのコードをTSにしたい時にclass-styleへと脳内変換をする面倒臭さがありました。
Object style
一方で、Vue 3ではclass-styleではなく、Composition APIというものを使った新しい書き方がスタンダードになるはずです。
生JSの時の普通のVueにより近い書き方ができるようになるというよりは、React Hooksっぽい書き方ができるようになって強力な型推論の恩恵を受けることができる感じのようです。
class-styleを選択しない場合だと生成されるApp.vueは下記のようになります。このdefineComponentというメソッドが型推論を手助けしてくれます。
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
export default defineComponent({
name: 'App',
components: {
HelloWorld
}
});
</script>
以上のことを踏まえて、Use class-style component syntax?という質問には、Noと答えましょう。
別にclass styleと回答してしまっても自分でobject styleに書き直すことはできるので、そんなに神経質になる必要もないのかもしれませんが、質問の内容自体は理解しておくのが良いと思います。
対話で聞かれる残りの質問は、（この記事とは無関係なので）お好きなように回答しましょう。
参考
https://v3.vuejs.org/guide/typescript-support.html
https://speakerdeck.com/sunecosuri/migrated-class-style-component-for-vuejs-and-typescrpit
https://github.com/vuejs/rfcs/pull/17#issuecomment-494242121