1. kkeethのエンジニア雑談チャンネル
  2. No.120 「JSer.info, Vue2 Vu..
2022-10-28 27:04

No.120 「JSer.info, Vue2 Vue3 マイグレーション 令和最新 最強」をダラダラ読む回

はい.第120回は


2022-10-19のJS: Bun v0.2、Lerna v6、ECMAScript Decorator
https://jser.info/2022/10/19/bun-v0.2-lerna-v6-ecmascript-decorator/

Vue2 Vue3 マイグレーション 令和最新 最強
https://docs.google.com/presentation/d/e/2PACX-1vS1Drke3qV5WoYkpwk06FL3Zr0VZz7s4usDrJlM4AozNmxcfOM1xHCS9sxK1idD6O7v7vAKEy7NMVLv/pub?slide=id.p


を読みました💁

いやー,JSer.info は安定と信頼抜群ですねー.本当情報収集するならまっさきに見ちゃいますw いつもほんとうにありがとうございます!

後者はかなり地道で大変なことをされている印象で,まだ半分ですが既にインパクトしかなったです…今後対応しないといけない方にも参考になると思います!


ではでは(=゚ω゚)ノ



See Privacy Policy at https://art19.com/privacy and California Privacy Notice at https://art19.com/privacy#do-not-sell-my-info.

00:03
10月23日、日曜日ですね。遅刻は昨時10分もあってしまいました。はい、ちょっと昨晩いろんなことをやりすぎてですね、
寝坊してしまいました。はい、おはようございます。ユメミのkeethことグアンハラです。
では本日の朝方、始めていきたいと思います。
今日はですね、昨日までずっとReactの話を読んでたんですけど、今日は久しぶりに
JSer.infoですね、AZさんがやられているJavaScriptの最新情報を紹介する週刊ブログです。これの
最新だと10月19日ですね、の更新があったので、これを今日はちょっと
ダーッと読んでいこうかなと思います。なかなか情報収集ができていなかったので、それも兼ねてやっていこうかなと思います。
はい、では行きたいと思います。10月19日の10月。
版のバージョン0.2、レルナバージョン6、エクマスクリプトデコレーター、ほでほでみたいな感じそうですね。
はい、では一つ目ですね。
614回目だそうです。一つ目は、版のバージョン0.2.0というのがリリースされていますよということです。
はい、で0.2.0では、版の--hotでのホットリローディングの対応と
バンドットスポーンですね、の追加になっています。あとは
RedoubleStreamのサポートが改善されていて、パッケージジェストのインポートフィールドのサポートなどが含まれていますよ
ということでした。はい、まぁちょっと前に、ちょっと前でもだいぶ前ですね、あのAZさんの別の更新記事で
版の存在を知ったんですけどね。まぁちょっとずつやっぱり
更新されているところなので、まぁ気になってはいるので、どっかで触るかもしれないですね。
1.0になってから触りたいかなって感じですね。今だとまだまだ
破壊的なものだったり、いろんなドラスティックな変更も可能性としては全然あるので
まぁ存在自体は頭に入れておいて、まぁ情報を追うぐらいにしておきましょうかねっていうのが
僕の今のアスタンスですよね。はい、ただまぁ気になっているのは確実です。
よいしょ、続いて。
モノレポカリのツールですね。レルナってやつがあります。レルナの
バージョン6.0.0がリリースされましたよということですね。
で、どんなメリットとか
どんなことが起きるのかというのは実際にプロジェクトでやってみたい感はもちろんありますけどね。
レルナっていうものは一応僕はローカルで、ローカルというか仕事外でガッと触ったことはありますけど
本当にモノレポ管理するんだったら、今レルナ一択でいいんじゃないかっていうぐらいが便利だったなという感じはしましたけど。
レルナのバージョン6.0.0ですね。メジャーバージョンがアップされたそうです。
デフォルタでレルナスペースランですね。
にNXを使うようになったのと、
レルナのアッドキャッシングコマンドっていうのが追加になりましたと。
あとはレルナのリペアコマンドも追加になりました。
いくつか変更も加えられたそうですね。
内部的にNXを使うようになったため、NXの機能であるリードキャッシュ
リモートキャッシュなども利用できるようになってますよということでした。
その辺の更新ブログも記事に貼られてますので、興味のある人は見てみてくださいと。
What's new in version 6.0.0っていうですね。
あとはJavaScriptメタプログラミングwith the 2020.03のデコレーターズAPIっていう記事では
現在エキマスクリプトプロポーズあるステージ3のデコレーターについても書かれていますと。
デコレーターの歴史、デコレーターができることや構文、デコレーターのユースケースなどに
かなり幅広く書かれているので、読んでみてもいいと思いますねってことでした。
JavaScriptと同じようなデコレーターの機能がJS本体に入るんだったら
03:03
それはそれでちょっと厚い話ではあるので、気にならなくなりますね。
ただもうプロポーズあるのステージ3まで来てるというので、
割と現実感あるなっていうところまで来てるんですね。
デコレーターっていうのができるそうです。
興味のある方は今書いていたMeta Programming Witsa 2020.03っていう記事を見てみてください。
はい、じゃあ続いてヘッドラインですね。
他はもうただリリースのリストが表示されているという感じなので、
淡々と読んでいきたいと思います。
1つ目、リリースバージョン29.2.0、Facebookスラッシュジェストですね。
ジェストフレームワークのバージョン29.2が出たそうです。
シード値を設定できるようにリードイニシャルコンフィグのAPIの追加になったらと、
他にも何かいくつかの追加になってますよーっていうところだそうです。
マイナーバージョンアップですけど、何かいくつかAPI追加されているので、ちょっと触ってみてもいいかもですね。
今のところユニットですと、フロントエンド周りだともうジェスト一択だとは思ってます。
僕の中で勝手にですけどね。
昔はたくさんあったんですけども、今はとりあえずジェスト入れますね、僕もやっぱり。
それだけ便利だなっていうのがあるので。
さすがFacebookって感じでした。
では続いてリリースパペティアですね。
僕これずっとパペッターって読むと思ってたんですけど、パペティアらしいです。
正確な発音はちょっとわからなくて、いろんな勉強会に行っていろんな人の読む発音を聞く限り
パペティアだと思いますけどね。これのバージョン19.0.0がリリースになりましたと。
ダウンロードしたブラウザーを
チェルダースラッシュドットキャッシュスラッシュパペティアに保存するようにもちょっと変更になりましたよってことですね。
あとパペティアドットデバイスイーズの削除になった。
いくつかメジャーバージョンなので大きな変更があったそうです。
いやーパペティアも長いですね。もうバージョン19.0って言うぐらいですから
本当に長く更新され続けてるなってなりますけど、僕ももう数年前にしてからずっと使われてるっていうので
ソフトウェア業界の中で
何年も何年も、下手したら二桁年数ぐらい使われるってなかなかないので
本当すごいなと思いますね。続いては冒頭で述べました通りですね。
レルナのバージョン6.0がリリースになりましたよってことです。
レルナにNXを使うのと、
レルナアドキャッシングコマンド追加と、レルナリペアコマンドの追加などなどっていうところだそうです。
はいじゃあ続いて、次はアストロの1.5.0がリリースになったそうです。
これアダプターがアストロプレビューをサポートできるようになったのと、
atastrojsスラッシュノートがモードコロン、スタンドアローンっていうのをサポートするようになりましたよと。
あとAPIコンテキストに、サイト、ジェネレーター、URL、クライアントアドレス、プロプス、
リダイレクトなどのフィールドが追加になっているってことですね。
あと詳しい細かいところに関しては、
リリースとバイ
レッドボットのアプリリクエストバージョン5046番っていうのがあるので、そこを見てみてくださいと。
これ自身がそのままリリースの話になるそうですね。
JSARインフォを読んでるからアストロって存在は知ってるんですけど、
あんま使った、僕はプロジェクト一度も使ったことがないので、名前だけ知ってフーフーンっていう
知識だけ増えていく感じですね。
1回触ってどんなものかっていうのを理解しなきゃいけない気はしますけど、なかなか
06:00
必要性に駆られなかったり
プロジェクトにアンマッチだったりするギリだったりするので、
なかなか触る機会がないなっていうのはありますけど、情報として知っておいて、
選択肢、引き出しがあるのは全然良いことだと思うんで、知っておくのは別に良いと思いますけどね。
こうやって何度も何度も名前を見る限りだと、使いたくなってくるなっていうのは正直私は思っています。
ちょっと余談でした。
続いて、ノードのバージョン18.11.0カレントですね。
というのがなりましたよと。
18のマイナーリリースになります。
今回ノードウォッチでのファイル変更とプロセスの再起動にする対応などっていうのがいくつか入ったそうですね。
マイナーだし、メジャーバージョンが偶数なので、
こうやって納指で入れてもいいんじゃないかなっていう感じは僕はしました。
続きまして、
これも冒頭に述べました。バンですね。バンの0.2.0がリリースになりましたよってことです。
はい、あのー、ハイフンハイフンホットでのホットリローティングの対応とスポーンの追加と
リーダブルストリーブのサポート改善とパッケージエッソンのインポーツフィールドのサポートなどが追加になってますよってことでした。
はい、では今のがヘッドラインですね。では続いて、アーティクルです。
まあ、いくつかの記事ピックアップされているので、それの紹介だそうです。
一つはですね、ファーストクラスビートサポートinストーリーブックだそうです。
ストーリーブックなのでですね、ビートをファーストクラスのサポートとして追加することになりましたよってこととそうです。
おお、すごい。
僕も今、ストーリーブック7ですね、最新バージョンに向けて、僕の好きなライオットジェスというライブラリーがあるんですけど、
あれのストーリーブック対応をずっとやらなきゃいけないなと思ってたんですけど、
まだ6だったらやりたい、やることが結構明確に見えててよかったんですけど、7になって、
割とストーリーブック自体がバージョン7で、内部的に大きい変更がやっぱあったんですよね。
わざわざストーリーブック7っていうブログ記事、大体的にストーリーブックの公式メンバーが書いてたんですけど、
それもわざわざ読ませていただきましたけど、かなり大きい変更が起きているので、やっぱり内部的にも
構造が変わってですね、それのライブラリー対応をすごくざっと眺めた感じ、これは少し
重いなって正直思ったんですよ。なのでもう、今回の年末とか空いた時間にガッと一気にやってしまおうかなっていうぐらい
なんですけど、それでもやれる自信がないぐらいにちょっと重かったんで、ビートをそれサポートしたんですねっていうのに今
ちょっと感動してしまいましたっていうところです。まあでも、
これはですね、ストーリーブック7ではビートをファーストクラスのサポートして追加するってなったので、
ストーリーブック7っていうストーリーブックチームそのものが多分
ビートをサポートしたっていうそういう話だと思うので、
まあまあさすがに公式チームがやってるだけあるなっていう感じはちょっとしますけど、
まあ興味ある方はブログ見てみてください。
ファーストクラスビートサポートinストーリーブックっていうURLになっています。続いて
JavaScriptメタプログラミングwith the
2012-03のデコレーターズAPIですね。これも冒頭に
述べられました、ピックアップされた3つの記事の1つ目ですね。
はい、エグマスクリプトプロトコルのステージ3にデコレーターについて
追加されています。まあそれについては詳細な記事が書かれていますよということです。
デコレーターの歴史であったり、デコレーターができることや構文だったり、デコレーターのユースケースなどについて
というところがあります。はい。
JSの歴史においてデコレーターは
みなさん自分でガキガキ書いたりすることが結構あったかもしれないですけど、JavaScript本体の
09:01
機能としてデコレーターが入るっていうのは今までなかったので、
これちょっとだけ大きい変更かなって僕は思ってますね。
まあ使うかどうかはあれですけど、まあやっぱりあったら便利ですからね。
これはJSの歴史の中では結構大きいインパクトのあるような変更になるんじゃないかな
って気はしてます。もうでもステージ3まで来ているので、
割と現実感が出てきたっていう、冒頭と同じこと言っちゃいましたけど、
はい、っていう感じです。では続いて、
これintlというものが未だに読み方わかんないですけど、のエクスプローラーが出ての記事だそうです。
エグマスクリプトインターナリゼーションAPIのintlですね。
APIについてのサイトですよということでした。
APIごとに自己記憶が確認できるというので、まあこれ自体のサイトが1個生えたということだそうですね。
以上、アーティクルは今回はこの3つだったそうですね。
で続いて、スライド&動画関係ですね。スライド動画関係に関しては今回2つですね。
どっちもスライドっぽいですねこれは。スピーカーデックとGoogleのプレゼンテーションですね。
1つ目のスライドはですね、View2、View3のマイグレーションですね。令和最新最強っていうタイトルです。
暑いな。はい、View2からView3へのマイグレーションについてのスライドそうです。
コンポジションAPIへの移行だったり、View3の非対応なライブラリーの問題だったり、
View3の破壊的な変更点について、また移行戦略が移行して残った課題などについて。
はい、これはまさに僕がView3にキャッチアップしているところが今日気になるので、この後読む記事の
2仕様かな。
もう1個はですね、リリースから5年。ウェブフロントエンドの経年劣化と向き合うってやつですね。
これは多分伊藤さんの
スライドな気がちょっとしてますね。
はい、SPAプラスSSRで作られていたメディア系サイトMPAAリファクトリングする話。
View3の方も読みたいんですが、
まあいいや、時間余ったら両方へもう片っ端から行きます。
今日はじゃあView3から行きますね。はい、あとサイトサービスドキュメントとして
パターンズっていうのがあるそうですね。ウェブデブなんでGoogleのブログですね。
ウェブアプリでよくあるパターンについてまとめたサイト、パターンズっていうのが
公開になりました。
わざわざウェブデブから出されてるんでめちゃめちゃ気になりますね。
ウェブでよくあるパターンって確かに
各社絶対知見としてこういうパターンこういうパターン絶対あるのがまとまっていると思うんですけど、
それをGoogleの方が出しているのが結構気になります。
クリップボードの処理だったりとか、ファイルの処理、レイアウト、アニメーション、
音声や動画の再生などについて書かれているってところだそうです。
はい。
で、ラスト。ソフトウェア、ツール、ライブラリ関係が2つですね。
1つ目はですね、タイプランナーです。
ハイパフォーマンスタイプスクリプトコンパイラーというところで、
シープラプラで書かれたタイプスクリプトの型チェッカーのPOCというのが出たそうですね。
タイプランナーってやつでした。
で、もう1つがウルトラってやつですね。
Javascriptパッケージマネージャーです。
PNPMライクなNPMパッケージマネージャーというのが出たそうです。
ロックファイルとギャッシュファイルがあるときのインストールパフォーマンスを目的としたようなものが出ているそうです。
ウルトラっていう名前なので
強そうなかって言われますけど、名前しか僕知らなくてへーって思ってますけど、興味ある方は見てみてください。
最近またNPMのパッケージマネージャーがまた出たのかっていう感じがあって、
やんで落ち着いてくれたんだかなと思ったんですけど、
やっぱり時代はどんどん進化して、新しいのがどんどん生まれるんだなっていうのは
12:01
良くも悪くもって感じはしますけどね、まあ仕方ないです。
これはエンジンはサガなので、しっかり追っていこうかなと思いますね。
ただまあそんなすぐに完全移行するとは僕も思ってないので、
まあ一旦まだまだNPM本体か、まあやんでもいい気はしますけど、
まあウルトラはなんだかんだ聞きたいですね。
PNPMはやっぱりこれだけ世界中で流行ってはいるっていうのもあるので、
PNPMが好きな人は多分そのままPNPMでやるんじゃないかと思いますけど、
まあライクなNPMパッケージマネージャーなので、何かしらの違いがあるんでしょうねっていうところです。
じゃあ、JSAインフォ自体の更新はこれで以上で、残り時間ですね、
公演されてましたけど、この時のリリース予定は2019年と言ってたんですけど、
その1週間前くらいにリアクトからFOOXが発表されたんですよね。
ああ、2018年9月のあたりか、リアクトFOOXが発表されたな。
Vueも改めて設計の検討に時間がかかってしまったと。
リアクト、Today and Tomorrow and 90% Cleaner React with FOOXっていうのと、
アクティブRFCsっていうのが一応記事のリンクも貼られています。
で、Vue3のリリースにやっぱり時間がかかって変更点が大きくなったため、
移行しづらくなってしまったというのが背景にありますということでした。
なるほどね、まあ準備もしてたんですけど。
やりづらくなったと。
で、Vueのバージョンの歴史ですけど、2013年12、バージョン0.6。
2013年から出たんですね。
いやー、懐かしいな、13年か。
で、続いてバージョン。
2015年の10月にバージョン1.0。
で、2016年10月に2.0が出たんですね。
はあ、1年間でめちゃバージョン上げたんですね。
で、2018年にバージョン2.5.17ですね。
前回のVueFestのところがこれだそうです。
で、2020年の9月ですね。
2年経ってVue3が出ました。
で、2021年8月で約1年経ってスクリプトセットアップというのが実装になったそうですね。
で、2022年、今年の7月にバージョン2.7の2Kの最終バージョンが出たよというお話をしています。
Vue3の利用が本格したのが割と最近で、Vue3のリリースというのは2022年9月だったそうですね。
で、スクリプトセットアップがやっぱりステーブルになったVueの3.2がですね、2021年8月ですね。
で、Vue3デフォルトバージョンになったのが2022年の今年の2月ですね。
Vue3 as the new defaultということだそうです。
で、エコシステムのVue3化対応なども含めると、実際にVue3で開発しやすい状況になってきたのはやっぱり最近じゃないのというお話です。
Vue2時代からは年月の開きによって差分が大きいということですね。
一応今のVue CLIもちゃんとVue3にも対応しているので、Vue CLIで開発環境を作る方は割と移行できたんじゃないかという気がしますけど、
既存のアプリとかをどう移行するかというのは結構大変な話ですよね。
で、Vue3化はそもそもやらなくていいんじゃないのという話も出たそうです。
やらなくて済むのはもちろんやらない方がいいそうですよね。
本当にやりたいのかとか、プロジェクトの寿命は?みたいなことを考えて、
コンポジションAPIとかスクリプトセットアップはやっぱり利用したい。
で、これがVueの2.7の使い方になったじゃんみたいな。
で、Vue2が2023年末にサポートを停止してしまうということですよね。
Vueの2.7、NARUTOというリリースタイトルが出てましたというところですね。
で、緩やかに終了することは分かっているので、Vue3の起動がバックポートもされたこともあって、
15:00
移行ビルドで徐々に書き換えていくのが現状だという、成功法だよねという話になって、
で、Vue2、Vue3両方の互換で動作させるように、
AddVueCompatというのを用いた移行をしたそうですね。
はい、マイグレーションビルドだったり、
How to migrate a large app to Vue3ですね。
VueConfのUSの2022年の記事の一つが貼られています。
はい、これYouTubeのリンクなので、気になる方は見てみてください。
ただ、まだVue2.7とか思いっきりないときにやったので、
今回は移行ビルドを使わずに急激に移行する話をします。
腹食っちゃったんですよね、多分。
スタジオではなぜVue3を移行したのかというんですけど、
VueUseの一部の機能だったり、
ヘッドレスUIというのがVue3でないと使えなかったというのがあります。
逆にVue3じゃないと使えないのもあったんですね。
将来的に開発していくにあたって、
Vue3ベースにしていきたい、
スクリプトセットアップがめっちゃいいよという話を聞いていたということですね。
未だに読み方がわからない、ベチュアってやつですかね。
ベチュアなのかベターなのかわからないですけど、
これはVSコードの拡張だった気がしますね。
何かの拡張ですね。
これよりもボラーというものが出て、これを使いたいということだそうですね。
これも確かVue3だった気がします。
あとピニアですね。
Vue周りのストアライブラリ、ピニアという新しいのが出ましたね。
ピニアはVue2でも使えるはずなのに、エラーで動かなかった。
どこがおかしいのかもよくわからない。
僕Vue2で確かピニアを使ったことがなかったので、
エラーがやっぱり出るんですね。
使えるって確かに書いてあった記憶はありますけど、
せっかくVue3が出るし、Vue3用って書いてあった気がするので、
Vue2で使う理由が僕にはなかったんですよね。
あと5年以上開発しているので、プロジェクト自体が腐ってそうです。
この機会にVue2のコードも一掃したいという話だそうです。
とにかくVue3化すれば色々良くなるんじゃないというのが背景だそうです。
Vue2環境に慣れてしまうことにより、開発の鈍化というのも課題に上がっていて、
Vue2でもとりあえず動くからそのまま開発してしまうというのもありますし、
型が効きにくくなったり、遅いことに慣れてしまう。
これ怖いですね。遅いことに慣れてしまうというのが怖いですね。
人間は慣れの生き物なので。
自分から捨てるというところをどこかでやらないといけないことはあります。
あとはチームとしてそれが当たり前の状況だとさらに新しくしづらくなるし、
木こりのジレンマに立ち向かっていかなきゃいけない。
木こりのジレンマは斧の切れ味が悪くなっても目の前の木を切ることが優先されがちだということですね。
斧の切れ味をよく知ってから切った方が結局早いじゃんという最終的にはですね。
ただ、今はとにかく切らなきゃいけないという目の前の方に集中してしまうみたいなことですね。
これからたくさんの木を切るなら一旦ツールの手入れした方が効率的だと。
ただし直接的に顧客への価値を生むのではないので、会社チームとして理解が必要ということですね。
いわゆるビジネスインパクトがあるのかという話と、
正直お金を生まないしどうしろお金を失うことの方が大きいじゃんみたいな話になるかもしれないですけど、
将来的に失う金が減っていくという意味ではやっぱり改善した方がいいと僕は思います。
これをどう説明するかというところだと思います。
ビュースリー化の前にまずビート化をしましょうというところだそうです。
ビュースリー化したいという気持ちの高まりは全員もそうだったらしいです。
できればしたいですと。
でもどのくらいかかるかも正直わかんないと。
それはそうだよね。見積もりしろって言われたってわかるわけないんですよね。
18:01
未来予測をしろと言ってると同じですかねこれは。
ビュースリー化以前にまずウェブバックが正直つらいよと。
ウェブバックつらいですよね。
分かります。
デブサーバーの起動に30秒ぐらいかかってたらしくて、
開発しにくくなってきたし、DX正直悪いと。
ビュースリーはわかんないけどビート取り得が早いと。
言われば確実に恩恵がある気がする。
というわけでまずちょっとビート化させてほしいというのがスタートだったそうです。
ビート出てからウェブパックの歴史がもしか閉じるかもしれないっていう
ちょっと未来が見えたっていうのが僕はやっぱすごいなと思いました。
ウェブパック出てもうバンドラーといえばもうウェブパックでいいじゃんっていう時代が来たと僕は思ってたんですよね。
いろんなライブラリーですね。
NEXTもNAXTも内部的にウェブパック使ってますし。
もうガルプの時代終わったのかなと思いながら。
でもいまだにガルプ全然使われてますけどね。
いろんなところでちょいちょい見ますからね。
やっぱり便利ですし。
あとガルプウェブパックっていうライブラリーもあるのでガルプの中でウェブパックも組み込んじゃうみたいな思想としてあったりするので。
でも一旦デファクトがウェブパックになったはずなのにビートがそれを食ってかかるのかみたいな。
もう本当に技術のエコ精髄ってすげーなってつくづく思ったりしてます。
ビート化の作業が2022年の2月、今年の2月からスタートしたそうです。
チームメンバーをそのまま開発できるように別プロジェクトで自分一人進めてたそうです。
なんやかんやでしかも1ヶ月弱かかったらしいです。
いやすごいですね。ビート化するだけで1ヶ月弱かかった。
それだけのトラスティックの変更だったということは証明されますけど。
ただやっぱりめちゃくちゃ早くなったそうですね。ミリ秒で立ち上がるようになったらしいですね。
ビフォアでは大体このメトリクス取って立ち上げですね。
立ち上がるのに大体18秒かかってたんですけど、
ビート2.8.3に置き換えて起動すると0.2秒で立ち上がると。
それはもうめちゃめちゃ早くなりましたね。びっくりでしょう。
ビート化した時のディフですけど、これすごいですね。
92コミットでなんかコードが結構減ったらしいです。
移行を継いでリファクターした気もしますから逆に早くなったらしいんですけど、
ビート化した時のディフがですね、追加2825行で削除が-27238行っていうところがコード減ったらしいですね。
7000行ぐらい減ってるっていうのが面白いですね。
1人でやったのか1ヶ月弱で。すごいですね、92コミット。この人すごいな。
続いてビート化の手順ですね。
既存のプロジェクトをそのまま書き換えていくとエラー出まくって動かないので、
一旦ビートで動く空プロジェクトを作って、そこに操作を段階的に移してって動作する状態をキープして進めていった。
いいですね。段階的にやっていくっていう建設的なやり方ですね。
ハマりどころがいくつかあったので詳しくは書き参照ということで、
既存のVue CLIプロジェクトのビート化っていう別の記事が前で書かれてますね。
これめっちゃ気になるので明日以降の朝カス読むかもしれないです。
続いてビート化という成功体験です。
ビート化したことによってメンバーみんなが恩恵を得られたと。
成功体験と勢いによって、じゃあVue 3かもやっちゃいますかっていう合意が何となく取れた気がすると言ってます。
これでも大きい話ですね。
何より自分自身がVue 2に不満を持っててVue 3にしたい気持ちが強かった。
結構これは大事ですね。
この強い気持ちがあるから苦しくても頑張れるっていう正直あると思うので。
21:02
でもやっぱり大変だった苦行だったということだそうです。
お一人でさっき92個ビットやったっていう話なのですごいなと思います。
じゃあ本題のVue 3化が進むんですけど、あと5、6分でガッと読み切りたいと思います。
読めるとは言っていない。
じゃあVue 3化の作業ですね。
今年の3月から5月の2ヶ月ぐらいでやったらしいです。
ビート化に続き一人で進めたらしいですねVue 3も。
結局一人でやってたんだ。
最後に回りつける段階では全員でやったと。
ビート化1ヶ月だったのでVue 3化もそのくらいじゃないと思ったら結局3ヶ月やられかかった。
そんなもんですよ。
アンギラ2みたいな。
アンギラ2って言い方悪いですね。
正式にはアンギラって言い方をした方がいいんですけど。
アンギラJSからアンギラへの移行みたいなところになれば、
あそこまで別フレームワークになるんだったらある程度見積もりできるかもしれないですけど。
2から3はある程度延長線っぽく見えますからね。
今回は別プロジェクトにするのでブランチを切って書き換えを進めたらしいです。
そのままじゃやっぱり動かないので、
コンポーネンツ、ストア、ルーター、プラグイン等を諸々外すことで一旦Vue 3を動かせるようにしたそうです。
Vue 3化した時のリフです。
これも大体同じくらいですね。
ファイルチェンジはでも1199コード。
ファイルチェンジで1199ってやばいな。
追加コードが2847行で、減少コードが27653行というところですね。
これもだいたい7000行くらい結果的に減ったということそうです。
442コミットを3ヶ月。
ファイルチェンジ1199。
しかも1人って言ってました。
最後になればみんなでやったって言ってましたけど、
大半この人1人だったというのは本当にすごいなと思います。
またコードがやっぱり減ったと。
減る分には全然いいですよね。
Vue 3ですけど、破壊的変更が多すぎる問題だそうです。
Vue 3 was a mistake that we should not repeatという話ですね。
という別の記事が書かれていて、
Vue 3に対するヘイトじゃないですけど、批判記事が書かれたそうです。
これなんか僕なんとなく読んだことある気がしますね、朝発で。
はい、なんとなく読んだ気がするような見た目をしてますが。
結構ですね、ヘイトあるんですけど、いろんな建設的なコメントも書かれてたので、
これ結構参考になる記事だと思いますね。
ただでもVue 3やめろっていうちょっと強い意見も出てた気がしますけど、
僕は会議的に最終的になったような記憶があります。
興味のある方は見てみてください。かなりいい記事ではあるので。
当記事で批判的に書かれているように破壊的変更がやっぱり多すぎるというのはおっしゃる通りです。
ただしAngularJSからAngularのようにフレームワークとして根本的に異なるものでなくて
移行手順は示されている。
簡単じゃないけど可能であるというのはエヴァン氏がコメントしてますよということだそうですね。
やっぱりこの例出しやすいんですね、AngularJSからAngularというのは。
公式ライブラリについてはVue 3に対応されているし、
Vue 3用のESリングで自動修正されていることも多いということです。
書き換え作業の話ですね。
基本戦略は正規表現で漏れなく一括変換、一括試管していくということですね。
はい、一括、正規表現頑張ってたんだ。
ファイル数が多いのでエラー箇所の修正はなるべく漏れなくパターンマッチさせて目を見落としを防ぎたいよねということはそうですね。
例としてプロップの型定義でプロップタイプで記述しているところとプロップオプションズを使っているところがあって
24:04
Vue 3だとプロップオプションズだとなくなってた。
そうですね。
なのでこういうのを正規表現でガッと書き換えて、
あと開業とかスペースの有無に関係なくいい感じにマッチするようにしたいということですね。
はい、その正規表現の書き方もちゃんと書いてあるので興味ある方は見てみてください。
で、コンポジションAPIに寄せていくということですね。
はい、2021年の2月、昨年2月からやっていたところです。
Vue 3かイコールコンポジション間ではないですけど、なるべくコンポジションに揃えた方が使いやすいので必要なところはVue 3か以前から書き換えていったということですね。
いいですね。
Vueは多様な書き方ができるため時期によっていろいろな書き方をしていったというのはやっぱり統一したいと。
これもそうですよね。できるようになると選択肢が増えるということはその代わりカオスになりがちなので、
しっかりルールを決めなかったらみんな思い思いのコードを書くので、そりゃそうなりますよ。
で、そのためオプションズAPIとかクラスAPIからコンポジション化するツールというのを作成したと。
あ、ツールまで作っちゃったんですね。
それは時間かかるわ。
Vueコンポジションコンバーターというのを作られたそうですね。
これなんかなんだかんだ需要があるんじゃないかな。
はい、これによってVue 3か後にスクリプトセットアップ化もしやすくなったということですね。
オプションズAPIからコンポジションというところのソースコードの例が貼られています。
クラスAPIからコンポジションもソースコードが貼られています。
で、セットアップコンテキスト.ルートという話に移りますね。
Vue 2でコンポジションに関してもユーズストアやユーズルーターが使えないので、
暫定的にセットアップ関数の第2引数のプロパティルートというのをディス代わりに使っていたと。
はー、なるほどですね。
これはVue 2.7で廃止になってしまったと。
で、Vue 3のタイミングでユーズストアに書き換えたということですね。
いろいろテクニックを頑張ったという感がすごいです。
で、57ページあるということは今半分を折り返したばかりなので、
明日は書き換え作業のセクションをもう一回スタートで読み直してから、
この残りの後半もガーッと読んでいこうと思います。
でも、なかなかすでにパワフルな感じがすごくしますね。
あと、この後半のほうで出られているコンポーネントテストの話と、
破壊的変更点というセクションがすごいですね。
黒背景で赤文字で破壊的変更点って書いてあったので、
ここは結構いい話が聞けそうだ気がしました。
はい、なので明日をお楽しみにしていただければと思います。
ではですね、すごい中途半端で申し訳ないですけど、
今日の朝活動はこちらで以上にしたいなと思います。
日曜日の朝9時からですね、多くの方参加していただき、大変ありがとうございました。
また明日、月曜日ですけども、ゆるーくこれの続きを読みつつ、
また頑張っていきたいと思います。
先に宣言しておくと、たぶん明日の朝9時は僕寝坊する予定です。
多分今日も寝坊したんですけど、たぶん明日も寝坊する気がします。
昨日の夜ですね、パスタマシンをついに使い始めてみたんですけど、
思ったより面白くて、思ったより大失敗をしましたので、
今日ももう一回練習して、研究してやってみたいなというのと、
昨日あれですね、家で簡易的にできる燻製マシンみたいなのを買ってしまってですね、
燻製にドハマれし始めたので、
今日の夜はそんなことばっかりやって、
どうせお酒飲んでたぶん倒れる気がするので、
すいません、明日の朝9時寝坊する可能性があるというのは言っておいたいと思います。
じゃあこれで朝活終了したいと思います。
じゃあ明日も頑張っていきましょう。お疲れ様でした。
27:04

コメント

スクロール