初めてのフロントエンドとして「Vue.ts」を触ってみる

概要

今までRuby、Railsしかきちんと扱ったことはなかったのですが、この度業務でVue.js + TypeScriptを使わせてもらえることになったので、どんなものかと触ってみることにしました。
同じように初めてのフロントエンドとしてVue.jsとTypeScriptを扱う方の参考になれば幸いです。

参考

vue.js + typescript = vue.ts ことはじめ
上記の記事が大変参考になりました。

Vue.tsのプロジェクトを作成しよう

早速Vueをインストールして、vue create アプリ名でプロジェクトの作成を行ったのですが、デフォルトの設定のまま作成してしまうと、TypeScriptを使えません。

Defaultではなく、Manually select features を選択して、TypeScriptの欄にチェックを入れて作成しましょう！

コンポーネントを作ってみる

プロジェクトのディレクトリ構成はこんな感じです。

手始めにTest.vueというセンスのかけらもない名前のコンポーネントを作成してみます。

コンポーネントとは？

コンポーネントとはボタンなどの小さなシステムのことを指します。このコンポーネントを多く組み合わせることで一つの大きなシステムを構築します。
srcディレクトリの配下にあるcomponentsディレクトリにvueファイルとして作成していきます。

src/components/Test.vue

<template>
    <button @click="onClick">テストボタン</button>
</template>

<script lang="ts">
    import {Component, Emit, Prop, Vue} from "vue-property-decorator";

    @Component
    export default class Test extends Vue{

      private count = 0;

      @Prop()
      public test?: string;

      @Emit()
      public click(count: number){
      }

      public onClick(){
        this.count++;
        alert("テストします");
        this.click(this.count);
      }
    }
</script>

上記のようなボタンコンポーネントを作成し

src/App.vue

<template>
    <div class="home">
      <p>テスト{{count}}回目</p>
      <p>{{testText}}</p>
      <p>
        <Test :test="testText" @click="onTestClick"></Test>
      </p>
    </div>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import Test from "@/components/Test.vue";

    @Component({
        components: {
            Test,
    },
    })

    export default class Home extends Vue {
      private count = 0;
      public testText = "下のボタンを押してください";

      public onTestClick(count: number){
        this.count = count;
      }
    }
</script>

App.vueファイルを介して表示させます。

まず、vueファイルの基本的な構成として、templateとscriptに分かれており、scriptでロジックを記述し、それをtemplateに引き渡して表示させるという形になっています。

    import Test from "@/components/Test.vue";

    @Component({
        components: {
            Test,
    },
    })

上記の箇所で、Test.vueで作成したコンポーネントをApp.vueに引っ張ってきています。

      @Prop()
      public test?: string;

      @Emit()
      public click(count: number){
      }

Propsでは親コンポーネントから値を受け取ることができます。
この例では親コンポーネントであるApp.vueからtestText = "下のボタンを押してください" というデータを受け取っています。これにより、同じPropsを用いるすべての子コンポーネントの変更をApp.vueから行うことができるようになります。

Emitでは逆に子コンポーネントから親コンポーネントに値を引き渡すことができます。

このようにクリック回数をカウントするボタンが作成できました。

終わりに

Vue.tsについてほんの少しだけ触ることができました。他のフロントエンドを触ったことがないため比較ができませんが、型定義など保守性の高いツールとのことで、今後また簡単なものを作成し、実感できればなと思っております。