少し前に開始したNuxt.js製ポータルサイトのVuetify移行が完了しました。なお、この記事はただの日記であり特に技術的なアレはありません。

もともとポータルサイトはBulmaというCSSフレームワークをベースにしたものでした。先日とある部分でAPIの検索に部分的にVuetifyを適用してみたところ、意外とよさげだったのでVuetifyに全面移行しました。

移行について


Vuetifyのドキュメントによるとv-appは「複数もちいないでください」と書いてあるんですが、それを忠実に守るといっぺんに移行しないといけなくなるので各コンポーネントをそれぞれv-appで囲んで段階的に移行していきました。全コンポーネントをv-appで囲んで期待通りに表示されることを確認してから最終的にルートのDOMをv-appに置き換えて各コンポーネントのv-appを削除することで移行完了しました。その他、もともとプラグインで実現していたような箇所を全てVuetifyのコンポーネントに置き換えました。Vuetifyはかなりそろってるのでだいたいのことはカバーできそうな印象です。

VuetifyはSassでごにょごにょとスタイル変更できるのですが、ドキュメント通りにやっても一部上手く変更されなかったので、変更が効かない分はもともと使用していたnode-sass辺りを使って無理やり変更しました。最後にBulmaCSSを削除しました。Bulmaを消すことによって一部のレイアウトに乱れが生じるなどしましたし、別段消す必要もなかったのですが、依存先を減らしておきたいという想いがありました。

以前のものはコンポーネントも全然分割できておらず汚かったのですが、今回はとりあえずレベルで分割しました。だいぶましにはなったと思う。

JSONをクラスに


もともと画面に表示する各種データはJSONを使って表現していたのですが、あまりJSONで書きたくないという個人的理由でコンストラクタとgetter/setterだけを持ったデータ保持のためだけのクラスを大量に作成してそこに放り込んでデータ管理することにしました。ぶっちゃけあんまりメリットはないですが、JSONゴリゴリ書くのが好きではないので個人的には満足してます。

デザインの変更


もともとデザイン的にイマイチだったと思っていたところはこの際にVuetifyの各種コンポーネントを用いてドラスティックに変更しました。Bulmaの削除に伴って予期せぬ形でスタイルが変わってしまったものもあるのですが、それ以外はまぁおおむねええ感じでできた(満足してるわけではない)んじゃないですかね。かなり強引にインラインで押し込んでたりするのですが、個人的にスタイルをインラインで指定するのに抵抗が全くないのでよほど困らない限りこのまま行こうと思います。後は全体的になんか色が薄くなったね。

その他


まだデザイン的にイマイチかなと思っている部分があるのですが、時間が無限爆散するのでいったんこれで終わりにしたい。