ポータルサイトサイトを以前Nuxt.jsで作成したのですが、それをTypeScript対応して一部にVuetifyを導入してみました。この記事はただの日記で技術的なアレはありません。

動機


Vue(Nuxtじゃない) + TypeScript + Vuetifyがほぼ確定のスタックの仕事をやっているのですが、自宅でも並行して触ってみることにしました。幸いポータルサイトがNuxtでもともとそのうちTypeScript対応するつもりだったのでやってみた感じです。

TypeScript対応


Nuxtの公式のドキュメントがあるので、その通りに勧めました。Vue.jsのTypeScriptには…

  • Class Style
  • Composition API
  • Options API

の3つがあるのはわかっていました。今回はOptions APIVue.extendするやつ)でやることにしました。

理由はClass StyleVue 3.xのRFCから外れているため除外。Composition APIは情報が少ないことと、Vueは必要最低限レベルの知識しかないのでメリットが今一つわからなかったので除外というのがあります。書き味的にはClass Styleがもっとも好みなのですが…

Nuxtのリポジトリに前述の3つのスタイルのサンプルがあるのですが、サンプルの量が少ないので実装時はGitHubでいい感じに検索してそれらを参考にしながら実装しました。

以降、詰まったところなどをザックリ書き残しておきます。

asyncでリソース取得してるところの型

下記のような感じでasyncでJSON取得してごにょごにょしてるようなところでxの型がanyだからアカンですよ…。と怒られるのですが、どう対応していいのかわからなかったのでとりあえずコンパイラオプションに"noImplicitAny": falseを付与して妥協しました。

1
2
3
4
5
axios.get(`https://example.com/api`).then(response => {
response.data.forEach(x => { // このxの型がanyといって怒られる
...
});
});

Markdown import してるところ

文量が多いところはNuxtむけのMarkdownit拡張でMarkdownファイルを<script>タグ内でimportしてレンダリングしているのですが、TypeScript対応するとこれがコンパイルエラーを吐くので仕方なしに// @ts-ignoreしました。

$nuxt.$loading.start() とかの型

$nuxt.$loading.start()などでローディングインジケータを表示しているのですが、これも型で怒られるので暫定で// @ts-ignoreしました。

AWS CpdeBuildでビルド失敗する問題

ポータルサイトはAWS CodecommitにpushしたらそこからCodeBuildでビルドしてS3にアップロードするというデプロイフローを組んでいるのですが、ローカルPCではコンパイル(nuxt generate)できるのにCodeBuildでは型エラーでコンパイルできずに落ちるようになってしまいました。その調査過程でCodeBuildがNode v10までしか対応していない(ローカルは13)ということがわかったので、この際にローカルからaws s3 syncでアップロードすることにしました。

リポジトリとしての機能は引き続き使いたいということと、ビルドはそのうちなおすかもしれないのでpush後に後続の処理が走らないようにPipelineの移行を無効にしました。

Vuetifyの導入


もともとあまりMaterialDesignが好きではなかった(過去形)というのも相まって敬遠していたのですが、仕事で少し触ってみると使ってみてもいいかもしれないと思ったので部分的に導入してみることにしました。TwitterをやめてからセルフTwitterのようなものを作っているのですが、そこの条件入力に適用してみました。

もともとAPI側は日付の絞り込みなどできるようなクエリパラメータを準備していました。今回のVuetifyの一部導入に合わせてDatePickerが実装できたのでその辺りを利用した絞り込みを実装してみました。

他のフレームワークのものに無理やり突っ込んだためかレスポンシブが上手くいっていないのですが、そのうちなおしたいです。また、v-appで囲まないとドロップダウンなどが動かないのですが、v-appで囲むと見た目が変わりまくってしまうのでとりあえず必要なところだけv-appで囲んでその上でさらにインラインでstyleを指定して強引に既存のものにあわせてお茶を濁しました。

所感


本当は仕事で使いそうなものを一式触っておこうかと思ったのですが、いろいろ触っているとあまり関係ないところばかりやってしまいました。いつもどおりに時間が爆散して、その他にやろうと思ったことは1㎜も進みませんでした。