最近、仕事や個人事業などでVue.jsを扱うことが増えてきました。
Vue.jsはwebアプリなどの開発に便利なフレームワークでありますが、Vue.jsだけでweb開発行うのではなく、UIフレームワークとして、Vuetifyや各種ライブラリを使用して開発を行うことがほとんどです。
そんな便利なフレームワークやライブラリたちですが、元になるフレームワークの最新バージョンに対応できていないUIフレームワークやライブラリであることが時折見られます。
私がメインで使用しているVue.jsも最新バージョンがVue3.xですが、こちらも私がメインで使用しているUIフレームワークVuetifyはVue3への対応バージョンがいまだ試用版のbeta版です（執筆現在）。
このように元にするフレームワーク最新版にUIフレームワークが対応しきれていないときみなさんはどのような選定基準をお持ちでしょうか。
最新版に対応するUIフレームワークの試用版（α版、β版）を使用しますか？UIフレームワークが対応しているVue2などの旧バージョンを使用しますか？それともUIフレームワークを別物に変更しますか？
今回は、このような対応バージョンに相違があるときに対する私なりの対応手順について述べていきます。
Vue.js×Vuetifyに限らず、他のフレームワークでも共通になるかと思いますので、ご参考にしてください。
2022年6月現在使用している環境
vue：3.10
Vuetify：3.0.0(beta版)
※上記の通り、VuetifyがBeta版の利用であるので、正式なリリース後と異なる点があることご了承ください。
元になるフレームワークの選定
まずは、元になるフレームワークの選定からです。
ここでは、vue.jsの想定としています。
元になるフレームワークは最新版を採用することがほとんどです。
Vue.jsの公式ドキュメントでは、vue2とvue3どちらもinstallすることが可能です。
ただ、旧バージョンはサポートが終了するのも早いので、基本的に元になるフレームワークは最新版を使用することが望ましいと考えています。
UIフレームワークの選定
次にUIフレームワークの選定基準です。
UIフレームワークは、元になるフレームワークのリリース後に、バージョン対応を行ってきますので、リリースが遅れることは必然と言えます。
特に、大きな改修があった後では、その対応も時間を要すると思います。今回は、Vuetifyを使用していますが、vue3対応版は2022年6月中旬の現在でもbeta版です。
UIフレームワークはいくつか選定のパターンを用意して検討します。
できるだけ使い慣れたものがいいので、次から説明するうち、①を採用することがほとんどではあります。
①フレームワークの最新対応版＋αを選定
まず、UIフレームワークに関しては、元になるフレームワークの最新版に対応したバージョンを使用を念頭に考えます。
今回の場合でいうと、Vue3に対応するVuetify3（beta版）です。
ただ、beta版である以上、何かしら機能が不足していることがあります。
また、公式ドキュメントなども日本語化されていないこともほとんどです。
機能の不足に関しては、公式ドキュメントや公開されているGitHubをざっと参考にして、旧版であるvuetify2と比較してある程度の機能が備わっていれば採用していくことになります。
どちらも日本語（日本語化も対応しようとする動きはある）ではないのはしょうがないところです。
また、使い方を調べようと思うとQiitaなどの情報サイトを参考にすると思いますが、vuetify2の記事がほとんどなのである程度調べることは必要になります。
公式ドキュメントはサイト構成自体はvuetify2と近いものがありますので、なんとなくそれっぽいページで使い方を探っていきます。
この辺りは繰り返し使用することによる慣れでしょうか。
ある程度機能がそろっていて、使えると判断した場合も、使えない機能をどうにかしたいと思うときがあります。
そのような場合は、一時的に他のライブラリを採用することもあります。
vuetify3でいうと、カレンダーから日付を選択する「date-picker」という機能が見当たりませんでした。 これらの単独の機能は、別のライブラリとして公開されているものもありますので、一時的にそのライブラリで対応しました。
②フレームワーク最新対応版の別UIフレームワークの検討
今回の場合は、Beta版でも必要十分であると判断したのですが、元になるフレームワークの最新版に対応する別のUIフレームワークを検討することも十分にあります。
Vue対応のUIフレームワークは以下のように、ググればまとめてくれてる情報を見つけられますので、これらを参考にします。
選定基準としては、なるべくメジャーなものを採用したいです。
使い方に関しても情報も多くサイトに掲載されているので、使い勝手に雲泥の差が生じます。
フレームワーク選定優先度まとめ
元になるフレームワークとUIフレームワークの採用について、最後にその優先度をまとめておきます。
毎回、元になるフレームワークと記載するのは大変なので、今回は、元になるフレームワークをvue、採用するUIフレームワークをvuetifyとします。 皆さんがお使いのフレームワークに照らし合わせてご確認ください。
優先度高：vue3×vuetify3(+ 別ライブラリ)
まずは、これまでも述べていますが、元になるフレームワークの最新版に対応してるUIフレームワークを選定します。
ただし、まだ対応していない機能もあるので、どんな機能が実装されているかは、先ほども記載しましたが、vuetify3の公式ドキュメントで確認しつつ、リリースのロードマップが公開されている場合はこちらも参照します。
また、ロードマップをもっと詳しい情報で知りたい場合は、GitHubのissueを確認することもあります。
私は、英語得意な方ではないので、「こんな感じでやろうとしてるのか。」とスケジュールや取り組み項目をざっと確認する程度です。
Vuetify3のGitHub issueはこちらから確認できます。
公式ドキュメントは日本語化されていないことがほとんどですので、英語版（URLに/ enが含まれていることを確認）で確認します。
時折、公式ドキュメント内でもリンクボタンが貼られているのに、リンク先が404エラーになることがあります。
そういったときは、一度URLを確認するとURLに「/ ja」が含まれているかもしれません。
おそらく接続のIPアドレスなどからアクセスした国・地域などでコンテンツを切り替えてくれているのかと思いますが、まだページを作りこんでいないと思います。
ただ、URLの「/ja」の部分を「/ en」書き換えて再度URLをたたいてみると元のページに飛べることがあります。
また、不足する一部機能は別ライブラリを使用することがあります。
ただ、vuetify3で同様の機能がリリースされた場合には、ライブラリを削除して機能をvuetify3に統一した方が管理も容易になります。
そこで、いずれUIフレームワークが対応してくれると想定している機能に対してライブラリを採用した場合は、そのライブラリの使用は限定的かつ分かりやすく記載しておきます。
正式にリリースされたとに切り替えを容易にするためです。
コメントアウトなども活用にして、自分に対しての忘れ防止も行います。
優先度中：vue3×別UIフレームワーク
私はvuetify以外のUIフレームワークを採用したことがないのですが、vuetify3がどうしても使いにくい場合やまだα版である場合などは、別のフレームワークも視野に入れます。
ただ、vue3がリリースして間もない時は、どこのUIフレームワークも開発中であると思いますので、気長に待つことも多いです。
優先度低：vue2×vuetify2
このパターンを選択するのはvue.js×Vuetifyの組み合わせを初めてしようする人かなと思います。
やはりドキュメントが日本語化されていなかったり、参考サイトがvuetify2に対応するものが多かったりすると、初学の場合躓きポイントが多くなるからです。
以前にvuetify2を使用したことがある場合は、使い方もなんとなくわかると思いますので、使い慣れたvue2×vuetify2を採用したくなる気持ちは十分にありますが、そこはぐっとこらえます。
私も今後、別のフレームワークを使用してこのような場面に遭遇した場合はまず、安定版で動きを理解しておこうかなと思います。
ただ、これら旧版を採用する場合は、vue3へのアップグレード前提で作っておくことが必要です。 vuetify3にアップグレードするだけでなく、vue自体もアップグレードがあるので、大規模な改修が予測されます。
アップグレードしたら、動かくなくなったということもたびたびありますので、.gitのブランチなど利用して根気強く対応していきましょう。
いずれにしても、元になるワイヤーフレームのサポート体制を考慮して、最新版を念頭に考えていきます。
おわりに
ペーペーのwebエンジニアでありますが、最近vue3とvuetify3の採用について、どうしようかと悩むことがありましたので、記事にしました。
ワイヤーフレームは、便利ですが流行の移り変わりも激しいです。いろいろなフレームワークにアンテナを張って、情報収集していきたいです。
また、ワイヤーフレームも、元はjavascriptなどの言語に依存しますので、より上流のjavascriptなどの言語を理解・勉強もしておくことが望ましいと思います。
ポチップ
コメント