@odan3240 が @cola119、@kazuma0129 とともにLINEログインのフロントエンドのVue 3化について話しました。
@odan3240
こんにちは。Vueのボタンです。今回もUITインサイドを始めたいと思います。UITインサイドは、ユーザーインターフェイスとテクノロジーを配する開発者のためのポッドキャストです。 さて、今回はLINEログインのフロントエンドのVue 3化について話して
@odan3240
いきます。今回のメンバーはVue 3に関わった上野さん、大橋さんです。よろしくお願いします。軽く自己紹介していただいても大丈夫ですか。
@cola119
はい、上のこうへいです。普段はDFSDKの開発と、それからLINEログインのフロントエンドの開発を担当してます。今日はよろしくお願いします。
@kazuma0129
大橋一真です。自分も普段FSDKと同じくLINEログインのはい、開発となっています。よろしくお願いします。
@odan3240
はい、よろしくお願いします。では今回本題のVue 3化、LINEログインフロントエンドのVue 3化について話していこうと思うんですが、まず最初にLINEログインのフロントエンドの仕組みについて簡単に紹介します。LINEログインのフロントエンドは、いわゆるシングルページアプリケーションの構成になってまして、サーバーサイドで
@odan3240
HTMLをテンプレートエンジンでレンダリングした後に、ブラウザ側でVue.jsを用いてHTMLを組み立ててます。 今回、このブラウザ側でHTMLを組み立ててるJavaScriptがVue 2だったということで、Vue 3へのアップグレードを行いました。 では、このVue 2をVue 3へアップグレードする理由について、うのさん、ちょっと軽く説明していただいても良いですか。はい、
@cola119
そうですね。1番大きな理由としては、Vueのバージョン2のサポートが終了する。サポートといっても警備なバグ修正とか セキュリティアップデートも行われなくなってしまうのが2023年の12月31日。ということで、さすがにこれより先に放っておくとセキュリティの懸念がすごく強くなってくると思うので、 結構それが1番の大きな理由だと思ってます。特にLINEログインというサービスの特性上も、セキュリティに関してはすごく
@cola119
重視する必要があるので、それが1つのモチベーションで、それに付随して色々と理由はあると思うんですけど、パフォーマンスの観点で向上が見込めたりだとか、あとTypeScriptのサポートが手厚くなるだとか、エコシステムに追従していくとか、そういった一般的なバージョン、最新バージョンを使っていくっていうモチベーションもありました。はい、そんな感じです。
@odan3240
ありがとうございます。では、今回、Vue 3化にあたって、どういう手順を踏んでVue 2からVue 3にアップグレードできたかっていうのを、オオハシさん、紹介してもらえますか。
@kazuma0129
はい、移行する時点において、そのLINEログインでは、Vue CLIとVueのバージョンが2.6 で、これをまずリーフを使うように変更して、で、2.6から2.7にのバージョンアップグレードして、それが第1段階で、で、それが終わり次第、Vue 2とVue 3.3kのバージョンにあげるっていう、はい、流れを取りました。
@odan3240
ありがとうございます。一気にVue 3にするんではなくて、最初にビットとして取り組んだということですね。
@kazuma0129
はい、そうですね。
@odan3240
では、インターネットとかで、Vue 2からVue 3へのマイグレーションは結構文献もあったりとか、結構Vue 3化大変だねっていうのはインターネット上でもそういう記事があったりとかすると思うんですけど、それぞれVue 3化に取り組んでみて、なんか大変だったこととかはまったことは、何か印象深いものはありますか。オオハシさんからお願いします。
@kazuma0129
そうですね、まずなんかNode.jsのバージョンも、14.18.1か 20.8で、1までアップグレードしたんですけれど、Node.jsのバージョンアップは、そんなに困ることはなかったんですが、なんか、同時に、npmのバージョンも上がったので、なんか、CIとかで使われてる、npmのコマンドが配置されていたとかは、結構、なんか、穴だったり
@kazuma0129
しました。他は、結構、なんか、ライブ依存のUIの機械とかも、結構、大変だった記憶がありますね。Vueで使われている、Vueで、自分たちで実装しているプラグインとかも、このプラグインの中で、外部依存のライブラリー使ってるんですが、そのライブラリーがVue 2までしか対応されてないだとか、そういうのが結構
@kazuma0129
ありました。で、結構移行作業中に既存のテストを通さなきゃいけないと思うんですけれど、そのとテストが軒並みエラーになったりだとか、そこらへんは。はい、大変な記憶があります。
@odan3240
ありがとうございます。では、うえのさんも何かハマったポイントなどありますか。
@cola119
そうですね。ちょっと被るんですけど、エコシステムのお母さんがしゃおっしゃってる通り、エコシステムの追従も必要になってきて、ただ、その依存パッケージによってはv2までしか、そのパッケージ自体もv2までしかサポートしないっていうのがって、やっぱりまだメジャーアップデートをするにあたって外部依存がいっぱいあるとすごく大変だなっていうのはすごく実感
@cola119
しました。あとはそれ辛かったんですけど、ただテストを書いていたおかげもあって、どこが壊れるとかは割と把握できたので、それは逆に良かったのかなとも思ってます。 あと辛かった点、はまった点だと結構破壊的変更。Vue 2からVue 3への破壊的変更の部分はスタディックに解析できないものが結構多かったので、我々やったこととして、Vue 3への破壊的変更のリストが公式で上がってるので、それを1つ1つ
@cola119
確認するっていう作業を結局やらないといけなかったので、そこは人力で守れなくやるっていうのはすごく難しい作業だったなと。はい、振り返ると思いますね。
@odan3240
ありがとうございます。そうですよね。その破壊的変更の一覧作って、3人で手分けしながら、うん、影響度合いをドキュメントに記述するみたいな、そういう分担作業でしたよね。
@cola119
そうっすね。しかもそれをやって、結構漏れがあるのが判明したので。そうですね、やらないといけないことだったなと、はい、思いました。
@odan3240
じゃ、最後、自分のハマったポイントなんですけど、その、結構細かい部分なんですけど、その、Vue 2とVue 3で、vノードの構造が結構変わってて、Vue 2でやったvノードのプロパティが、Vue 3では、別名になってるとかっていう部分にはまりました。LINEログインの一部コードで、vノード
@odan3240
直接触って何かするっていう実装化されてて、で、その実装がJavaScriptで実装されてたので、そのTypeScriptの方による、プロパティの名前の変更の検知っていうのができなくて、実行してみないと、その部分がバグってるっていうのがわからなかったっていうのが結構辛かったかなと。はい、思いました。はい。じゃあ、次のやつにいきますか。
@odan3240
はい。じゃあここまで。ちょっとネガティブな話だったんですけど、逆にVue 3化であったりとか、Vue 2化によって、なんかすごいこれすごい便利になったとかっていう、なんかいい部分を話していけたらなと。はい、考えてます。じゃあ、大橋さんからどうでしょう。何か良くなった点などはありますか。
@kazuma0129
そうですね。結構移行作業を進めるにあたって、静的解析に結構頼ってる部分があったんですけれど、エリントVue 3を導入したことで、なんでしょう、結構そのリンターに従うことがすごい結構あったなっていう思いですね。例えば、VueのオプショナルAPIって、なんかデータとかメソッドとかコンピューテ
@kazuma0129
とか色々あると思うんですけれど、 Vue 2の時代、移行作業前の時には、なんかその順序がバラバラだったので、なんかどこに書けばいいのか、そのルールとかも明言されてないし、みたいな雰囲気で追加してたと思うんですけど、なんか結構ユース、新しいエリントのルール導入したら、
@kazuma0129
その順序が強制されて、かなり個人的には助かります。はい、
@odan3240
ありがとうございます。はい。では次。上野さんは何かありますか。
@cola119
はい。1つは、これもはやちょっと美容関係ないかもしれないんですけど、Vue 2に移行したことがすごい良かったなと思ってます。ウェブパックからViteに移行したと思うんですけど。うん、かなりビルド速度とかローカルサーバーを立てる速度がかなり向上したので、それはすごくやっぱり早くなってみないとわからない分があったんですけど、すごい開発体験の向上に寄与してるなとはすごい感じて、すごく良かったですね。あと、それに伴ってテストも早くなったし、
@cola119
CIの速度もかなり速くなったんで、かなり全体的な生産性の向上にViteがすごい貢献してくれたなと感じてます。 あともう1個途中に見た目のリグレッションUIの崩れを検知するためにビジュアルリグレッションテストのスクリプトをNode.jsで 簡単なやつを書いたんですけど、それは凄い結構序盤に作ったんですけど、作って良かったなと思ってます。
@cola119
かなり構造は簡単で、新旧の変更前と変更後のUIのスクリーンショットを取って、それを比較するピクセルを比較するだけの簡単なスクリプトではあるんですけど、一応これを走らせることで大きなUIの崩れとかを崩れとかCSSの変化とかを検知できたんで、このツールはすごい良かったなと思ってて。またこれは将来的にも今後も使っていけるやつなのかなと思ってるんで。はい、すごい良かったです。
@odan3240
ありがとうございます。最後に自分なんですけど、オオハシさんが言ってた話とちょっと被るんですけど、 あ、ESLintとのルール使いながらVue 3マイグレーションを進めるとすごいやりやすかったなと思ってて。そのVue 3で破壊的変更によって使えなくなった構文だったりとかをESLintを使って設定、解析できるので、ソースコード実行前にどこを直せばいいのかっていうのがすごいわかりやすくてよかったかなと思います。で、あと、単純に我々のVue 3化が助かった
@odan3240
だけではなくて、同じ会社内の別のVue 3化をやってるプロジェクトに対して、我々が書いたESLintのルールを提供することによって、他のチームもちょっとVue 3化が楽になるっていうのを実現することができたかなと考えてます。例えば、Vue 3化だとVueオブジェクトにナラーセットとかナラーゲットが入ってたんですけど、Vue 3ではそれが廃止されたということで、それを検知するESLintのルールを書いてたんですけど、それを別のチームに紹介するってことができました。自分は以上です。
@kazuma0129
ごめんなさい、僕もう1個ありました。
@odan3240
はい、どうぞ。
@kazuma0129
結構移行作業してて、プロジェクトのソースコード全部見るっていうことが結構あったので、繰り返し見るっていうこと結構あったので、いくつかのタイプミス見つけたりだとか、なんかちょっと変なロジックを見つけたりだとか、 あと依存関係がすごい古くなったまま更新されてないものをが判明したりだとかが、なんか細かいものとして。はい、
@kazuma0129
それ見つけれてよかったなって思いました。はい、追加でした。
@odan3240
ありがとうございます。
@odan3240
はい。では、今回Vue 3化が完了したLINEログインなんですけど、今後もっとこういう部分を改善できたらなっていう風なのがあれば、ちょっと今後の展望について聞いていきたいと思います。じゃあウエノさんから。
@cola119
はい、 そうですね。もうVueが最新版になったということで、色々好きなことができると言いますか、色々リファクタリングとかができるんで、それをやっていきたいんですけど、1つやりたいという感じ。 注意したいのは、今後もちゃんとVueのアップデートは細かいスパンで追従していくのは徹底したいなと
@cola119
思いますね。また次のメジャーアップデートまで何もしないみたいにならないように、細かくデペンデンシーのアップデートはやる必要があるかなと 思ってるのと、あとは、うん、Vue 2からVue 3になって、どれぐらいバンドルサイズが減ったとか、パフォーマンスが向上したかとかはちょっとちゃんとまとめて、またそれで、それによって今後に、今後のパフォーマンス向上とかに活かせないかなとは考えてるんで。はい。ちょっと一旦やって落ち着いたところではあるんですけど、ちょっと
@cola119
う、ちゃんとパフォーマンス観点で振り返りもして、次に生かしたいなと思ってます。はい、そんな感じです。
@odan3240
はい、ありがとうございます。では、大橋さんはどうでしょう。
@kazuma0129
はい、そうですね。なんか展望もありますし、なんかやり残したなっていうこともあるんですけど、 やり残したなって思ってるのは、v-htmlを排除できなかったのがちょっと心残りというか。はい、思ってます。 車内のアイジャーチーム
@kazuma0129
対応のためのなんかxtって、xltって何。なんて言えばいいんですかね。社内で管理されてると、多言語対応の翻訳するためのなんかファイルみたいなのがあって、そん中にはタグブレイクラインのやつがあるんで、それをv-html、今の段階では入れ込んでいるっていう状況なんですけれど、これ、本当は直したい
@kazuma0129
と思ってますね、これ。はい、今の段階では、そのESLintルールで、ノーブエノブhtmlってやつがあるんですけど、それをオフにする感じになってるんで、 直したいと思ってましたと。展望で言うと、はい、やっぱり、ウエノさんもおっしゃってましたけれど、せっかく結構とメジャーバージョンアップデートして、最初に追従できるような土台ができたかと思うので、その、なんでしょう、流側の変更にこれからも
@kazuma0129
追従していきたいなという風に思ってますし、最近では、Vue以外のAngularですかね、Angularでかいとこだと Angularなんですけど、Angularに入っている、なんか試験的なWebAPIであるTrusted Type APIっていうものがあるんですけど、それにVue 3がタイフォンしたらうちでも使いたいなという風に、はい、思ってます。 そんな感じです。
@odan3240
はい、ありがとうございます。じゃあ、自分最後なんですけど、自分は、そうですね、今後の展望としては、 結構LINEログインが実装されたのって、4、5年前ぐらいのVueの方だったんですけど、当時ってVuexにロジックを実装するのが結構流行りの実装方法だったかなと持ってて、LINEログインもそういう感じの実装方法になってるんですけど、やっぱそのデータフローは綺麗になるんですけど、コードリーディングが
@odan3240
ちょっと大変だったりとか、ロジックを読むために、そのコードジャンプを何度も繰り返さんとたやったりするので、コードリーディングが大変なんですけど、最近はVuexからPiniaっていう風なライブラリに変わっているので、そういうPiniaを使ったりとか、Vue 3のComposition APIを使って、すごいそのロジックのリファクタリングをやることで、メンテナンスしやすさを改善できたらなという風に考えてます。
@odan3240
今回はLINEログインのフロントエンドのVue 3化について話しました。では、出演された大橋さん、上野さん、ありがとうございました。ありがとうございました。
@kazuma0129
ありがとうございました。
