今回は、これまでの実装経験やサイト、書籍を活かすためにスクリプトベースとしました。ゼロから勉強するとのことでしたらクラス構文を使うのも手かもしれません。導入したので実装を確認します。トップページにボタンを設置し、クリックした数をカウントする簡単なアクションを追加します。class="links"></div>ブロックの直後に以下を追加します。class="button--grey">Clear</a></div>カウンター表示用のデータプロパティを追加します。},})@clickで呼び出されるメソッドを追加します。全変数を0に初期化します。型定義を導入し、戻り値:voidと明示しています。}})以上で、絵文字ボタンを押すと各ボタン横のカウンターが増える動作となります。カウンターぐらいだと型のメリットが感じられませんが、たとえばclearの初期化で"0"のような文字列を入れるとコンパイルエラーとなります。型チェックが効いています。カウンターのトータル回数、ロゴを回すアニメーションの導入カウンターの値を使ったアクションを作りたいので、各カウンターのトータルを計算し、その値の回数ロゴを回してみます。/pages/index.vueに、すべての絵文字カウンターの総計を持つ算術プロパティを追加します。(computedのみ抜粋)counter()メソッドを作り、戻り値はnumber型、すべての絵文字カウンターの合計です。},})ロゴを回転させるために、ロゴのコンポーネントへカウンターの値を渡します。テンプレートの<logo>タグにv-bind:counter="counter"属性を追加しcounterの値をロゴのコンポーネントで使えるようにします。:style="rotation">でラップします。style属性直接に、rotationプロパティ経由で設定します。アニメーションを再実行できるようにするため、一手間かけています。counterに新しい値がセットされます。counterを呼び出します。オブジェクトとして設定します。forwards}をセットします。テンプレートへ渡します。文字列ではないことがわかります。counterでは、引数がnumber型です。アニメーション定義は下記です。}}このくらいの規模だと型定義によるメリットはまだまだありませんが、アニメーションのためのトリックとは言え色々と取り回ししているので、他人の書いたこんなコードが急に出てきたと思うと型情報ぐらいあると嬉しいのではないでしょうか。devで開発サーバーを起動し、ブラウザでhttp://localhost:3000/へアクセスします。開発サーバーは常に立ち上げておいて大丈夫です。実際の開発に当たってはホットリロードを活用し、コードを保存するとブラウザが自動でリロードしてくれます。ホスティングもしました。今回のカウンターボタンぐらいだとコーディング量が増えるだけでメリットが感じられませんが、他の人が書いた共通ライブラリを使うときなどに型があることで助かることが増えてきます。入れたいところですが、こちらの話はまた重いので別途書きます。Nuxt.jsをご参照ください。2017Riotz.works投稿や発言は私的なものであり、所属する企業や組織には関係ありません。HomeSlides。