音声書き起こし
1. オープニング
Guest
それではえ、今週のえ、UIT INSIDEえ、やっていきたいと思います。え、まず初めにえ、このポートキャストは、え、LINEUIT室に所属する開発者たちが、毎週最新のフロントエンド動向について語るためのポートキャストです。
Guest
最新のweb標準の動向から開発、フレームワークの変遷、またまた、uiやuxに関するアップデートまで、週の始まりに全種までの内容をキャッチアップすることを目的としております。
Guest
今回はですねえーUIT所属のえージェスラーである。えと、私はたとえともにですね。同じくUITにえー所属している。アランさんとえともにやっていきたいと思いますよろしくお願いしますよろしくお願いします。
2. キャスト自己紹介
Guest
それではまずですねえ、あらさんの方、軽く自己紹介してもらってもよろしいでしょうか。
Guest
はい、まあ、私はアランダブロスと言います。メキシコ人のジェイアサーで、え、
Guest
UIT所属のま、今はLINEliveを担当してもらっています。
Guest
で、まあ実はまあウェブコンポーネンツ大好き人間で色々紹介したいなと思っています。
Guest
というとこで、えあらさん自己紹介ありがとうございますということでですね、今回はですね
Guest
アランさんの方が結構ウェブコンポーネンツをえ、普段からつかえ、全職とかでさられていたりとかっていうところで、えま、ちょっとえ。深く話を聞きたいなと思って、え、ちょっと時間もきさしてもらいました。ていうところでございます
Guest
というわけで、今週のえ、インサイド。え、ワテインサイドについては、webコンポレンズでえやっていきたいと思います。
Guest
まずえーアランさんの方に少しお伺いしたいんですけど、ウェブコンポーネンツっていうところについてま。ちょっとえ。自分も古い仕様と、今の仕様がごっちゃになってたりするんで、改めて今の仕様みたいなとこって、ざっくり説明してもらったりしても大丈夫ですかね。
3. Web Components の現状について
Guest
はいえ、一応まウェブコンポーネンツは、今はまあ、バージョン1の仕様になっていて、
Guest
で、あのほとんどのブラウザーが適用されている形になります。で、実はまコンポールズと言っても、実は4つの使用になっていますね。
Guest
で、その4つの仕様はまあえhtmlのテンプレートで、それをまあさっくり言うと、
Guest
あの、実際にイエスとかでなんか作らないと何も出ないっていう。あの、
Guest
あのカスタンエルメンツっていう。まあ、それもビューとかリアクトとかにもある。あの、コンポーネンツみたいに、なんか自分で自分の
Guest
htアタを作って、で、それがあのドムに入れば、
Guest
あの、自分で作ったコンポネがそれをトイレ買いに入るっていう仕様で、
Guest
それもシャドードームっていう仕様もあって、そのシャドードームは、あの
Guest
普通のcssと異なるっていう。あのまど普通のドームと異なる
Guest
ドムの構造が作られてて、でどあの普通のドムのcssがえに影響されないっていうところがあって、すごい便利な
Guest
ところもあって、で、まあ、多分みんな使ってるイエスマジもその仕様の1つ目になっています。
Guest
イエスのジョズはま、コードの分析とかに、あのちょうどいいっていうところで
Guest
目合ってるって感じですかね。はい、その今のメインの仕様っていうところでも、ちょっと自分が
4. Scoped CSS と shadow DOM の違い
Guest
ええ分かってない部分があるんですけど、なんか昔、それこそ今でもビーjsではスコープドcssってのがあると思ってて、ま、その辺って、昔も昔はこの辺の
Guest
なんでしょう。ウェブコンポーネント的な文脈、文脈とかであった気がするんですけど、その辺て今ってもうなくなったりしたんですかね。
Guest
一応あの、まあ、シャドードームのポリフィールであるシェリドームとかは、まあ、
Guest
ビューのスタイルドストとかに当てはまるとはいいう形なんですけど、普通のシャドードームは、それとはまた異なる仕様で、そもそもあの
Guest
ブラウザー側からこう分分離されてて、もう普通のドームのcssは、シャドードームに影響がないで、ャドードームのcssは、普通のドームに影響がないという形になっているので、
Guest
普通のスタイルスコットはちょっと異なって、あの自分がもっと自由を手に入れられるっていう形になります。はい
Guest
てなるとあれですかね。元々はスコープドcssみたいなものも少し話は上がってたけど、まあ、シャドードームで全部賄えるじゃんみたいな、はいことですかね。ていうとこで、統合されたみたいなとこですね。シャド
Guest
ドムは、もうcssを修正するっていう声もあって、
Guest
私もそう同意見だと思います。あの、自分的にはまjuさんなので、ちょっとcsはちょっとめんどくさいということところもありますけど、
Guest
シャドードームなら、まあ、そんななんかこう色々気にしなくてもいいので、すごい便利だと思います。
Guest
なるほど、なるほど、確かにシャドードームになると、完全に分離されるんで、便利かなっていう感じはしますよね。
5. Web Components の仕様周り
Guest
あと、結構その
Guest
今のえ使用的なところで言うと、そのesモジュールスも、今はもう完全にウェブコンポーネンツとして、ええのくりの中に入ってるみたいな感じなんですかね。
Guest
まあ、実はまあそんなになんかイエスモイロズは元もなかったんですけど、まあ、
Guest
みんなが使うようになって、いや、これをウェブコンポーネンツに使えるっていう形になって、まあ、使用にちょっと。なんか自分勝手に入れられてるんですけど。はい、実はまあそのそもそもなんか
Guest
ああ、なるほど、なるほどや。元々は別問だったけれど、ま、都合的に一緒にあった方がいいみたいな感じで。今なってる
Guest
バージョンゼロまでは、htmlインポートっていう仕様があったんですけど、それは他のブラウザはなんかクロームがすごい。あの、賛成してたんですけど、他のブラウザはちょっと。
Guest
これは嫌だっていうと、声が上がって、じゃあpsモズで我慢してますっていう形にな。
Guest
ちなみに、今の最新バージョンは、ウェーコンポネンツはいくつなんですか。
Guest
まあ一応あの主様の1の1ジョン1はあの、なんか最新バージョンでま色々今からね、なんかこう。
Guest
あの、特にシャドードームがみで、色々な修正が来てるんですけど、それはまたあの楽しみの1つ。
Guest
なるほど。なるほど、じゃあ、今のところまバージョン0みたいなんであったものから、発展して、バージョン1っていうのが今結構安定してきてきているけど、まあまだまだ意見とかたくさんあるんで、まあ、変わっていく可能性はあるってとこですね。はい、なるほどなるほど、
Guest
でもまああの実際にま。これはボポンポンデスの良さの1つなんですけど。はい、あの、
Guest
まあもうあのhtmlとかjsの仕様になっているの。で
Guest
も、あの、今から作ったウェコンポーネンツは、もうこれは10年前、20年前ウェブが存在し続ければ、
Guest
使用がそんなに変わらないので。あの、今作ったものはもう何年か先でも自分機能できるっていうところがすごいいいと思います。
Guest
はい、確かにこう不安定な中の仕様じゃなくて、ある程度定まっていれば、まずっと使い回せますもんね。確かに確かに
Guest
いや割とウェブコンポーネンツを今普通になんでしょう。なんかのアプリケーションの中で使うとかも、割と自然な流れなんですかね。
Guest
は、いま、一応なんか結構大きなゴルアプリケーションとかが作られてる形になりますね。はいはい、
6. 最近の事例について
Guest
ちなみに、その実際のwebコンポリンズのユースケースみたいなとこで言うと、実際どういうとこで使われていていたりとかしますかね。
Guest
1番なんか多く使われているところは、なんかこうそ、そもそもそもなんかこうな。コンポーネンツのライブラリーを出している、
Guest
あのカンパニーたちは、その人たちは。まあ、ウェブコンポーネンツなら、いろんなフレームワークとか、そもそもフレームワークなしでも使えるようになっているので、
Guest
まあ、じゃあ私たちもコンポーネンツで作って、1つのあのコードでみんなに使えるようなコンポーネンツ作りますっていうところが1番多いかもしれま。
Guest
はいはいはい、具体的な例とかってなんかあったりしますかね。
Guest
まあ、例えばなんか最新だと。なんか、アオニのバージョンフォールは、ウェカンパオネにで作られていますし。はいはい、なんかバーディンっていうあの、
Guest
あのところもあのコンポーネンツをも、もうそれも3年前ぐらいからもう50コポーネンツで使っていますし。で、実はもうあの、
Guest
もしかしたら、ブッツトップのバージョンまゴーじゃなくて、シクスはウェブコンポーネンツとして出たりするかもしれません。っていうところが、最近
Guest
は話がありましたね。
Guest
いや、結構今もう色々ウェブコンポリンツを実践していくみたいな流れもそれなりに出てきてるって感じですね。はいはいはい、なるほど、なるほど、
Guest
そうですね、確かに、アイユニックとかは、なんか最近そういう記事とか見てたりしてて。はい、
Guest
アンギラが元も割とウェブ標準によったって、開発しやってると思うんですけど、まそん中でアイオニックが先行してやってるとかってのは結構面白いなと思ったりしますね。
Guest
まあ、アンキーラでもコンポーネンツを作られるんですけど、はい、それはまあビューでも作られますけど、
Guest
そもそもまあ、ビュートアンギラーは、自分のコンポーネンツステムがあって、それを優先的に使っているんですけど、ま、最近だとアンギラはちょっとコンポーネンツがみになってきてるんですけど、
Guest
まあなんでしょう。あの、なんかこうコンポーネンツのために作られていないのには、コンポーネンツができるっていうライブラリーの2つなんです。
Guest
はいはいはい、なるほど、なるほど、自分もちょっと前にそのbjs版のやつを触ってみたりしたんですけど、まあ、なんか確かにウェブコンポリンツは履けるけど、これってbjの世界感だよな。みたいなのをちょっと思ったりは確かに
Guest
しましたね。実際そのまあウェブコンポーネント作ってるところはま、結構そのベンダーさんとみたいなところが、結構その
7. Framework「LitElement」
Guest
手動になってるみたいなとこがあると思うんですけど、じゃあ、我々が。じゃあ実際使う時とかってどういう場合で、ウェブコンポネンツのま、どういうところの良さみたいなのを活かしてま。どういう機能使ってやっていくかみたいなんてたいありますかね。
Guest
まあ、それはまあなんかオフコンポネスの普通のスタンダードなら、ちょっとお勧めできないんですけど、い
Guest
ウコンポーネンツをなんかもっと。あの、なんか、ディベロッパーとして、なんか使いやすいようにする。ライブラリーが複数あって、はい、そのライブラリーの1つを使えば、それももう
Guest
ビューとか、リアットとか、アンギラみたいなフレームワークとほぼ同じような経験で、なんか色々なま、結構あの、
Guest
あの複雑なアピケーションとかも作れます。はいはい、例えばなんですけど、まあ、私が1番なんかこう。よく使ってるリエルメントっていうあのこぽん。まあ、コンポーネンツのプレインワークなんですけど、
Guest
それの
Guest
まあ、テンプレートアプリケーションみたいなのがあって、そこにまあリダックスとかも入ってたりするので、結構あの、なんか、リアットとかビーに詳しい人なら、結構簡単に入ってしまうっていう形かもしれません。はいはいはい、
Guest
なんかリットエレメントっていうと、まあ昔からってか、まあそんなに昔でもないですけど、少し前からリットhtmlっていうのが
Guest
ずっとあったと思うんですけど、なんかあれよりはも、あれは結構hmlをそのままみたいな感じでしたけど、なんか、リットエレメントは、もっとそのリラックスとか使えたりとかって、形で強化されてるって感じなんですかねえ。
Guest
リトルメントは、まり、htmlを中に使ってます。ありhtmlはあの普通のもう
Guest
あの、そもそもウェブケオカンポールズとかなくても、そもそもなんかな。ただ、あのレンダリングを簡単にするようなライブラインなんですけど、はい
Guest
で、それをまあリテルメントだけでなくて、あの、もうか2つぐらいの他のボルコポネスのライブラリをリバリtcをレンダリングシステムとして使っているんですけど。
Guest
でも、あのリータルメントはただあのそれそのリタイアを使ってレンダリングしてで、他に色々なんかこう
Guest
ま、そもそもなんかこう。プロペティのアプデートが簡単にできるような形とかをとったりするっていうこともあります。
Guest
で、あの、なんかリダックスとかへの接続は、まあ、あのミキシンとかを作って、それで繋がっているっていうか、
Guest
ああ、なるほどなるほど、じゃあまあリッドhlはこう立ち位置的に言うと、あのリアクトンに対してのリアクトドムみたいなのって感じですね。
Guest
なんか、ビードムみたいなんですけど、そもそもなんかビョじゃないです。はいはい、なんかつ
Guest
現実のはい
Guest
で色々使っているんですけど、結構あの、なんかbdmと比べられても結構あのまあいい線に行ってますね。なんか、こうあの効率よくはいを反映できるっていうライブライングなんですね。
Guest
あ、コンポネがあってもなくても、それは結構使ってもいいと思います。いろんなプロジェクト
Guest
なるほど、なるほど、ありがとうございます。じゃあ、結構今もうリットエレメントじゃ、例えば、リアクトの代わりに使おうみたいなもの、わりと現実的な感じですかね。
Guest
はい、結構現実的になってますねあの、ついあの1週間か2週間ぐらい前に、あのリテレメントもリタチメルのバージョン。
Guest
まあ、1と2.0が出て、もうなんかステーブルされてるので、結構あのこう現実的なプロジェクトで使っても、全然問題ないというところなんですけどね。
Guest
なんか、リットエレメントは、いきなり2になったんでしたっけ。確かはいいですが、あれはなんかな、なんでとか
Guest
あ、わかりません。結構面白いなんですけど、元々あのレポジトリはあのまああのパッケージはま、アトリム。
Guest
それをもうあの、ポリマーってなんかワポネなんですけど、今はちょっとなんかこう見捨てられたんですけど、なんか結構イメージが悪かったんですね。みんなの中で
Guest
なので、それを捨てて、なんかただのリテールメントにしようとした時に、そもそもリッテルメントというパケージがもう存在してたので、
Guest
そのなんかパッケージから名前を買って、じゃあ、パッケージがもう1.0があったので、もう2.0に飛ばす必要が出てきた。
Guest
なるほど、なるほど、そういった都合だったんですね、はい、
Guest
ほんとになんか変な話なんだけど、
Guest
面白いですね。はいはい、
Guest
自分もなんかこう見て0になって、あれって見て、なんか色々ブロックとか言ったらああ、なるほど、
Guest
そういった経緯だったんすね。なんか、いきなり2で面白いなみたいな感じで見てたんですけど、
Guest
はい、そうなんですね。
8. Web Components の利点
Guest
そのリトレエルメントが、まあ、バージョン2が出たとかっていうところで、ま、結構ステーブルになっていくっていうところがあると思うんですけど、ま、その中で、じゃあまあ、javascriptのフレーマークとか、例えば、リアクトとかがある中で、その
Guest
これって、今、ウェブコンポーネンツを使っていく良さとかって、なんかあったりしますかね。それ、特有の
Guest
そうですね、なんか私的には1番の良さはまあ、あのまあ2つぐらいが1番。なんか、私のお気に入りの良さなんですけど、いつはもう話した。あの、シャドードームなんですけど、シャドードームの可能性はめちゃくちゃ高いんです。
Guest
あの、
Guest
cssであんまり気にしなくて、かけるっていうところがなんか思ってるより、なんか、すごすごいことなんだと思います。あの、
Guest
こう何ななんか何にも影響されないし、何にも影響しないので。なんかそもそも気軽になんかこう。それもあのすごい。なんか、こう簡単なセレクターとか入っても、すごい便利なんだと思います。
Guest
で、もう1つはまあ
Guest
あのなんだろう。未来的の可能性なんですけど、はい、あの、そもそもまあ今は今こそ。なんかリアクトとかまあ、アンギラとかビューとかがあるんですけど、
Guest
前までは結構なんかこう。メテロとかエンボルとかなんか、いろんなジャブスキルトのプレインボールとはあったんですけど、今はそんなに使わないんですよね。
Guest
なんか、そもそも、ジャバスケットのフレインブラックは、結構あのこう何年か経てばなくなるっていうところが多くて、で、そもそもまあウェブコンポーネンツは
Guest
ま、そういう例はほぼない。なんか、ウェブスタンドの一部なので、そもそもそれがないので、
Guest
それがまあいいと思います。なんかこう。
Guest
まあ、これはもう未来。なんか何年経っても機能できるっていうところが、私的にはすごい魅力的だと思います。
Guest
だから、今のうちにebコンポーネンツで作っておくと、まあ、その例えば今例えばビューだとか、リアクトだとか、アンギラとかっていうのを使っていたとしても、まあ、もしはアギラーはよりウェブコンウェブょう、スタンダードよりですけど、まあ、例えば
Guest
まリアクトだとかビーとかを使っていて、ま。もし、それが何かダメになった場合とか。でも、まあ、あの本来だったら乗り換えていかないといけないけど、まあ、ウェブコンポーネントであれば、長生きするみたいなですかね、そ、
Guest
そんなにあのなんでしょう。あのま、そういう場合だと、結構あのアプリケーションのまた0から作り直すっていう形になることが多いので。はい、ウェブコンコルンなら、まあ、ある程度の書き直しが必要になっても、
Guest
なんか根本的なところがそんなに変わらないので、結構なんかこう少しずつ変化できるっていう形なんです。
Guest
はいはい、はい、なるほど、なるほど、
Guest
確かにそうですね、こうフルフルで全部リプレイスだみたいなことをしなくてもいいってのは結構利点かもしんないですね。はい、確かに
Guest
まあ、あとはまあ今のウェブコンポンスなんですけど、はい、なんかそもそもまあ、大きなプロジェクトで使わなくても、なんか実際に例えば、なんか
Guest
ああ、こういうなんか、ボタンとかを作りたいなと思ったら、じゃあ、コンポーネンツ作って、やはりビューとかアンギラとかで簡単に使えるっていうことも、結構魅力的だと思います。なんか、そんななんか大きなプロジェクトじゃなくて、
Guest
なんかこうみんなに使ってもらいたいっていうところを作りたいなら、50カポニンは1番適した適しているだと思います。
Guest
なんか、個人的には結構その要素とか、結構これから強くなっていくんじゃないかな。みたいな
Guest
ところがあると思ってて、まあ、割と今までって、みんなどのフレームも好きかって実装してたみたいなのがあると思うんですけど、まあ、割とウェブコンポーネンツ的なところっていうので、まあ、こう
Guest
共通的な仕様みたいなところとして、これから使われていくんじゃないかなってのに、期待があったりしますね。ちなみに
9. Web Components の展望
Guest
のそこまででま。実際じゃあ、これで使っていけるみたいなとこが出てくるかなと思うんですけど。じゃ、その上でこうウェブコンポーネンツって、これから
Guest
もっとこう進化していきそうとか、まあ、なんか見てる限りの反映とかでもいいですし、個人的にこう進化していったら、もっと嬉しいのになみたいなんてあったりしますかね。
Guest
そうですね、まあ、仕様自体はま、特にあのシャドードームのあの、なんか最新的のの。まあ、なんか未来的な進化が
Guest
あの期待できると思います。なんか、今のシャドードームだと、あのテーマとかなんかこうそれもなんかこう。
Guest
ああ、なんか自分がボトン作りたいんですけど、なんかこういうボタンはまあ、もうちょっと大きくすればとか、もうとし小さくすればとか、なんか、あのカラーとかを買いあ、買いたいとかそういうのがあるので、
Guest
まテーマ的な問題はまあ、今ならまあ、カスタムプロプリティスとかでできます。けど、
Guest
もっと簡単にできるっていうところが、今、使用になんか入れられるかもしれないっていうところが入ってるので、それが楽しみ
Guest
の1つなんですね。あとは、
Guest
これからの話となると、やはりあの今いろんなライブラリはあの
Guest
まあ今の使用の欠点みたいな。なんかこうそれもなんかこうリアクトとかビーの
Guest
中で当たり前なあ、こういうアビと変えたら、全編全片的にあのドムが変わります。ていうところを、実際にもっと簡単になんか普通の仕様でできるようになるっていうところを
Guest
期待しているかもしれませんね。なんか、そもそもなんか、ライブラリーの必要性がなくなるっていうところを期待しています。はい、
Guest
じゃあ、例えば今ってリアクトなんとかとか、ビューなんとかみたいな。ライブラリでまビーの人しか使えないとか、リアクトの人しか使えないって世界ですけど、まあ、もっとウェブコンポネントが当たり前になったら
Guest
こう。共通化は元々想定してなかったけど、まあ、もっと使えるようになるよね。みたいなのも出てくるでしょうし、結構その辺は面白そうですね。
10. クロージング
Guest
というわけで、今回はアランさんと一緒にウェブコンポーネンツについて話していきました。とま、結構基本的な概要のところから、まあ、どういったケースで使われてるかみたいな。まあ、どこのベンダーが作っているかみたいな話
Guest
だとか、え、まあ、実際可能性みたいなとこまでえ、一通り語ってこれたかなと思います。
Guest
ということでま、今回のえーutサイド第2回はえ、これで終了としたいと思います。
Guest
でえ、最後にですけれども、LINEUITsはですではですねえ、ギットハブ1周ベースでえと毎週ですねえ、ジャバスクリプトやるとか、まあ、他のフロンテンの技術についてのですねえ、
Guest
議論がえ盛んに行われています。とえ、なんで例えば今週のえ話ですと、ブストラップの4.3がリリースされたっていう話だとか、ま、あれですね。
Guest
ノードのバージョンマネージャー、えーののもので、ま。ちょっと早いものがありそうみたいな情報だとかま、その他ギットハブ側にもえま、プレリクエストにドラフト作れるようなようになったよね。みたいなところでま、色んな機能についてえ、話がえ、盛んに行われています。と
Guest
ま、なんで。このポートキャストでも、もし面白そうなとがあったら、まあ拾って紹介していきたいと思っております。
Guest
またですね、今話した内容については、えョノートのえ、下の方にですね。え、書いておきますので、もしご興味のあるトピックがあれば、ぜひぜひインクをクリックしてみていただければと思います。
Guest
ということで、え、今回はえいてインサイド第2回え、今回ですけど、もえとアランさんとともにえeb。コンポーネンツについて話す会となりました、ありがとうございました、
Guest
ありがとうございました。