概要
ラブグラフエンジニアの熊谷です！
先日ラブグラフアプリケーションで使っているCSSフレームワーク、MaterializeCSSのバージョンアップを行いました。（※管理画面で使っているので、一般公開されている画面ではないですが）
アプリケーションリリース時（約８年前）からメンテナンスできていない状態が続いており、管理画面だからこそ優先度も下がっていて、だいぶバージョンが古くなっていました。
今回はそのバージョンアップの流れをブログを通して振り返っていきたいと思います。よろしくお願いします。
バージョンアップの手順
以下の手順で進めていきました。
- アップグレードガイドの確認: https://github.com/Dogfalo/materialize/blob/v1-dev/v1-upgrade-guide.md
- アップグレードガイドを元に、アップグレードしても影響のない範囲で変更を加える
- バージョンアップと動作確認
- バージョンアップで不具合となっている箇所の改修
アップグレードしても影響のない範囲で変更を加える
アップグレードガイド（upgrade-to-v100-from-v01002） を元に、まずは現バージョンを利用しながら変更しても問題ない箇所の変更を加えました。
例えば サイドナビゲーション など、バージョンアップ前に両バージョンで利用できるように変更を加えています。
+ / .side-nav.fixed は v0.100.2 のクラスなので、バージョンアップ後に消す
- .side-nav.fixed
+ .side-nav.fixed.sidenav.sidenav-fixed
※Tipsとして複数バージョンで利用可能な機能を併記するときには削除してもよいというコメントを残しておくと、後で作業するときに影響範囲を気にせずに進めることができるからおすすめです。
いざバージョンアップ
今回のバージョンアップでは、使っていたオリジナルの https://github.com/Dogfalo/materialize が今はもうメンテナンスされていない状態でした。したがって、今回はフォーク先の https://github.com/materializecss/materialize を利用します。
いくつかのバージョンを試してみましたが、最新バージョンは現在の環境では使えませんでした（これについては詳しく調べていないです）。
ということで今回は、v1.0.0を利用しようと思います。
package.json で読み込むバージョンを変更しつつ、v1.0.0のドキュメントに従って、javascript内の記述を修正しました。
- "materialize-css": "0.97.6",
+ "@materializecss/materialize": "1.0.0",
- import 'materialize-css';
+ import Materialize from '@materializecss/materialize';
+ Materialize.AutoInit();
バージョンアップした後に、変更が必要だったこと
しかし、事前の準備をした上でバージョンアップをしても、問題がありました。そう甘くはないですね。
1. このままだと、iOS端末上でselectタグに関して表示のバグが存在する
browser-default クラスを設定し、iOS上で表示バグが発生しないように対応しました。 selectタグは各CRUD画面でよく使われているので、この変更がめちゃくちゃ大変でした。
※なお最新バージョンでは、このバグは解消されています。
2. waves-effect を利用しないように
こちらもSubmitボタンの各所で使われているものでした。
waves-effectクラスが input タグに対してかかっているとiタグが生まれるようになっていました。
これにより、別のCSSに影響されやすいのと、表示崩れがいくつか起きていたのと、スマホではほとんど意味をなしていないので、削除しようということになりました。
- class="btn waves-effect waves-light"
+ class="btn"
少し分かりづらいかもしれませんが、HTML全体で見るとコードの視認性があがるという良い効果もありました。
Linterでよく line is too long などの指摘もされますが、横に長いほどコードは読みづらいので、可読性があがるのも納得のいく内容です。
(マルチクラスを使っていくと、このデメリットをすごく感じますよね。。。)
終わりに
ドキュメントを見る限りはそれほど難しくないなぁと思っていたけれど、いざ始めてみるとバージョンアップはなかなか一筋縄では行かないものですね。
長く運用しているアプリケーションだからこそ、これからも定期的なメンテナンスしていきたいと思います。
最後まで読んでいただき、ありがとうございました。
参考リンク
Discussion