ちょっと久々になりますyagiです。前回のポストで「これからはちょくちょくブログを更新するんだ。」的なことを言っていたにもかかわらず、半月以上経って、もう8月も半ばです。
前回はSoqAlbumを大規模アップデートした話をしたのですが、おかげでアプリ全体が頭の中にまとまりまして、よいチャンスなので新たな機能を追加してみました。この新機能の追加でPC・スマホ間のちょっとしたファイル・情報の共有で不自由することはほぼなくなったと思っています。何を追加したのか気になる方は、ぜひSoqAlbumを開いて確かめてみてください。
vue3への移行
SoqAlbumの新機能についてはまた別の機会にお話するとして、今回はアップデートで行ったvue(tify)3への移行について備忘録的な記録を残しておこうと思います。
vueというのはウェブページのUI構築に関わるjavascriptライブラリーでありまして、ウェブページ内部のjavascript変数を変化させれば、自動的にページの表示も変えてくれるフレームワークです。内部処理とページ表示とを別々にプログラムする必要がなくなり、効率よくウェブアプリ等の作成が行なえます。
vue2とvue3の大きな違いは、それまでのOptions APIに対してComposition APIが新たに導入されたということなのですが、これまでのOptions APIがvue3で使えないわけではありません。今回の移行ではできる限り移行の負荷を軽減したかったので、Composition APIにこだわらず、Options APIのまま移行しました。この移行はあまり問題なく、あっさりいけた印象です。
vueを移行するにあたって、目に付きやすい違いとしてはvue2でnew Vue(…)だったものがvue3ではcreateApp(…)で別途mountが必要だったり、コンポーネントの追加がapp.component(…)であったり、data: が使えなくなって、data(){return {…}}と書く必要があったりでしょうか。ここらへんの話は私なぞよりはるかに詳しい方の記事がネット上にたくさんありますので、そちらをご覧いただいたほうがよろしいかと思います。
vuetify3への移行
vuetifyというのはvue上でモダンなGUI(マテリアルデザイン）を構築するためのライブラリーです。平たく言えばvueを基盤に構築された、こざっぱりしたGUIパーツ集です。
Vuetifyのリリース情報を確認すると、vuetify 3.0.0がリリースされたのが2022年11月1日。その約一年先にはvue2がサポート外というスケジュールなわけで、このタイミングの遅さは果たしてどうなんだという感じであります。vue2からvue3への移行は問題なくても、vuetify3待ちで移行がこれまでできなかったという方も多かったのではないでしょうか。ちなみに現在の最新バージョンは3.3.12です。一年足らずでバージョンがかなり進んでいるのは、vueのバージョン番号と対応させたからということだったと思います。
veutify2とvuetify3の互換性なのですが、残念ながら高いとは言えないように感じられます。vue2からvue3に関してはできるかぎり互換性を保ってシェアを守ろうとする意思が感じられましたが、vuetify3に関しては、バージョンアップを機会にオプションを最適化する方向に突っ走った印象です。破壊的変更が多いので、アップグレードには、各ページごとにレンダリング結果を確認しながらの作業が必要です。大抵はブラウザを見ながらちょこちょこっと変えればよいのですが、多量のvuetify2ページを書き換えなければならない場合は少々つらいのではないでしょうか。
カラー指定が変わった
vuetify2から変わった例として、良くも悪くも分かりやすいのがvuetify3での色指定です。例えばvuetify2でテキストにカラー指定する場合
<p class="blue--text text--lighten-1">...</p>というclass指定をしていました。いちいちcssを定義しないでクラスを指定するだけで色指定ができて楽なのは良いとして、「テキストを青く」が「blue–-text」で、「その青を明るめに」が「text–-lighten-1」とかいう文法はもはや罰ゲームです。正直全然覚えられていないので、今回もこの記事書くためにネットで調べなおしました（笑）
vuetify3になって、このような色指定はとてもわかり易くなりました。
<p class="text-blue-lighten-1">...</p>たしかに今度は一発で覚えられます。そうなんですけど、vuetify2で指定した色指定を全部修正するとなるとなかなかの作業なので、この変更は微妙です。vuetify3にはこういう感じの破壊的変更が各所にみられます。
v-overlay
ほとんどのコンポーネントでどこかしらのオプション名称が変わっていたりするのですが、特に激しく変わっちまったなぁと感じたのがv-overlayでした。これは画面全体を覆うレイヤーを作って、別HTMLパーツをオーバーレイ表示するコンポーネントなのですが、vuetify3のv-overlayは素のままではvuetify2と挙動が違いすぎて困りました。vuetify2のoverlayと似た動きをさせるためには、いろいろオプション指定が必要です。
<v-overlay
persistent no-click-animation
class="align-center justify-center"
...
>
...
</v-overlay>persistentがない場合、overlayクリックで画面が消えてしまいます。また、no-click-animationがないと、クリックで画面全体が揺れるアニメーションが入りますが、これは好みで残しておくのもありかもしれません。
class指定については、overlay内部のhtmlを中心に寄せる指定です。vuetify2だと何もしなくても中心に寄ってくれていたので、それに合わせるために加えてあります。
オーバーレイを作るということと、中心に寄せるということは別々のアイデアなので、vuetify3のv-overlayのほうがオーバーレイとして正しいかもしれないのですが、移行する時overlay全部見つけて書き換えるのは辛いですよね。もちろん上のオプションを予め持ったコンポーネントを定義して作業するのですが、色指定等のオプションも変わっていて、そこは手動で書き換えました。opacityのオプションも見当たらなくて、しかもえらく薄味に固定されてしまっていたので、cssで .v-overlay__scrimに opacity: 0.5 !important; とか上書きして調整したら好みの味わいが出せました（笑）
vuetify.breakpointをvuetify3でも使いたい
vuetify2では次のような書き方ができました。これはスクリーンサイズがxs(extra small)の場合だけ表示されるdivです。
<div v-if="$vuetify.breakpoint.xs === true">
ここはスマホの場合だけ表示されます。
</div>vuetify3ではvuetify.breakpointが廃止されたようです。代わりにuseDisplayというもの
が用意されていましたので、これを利用しました。
const { createApp, reactive } = Vue;
const { createVuetify, useDisplay } = Vuetify;
...
const app = createApp({
setup(){ // danger?
return {
display: reactive(useDisplay()),
};
},
data(){
return {
varA:1,
varB:1,
varC:1,
...
}
...「さて、お分かりいただけただろうか。」⇐ 真夏ということで、怪談ビデオ風味で…
もともとvue(tify)2で書いたjavascriptをvue(tify)3に移植しようとしているので、基本はOptions APIなのですが、何故かsetup関数も混じっていて、わけのわからない構成になっているのがお分かりいただけましたでしょうか。これで動いてくれれば便利なんだけどなあと思って試しに書いてみたのですが、どうやら動くようです。setupを使わず、data()内でdisplay:reactive(useDisplay())と直接変数指定しても問題なかったような記憶もおぼろげながらあるのですが、とにかくちょっと怪しいコードなので、利用する場合は自己責任100%で使ってください（笑）
やりたいことはOptions APIでもdisplayという変数を定義して使いたいということでありまして、これによりvuetify3で次のようなコードが書けます。
<div v-if="display.name === 'xs'">
ここはスマホの場合だけ表示されます。
</div>次回はSoqAlbumのモバイルsafari対応（かも？）
今回はvuetify3への移行で遭遇した問題のいくつかとその解決作について、役立ちそうなものを書いてみました。他にも細かい問題が無数にあり、例えば画面の下の方にフローティングボタンを出したいけど、フローティングボタンのサポートがvuetify3ではなくなっていて、これはネットで検索したら解決策を書いてくれてる人がいて大変助かりました（例えばこことかこことか）。今回のこの記事も、vuetify3への移行中の誰かに役立つことがあれば幸いです。
vue3になってvueの人気が下がってきたという話をどこかで聞きました。確かにsetup関数なんかの話は分かる人には分かりやすいのですが、初心者には分かりにくいだろうなぁと思います。vuetify3については、これだけ変わって大丈夫なのかと思いますし、英語のマニュアルも”MISSING DESCRIPTION”な部分がまだまだ目立ちます。日本語のマニュアルに至ってはv2.vuetifyjs.com（つまり未だにvuetify2のマニュアル）しかない状況でありまして、ネットでもっと情報が充実していって欲しいと思います。
今回のSoqAlbumのアップデートで時間がかかったのは、vue(tify)3の問題だけではありませんでした。モバイルsafari（iOS）でいろいろバグ（なのか仕様なのか？）に出くわしまして、それでsafari専用の謎コード（？）を書くのに相当時間を取られていたりもします。次回はそれについて書こうかとも思うのですが、どうしましょうかね？
コメント