2018年8月11日に新しいメジャーバージョンとなるVue CLI 3.0がリリースされました。Vue CLI 3では、公式にTypeScriptをサポートし、 TypeScriptを利用するプロジェクトの生成に対応しました。これにより、TypeScriptでVueを気軽に試せるようになったということで、今回ちょっとどんなものか試してみることにしました。試した中でポイントとなりそうな部分をまとめてみたので紹介します。なお、私は普段はAngularでTypeScriptを書いているため、TypeScriptのクラス構文を使った説明になっています(クラス構文を使わなくても、TypeScriptでvue.jsを書くことはできます)。
目次
はじめに – Vue CLI + TypeScript
Vue CLIとは
Vue CLIは、Vueの開発環境を構築するためのツールです。コマンド一発で、複雑なフロントエンドの開発環境を作ってくれるもので、AngularやReactでも同様のツールがあり、この類のツールは、昨今のフロントエンドの開発現場においては、欠かすことのできないツールのひとつとなっています。Vue CLIは対話形式で自分の好きなツールを選んで開発環境をカスタマイズすることもでき自由度は高いです。さらにVue CLI 3では、GUIでの操作にも対応したり、バージョンアップを重ねる度にいろいろと機能が充実してきています。
TypeScriptでVueを書くメリット
今回のVue CLI 3では、TypeScriptで開発するプロジェクトの生成にも対応しました。Vue CLI 3自体は、今年の1月ごろからα版がリリースされているので、もうすでに試されているかもしれませんが、まだであればぜひ試していただきたい機能です。TypeScriptを使うことで、以下のような利点があるかなと思っています。
- これまでのVue.js特有のオブジェクト構文で書いた時より、TypeScriptのクラス構文で書くことでコード量を少なくできる
- propsやdata、methodsなどのオプションそれぞれを区別して書けるようになるため、それぞれの役割が明確になり、全体的な見通しも良くなる
- TypeScriptの型システムによりコンパイル時に変数の使われ方のチェックが行われることで、未然にエラーや凡ミスを防げる
- TypeScriptの型情報があることで、VS Codeなどのエディタで、オブジェクトのプロパティやメソッドの候補を出してくれたり、コードの自動補完を行ってくれる
- TypeScriptのクラス構文でVueを書くとほぼAngularと同じような構文になるので、Angularもそれほど苦労せずに書けるようになる
もちろんTypeScriptを使いこなすまでにはそれなりの学習が必要です。ただ、普段JavaScript(特にES2015+)を書いていれば、そこまで大きな違いはないので、まずは変数に型を指定するところから始めて、少しずつ知識を増やしていけばいいんじゃないかなと思っています。書き始めるとその便利さがすぐにわかるようになるかと思います。
TypeScript + Vue サンプル
今回のこの記事を書く上でシンプルなサンプルを作成しました。テキストフィールドに入力し、ボタンを押すと、Helloの後にアッパーケースに変換して表示するだけのものです。
実際にVue CLIでプロジェクトを作成し、TypeScriptでコードを書き、TypeScriptとJestでユニットテストコードを書き、最終的にビルドを行っています。その中でポイントとなると思った部分をこれから紹介していきます。
なお、このサンプルのソースコードはGitHubにアップしていますので、合わせてこちらも確認してみてください。
Vue CLIでTypeScriptプロジェクトを生成する
それでは、さっそくVue CLIを使ってTypeScriptの開発環境を構築するところから説明していきます。
Vue CLIのインストール
お使いの環境にVue CLIがインストールされていない場合は、以下のコマンドでインストールします。
インストールが完了したら、以下のコマンドで問題なくVue CLIがインストールされているか確認します。ちゃんとバージョン情報が表示されたらインストールされていることになります。
Vue CLI 3の詳細については、やはり公式のドキュメントが詳しいと思うので、まずは一通り目を通されることをお勧めします。
TypeScriptプロジェクトを新規作成
それでは、次にインストールしたVue CLIを使って、TypeScriptを使ったVueプロジェクトを作成します。任意のディレクトリに移動して、以下のコマンドを実行します。引数にはプロジェクト名を指定します(当記事では、vue-typescript-sampleとしています)。
コマンドを実行すると、以下のテキストが表示されます。最初は「default (babel, eslint)」が選択されていますが、「Manually select features」を選択して、returnキーを押します。プロジェクトで使用するツールを手動で選択できるようになります。
引き続き、対話形式での設定が続きます(スペースで選択、aで全選択/全解除、iで選択状況を反転)。ここで大事なことは、「Check the features needed for your project」のところでTypeScriptを選択することと、「Use class-style component syntax」のところでYesを選択することです。VueをTypeScriptかつクラス属性で書くためのツールをインストールしてくれます。それから「Pick a unit testing solution」のところをJestとしてください(記事の後半で説明するユニットテストをJestで書いています)。その他の部分は、今回特に触れていないので、お好きなように選んでも構いません。私は以下のように選択しました。
ローカルサーバーを起動して確認
最後まで選択が終わると、Vue CLIによるプロジェクトの作成が始まります。プロジェクトが作成されたら、プロジェクトディレクトリに移動して、ローカルサーバを起動してみましょう。
ブラウザで「http://localhost:8080/」にアクセスしたら、以下の画面が表示されます。
一通り生成されたpackage.json
ファイルや、ディレクト構成、ソースコードなどを見てみると良いでしょう。TypeScriptに特有のものが確認できるかと思います。
TypeScriptプロジェクトに特有のもの
TypeScript本体はもちろん、ts-loader(webpack用)、TSLint(Linttツール)、ts-jest(jest連携用)などさまざまなTypeScript関連のツールなどがインストールされ、生成さます。その中で特に覚えておきたいものを紹介します。
vue-property-decorator
VueをTypeScript特有のクラス構文で書くためのツールです。Vue CLIでプロジェクトを作成する時に、「Use class-style component syntax」をyesと選ぶとインストールされます。若干詳しく説明すると、ラップしているvue-class-componentによってクラス構文で書けるようになっていて、このvue-property-decoratorによってさまざまなデコレータが使えるようになっています。
shims-vue.d.tsファイル
これは結構大事なファイルです。Vueを書くときに単一ファイルコンポーネント(SFC)形式で書くことが多いかと思います。このSFCの拡張子は
.vue
となっているので、普通に考えるとTypeScriptファイルとしては扱われません。そこで.vue
ファイルをimportする時に、記述されているコードをTypeScriptとして認識させる役割を担っているのがこのshims-vue.d.ts
ファイルです。なお、このshims-vue.d.ts
ファイルは、.vue
ファイルの中にimportするとか何か特別なことをする必要はありません。src
ディレクトリ内にあれば問題ありません。tsconfig.jsonファイル
TypeScriptのコンパイル時に使われる設定ファイルです。Vue CLIでのプロジェクト生成時に十分な設定がなされているので、あまりいじる必要はないかと思いますが、TypeScriptを書く上で何かあった場合に必要になるので、頭の片隅に入れておくと良いでしょう。
TypeScriptでVueを書く
この章の後にVueをTypeScriptで書く際のポイントを紹介しますが、まずは通常のJavaScriptで書いたものと、TypeScriptで書いたものを見比べてもらえればと思います。この記事の最初で紹介したサンプルのコードです。SFCのscript
要素内に書いたコードを抜き出しました。
【Before】Vueを「JavaScript」で書いた場合
以下は、そのままJavaScriptで書いた構文です。なるべくいろんな事例が紹介できるように冗長に書いています(コードについての詳細は省きます。コード内のコメントを見てください)。
【After】Vueを「TypeScript」で書いた場合
上記のJavaScriptの構文をTypeScriptで書き換えると以下のようになります。クラス構文で書くことによって、それぞれのオプションを区別して書くことができ、さらにオブジェクトリテラルの常にカンマで繋がれた状態からも解放されて、見通しが良くだいぶスッキリしてます。
私個人的には、普段仕事でAngularを書いていることから、やはりTypeScriptで書いたこちらの構文がしっくりきています(ほぼAngularじゃないかというツッコミがきそうですね)。
TypeScriptでVueを書くときのポイント
上記のJavaScriptとTypeScriptで書いたコードの比較を踏まえて、以下にTypeScriptでVueを書く際のポイントを紹介します。
「data」は クラスのプロパティ になる
data
は、コンポーネント(Vueインスタンス)の状態を保持するためのものです。JavaScriptで書く場合(Vue.extend()
内で書く場合)は、data
関数の戻り値としてオブジェクトで定義しました。TypeScriptによるクラス構文で書く場合は、それぞれクラスのプロパティとして定義します。「methods」は クラスのメソッド になる
methods
は、コンポーネント内で使用するメソッドです。JavaScriptで書く場合は、使用するメソッドをmethods
フィールドのオブジェクトの中に定義しました。TypeScriptによるクラス構文で書く場合は、それぞれクラスのメソッドとして定義します。「computed」は get / setアクセサ になる
computed
は、いわゆるgetter / setter
として使用するものです。JavaScriptで書く場合は、computed
フィールドのオブジェクトの中に、getter / setter
となる関数を定義しました。TypeScriptによるクラス構文で書く場合は、get / set
アクセサを使って定義します。「データのinput/output」は @props / @emit で書く
コンポーネント間でデータをinputする時は
props
、outputする時は$emit
を使い、props
はprops
フィールドに配列として定義し、$emit
はカスタムイベントを発火したい場所で呼び出すように定義しました。TypeScriptによるクラス構文で書く場合は、vue-property-decoratorで用意されているデコレータ@Props
、@Emit
を使って定義します。「Lifecycle hook」は クラスのメソッド で書く
Lifecycle hookはコンポーネントの、さまざまなライフサイクルのタイミングで呼び出されるメソッドです。例えば、
mounted()
であれば、コンポーネントがマウントされる直前に呼び出されます。JavaScriptで書く場合は、使用したいLifecycle hookをそのまま関数として定義しました。TypeScriptによるクラス構文で書く場合も同様に、そのままクラスのメソッドとして定義します。「vue-property-decoratorで用意されているもの」は デコレーター で書く
上記でも紹介した
props
や$emit
もそうですが、さらにdataの任意の値が変更される度に呼び出されるwatch
などもvue-property-decoratorで用意されているデコレータ@Watch
を使って定義することができます。vue-property-decoratorで用意されているものは、極力デコレータを使って書くとよいでしょう。コードの見通しがよくなります。「デコレータを使って書けないもの」は @component内にそのまま 書く
テンプレートの出力の際に任意のフォーマットに変換する際に使用する
filters
は、this.xxx
の形で使用することがないので、vue-property-decoratorでデコレータが用意されていません。この類のものは、特にTypeScript特有の書き方が用意されておらず、JavaScriptと同じ書き方で定義します。その場合は、@Component
デコレータ内で定義することになります。script要素に lang="ts"属性 をつける
SFC形式による
.vue
ファイル内のScript要素の中にTypeScriptを書く場合は、script
要素にlang="ts"
属性をつけるようにします。上記したように、shims-vue.d.ts
ファイルによって、script
要素内に書いたコードがTypeScriptとして認識されるようになります。
その他TypeScriptでVueを書く際の詳細については、以下などを参考にしてください。
- TypeScript のサポート — Vue.js
- Microsoft/TypeScript-Vue-Starter - GitHub
- vuejs/vue-class-component - GitHub
- kaorun343/vue-property-decorator - GitHub
TypeScriptでユニットテストを書く
Vue CLIで生成したプルジェクトは、ユニットテストのコードもTypeScriptで書くことができます。TypeScriptでのユニットテスト(単体テスト)についても軽く触れておきます。プロジェクト生成時に「Mocha + Chai」か「Jest」を選択することができます。どちらを選んでもTypeScriptでユニットテストを書くことができます(Jestの場合、プロジェクト生成時にts-jestがインストールされます)。
今回は、スナップショットテストができること、ブラウザを使わずコマンドベースでテストを実行できることからJestを選んでいます(Jestについてはここでは詳しく説明しないので、Jestの公式ドキュメントや当ブログの記事などを参考にしてください)。
また、公式のドキュメントで紹介されている以下の記事も紹介しておきます。
TypeScriptで書いたユニットテストコード
以下は、上記のサンプルコードに対するユニットテストをTypeScriptで書いたものです(コードについての詳細は省きます。コード内のテストケースの記述などを見てください)。なんとなく感じはつかめるかと思います。
TypeScriptでユニットテストを書くときのポイント
基本的には、JavaScriptで書く時とほとんど変わらず書くことができるかと思います。ほとんど型推論を利用して書いています。なお、最初のwrapper
変数の宣言の部分で、let wrapper: Wrapper<HelloVue>;
といったようにHelloVue
型(HelloVue
は、私がクラス構文で書くときにつけたクラスの名前)を指定しています。エディタによるコードの補完が効いて、テストも書きやすくなります。
ただVS Codeを使用している場合、このままだと「HelloVue
で定義しているメソッドやプロパティが存在しない」といったエラーが出てしまいます。VS Codeの.vue
ファイルを扱うための機能拡張Veturを入れていても、HelloVue
クラスを型として認識してくれないようです。ということで、別途自分で型定義ファイルを用意する必要があります。その際に、vuetypeというツールが使えます。型定義ファイルを作ってくれるツールです。
vuetypeの使い方
以下のコマンドでプロジェクトディレクトリ内にインストールします。
package.json
のscriptフィールドに登録して、npmコマンドとして使えるようにします。型定義ファイルを作りたいファイルの置き場所(src/components
)を引数として指定します。
以下のコマンドを実行すると、型定義ファイル(xxx.d.ts
ファイル)が同じディレクトリ内に作られます。
型定義ファイルが作られたら、後は何もする必要はありません。VS Codeでのエラーも出なくなります。
スナップショットテスト
スナップショットテストは、レンダリングされたコンポーネント(テンプレート)の状態をスナップショット(xxx.spec.ts.snap
ファイル)として保存し、テストを実行する度に前後のスナップショットを比較して、違いがないか(リグレッション)をチェックするためのテストです。Jestの代名詞ともなっています。詳細は、Jestの公式ドキュメントや当ブログの記事などを参考にしてみてください。
なお、ここでは、スナップショットテストで、登録済みのスナップショットファイルを更新する方法を紹介しておきます。テンプレートの内容を修正すると、スナップショットテストでは前後の状態に差異があったとみなし、エラーとなります。これが意図的な修正であれば、スナップショットを最新の状態に更新する必要があります。Jestをwatchモードで起動すると、対話形式でスナップショットの更新を行えるようになります。package.json
ファイルのscript
フィールドに以下のコマンドを登録しておくと良いでしょう。
TypeScriptで書いたコードをビルドする
TypeScriptで書いたコードも、通常と同じく以下のコマンドでビルドできます。
ビルドが完了すると、dist
ディレクトリ内にバンドルファイルが出力されます。出力されたファイル一式を任意のサーバにデプロイすれば、一般への公開も可能です。
ところで、私の環境では、ビルドしたファイルをブラウザで開いて確認しようとしたところ、以下のようなエラーが出ました。
バンドルファイルがうまく読み込まれていないようでした。いろいろ調べたところ次の方法で解決しました。プロジェクトディレクトリ内にvue.config.js
ファイルを新たに作成し、以下を記述しました。'./'
の部分は''
でも良さそうです。
今回のサンプルをGitHub Pagesとしてアップしてみました。
まとめ
以上、長々と書いてきましたが、Vue CLIを使えばTypeScriptでVueを書く環境がすぐに作れて、TypeScriptでコードを書き、ユニットテストを書き、デプロイまでできるようになります。紹介してきたようにTypeScriptでのクラス構文を使うと、コード量は少なくなり、メソッドやプロパティそれぞれ役割が明確になることで全体的な見通しも良くなり、さらにはTypeScriptによる型の恩恵も十分に受けられるようになります。特にVuexを使うようになると、mutationsで値を扱う際などTypeScriptの型が役に立つ機会がどんどん増えてくるかと思います。
個人的には、VueをTypeScriptで書くと、ほぼほぼAngularやStencilで書くコードと同じじゃないかとツッコミを入れたくなりますが、逆に言うとAngularやReact派の自分でも、TypeScriptで書けるなら、Vueで開発するのもありかなと思わせてくれます。なので、Vue派の方もTypeScriptで書く習慣を身につけて、クラススタイルの構文に慣れてしまえば、今後仮にAngularへ転向することがあったとしてもそれほど苦労せずに済むはずです。今回リリースされたVue CLI 3で、TypeScriptの導入も簡単に行えるようになりました。この機会に、ぜひTypeScriptをお試しください。
Vuexについても触れたかったのですが、ちょっとこの記事が長くなりすぎるので、次回に取っておきます。
今回の記事で扱ったサンプルのコードはGitHubにアップしていますので、改めて最後に紹介しておきます。
それからちょうどこの記事を書いている時に、新しいVueの書籍が出るという情報があったので紹介しておきます。日本でのVueの第一人者的な存在の@kazuponさんやこの記事でも紹介したvuetypeの作者であり、Vue関連ツールに多くのコミットをされている@ktsnさんなどが執筆されているかなりの意欲作だと思います。TypeScriptに関する章もあるようです。発売日は9月22日とまだ先ですが、興味があればぜひ予約などしてみてはいかがでしょうか。
追記: 2018年12月7日に以下の記事を書きました。TypeScriptをさらに活用する書き方を紹介しています。ぜひ合わせてこちらもお読みください。
コメント