ep.68 Web Standard な Modular CSS - 現場で使ってみてわかる Shadow DOM の嬉しさ | UIT INSIDE

2020/11/20 に公開2740 views

このエピソードについて

@AlanGDavalos が Web Platform Study Group Organizer の @takanoripe, LINE 証券フロントエンドエンジニアの @uhyo_ と共に、 Shadow DOM について語りました。

ゲスト紹介

@takanoripe
- https://twitter.com/takanoripe
- UI Designer / Front-End Engineer
- Web Platform Study Group Organizer

言及した Shadow DOM 関連の資料

気になるコンポーネントとライブラリ

Refs

LINE 新卒採用 2022
- https://linecorp.com/ja/career/newgrads/engineering/
キャリア採用はこちらから
- https://linecorp.com/ja/career/position/475
BGM&SE
- 魔王魂/騒音のない世界/OtoLogic

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:10
こんにちは、

Guest 00:12
こんにちは、こんにちは、

Guest 00:15
今週のitサイドを始めたいと思います。テンサイドは、ユーザーインターフェイスと、テクノロジーを愛する

Guest 00:24
開発者のためのポドキャストです。最新のウェブ標準の動向や、フレームワークの変遷、あと、また

Guest 00:32
uiやuxに関することまで、毎週プロントエンドの情報を発音ゲームしていくことを目的としています。

Guest 00:42
ハッシュタグはUIT、アンダースコアインサイド。ご意見に合うご感想をいつでもお待ちしております。今回は

Guest 00:52
私、アランとともにのりピーさんとおょうさんをゲストにシャドドーンについて話したいと思います。

Guest 01:01
のりぴさん、ひょうさん、よろしくお願いします

Guest 01:05
よろしくお願いしま

Guest 01:06
よろしくお願いします。

2. ゲストの紹介 01:10

Guest 01:10
ではではえ、今回まあ特別あのUITではないメンバーの

Guest 01:17
のりピーさんにゲストとして来てもらっているので、初めてだと思うので、ちょっと軽めに自己紹介をお願いできますか。

Guest 01:26
はいえ、たかのりピーと言います

Guest 01:29
普段はuiデザイナーとフロントエンドのエンジニアとして働いています。で、ウェブプラットフォーム、

Guest 01:37
スタディグループ、wpsgというコミュニティのオーガナイザーもしていても、youtubeでポットキャストの更新とかをしています。

Guest 01:47
今回はよろしくお願いいたします、

Guest 01:50
はい、よろしくお願いします

Guest 01:51
よろしくお願いします。

3. Shadow DOM とは？ 01:59

Guest 01:59
ではではま、今回え、主にシャドードームっていうことについて話す予定なのですけど、まあ、多分視聴者

Guest 02:08
の方にはえーま、シャドードームについてま。知らない人もいると思うので、まー、凄く軽く紹介しようと思います。

Guest 02:18
と、シャドードームはま、webの標準仕様のあの、まあ1つで

Guest 02:25
ワイフコンポーネンツの標準仕様の一部でもあります。ま、基本的に何のためにやるかっていうと、えーま、ウェブでの

Guest 02:35
あのスコープスタイルをまちゃんと実現するためのえ、APIとなっていて、で、

Guest 02:43
まあ、ちょっとそのどういう風に働くか説明するとま、ポドキャストじゃ足りないっていうこともあるので、あの、

Guest 02:53
場所ノートにあの、その説明をか。あの、詳しく書いてる記事を何個か用意しますので、興味のある方はそちらを参考にしてください。

Guest 03:03
一応、そのシャドードームを使えばま設計次第で、あの、なんかちゃんとスコープが効く部分と

Guest 03:12
ま、外からのカスタマイズが効く部分の指定とか。あの、色々なま様々なことができるんですけど、え、

Guest 03:21
このシャドードームは、今時だとま全部のボタンブラウザーに使えるようになっていて、まあ、もうすぐに

Guest 03:29
まウェブコンポーネンツとも。まあ、クロム曰く、なんか、10パーセントぐらいのページロードに使われているとかっていう話もあります。

Guest 03:41
さて、まあ、そのシャドードームについて、今回は主にあの

Guest 03:47
どういう風に使えるとかについて話したいと思いますけど。え、まずまのりぴさんから、ちょっと

4. 埋め込みウィジェットとしての Shadow DOM 03:50

Guest 03:56
あの、自分が今まで見てきた中で、あのシャムがこういう風に使うといいとかっていうものはありますか。

Guest 04:04
ああ、こういう風に使うといいそうですねま、シャドードーム色々使い方あると思いますけど、最近

Guest 04:15
ポリマー。あ、僕、プリマプロジェクトのjapanコミュニティを以前応援してたんですけど、ポリマーのtwitterで、シェアされていたregoの

Guest 04:25
ウェブコンポーネンツ、カスタムエレメントがまシェアされてて、これ3dモデルをま読み込む。コンポーネントなんですけど、

Guest 04:36
ま、こういうなんて言うんですかね。ま、ブラウザにちょっとこう雪の追加したいんだけど、ま、自前で

Guest 04:42
作るのはめんどくさいし、でも、なんか色々鑑賞したらめんどくさいなみたいなやつをま。1個ポンとシャドードームで実現できるのは結構

Guest 04:51
便利かなというのは思いますね。

Guest 04:54
ああ、そうですね、自分もそれを見ました。

Guest 04:59
あれ、結構なんかそのレゴト中のなんか、ファイルフォーマットを渡すだけで、もう完全になんか3dのシーンを用意してくれて、すごいなって思ってましたね。

Guest 05:10
ですね、ま、昔なんかこれと似たようなやつで、ブレンダーのファイルかなんかを渡すと、もうそれもその360度のなんか

Guest 05:20
やつをレンダリングしてくれるコンポネントとかもあったんですけど、そういうのは結構便利だし、まあ、結構使い道あるなと思いますね。

Guest 05:30
そうですね、多分のりぴさんが言ってるのは、モデルビアだだと思いますね。あ、そうです、そうですそうです

Guest 05:38
確かなんかgotfとかっていうファイルをま、モデルファイルを読み込む。まあ、さっきの多分。なんか、さっきのレゴのやつは、それを内部に使ってるとかっていうことだと思うんですよね。

Guest 05:50
ま、関連性が高そうな気がします

Guest 05:54
ですね、どちらもポリマーラボの配下で作られてるので、

Guest 06:00
そうですね。なんか、ああいうものをまあ、ポンポンと入れられるようなんですよね。

Guest 06:09
そうですね、やっぱりなんか、外部のライブやリとか使う時に、結構そのスタイルの鑑賞だったりとか。

Guest 06:18
ま、ジェイク、エリプラグインカの時はちょっとあったと思うんですけど、カルセルのそのプラグに入れたら、既存のスタイルと鑑賞して、

Guest 06:26
うまく動かないとか。逆に、プラグイン側のシーがその汚染してきて、みたいなことはあったと思うんですけど。

Guest 06:35
ま、シャドードーム使うと、その辺がまあクリーンになるので、そういう外部の便利なツールみたいなのを、こう使いやすくなるのは、すごく

Guest 06:44
まいいかなと思いますよね。

Guest 06:47
そうですね、確かに結構そのそういう外部の

Guest 06:52
LINEとかを入れると、なんかどうしてもそのcss。なんか、グローバルのcssが

Guest 06:58
干渉し合ってて、なんかボタンとかっていうクラスがなんか色々なところに汚染されてて、すごいことになることは多いんですよね。

Guest 07:08
そうですね、

Guest 07:11
ま、ある意味それが陰方担当地獄の原因でもあったんですよね。

Guest 07:17
そうですね、それを何か防止する為に、めちゃくちゃイポたんと使うみたいなのはありますね。

Guest 07:25
はい、ちなみにょさん的にはあのどう思いますかね。こういう、あの外ブライブラリを入れる

5. Shadow DOM の CSS-in-JS Framework としての使い道 07:30

Guest 07:35
っていう概念とかを。

Guest 07:38
うん、そうですね。ここで、まあ、ウィジェットとして、リアクトとかじゃなくて、ウェブコンポーネンツを使うのは、

Guest 07:47
やっぱりサイズとかが小さくなるからなんですかね。

Guest 07:52
あ、そのような気はしますね

Guest 07:58
まあ、多分それも原因の1つではあると思うんですけど、多分まあ

Guest 08:06
それ以外に。あの、まあ、コンポーネンツで作ると、まあヤト以外のあの

Guest 08:14
まプレームワークでも使えるようになるから、まあ、ある意味なんか、

Guest 08:20
なんか、クライアントがなんか、リアクトのエコシステムだけじゃなくて、他のまあ、全体的のjsのエコシステムになるっていうところがまあ

Guest 08:30
いいと思いますね。

Guest 08:32
うんうん、うん、うん、なんか、個人的にはその埋め込むだけなら、必ずしもウェブコンポーネンツとか、

Guest 08:41
カスタムエレメントじゃなくても、まあできるんじゃないかなとはちょっと思うんですよね。

Guest 08:48
関数を呼び出したら、このエレベントの下にウィジェットがマウントされますよ。とか、

Guest 08:55
うん、うん、うん、

Guest 08:56
そう、インターフェースでもよくて、なんて言うんでしょうね。まェブコンポーネンツっていうと、なんかコンポーネントって名前がついてるから、

Guest 09:05
あ、コンポーネントを作るために使うんだなっていう風にちょっと思いますけど、個人的にはもうちょっと別の使い方もあるかなって、

Guest 09:15
最近少し考えています。

Guest 09:18
まあ、それは確かにありますね、一応その

Guest 09:22
まあせなんだろう。イントロに。あのま、シャドードームは、ウェスクポーネスの一部っていうところは、まあ行ったものの

Guest 09:30
ま、実際にあのシャドードームを使うには、ウェブコンポーネント使わないといけないっていうのも別になくて。あの、

Guest 09:38
どのそのノード。あの、エメレレメントなら、なんかデブとかをあのシャドードームの

Guest 09:46
なんかベースにして、そこからシャドーダムの木構造を始められると思うので。まあ、

Guest 09:54
そこはおおさんの言う通り、別にコンポーネントでなくても、でも、ある意味なんか、そういうcssの

Guest 10:03
ま汚染を抑えられるようなものをま考えて、やはりなんかコンポーネントにしなくても、

Guest 10:13
なんかそこをシャドードムのルートにすることで、まあ得られるものはあると思います。

Guest 10:21
なるほど、なるほど、だから、個人的にはなんか全部

Guest 10:26
コンポーネントを丸ごと作るんじゃなくて、リアクトのアプリの中で、ちょっとシャドードを使うとか、

Guest 10:34
そういうのはうまくいかないかなって、最近ちょっと考えてます。

Guest 10:40
そうですね、なんか、そこを中心に最近作っても作ってるプロジェクトはありますよね。おひさんは

Guest 10:48
あ、よくご存じですね、

Guest 10:53
ちょっとそれについて詳しく聞かせてください。

Guest 10:56
あ、わかりましたそう、リアクトコンポーネントを作るときに、なんでしょう。

Guest 11:04
リアクトって、cssイェースの。なんか、唯一会みたいなのが今のところない気がするんですよね。

Guest 11:14
絶対これっていうcssインジェースの方法があんまりなくて、そこで、うん、そこで

Guest 11:24
なんでしょう。シャドードームを使った、cssインジェースっていうのができればいいんじゃないかなと思って。

Guest 11:32
そういう風に作ったのがカステラっていうライブラリなんです。ま、簡単ですね、そう、cssの部分と、htmlの部分

Guest 11:42
を合わせると、カステラーコンポーネントになって、cssの部分は、シャドードームの中のまスタイル要素に

Guest 11:51
mlの部分もシャドードームの中のhtmlに入るんです。

Guest 11:57
で、外から受け取ったやつを使いたいときは、シャドー道具の中にスロットを書いておくんですね。なんで

Guest 12:04
こうすると、cssをすごく自然に書くだけで、自動的にシャドードームの中に入るので、他とも鑑賞がしないという

Guest 12:14
なんでしょう。シェスの役割みたいなのを、ちゃんと果たせるようになっています。

Guest 12:23
そうですね、それはとてもなんかいい考えだと思います。なんか、自分もその前にちょうど

Guest 12:32
確か去年のこの時期ぐらいに、え、

Guest 12:36
あの、なんか、ビーjaのコアチームがなんかLINEに遊びに来たっていうあの

Guest 12:44
こともあって、そのポルカストとかで、あの、自分の方から、あのビル内のスコープcssをシャドードームにして、

Guest 12:54
あの色々それをちゃんと生かせるんじゃないかな。って聞いたら、なんか、ビーのチームはまあ、

Guest 13:00
ちょっとそれ、あんまり今やれ。やりたくはないとかっていう回答だったんですけど、なんかまさにその時からなんだろう。個人的には、その

Guest 13:11
別に、あのウェポンポネはそのレンバーグと戦ってるわけではなく、ま、標準だから、どこも恩恵を受けられると思うので。

Guest 13:20
ま。そういうふうに、なんか今、右ょさんがやってるみたいに、そのフレームワークに、そういうウェブコンポーネンツの概念を入れて、それを活かして、ちゃんと

Guest 13:30
ま。この場合は、ちゃんとちゃんとしたスコープをあの得られるっていうところはすごくいいと思います。

Guest 13:40
そう、私もやっぱりシャドードームのカスタムエレメンツも、なんかドムの一部なんだよっていう思いが強いですね。とっても

Guest 13:49
ドムの一部だから、まあ、フレームワークからでもどんどん使えるっていうことですね。

Guest 13:56
そうですね、

6. Micro Frontend は Shadow DOM で実現できる？ 14:00

Guest 14:00
それで言えば、あのま、最近結構

Guest 14:05
そのマイクロフロントエンドとかがすごい。あの、最近話題になってきてると思うんですけど、

Guest 14:12
なんかそういう課題とか、なんか、別々のチームが別々のプレームワークで作ったものをいきなり混ぜるとか。っていうことを、

Guest 14:20
なんかそれぞれのアプリが、まあ、1個のシャドードームのルートだったら、もうスタイルを線なしでこう

Guest 14:28
簡単に取り入れられるんじゃないかっていうのをちょっと個人的に思ってて、

Guest 14:34
うん、2人ともなんかそれについてどう思うか、ちょっと聞きたいです。

Guest 14:39
うん、

Guest 14:41
そうだから、僕はそれは結構まあいいんじゃないかなと思いつつもま。同じ

Guest 14:49
アプリケーションの中でま、複数のライブラリーとかっていうと、結構ま、あとぴしがないというか、一般の人にはあんまり想像できないのかなと思ったりも

Guest 15:00
しますね。まなんですけど、ま、例えば、あのアンギュラージェースから、今のアンギュラー

Guest 15:08
にこうアップデートするみたいな。破壊的変更のあるフレームワークのアップデートする時にま、カスタムリメントとか、シャドードームとかを使って

Guest 15:16
ま。一部その新しいフレームワークに置き換えていくみたいなのは、結構いいんじゃないか、みたいな話を誰だっけな、

Guest 15:26
誰かとします。あらこさんかな、ゲラjpのらこさんとかとした記憶ありますね。

Guest 15:34
なるほど、まあ確かにそういうなんだろ。マイグレーションとかに、こういうのを使うと

Guest 15:43
ま色々やりやすくなるんですよね。

Guest 15:47
そうですね、僕はまだそういうのをやったま。実務で投入した経験はそこまでないんですけど、

Guest 15:56
でも、そういう風にやると結構やりやすいんじゃないかなっていうのは、常々思ったりはしてますね。

Guest 16:03
なんか、リアクトの17で、あの古いバージョンのリアクトが共存できるようになるみたいな機能が入るの、なんか知ってますか。

Guest 16:13
あ、聞いたことがあります

Guest 16:16
なんか、誰さとくかながシェアしてたんですけど、まあれ

Guest 16:22
ま。あれはパッケージドット、jasonを2つ用意してま。バンドル分けるみたいなやり方で対応してたんですけど、まャドードムを使えば、もうちょっとその

Guest 16:32
パッケージ、ドット、ジェイソンを複数用意したりとか。バンドルで頑張らなくても、まあ、割とちゃんと共存させることできるんじゃないかなと思ったりは

Guest 16:41
してますね。ま、ちょっと試してみたいなと思いつつ、まだ機会がないって感じなんですけど、

Guest 16:49
まあ、そうですね、そういうマイクロフロントエンドは結構なんか

Guest 16:54
ある。ある程度、なんか、人数のあるチームでないと、なかなかそもそも使い道がないような設計でもあるので、

Guest 17:02
まあまあ

Guest 17:04
そうですね、

Guest 17:10
なお医者さんとかはどうですか。

Guest 17:16
そうですね、まあ、シャドードームの1番の強みは、やっぱ他と干渉しないっていうことなんですけど。

Guest 17:26
うん、結構やっぱビューとか、リアクトのフレームワークって、常にあんまり他と干渉しないんじゃないかなっていう気は、

Guest 17:34
正直なところしていますね。

Guest 17:37
うん、うん、

Guest 17:39
だから、やっぱり外に何があるかわかんない時に、シャドードームで包むっていうのは、とてもいいんじゃないかと思います。

Guest 17:48
最初に出ていたウィジェットを作る時とか、はいはい、ウィジェットを作るのも別に理由。でも、リアクトでもいいんですけど、

Guest 17:56
1番外側にシャドードームがちゃんとあるみたいな、そういう風になってるととてもいいですね。

Guest 18:04
そうですね、そう

Guest 18:06
ですね、それはとても同感です。なんか、そういう風に、あの、例えば結構

Guest 18:15
そのそういう風に書くとま、シャドードームの内のスタイルって、まあ、要は他と孤立してるから。

Guest 18:23
まあ、自分のセレクターはすごい単純な。なんか、それこそもうクラスとかを別に使わなくても、なんかもうデブとかボタンとかっていうセレクターを使って、そのまま使うこともできるので、

Guest 18:36
ま、個人的になんかすごいそれがすごい楽だと思うんですよね。シャドードーム書いてる時はそうですね、ま、あと、

Guest 18:46
なんか確かにそういう結構他の人が使う予定として、コンポーネントを作る時に、

Guest 18:55
ソドムが1番活かせるっていうのはとても考えていて、まあ、最近すごくあの

7. Design System を Shadow DOM で実装する強み 19:00

Guest 19:02
まあみ見ているというか、もう自分もそういうのをやってるっていうか、なんか、デザインシステムとかを

Guest 19:09
あの、まあボコンポーネンツで作ってま。その中にシャドーを使うっていうのは、ますごく色々な会社

Guest 19:17
ま、特に大きめの会社が今やってきてるっていうのはま傾向があると見ていて、まあ、

Guest 19:25
個人的にはなんかそういうなんかテーマをかけるとか。

Guest 19:29
あの、まあ、どういうふうにカスタマイズできるとかを制限できるとか、なんかそういう利点がとてもあって、まあ、今の

Guest 19:39
時代のシャドードームの1番の使い道が、そういうデザインシステムを作るっていうことは、すごく実感できている

Guest 19:46
っていうのは、個人的な意見ですね。

Guest 19:50
うん、うん、

Guest 19:51
なるほど、そう、カスタマイズを制限できるって、実はとても重要ですよね。そう

Guest 19:59
なんでもかんでも外から書き換えられてしまうと、逆になんか再利用性が低くなってしまうというか、

Guest 20:07
あとから、そのコンポーネントに、その共通のコンポーネントに変更を加えたくなった時に、すごく大変になってまうので、

Guest 20:16
そうシャドードームで、カスタマイズを制限できるって、実はま、デザインシステムとか、コンポーネントのインターフェースを作るときに、

Guest 20:26
すごく嬉しいんじゃないかなって思います。

Guest 20:30
それは、すごく思いますね、デザイナーとしても、やっぱりちゃんと運用されてるかどうかっていうのが、まあ

Guest 20:40
担保されてるというかね。技術的にそれがしっかりしてると、まあ作りやすいですし、ルールも結構簡単なもので

Guest 20:47
済むので、上書きが可能だとま、こういう上書きすんなとかま、結構色々ルールをこう作らなきゃいけなくなってきて

Guest 20:57
ま。本質的な部分になかなか議論時間が避けないみたいなところも、デザインシステム運用していく上ではあったりするのかなと思うので、それは

Guest 21:06
いいかなと思いますね。

Guest 21:09
そうですね、なんかま自分たちで作ってるデザインシステムにも、なんか結構デザインチームから

Guest 21:17
ま。こういう部分はちゃんとかマイズできるといいとか、なんか、ここはちょっとやってほしくないとかって色々聞いてくれるから。

Guest 21:26
まあ、そういうのをシャドードームだと、もうもう既になんかそこに入ってるから、ちゃんと

Guest 21:33
そのえ。まあ、マークアップとか、cssの設計をちゃんとしていれば、それをなんか無理やり干渉されないっていうことを

Guest 21:43
ま、結構えられるっていうのはすごくいいと思ってて、それはさすがにあのなんだろう

Guest 21:51
ま、フレームワークでに意欲ある、何か修正するインチャイエスの方法だと、ま、それをちょっと。

Guest 21:58
なんかそこまで制限できないっていうケースはあると思うので。

Guest 22:03
うん、そうですね、ま、あと、やっぱり同じコンポーネントま、色んな環境で使い回せるっていうのはすごく

Guest 22:12
まあ大事のし、デザインシステムとして運用していく上ではすごく大事だなと思いますね。ま、今

Guest 22:21
いる会社では、ビーのプロジェクトなので、ビューでコンポネント作ってるんですけど、ま、lpでま。例えば、

Guest 22:29
同じようなスタイル使いたいってなった時に、また再度実装しなきゃいけなかったりとか。まあ、外部の方にお願いする時にま、ちょっとね。

Guest 22:38
なんか、また説明しなきゃいけないっていうのはあったりするんですけど、シャドードームで、コンポーネント、

Guest 22:45
デザインシステム作っておけば、それを渡して使ってもらうだけで、まあビューだろうが、リアクタードラマが普通にプレーンなまhtmlだろうが、使える

Guest 22:53
でま、スタイルが統一できるっていうところはま、非常に大きいかなと思いますね。

Guest 23:01
そうですね、それで言えば、最近ちょっと。なんか、ミスコンポーネンツのコミュニティで話題になったのは、なんかとある銀行

Guest 23:11
が、まあ、自分のそのなんだろ。う。ま、アカウント同士での振込みのインターフェイスを。

Guest 23:20
あの、なんかパートナーに渡すために、なんかそういうウェスコンポーネンツをまcdで用意して

Guest 23:27
こう。そのcdnだけを読み込んで、根本の書くだけで、もうが、全部まシャドドームに入ってあるからで、

Guest 23:36
なんかそのまま。まあ、その銀行のブランドを守ることもできるし、ま、ある程度そのうんなんだろう。なんか、

Guest 23:45
使ってもらってるページにあの合わせてサイズを変更したりま。自動的にすることもあるので。なんかそういう。まあ、

Guest 23:54
なんかパートナーの会社とか、あの、他のチームで自分のものを使ってもらうっていうケースにもすごく便利なんじゃないですかね。

Guest 24:03
うん、うん、

Guest 24:04
そうですね、確かにいや、それはすごい思いますね。

Guest 24:11
逆になんかそういうのちゃんと用意しておいてもらえないと、こっちもなんか怖くて使えないみたいなのをちょっとありますよね。なんか、変に

Guest 24:20
スタイル当てちゃって、怒られたらどうしようとか。そうですね、怖いですね、

Guest 24:27
怖いですよね。特に銀行とかそういうなんかしっかりした感じのところだと、なんか怖いなと思ったりするので、それは

Guest 24:36
いいですよね。どこだっけ。海外の銀行

Guest 24:43
で、昔からシャドードームじゃないや。ウェブコンポーネンツを使って、デザインシステム作ってるとこがあったんですよね。

Guest 24:55
そうですね、なんか、エンジ内のエンジニアがなんか作ってるツールとかは、めちゃめちゃ便利ですね。

Guest 25:05
ですよね、なんか、結構昔からそのデザインシステムみたいな言葉が日本で使われるというか、流行るよう

Guest 25:14
になる前から結構やってたようなイメージはありますね。

Guest 25:19
そうですね、結構なんかアメリカとかヨーロッパ中心で、まあ色々そういう話が

Guest 25:28
ま、何年前から盛り上がりつつありますね。

Guest 25:31
うん、うん、

Guest 25:37
でま、今までは結構そのなんだろう。シャドドームがいいっていうところをま、散々語ってきたんですけど、

Guest 25:47
逆になんか今まででま使ってきて、

Guest 25:51
なんかちょっとこういうところはあんまり良くないとかって思った部分について、2人とも何かありますか。

Guest 25:58
そうですね、自分さっきもちょっと言ったように、シャドードームで、cssイジュースを試してたんですけど、

8. Form と Shadow DOM のぎこちないところ 26:00

Guest 26:07
1つ困ることがあって、なんでしょう。インプットとか、imgとかま、その要素自体にスタイルを当てないといけないやつ

Guest 26:17
をシャドウドムを使って、スタイリングしようとすると、そのインプット、

Guest 26:24
どうしてもシャドードームの中に入れる必要があって、そうすると

Guest 26:30
なんでしょう。そのインプットが表に、シャドードームの外に出てこないから、フォームの要素として認識されないとか、

Guest 26:38
そういう問題があって、

Guest 26:42
ああ、なるほど

Guest 26:43
はいいや、それはそうですね、まあ、ちょっと私から補足すると、

Guest 26:53
確かにそのままその基本的にフォームって、

Guest 26:57
まあ、ポームの中に何かのシャドードームのルーツがあると、なんか、その内部のことを

Guest 27:05
知ることはできないということになっていて、

Guest 27:09
うんで、それをまちゃんとできるように。あの、なんか、フォームデーターっていうイベントと、なんか、フォームパティスペーションAPIっていうのは、

Guest 27:19
ま、実はあるにはあるんですけど、あの、1番しっくり。なんか、ちゃんとその自分の

Guest 27:28
あのサドゾムで作ったコンポーネントをまォームの一部として、あの登録できるポンプルティスペシpiの方は

Guest 27:37
ま、今時だとcrmでしかなくて、で、イベントの方だとまそっちで。なんか、なんか、サミションとかの時に、

Guest 27:46
あの、なんかデータを送ることはできるんですけど、そっちの方は、なんか、クロミウムとファイアフォークスでしかなくて、なんかサリだとどう。

Guest 27:55
なんか今今だとなんかそのままどうしようもなくて、だから、なんかちょっと。裏技で、あのインプット要素を

Guest 28:06
シャドドムのスロットに入れて、それだとシャドドムからも鑑賞できるけど、え、

Guest 28:14
トムの一部としても認識されるから、今時だと、なんか、全てのブラウザー対応するには、1番いいってっていうのは

Guest 28:24
あります。

Guest 28:25
うん、うん、

Guest 28:28
ちょっとややこしいんですけどね、

Guest 28:32
確かにま、こういうのちょこちょこありますよね。

Guest 28:36
はい、なんか他になんかそういう。例えば、なんかインプットパスワードとかをシャブゴムに入れると、なんかパスワードマネージャーが

Guest 28:46
なんかそこにたどり着けないっていうか、シャドードーム、シャドードームを考えて作られてないから、

Guest 28:54
なんかそこにたどり着けない。なんか、ただクリスレクターへ走ってるだけだから、

Guest 29:02
そういうのもまあちょくちょくあったりしますね。ただ、まあ一応そういう裏技をちゃんとしている

Guest 29:12
ま、ライバイとかコンポネントあるから、なんかそういうのをま継承とかして、まあ真似ることもして、まあ、とりあえず

Guest 29:21
まあ若干めんどくさいけど、できるにはできるんですよね。のりピーさんはどうですか。なんか、ちょっと

9. Shadow DOM からのイベントの Retargetting 29:30

Guest 29:31
ここだと、使い方は悪いとかってあったりします。

Guest 29:36
ああ、そうですね、ま、僕もフォーム周りはちょっとめんどくさいなと

Guest 29:44
思ったりするのと、ま、あとイベントですかね。僕はそんなに困ったことなかったんですけど、

Guest 29:52
イベントターゲットのあり、ちょっと工夫しないといけなかったような記憶があって、そこはちょっと

Guest 30:02
ややこしいというか、1回分かっちゃえばいいんですけど、それをちゃんとなんか解説してくれてるところが少ないなみたいなのは

Guest 30:13
不便だなというか、まあ、情報があんまりないなと思うことはありますね。

Guest 30:18
そうですね、確かなんかイベントを発生させるときにも、

Guest 30:24
なんかまちゃんとバブルするように、なんかプラグを立てたりすることも必要だったりしますね。なんか、シャドードームの外に出るようにするには。

Guest 30:33
あ、そうですね、そうですね、あ、そうだ、なんかリターゲティングがなんだ。ライトダム内に存在するスロット化された要素上で、

Guest 30:43
イベント終わった場合には、発生しません。みたいな

Guest 30:49
みたいなま、ちょっとちょっとだけ気を付けなきゃいけないところがあるんですけど。そうですね、その辺はちょっとめんどくさい

10. Shadow DOM の情報源について 31:00

Guest 31:00
なと思うことはありますけど、まあでもあとはシャドードーム自体にそんなになんか不便さを感じたことは

Guest 31:10
あんまりないですね。

Guest 31:12
そうですね、自分の経験にも結構基本的に、まあ、1回目はちょっと

Guest 31:22
あのなんだろう。学ぶのは若干なんか前とは違うから、まあ、新しい概念を学ばないといけないけど、1回分かれば。あとは、まあ

Guest 31:33
気を付ければなんとかなるっていうことはほとんどな気がしますね。

Guest 31:40
そうですね、やっぱこういうのまちゃんとまとまってるサイトというか、情報源が欲しい、欲しいなと思ったりは

Guest 31:50
しますね。

Guest 31:57
ある意味、シャドーゾムの情報を増やすためにも作ってるんですしね。

Guest 32:02
あ、そうですね、最近見たドキュメントだと、javascript、ドットインフォっていうサイトの

Guest 32:11
ウェブコンポーネンツのコが結構詳しく書かれててよかったなと思いますね。

Guest 32:18
そうですね、実際になんかあ、あれも結構個人的に呼んでよかったと思うんですし、

Guest 32:27
なんかま、そういうのをまとめてる。あの、リポジトリはまあの色々とあったりしますけど、

Guest 32:35
ま、基本的に大体そのいつもあの基本的な要素だけ。カバーして、なんか使い道とかについて、あんまり深掘りするのは

Guest 32:43
あんまりないんですよね。

Guest 32:46
ああ、確かにそうですね、ユースケースに関しては、結構不足してる気はしますね。

Guest 32:52
うん、なんかそれもあって、その自分の方であのなんだろう。ま、サドドム

Guest 33:00
ないで、結構あの新しいcssセレクターを使うことあるじゃないですか。はいはいはい、ホートとかスロッテとか

Guest 33:10
パートとか色々あるんですけど、なんかそれを説明はなんかまあ、サンプルを使って説明する記事をま、

Guest 33:20
自分でも書いたことあるんですし、

Guest 33:23
なんかやはりそういうのはなんだろう言われてもらえるより、なんかちゃんと見て実感した方が早いっていうのもあって、

Guest 33:34
なんか確かにそういうそういうなんかそれも理由であんまりないっていうのもあるかもですけどね。

Guest 33:43
確かにそうですね、なんか、シャドードームについてよく聞かれるのがま、なんかいつ使うんですか。とか、なんか、どういう時に

Guest 33:52
使うんですか。みたいな質問というか、疑問結構見かけること多いと思っていて、その辺の情報がもうちょっと増えると

Guest 34:02
ハードルというか、まあ、もうちょっとなんて言うんですかね、使いやすくなるのかな、とは思いますよね。

Guest 34:09
こういうユースケースの時は、シャドードームのこういう機能を使って、こういう実装すると解決できます。とか

Guest 34:18
そうですね、いや、もうそれなんかもう個人的に作りたくなってきました。

Guest 34:25
そうですね、なんか、こういう切り口のなんか同人とか書いたら売れそうな気がする。

Guest 34:34
そうですね、後で試してみます。うん、はい、そうですね、他に

11. Shadow DOM の次の期待「Declarative Shadow DOM」 34:40

Guest 34:44
なんかこれといったことはあったりしますかね。

Guest 34:48
まま、あとは、リクレティブシャドードームの話とかは、最近まみ注目してるのかなとは思いますね。

Guest 34:58
そうですね、これはまああのまあ聞いてる人向けに軽く説明すると、

Guest 35:07
まあ、シャドーダムはまああの先ほど話した通ります。全てのブラザーでつけるようにはなっているけど、

Guest 35:14
ま、最近なんか新しい仕様として、

Guest 35:18
そのなんか今だとシャドードームをま、jsの時に、なんかルートとなる部分を作らないといけないんですけど、

Guest 35:27
それを実際にえーま、htmlだけでできるようになるための仕様。今えま模索されていて、

Guest 35:37
結構良さげで。まあ、そういうサーバー、サイドリングリングとかにすごく便利そうな

Guest 35:44
標準仕様になりそうだから、すごい個人的に楽しみにしてるんですけど、2人はそれについて何か

Guest 35:53
危険がありますかね。

Guest 35:56
僕もこれは結構注目してても、早く使えるようになってくれたら、面白そうだなと思いますね。

Guest 36:05
昔、似たような塩があったのが、ssrサーバーサイドレンダリングしたいから、復活

Guest 36:11
しみたいなのも、もうちょっと面白いというか、時代の流れを感じるなみたいなところはありますね。

Guest 36:21
ですね

Guest 36:24
私としてはデクレア、テブ、シャドーズブ。ま、今あるやつより、さらにもうちょっと進化してくれないかなと思うところがありまして。はいはい、そういうのも、

Guest 36:34
やっぱりシャドードームの1番大きな利用目的の1つとして、スタイルのスコーピングがあるんですけど、そうなんか

Guest 36:42
できるだけシャドードームの中にスタイルをベタ書きでこう書いて、それをssrしたりすると、

Guest 36:50
まあ100個、同じ根本エントレンダリングしたら、100個、同じスタイルが

Guest 36:55
ssrされて振ってくるんですよね。こうで、車動くれても、車ドードームの中にはいい、そこをこう1か所にまとめられるとか、そういう方向性で

Guest 37:05
進化してくれたら嬉しいなっていうのは少し思っていますね。

Guest 37:10
確かにそうですね、

Guest 37:12
単純のバイトのサイズとしての問題なんですよね、ssの場合だと、

Guest 37:19
うん、うん、まあ

Guest 37:20
あ、そうですね、うん、うん、

Guest 37:22
でも、それだけだったらなんでしょう。gzipで、同じスタイルが全部圧縮されないかなとはちょっと思うんですけど、

Guest 37:30
むしろ、ブラウザが同じスタイル100個書いてあった時に、100個別々にパースするとか、そういうのはちょっともったいないなって思います。

Guest 37:40
あ、うん、それについては、多分あの問題はないと思い、思っていて、あの

Guest 37:47
なんだろう。まあ、なんかウェブコンポに周りの仕様とか、あの説明とか見てたりする時に、結構その

Guest 37:56
そういう同じスタイルのあの領域があると、あの、なんかブラウザがうまいこと。あの、

Guest 38:05
サイパースしないとかっていうことをしてくれるって。あの、どっかで色んなことあると思うので、

Guest 38:12
多分ほうほう、

Guest 38:14
あんなんだろう。今今だと例えばなんですけど、あの、なんかサファリとかで

Guest 38:21
まー、シャドードーム内でスタイルを与えるに、はま、シャドードームの中にそのスタイル、あのタグを書くしかないっていうのもあるんですけど、

Guest 38:29
それはまあ、要はその今のssrじゃない。あの、jyスレンダリングの場合だと、

Guest 38:37
ま、何回かも。あの、同じそのスタイルが、あの、もう実際に書いてあるっていうことになると思うんですけど、

Guest 38:46
それで、パフォーマンスの問題はないって思うと、多分そういう懸念はそこまで

Guest 38:53
問題にはならないかなって思います。

Guest 38:57
うん、うん、なるほど、なるほど、

Guest 38:59
だから、まあ、逆に個人的に気になったのは、まあ、そういうそのなんか、ちゃんとgシップが行かないと、ちょっとバイトサイズが

Guest 39:09
なんかもうすごいことになりそうで、ちょっと怖かったんですよ。

Guest 39:14
そうですね、バイトサイズはすごい

Guest 39:17
ことになりそうな予感はしますね。何も考えずにやると、結構大変なことになりそう。うん

Guest 39:26
ですね、でも、これは来ると結構まあな、今やっぱりそのssrできないから

Guest 39:34
っていう理由で、ウェブコンポーネンツを、そのフレーム枠内で使うのをやめてるというか、あんまり考えてないみたいな人たちも結構多いと思うんで、

Guest 39:43
そういうのが解消されると、結構議論が進んでいくんじゃないかなと思っているのでは。いま、僕は結構これ注目している

Guest 39:54
って感じですかね。

Guest 39:56
そうですね、今だと、そのウェブコンポーネンツで、ちゃんとしたエサやるには、

Guest 40:02
まやはり、なんかそういうパペティアとかをかます。とか、逆になんかそういう

Guest 40:09
あのなんだろう。どっちかというと、アグレード用のコンポーネントのの場合でしかできない。なんか、そういうアブレードっていうか、なんか、

Guest 40:18
その実際に内容がほぼ全てスロット内に書いてあるから。ま、ほとんどあ、はい、実際に

Guest 40:24
なんかテンプレートに中に入ってて、で、ジャイアスが走る時にまあくまでなんかま、ビジネスロジックが入るぐらいの

Guest 40:33
コンポーネントだったら、まあ、エはちゃんとできるけど、それ以外だとまあ、うん、ちょっと今だとめんどくさいから、まあ、さすがに

Guest 40:42
これが来るともうほん。本当の意味でセールができるようになるんですよね。

Guest 40:49
そうですね、それは結構まおっきな進化の1つかなと思いますね。

12. Shadow DOM について一言 40:59

Guest 40:59
ではま時間の時間ですし、最後にあのまショードームについて、最後の一言をお2人から

Guest 41:08
お願いしたいんですけど、最初にょさん最後の一言お願いします。

Guest 41:15
シャドードームについて、最後の一言ですか。

Guest 41:18
まあ、今日今日今日話した内容ですけど、

Guest 41:24
そうですね、シャドウドムは、やっぱりシャドウって名前のついてる通り、外からドムを隠すことができるっていうのが、

Guest 41:33
多分、皆さんも1回使い道を考えてみたらいいと思います。ものを隠せると、ほんとにいろんな使い道がありますよね。インターフェース

Guest 41:42
もう隠蔽できるとか、隠すって実はすごいデザインとか、プログラミングする上で、大事なことだと思うので、

Guest 41:51
ぜひシャドードームを活用してもらえればなと思います。

Guest 41:55
はい、では、今度はのりピーさんから最後の一言お願いします。

Guest 42:03
はいま、そうですね、ま、どうしてもweb。コンポーネンツの1個っていうイメージが、シャドードーム強いと

Guest 42:11
思うんですけど、シャドードーム単体でも、まあ、僕がさっき言ったみたいな。そのフレマークのアップデートに使ってみたりとか、ま、シェースに

Guest 42:20
使ってみたりとか。ま、その単体でも結構ユースケースっていう結構考えられるのかなと思ってるので、ま、その辺ま今後

Guest 42:29
実践していきたいなと、まあ、実践実験していきたいなと思っているっていう感じですかね。

Guest 42:36
はい、じゃあ最後に私からなんですけど、まあ2人が言ったように、あのサドンマ。

Guest 42:46
まあ、今すぐ使えるし、あの使い道はもうたくさんあるんですけど、まあ、

Guest 42:54
どうしてもね。なんか、情報源がないとかっていうのもあったりするんですけど、まあ、そこに気負わずに

Guest 43:02
あの1回試してみていかがかなっていうところと、あと、あのまあ前にも言ったんですけど、シャドドームはまあ

Guest 43:12
別にあのフェムワークと戦ったりすることはないから、あの、

Guest 43:19
自分はまあリアクターを使ってるとか、アンギラ使ってるとか、ビール使ってるとか、そもそもなんかまだジェイクエリとか使ってるとか、

Guest 43:27
何のjsも使ってないとかっていう人でも全然使ってもらえるので、まあ、ぜひぜひ。

Guest 43:35
あの自分で作るなり、他の人まのりぴさんが言ってた。そのレゴの人とか、何かそういうコンポーネントがあったら、

Guest 43:43
まぜひ使ってみてください。

13. クロージング 43:52

Guest 43:52
というわけでえ、今回はシャードドームについて話していきました。

Guest 43:59
ラインのフロンテンの開発組織UITでは、このようなフロントエンドに関する論理をキャッチアップを日々

Guest 44:08
行っております。まあ、今回のシャドードームやまこの間行って、ダビーフスタリーなど。

Guest 44:17
社の社内のあの学習企画から始まったコンテンツも多くありますので、え、今後も発信していただければと思います。

Guest 44:28
また、ポート活動を通じて、LINEに興味を持っていただいた方には、ぜひぜひ

Guest 44:35
ガジュアルメラからでもご連絡いただければと思います。中東新卒とにトランテンドエンジニアを推してるので、

Guest 44:45
ショーノと歌にリンクはあるので、ぜひそこからご連絡ください。今回はシャドどもお手間で話してきました。

Guest 44:55
のりピーさん、ひょうさん、ありがとうございました、

Guest 44:58
ありがとうございました、

Guest 45:00
ありがとうございました。