先日リリースが発表されたLit v3について@AlanGDavalosと@TheoSteinerが話しました。
@AlanGDavalos
こんにちは、UITのアランです。ユーザーインターフェイスとテクノロジーを愛する開発者のためのウィークリポートキャストUIT INSIDE、 今週も始めたいと思います。今回のゲストはUITのテオさんを呼びして、Litのバージョン3をテーマに話していきます。
ておさん、本日はよろしくお願いします。
@TheoSteiner
よろしくお願いします。
@AlanGDavalos
さて、えーテオさんは多分UIT INSIDE初めてなので、軽く自己紹介してもらおうと思います。
@TheoSteiner
はい、今日初めて出演させていただくTheodor Steinerと申します。去年の秋入社で 新卒としてLINEに入った。えっと、現在UITのDev12チームで働いているものです。
えっと、主に担当しているプロジェクトとしては、公式アカウントのメンバーシップと、クーポンのLIFFアプリを担当しております。
@AlanGDavalos
はい、よろしくお願いします。
@TheoSteiner
よろしくお願いします。
@AlanGDavalos
さて、えー、今日のテーマについてなんですが、ま、ちょっと、あのー、自分は結構、何回か、 あの、このライブラリーについてのエピソードを、 あの、出させていただいたことで、ちょっと今日は軽くそれをおさらいしてから、えっと、今日の、あの、バージョン3について話したいと思います。
@AlanGDavalos
で、まず、今日話すテーマは、あの、Litというライブラリーについてなんですが、まあ簡単にまとめると、えっと、これは、Web componentsを作るためのライブラリーで、 まあ主に なんかWeb componentsの標準に頼って、それにあんまり、なんかちょっとやりづらいというところを、特にあのテンプレイティングとかリアクティビティとかを、
@AlanGDavalos
ま、ちょっと補ってくれるようなライブラリーで、結構軽量で、まあ使いやすいと思うんですけど、まあそれはそういうすごい個人的な意見なんですけど、そういったライブラリーについて、先日、えーっと、 次の、メジャーの、えっと、プレスリリースの発表があったので、ま、今日はそれについて話したいと思います。
で、肝心の今回の、あの、メジャーリリースなんですが、
@AlanGDavalos
結構なんか変更点が多いようで、少ないですよね、テオさん。
@TheoSteiner
そうですね。とても少ないです。
@AlanGDavalos
うん、合計でただ5個ぐらいです。 そうですね。ただ、なんか簡単にまとめられるけど、言われてみればでかいなっていうのは結構あるんですよね。
@TheoSteiner
あー、そうですか。
@AlanGDavalos
まあ、
@TheoSteiner
ちょっとアラさんの意見、あの、楽しみです。なんか、僕にとっては そんなにメチャな、えっと、変化に見えませんでしたが、おそらくアランさんはLitにより詳しいので、なんか大きさ、もっと把握できているかもしれませんね。
@AlanGDavalos
そうですね。ま、まず、ちょっと1個ずつ見ておきましょう。主に、なんか、多分、Litなチームが結構強調してる部分としては、メジャーリリースだからこそできる、ブレイキングチェンジをするためのリリースっていう風に、あの、結構 公式で言ってて、メインの開発者の、あの、ジャスティンさんが 言うには、まー、1番大きいのは、あの、IEのサポートを完全に終了するっていうものと、元々、v2が出るタイミングで、なんか色々なAPIが、あの、リネームされてたんですけど、ま、互換性を保つために、
@AlanGDavalos
古い名前で、aliasも、やってたっぽいですけど、ま、それも削除する。あと、ちょっとまだexperimentalだったSSRのクライアントの部分を、Litの本体から、えーっと、ちょっと別の パッケージに移すものと、 あとは、コード、TypeScriptで書かれてるんですけど、パブリッシュを確か、ES2019から2021
@AlanGDavalos
にしたものとなっていて、まあ、ブレイキンチェンジになるものは主にこの4つなんですよね。テオさんは、なんかこれについて、なんか思うところあるんですか。
@TheoSteiner
いきなり質問ですけど、えっと、IEのサポートを廃止すると、何か、なんか、これからできるものとかって、あったりしますか。
@AlanGDavalos
おそらくなんですけど、あの、今だと、結構、その、ポリフィル用の、なんかコードがいくつか入っていたはずなんですが、 まー、それらを取り除いたことで、まー、ライブラリーの軽量化もできてるはずなんですよね。
あとは、多分、なんか、それが原因で、まだ入れられていなかった機能とかは、あったと思うんですよね。それも、後ほど入れるために、今終了させて、まあ、後で色々
@AlanGDavalos
なんか追加するような気がしますね、印象としては、
@TheoSteiner
なるほど、そうですね。その、APIいっぱい追加するとかじゃなくて、 それより、これから新しく追加する機能の下準備としてのリリースの印象ですね。
@AlanGDavalos
そうですね、なんかまさにその下準備っていうのは、よく言えていると思います。
そうですね、やはり、まあまあ、多分、なんかLitだけじゃなくて、まあ ぼちぼち、なんかもう、microsoftが正式にIEのサポート終了させたのもそうですし、なんか最近のデータ見てると、まー、日本
@AlanGDavalos
は結構IEはまだ強めの国だったのに、なんか今だと多分0.4パーセントぐらいしかユーザー数が全体としていないので、 まあそろそろ、なんかその風を切り抜いて、なんか色々やれるといいですね。
@TheoSteiner
やっと廃止できますって感じです。
@AlanGDavalos
そうですね、
@TheoSteiner
えっと、その、SSRが、コアライブラリーから、Labsっていう、ちょっとLitの別のレポジトリに移動したっていう変更については、どう、どう思いますか。どういう変更ですか。
@AlanGDavalos
あー、ま、これはちょっとバージョン2で、多分軽くこのポッドキャストで話したかもしれないんですけど、そのLitに、なんか、その、2.0から、なんか、Labっていうパッケージのコレクションみたいなのが あって、 そこに、ちょっとまだ、なんか色々、エクスペリメンタルなところ、なんか実験的なところを、あの、入れるための、あの、ものになっていて、ま、そこに、なんか、あの、Reactのラッパーとか、
@AlanGDavalos
なんか別のライブラリーでも使える、タスクのあのライブラリーとか、なんか色々な、なんか、インターナショナリゼーションとかもそっちに入ってるはずなんですけど、 なんか色々な、なんか、Litにと一緒に使えるものとか、ま、別のライブラリーと一緒に使えるものとかが入っていて、 で、元々、多分、SSRのあのサーバー版は、そのLabsに入っていたはずなんですけど、あの、クライアント側が
@AlanGDavalos
コアライブラリに入っていたんですけどね。ただ、まあ、これは、はい、クライアント側
@TheoSteiner
を言うと、えっと、その、はい、ハイドレーション関係のコードとかですかね。
@AlanGDavalos
そうですね、まさにそれで、なんか、ハイドレーションをどうやってやるとか、なんか、そういったコードが、まり、2.0までは、えっと、コアライブラリーと一緒に入っていったんですけど、ま、今度から、なんか、それをちょっと、 あの、別のパッケージとして出して、おそらく、なんか、SSRを全員使うわけじゃないですか、なんか、ま、全員使うわけではないんじゃないですか。はい、 だから、まあ、使いたい場合は、もう本当に任意でそのパッケージをインストールして、使いたくない人は、ま、その、その分、なんか、パッケージを、あの、入れなくても済むっていうような感じだと思うんですよね。
@TheoSteiner
あー、なるほど。そもそも、SSRができるようになったのも、比較的最近ですね、あの、宣言的Shadow DOMが、 ほとんどのブラウザでアドプトされて、えっと、それで、可能になった機能、という認識であってますでしょうか。
@AlanGDavalos
そうですね、あのー、多分、なんか、リットの作者も、なんか、あの、そもそも、その、あの、デクララティブのShadow DOMの、 ま、定義作りに結構、関わっていたこともあって、なんか、定義段階から、あの、色々、なんか、実験的にやっていたんですけど、ま、今だと、Safariとかにもすでに入っていて、 そこを、より、今度、なんか、多分、実験的なところをちょっと洗い出して、
@AlanGDavalos
なんか、ちゃんとした、なんかステーブル化するような動きを、ま、進めるためにも、多分、今、 あの、別のパッケージに移して、ちょっとコアライブラリーと別で、なんか色々バージョニングできるような形にしてると思うんですよね。
@TheoSteiner
わかりました。それは、楽しみですね。なんか、より簡単にLitのSSRができると、ま、特に、サーバサイドレンダリング をしている、別の、ま、Next.jsとか、SvelteKitのメタフレームワークで、えっと、より使いやすくなるじゃないかな。
@AlanGDavalos
そうですね。まさに、多分、なんか、 あの、以前聞いた話だと、その、なんか、Nextで、LitのSSRができるプラグインを、なんか公式で、あの、Labsの中で開発していたみたいで、 ま、そうやって、なんか、ま、そこも含めて、なんか色々できるといいですね。
@TheoSteiner
えっと、先ほど、今回のリリースは、これから出る機能の下準備のリリースって言ったんですけど、これから出る機能は、 どういう機能が出るのでしょう。
@AlanGDavalos
それはちょっと自分でもよくまだわかってないんですよね。なんか、多分、ロードマップ探せばあるかもしれないんですけど、なんか、あの、今回の公式であんまり見られなかったんですけど、なんか。テオさん、何か 見れましたか。
@TheoSteiner
あ、そうですね。なんか昨日ちょっとこのポッドキャストに出る準備として、Litのrfcのレポジトリをちょっと探ってきたんですけど、えっと、主に出てきたのが2つで、えっと、1個目が、えっと、これからTC39 がJavaScriptの仕様にと、デコレータを追加するみたいで。
@AlanGDavalos
はいはい。で、その
@TheoSteiner
デコレータのJavaScriptのシンタックスが、えっと、今、TypeScriptの デコレーターと若干違うので、えっと、これからそのJavaScriptのデコレーターがより使いやすくなるように、より、えっと、導入しやすくなるように。
おそらく今年の夏、TypeScriptがデコレーターのルールとかシンタックスを、ちょっと
@TheoSteiner
変えて。で、その後、えっと、Litがそのデコレーターを使った、まー、プロパティの定義とかを導入するみたいですね。だから、今まで デコレーターで一応プロパティとか定義できたんですけど、そのシンタックスはJavaScriptに入らないシンタックスなので、その 仕様が決まったら仕様に寄せるみたいな過程は、これから、えっと、する予定みたいです。
@AlanGDavalos
そうですね。なんか、テオさんに言われて覚えたんですけど、あの、思い出したんですけど、確かに、あの、以前、なんか、プレリリースのポスト作った ジャスティンさんが、なんか、あの、twitterで、なんか、まあ、まさに、その、デコレーターはマイナーで追加される機能の1つだろうっていう 風に言ってたので、まー、確かにそうですね。なんか、デコレータ、なんかちゃんとJSに入るので、
@AlanGDavalos
ま、Litは結構TS版でよく使ってるので、なんかそれをJS版でも使えるようになるのと、嬉しいですね。
@TheoSteiner
とても楽しみですね。あの、えっと、社内ライブラリーのLDSGで、ちょっと、あの、Vite使っているんですけど、 その、社内ライブラリーが、えっと、完全にJavaScriptになっているので、その、プロパティとかの定義、やっぱり、TypeScriptの方が、ちょっと楽ですよね。
@AlanGDavalos
そうですね、そこはちょっと、自分で、なんか、JSにしようっていう、 あの、リーダーシップなんですが、まあ、確かにそうですね。なんか、あの、結構、リットで、ま、TS使うと、色々と、なんか、プロパティだけじゃなくて、なんか、ステートとか、あの、 クエリーとか、なんか色々なデコレータが使えるので、ま、TSで使うと、結構、なんか、簡単にまとめられる部分が多いですよね、
@TheoSteiner
はい。あと、えーっと、完全に、これまでの、えっと、プロパティの定義のシンタックスとかが、廃止されるみたいです。
あの、JavaScriptのシンタックスに、デコレーターが入ったら、えっと、リットも、それだけに、 デコレート以外の、プロパティとか、えっと、ステートの定義を、廃止するみたいです。
@AlanGDavalos
ほう、まあ、確かに、なんか、JSにあったら、まあ、その分、結構、なんか、今だと、多分、2重で、ちょっとコードがあるはずなので、 ま、それを1個にまとめられるんだったら、まあ、それに越したことはないです。
@TheoSteiner
そうですね、まあ、それこそ、おそらく、破壊的変更になると思いますので、おそらく言うと、 4.0とか、5.0になりそうですね。
@AlanGDavalos
そうですね、多分3.0以内はまだ、まあ、多分、 あの、今の、なんかスタティックゲッターで、そのプロパティを定義できるあの仕組みを、 一旦なんかデプリケートにして、まあまだ使えるようにするんじゃないかな、あの、その、アレを読む限りは
@TheoSteiner
そうですね。で、ま、これに興味ある方はぜひ、えっと、JavaScriptを、JavaScriptの仕様を定義するTC39の、 えーっと、仕様書を読むといいかもしれませんね。
@AlanGDavalos
そうですね、ちょっと今回のポッドキャストのノートにも追加しましょう。それ、
@TheoSteiner
お願いします。では、そのをrfcさくって、もう1個、 今ちょっと熱いテーマが出てきたんですけど、Litはあんまり。えっと、これまで ステート管理とかにはあまりそういう機能はなかったですね。ま、ほぼ開発者に任せるっていうことが多かったっぽいですね。
@TheoSteiner
でも、最近、えっと、Litのrfcに出てきたのは、えっと、Preactのシグナルを もしかしたら使えるようになるんじゃないかなっていう。
@AlanGDavalos
あー、確かに。なんか結構、あのPreactのシグナルってすごい。なんかまあ、いわゆるどこでも使えるように作られてるんですよね。
@TheoSteiner
はいはいはい、結構熱いですね、最近のシグナルのステート管理。
@AlanGDavalos
うん、そうですね。で、まさに、多分、なんか、その、Preactシグナルを、まー、Preactなので、結構、多分、軽量だと思うので、
@TheoSteiner
はい、
@AlanGDavalos
なんか、そこを、つか、より、使いどころがあれば、多分、結構、ステート、色々なところで共有するためには、すごく いいと思うんですよね。あの、別々のライブラリーで作られたものだとしても。
@TheoSteiner
そうですね、まあ、その、シグナル、最近結構多くて、その、シグナルライブラリー同士の、 えっと、コンパティビリティが、ちょっと、あの、難しいところはあると思いますけど、なんか、みんなが、1つの実装によると、多分、 あの、他のライブラリーと混ぜても、使いやすいんじゃないかなと思います。
@TheoSteiner
えっと、もう1つの、えっと、実は最近話題になってるテーマがあるみたいで。で、それは。ジャス、あのLitの作者のジャスティンさんがこの前ポッドキャストで言ったんですけど、 えっと、他のライブラリーだと、最近メタフレームワークが結構出たりしますね。えっと、例えばSvelteだとSvelteKitとか。
えっと、SolidだとSoldStartで、もしかしたらLitにもそういうメタフレームワークが追加されるっていう
@TheoSteiner
あの噂は聞いたんですけど、そこはアランさん、何かより詳しい情報あったりしますか。
@AlanGDavalos
まあ、多分、なんか、結構、ジャスティンさん、色々なところで手ましてるので、なんか、どこまで、なんか形になってるかわからないんですけど、まあ、 結構、だいぶ前からやりたがってたので、まあ、いずれで出てくるかもしれないというのは、否定できないと思うんですよね。
@TheoSteiner
なるほど、最近、最近出たViteとか、ま、もう最近じゃないですね、2年前ぐらい出たViteとかを使って、 そのより簡単にメタフレームワーク作れるので、それで、もしかしたら、 これから、Litのメタフレームワークができるかもしれませんね。
@AlanGDavalos
そうですね、当時の、なんか、当のViteは、結構、なんか、Litを、Vite内で使えるので、ちょっと、色々な意味で、 面白い動きでは、あるんですよね、なんか、どんな形になるかは、まだ、わからないんですけど、 そうですね、実際に、なんか、こういったものを、そのうち導入するための下準備っていうのは、まさに、それですね、
@AlanGDavalos
多分、なんか、最後の、なんか、今回のリリースの理由 なんですけど、ま、理由ていうと言いますか、なんか、多分、コアバリューの1つなんですけど、v2のものと、結構、互換性が、すごい高いらしくて、 Litの、v2でできたコンポーネントとか、テンプレートとか、ダイレクティフなどは、えーと、ま、そのまま、v3と一緒に使ってもいいので、ま、Litで、なんか、v2のコンポーネントに依存していても、
@AlanGDavalos
ま、それを、なんか、そのまま、なんか、テンプレート渡したり、ダイレクティブ渡したり、なんか、色々は、普通にできるはずなので、 なんか、そういったところは、結構、ま、ちょっと、いいなと思ってるんですよね。なんか、そんなに待たずにして、あの、 普通に、なんか、古いものでも、新しいものでも、普通に使えるのは、結構、いいと思いましたね。
@TheoSteiner
さすが、Web componentsってことですね。やっぱり、互換性がとてもいい、えっと、技術ですね。
@AlanGDavalos
うん、そうですね、まあ、コンポーネントは、まあ、その、Web componentsだからこその、互換性なんですけど、なんか、テンプレートとかは、まあ、あの、あれは、完全にLitで実装してるものなのに、なんか、ある意味、なんか、新しいフィーチャーがないからこそ、できる芸当なんですよね、多分、うん、そうです。
@TheoSteiner
まあ、あと、あの、裏で、ただのJavaScript、テンプレートタグと、リテラルを使ってるので、なんか、結構、軽い実装ですね、
@AlanGDavalos
そこは、確かに、そうですね、
@TheoSteiner
そんなに破壊的変更はなさそうですね。これからも
@AlanGDavalos
そう、なんか、今回の回で、ま、色々見てたんですけど、なんか、Litのメジャーって、なんか、今までだと、ま、2年おきぐらいに出てくきてて、なんか、2019、2021、今回は2023なんですけど、 大体、なんか、いつも、結構前のバージョンを、結構意識しながらやってもらっているので、なんかそこは個人的にはすごく良くて、あの、
@AlanGDavalos
なんか、前の、なんか、v2の時に、あの、山本達也さんに出てもらってたんですけど、なんか、その時の結論としては、なんて親切な、 あのOSS。っていう風になったんですけど、 まあ、確かにそうですよね、なんか、基本的には、なんか、ユーザーが困らない、極力困らないようには、あの、考慮して
@AlanGDavalos
もらっているのは、すごく嬉しいですよね。1ユーザーとしては
@TheoSteiner
すごい、あの、安心して開発に使えるものですね。
@AlanGDavalos
うん、そうですね。
@TheoSteiner
開発してる組織もgoogleなので、その、googleの中で、中のプロダクトでいっぱい使われている、えっと、ライブラリーなので、そこで、 えっと、大きい破壊的変更とか出たら、その、YouTubeとか書き直すことになるので、多分、とても大変だと思います。
@AlanGDavalos
そうですね、確かにそれもありますね。なんか、最近だと、Mozillaが、あの、Firefoxを作るために使ってるとか、あの、AdobeがPhotoshopを作るために使ってるとかが、 ま、ちょっと、ちょっとした話題になっちゃったので、ま、それぐらいの規模の組織が使ってる中で、まあ、なんか、破壊的変更を入れてみてたら、結構不満が 飛んでくると思いますので。そうです、さすがに慎重にやってもらってますね。
@TheoSteiner
確かに、SpaceXも宇宙船の中の画面でChrome OSを使っていて、Chrome OSの裏もいっぱいLitになってると思うので、 えっと、宇宙技術にも使われている技術として、破壊。そこで、破壊的変更を入れたら大変ですね。
@AlanGDavalos
まあ、だからこその、まあ、結構、まー、ちょっと他のところも、ま、こういった考慮をして もらえるといいですね。確かに、やってるところは多分色々とありそうなんですけど、なんかこれぐらいの慎重さ、かつ、なんか互換性を できるだけ保つようにしてくれるのはいいと思いますね。
@TheoSteiner
もう1つの、えっと、互換性が常に、なんか、Litの互換性が常に高いということのもう1つの理由として、えっと、ウェブのプラットフォームにすごい近いっていうことがあります。かもしれ ががあるかもしれませんね。
@AlanGDavalos
えっと、
@TheoSteiner
ウェブもすごい互換性を大事にしてるプラットホームなので、それに近いLitは当たり前に互換性も大事にしているっていう 点もあるかもしれませんね。
@AlanGDavalos
うん、そうですね、なんかまあ、思想は、結構、ま、それこそ、さっき、なんか色々話題に出てきた、ジャスティンさんが、結構、まあ、 私と同じ、あの、ま、W3Cのコミュニティグループに所属していて、ま、彼は、なんか、なんか、まあ、私より、なんか、ワーキンググループの、 あの、話し合いとかにも、参加しているっぽくて、まあ、結構、標準に依存している分、なんか、標準の話し合いとかにも、積極的に参加して、
@AlanGDavalos
ま、色々やってもらってることもあって、まあ、先ほどテオさんが言った通り、なんか、極力、標準を使うようにしている分、まあ、その、標準が生きてる限り、あんまり、困らなくは、なるな、ならないんですよね。
@TheoSteiner
そうですね。それなんかwcigのこれからの予定とかについてもいつか話してみたいですね。
@AlanGDavalos
そうですね、確かにそれはまあ、また別の、
@TheoSteiner
ちょっとまた別の回にしましょう。はい
@AlanGDavalos
はい。ただまー、それは確かに面白そうなので、うちでやってみましょう。
@AlanGDavalos
ま、今回の、あのー、Lit v3についてのキーポイントは多分これで以上なんですが、なんかテオさんは最後になんか思うところは あったりしますか。
@TheoSteiner
そうですね。なんか、よりプラットフォーム使いたくなるなってちょっと思うようになりました。これについて、あのLitについてと、 Litについて調べると、その、プラットフォームのすごさ、やっぱり、ちょっと気になりました。
@AlanGDavalos
それはよかったです。そうですね、ま、私からしたら、結構、なんだろう、自分 がなんか、ま、Litのご先祖みたいな、あの、Polymerで出会ってから、なんか結構、フロント、 あの、本格的になったあの身としては、なんか、結構、同感できていて、あの、今回のv3は、なんか、すごい、あの、初めて発表を見た時は、えっ、これだけ。って、ちょっと
@AlanGDavalos
こう、あの、実際には、なったんですけど、まあ、調べれば調べるほど、なんか、まあ、先ほども言った通り、なんか、これは、まー、結構、あくまでも、下準備で、今後の、結構、 大きめな、なんか、新しいフィーチャーとか、ま、コネクションとかの、ま、土台でしかないので、ま、今後、逆に、今後からの、楽しみが増えるっていう ふうに、ま、考えてもらえると、嬉しいです。
@TheoSteiner
そうですね。あと、変更がないっていうことは、ま、実は、いいことですよね。ちょっと、あの、技術者にとって、つまらないんですけど、 つまらない技術を選べっていう名言がありますよね。
@AlanGDavalos
確かに、Lit
@TheoSteiner
は、ちょっとつまらない技術になってしまいましたね。だからこそ、選びたいです。
@AlanGDavalos
そうですね、なんか、まあ、2.0 かけるんだったら、もう、3.0、普通に一緒一緒でなんかもう。アップグレードはもうnpm installで。はい、終わりになりますので、 いいですね。そこは確かに確かにいいと思いますね。
@AlanGDavalos
というわけで、まあ今回はLitのバージョン3について話していきました。
えー、lineのフロントエンドの開発組織UITでは、このようなフロントエンドに関する議論やキャッチアップを日々行っております。過去のエピソードでは、社内の学習企画から始まったコンテンツが多くありますので、 今後も発信していければと思います。今回はLit v3のテーマに話していきました。テオさん、ありがとうございました。
@TheoSteiner
ありがとうございました。
