音声書き起こし
1. オープニング
Guest
皆さん、こんにちは、UITのpotato4dです。ユーザーインターフェースと、テクノロジーアする、開発のためのウィークリーポッド、キャストUIT INSIDE。
Guest
今週も始めていきたいと思います。
Guest
今回はですねえービーのデファイン、カスタムエレメントについてえ、収録していきたいと思っております。今回はバリバリ使われているというえや本さんにお話しいただこうと思っております。えやさん本日はお願いいたします
Guest
はい、よろしくお願いします。
Guest
では、今日は早速なんですけどえ、今回山本さんの方からですね。結構ビのリファインカムエレメント。使ってみたんで、ぜひやサイトで紹介
2. defineCustomElement について
Guest
したいっていう話でえ来ていただいたんですけど、まあ、せっかくなんでまずはえ。ディファイン、カスタムエレメントについての概要から教えていただいてもよろしいでしょうか。
Guest
はい、わかりました。ディファインカスタメルメントは、ビーのv3.2でリリースされた機能で、
Guest
ビューのコンポーネントから、ウェブコンポーネンツを出力するためのAPIです。
Guest
で、元々えービーv2でも、同等の機能を提供するための外部パッケージがあったんですけれども、
Guest
今回v3にあたって、コアAPIとして提供されるようになったっていう構造になってます。
Guest
で、使い方としては、シンプルな関数が1個提供されていて、それがディファインカスタムエレメントなんですけれど、
Guest
そのディファインカスタムエレメント関数に、
Guest
えービーコンポーネントを渡して帰ってきたhtmエレメントはいを
Guest
まあ、普通にwebコンポーネンツ用の定義と同じように、カスタムエレメンツディファインに渡して使うっていうような
Guest
感じですね。
Guest
なるほどな、
Guest
基本的にあれなんですね。あの、もうこの関数を通すことによって、普通のカスタムエレメントと同じように、あの取り回せるようになるような。
Guest
そうですね。で、あの、いわゆるwebコンポーネンツの場合、そのアトリビューとかま色々あるわけですけど、それをあのこの関数で、その
Guest
ビューコンポーネント側のプロップスとか、エミットとかにいい感じに変換をして使って使えるようになるっていう感じですね。
Guest
で、結構インターフェースもまあ、ビーのミイティブなというか、ビジの機で書くだけでまうまくあのカスタムエレメントらしい立ち振る舞いというか、挙動に
Guest
そうそうそうそうそうですね、まあ、後で話そうかと思ったんですけど、まあ、色々ちょっと気にしなくちゃいけないポイントもいくつかある。
Guest
ですけれど、まあ、基本的にそう。あのビーで作ったコンポーネントを、ビューの外側でも使い回せるっていう機能ですね。
Guest
じゃ、結構あれですね、あのビー以外の技術を共存させたい場合とか、まな何かを切り出したりとか、そういう時にかなり使える
Guest
そうですね。感じですかね、
Guest
あ、ありがとうございます。なんか、この機能って、結構
Guest
こう使うケースがそんなにめちゃめちゃ多いわけじゃないかなと思うんですけど、なんかこれを調べたり、使ってみようと思ったのって、なんかどういうきっかけがあったりしたんですかね。
Guest
あ、あ、元々のきっかけは、今回僕が紹介しようと思ってたプロダクトの事例というか、
Guest
はい、きっかけなんですけれど、あの、僕が今担当しているのがLINE公式アカウントっていうプロダクトで、
Guest
そのそのうちのクーポンに関する機能を開発するところなんですね。はいはいで、
Guest
このクーポンっていうのは、そのお店がクーポンを発行して、ユーザーに配布することができるっていう公式アカウントの位置機能なんですけれども、はい、あのお店
Guest
のお客様がクーポンを作ってで、LINEアプリのユーザーがそのクーポンを見るっていう構造になっていて、フロントエンドは
Guest
そのお店側が使うプレビューと、あのお店のお客様
Guest
がはい、使う。そのクーポン自体の画面っていうので、2つあるような構造になってるんですね。はい、で、今回そのクーポンのuiをリニューアルするっていうことが
Guest
要件があって、開発することになったんですけれども、
Guest
さっき言った通り。そのプレビュー画面と、LINEアプリ内で開くクーポンの画面って2つあって、元々がそれぞれあのプレビューなので、同じ見た目をしてるはずなんですけれども、それぞれ独自で実装してあたんです。
Guest
はいはい
Guest
で、まあえ、それはそれで、もちろん昔にそういう背景があったわけなんですけど、今回ちょっと
Guest
できればちょっと開発工数というか、メンバーの都合等等で、ちょっとコンポネットの使い回しとかをしたいよねっていう
Guest
話が出て、初めて、ここでこの機能に見つけてやってみようかなっていう話になりました。でっと、
Guest
cエプレビューを表示しているお店がうcmsはビ2で実装されている。結構おっきいプロダクトなんですけど、
Guest
今回oエクーポン、新しいプロダクト。あ、uiリニューアルするっていうことで、ま、p3でやりたいよねっていう話になって、
Guest
じゃあ、ビーのコンポーネントをそのまま出力するんじゃなくて、webコンポーネンツで出力して、プレビューとして組み込もうかっていうところで、
Guest
どんどん調査を調べて進めていったっていう感じですね。
Guest
なるほど、なるほど、じゃあ、あの、ほんとに画面のパーツっていうのをまい、コンポーネントうまく共通化したいっていう時に、あのウェブコンポーネントが
Guest
として定義できるんじゃないかっていうので、ま、ちょっとやってみることにしたっていう風な。
Guest
そうですね。で、結構これリリースタンが3.2いつだったかな。
Guest
夏頃ぐらいだったと思うんですけれど、はい、あの、それまではできなかったんですよね。元々外部のwebコンポネを出力するため用のガイブのライブラリがあったんですけど、それはv2用で、
Guest
あのv2だからv2にあるAPIを使ってこうウェブコンポーネント内にビーをマウントして、レンダリングしてるので、
Guest
あのv2だv3だとできなかったんですよ。あ、
Guest
なので、えとは言っても、ウェブコンポーネントで出力したいし、どうしようかなって言って、コントリビュートしようかどうしようかとかま色々やってたんですけど、はいまあ、都合のいいタイミングで、
Guest
あの正式リリースがされたので、よしこっち使ったでっていう感じですね。なるほど、なるほど、
Guest
こうなかなか悩んでいたところに、ちょうどu3サポートも来て、タイミングとしてはベストだった。
Guest
ああ、そうそうそうそうそうだから、結構前のv2用のライブに実装を読んだりして、ああ、これじゃあ3で5感動しようとか、
Guest
なるほどな
Guest
あ、めんどくさいな、どうしようかな、みたいなコントビートしようかな、みたいなことを色々やってましたね。
Guest
ちなみに、結構UIT INSIDEだと、ビーの話を色々してるんで、結構聞いてくださってる方も詳しい方多いのかなと思うんですけど、なんか、ビューのそのビュー2版のえ、実装とビュー3版の実装って、そのどういった違いが
Guest
あるんですかね。ディファインガスのエレメントについては、
Guest
あ、そうですね、v2に関しては、はい、結構シンプルで、そのウェブコンポーネンツのシャドールート
Guest
に対して、普通にニュービューしてマウントするっていう感じ。普通のに、ビューアプリをシャドールート内で描画する
Guest
ていう感じになってます。はいはいはい
Guest
なので、そのv2版のディファインカスタメレメントだと、ビューのオブジェクトと、ビューのコンポーネント両方渡して、普通に動画してねみたいな。あ
Guest
ことになってですね。んで、今回のv3の方にあたって、結構あの子はAPIらしいなっておも
Guest
たんですけど、あの、いわゆるクリエイトアップをして、新しいビーのアプリを描画するっていう感じではなくて、はい、あの、
Guest
内部のAPIなんですけど、そのランタイムコアパッケージのレンダラメソッドに渡して、
Guest
vノードを描画、あvノードをャドルートに描画するみたいな構造にあ
Guest
なってるんですね。なので、ちょっとクレートアップをせずに、そういう内部のAPIを使って描画すると、この糸とかちょっとわかんなかったんですけど、
Guest
まあよりコアAPIを直接呼んで、こう動かすみたいな風になってるので、まあ、内部パッケージコアAPIの1つらしい構造になったなと。
Guest
確かに確かに
Guest
そういう作りに変わったんですね。うん、あ、でもこれは確かにこれまでと違ってかなりあのビーチのランタイムの方が、コアとドム用の実装で、パッケージとして分かれたりとかがあったんで、うん、うん、こういうこうなんでしょう。中小
Guest
化した上で使いやすくなったっていうのがこう、なんか、ビース自体が進化してるからこそできることって感じ。
Guest
そうですね。うん、ちゃんとパッケージで分かれてるから、あの、そういうレンダラみたいなインターナのpも呼びやなってるんだな、
Guest
ありがとうございますなんか、そう考えるとあれですね、ちょっと自分で実装しようかなと悩んだって話もありましたけど、なんかすごくこうスマートに実装されてるんで、
Guest
いいタイミングで来てもらってよかったかは
Guest
ちょっとあります。うそうそうそうですね、うん、
Guest
あとあ、ありがとうございます。
Guest
じゃあ、せっかくなんで今え少し話してもらいましたけど、なんか詳しくこのAPIをえ、どういった事例で使ってどうだったみたいな話を聞いていこうかなと思うんで。
3. UIT での事例
Guest
さっきのプレビューの話の詳細を教えていただいてもよろしいでしょうか。
Guest
はい、ちょっとプレビューの説明の内容が重複してしまうかもしれないんですけれども、
Guest
私が担当しているのが、LINE公式アカウントというプロダクトで、そのうちのクーポンに関する
Guest
ものが、今回の事例です。と
Guest
で、LINE公式アカウントは、え、お店とか、企業とか、自治体とかのお客様が。自身のLINEアカウントを開設して、LINEユーザーとコミュニケーションを取ることができるっていうものなんです
Guest
けれども、そのうちのお客様と、ユーザーのコミュニケーションする手段の1つとして、クーポンというものがあります。
Guest
で、僕はそのうちLINEアプリを使っているお客様が使用するクーポン
Guest
の画面。リフアプリを開発しているものです。
Guest
でえ、クーポンはフロントエンドが2種類ありますと
Guest
で、1つがその私が担当しているLINEアプリユーザーが使ってるクーポン画面でえ、もう1つがお店
Guest
の人がクーポンを編集するためのプレビュー画面、cmsの機能があります。
Guest
で、今回このプレビュー画面を構築するにあたって、私が担当しているクーポン画面
4. コンポーネント共有の売れ精査
Guest
のビーアプリから出力したwebコンポーネントを使いました
Guest
なので、えでクーポンには、クーポンの情報とか、クーポンコととか
Guest
ま、様々なクーポンを構成するためのパラメーターがあるわけなんですけど、
Guest
そのパラメーターを受け取って、実際のクーポン画面を描画するようなウェブコンポーネンツはなってます。
Guest
じゃあ、アトリビューとかで受け取ってみたいな、そうそうそうそう
Guest
そうです。なので、ビーコンポーネント側からすると、結構な数のプロプスが
Guest
はい、定義されていて、あまり状態を持たないようなクーポンコンポーネントがあって、
Guest
で、それをビーアプリ側でそのプロプスに値を渡すような構造になっています。なので、あんまり状態を
Guest
持っていないビーコンポーネントをプレビュー用に、ウェブコンポーネントとしても、出力して、cms側に組み込んでもらうっていう感じですね。
Guest
で、元々。今これ2つフロントエンドがあるって話をしたんですけど、元々それぞれで実装をしていたので、まそれぞれで開発してて、大変っていう構造だったんですけれども、
Guest
今回リリースにあたって、片っぽ。僕が担当してる方
Guest
で、ビーのアプリをあ、ビューのコンポネットを実装して、それを使います。っていうことができたので、結構効率よくできたなと
Guest
思って、今回ちょっと共有させてもらいました、
Guest
ありがとうございます
Guest
あ、ちなみにそれ共通か片方で、カスタムエレベントとして用意して共通化するっていう形でじ無事。今、プロダクションに乗ってるみたいな状態なのかなと思うんですけど、はい、あのです
Guest
結構あれですか。なんか、共通化するにあたって、デファイン、カスタムエレメントしたものを使うにあたって、何かハマりどころとかは
Guest
あんまり多くはなかった感じですかね。
Guest
そうですね、まあ、いわゆる使い回しをする上で
Guest
まよくあるのが、そのバンドルサイズみたいな。ああ、そうですね、ところと、まあ、単純にそのディファイン、カスタムエレメントのAPI上のハマりどころみたいな
Guest
ところはありました。まあ、単純にまあ再利用する上での、まあ、トレードオフみたいなとこもあるわけなんです。
Guest
えで、ディファイン、カスタムエレメントのAPIに関して、ちょっと困ったなっていうところが2点ほどあって、はい、
5. props/attrs のハマりどころ
Guest
それがそのプロプスビービー側のプロプスの扱いと、そのビューポンポビーのシングルファイル、コンポネットが持ってるスタイルの扱いがちょっと個人的にうんってなってしまった
Guest
ところなんですね。で、このAPIを使い始めるにあたって、ちょっと期待していたのが、
Guest
ビューテプロプスをこうjsで表現をするので、はい、
Guest
リアクトと違って、そうやってjsで表現をするから、そのwebコンポーネンツにこう変換バインドするにあたって、そのプロプスのタイプ
Guest
を見て、こういい感じに変換してくれるのかな。みたいなものをちょっと期待していたんですけど、い、
Guest
ちょっとそういう感じでは、今のところなさそうで、うんっていうことがありました。でっと具体的に言うと、ウェブコンポーネンツhtmlの世界でのアトリビューって値は基本文字列なので、
Guest
その文字列を数字とかブリーとかま、そういうのに変換しないと、いわゆるビーのアプリ側のプロプスにはならないです。
Guest
で、あのなので、ディファインカスタムエレメントの方で、その変換の実装があるんですけれど、
Guest
はい、
Guest
その変換の実装がパースフロートを使って、あのナンバーで扱えそうなら、ナンバーでナンバーじゃなさそうなら、まあそのままでみたいな
Guest
返還になってるんですよ。
Guest
はい
Guest
で、そのパースフロートが使ってる構文解析って、ちょっと厳密じゃなくて、はいはい、あの、先頭の文字が数字だったらいいんですけど、途中で数字じゃないものが入ってくると、その
Guest
途中までを数字として解釈して帰ってきちゃうんですね。はい。
Guest
なので、ちょうど僕がやってたクーポンの場合、クーポンコードみたいなのがあって、そのクーポンコードが例えば
Guest
あの23、ハイフン4はいいはいはい、ハイフンみたいなまあ、よくある行動があるんですよ。はい
Guest
で、その場合、パースフロット使うと、その最初の数字だけで帰ってきちゃうので、困る
Guest
っていうことがありました。で、あるべき姿としては、あの厳密に解析してくれるナンバーナンバーかっこ
Guest
の形式で書いてほしかったんですけど、まあ、ちょっとそうなってないので、ギャーってなったことがありました。なので、結構その辺の
Guest
え変換で、アトリビュートからプロプスへの変換で、他にももしかしたら困ったケースあるんじゃないかなって思ったりしてますね。で、
Guest
応援クーポン側では、あのパッチパッケージ使ってま。とりあえずパッチを当てて、今回はリリースをしたんですね。
Guest
はい
Guest
で、一応あるべき姿としては、その辺の改善なのかなと思って、ちょっとプロリとかシューズとかちょっと見てたんですけれど、
Guest
そのトゥーナンバーっていう、そのナンバーとして使えるかどうかを
Guest
確認する。はい、共通モジュールがそのビーの中にあるんですけど、
Guest
それをいじってしまえばいいわけなんですけれども、そのモジュールの参照先が多くて、結構ちょっとマイグレーションとか、コンパチビリティ的に厳しいみたいなんですよ。
Guest
はい、
Guest
なので、今のところパースフロートのままになりそうみたいな雰囲気になってて、マジかっていう感じですね。
Guest
しかに、なかなかこう受け取ってるプロップスがなんか何の方なのかっていうのを変換するのは難というか、まあ難しい。どこまで
Guest
ライブラリでこうサポートするのかってのは難しいところではありますけど、これなら要するに一層のこと。一旦全部文字上げて受け取ってしまって、自分でキャストするとか。でも、
Guest
ああ、そうそうそうそうそうなと思うところではありますよね。最悪文字、文字列のままビの世界。あ、自分で書いたビの方に持ってってもらって、
Guest
そのウェブコンポーネンツビールドの時は、自前でこう変換したとか入れられればいいんですけど、あの
Guest
吉なにやってくれちゃうので、おおっていう
Guest
なかなかこう。親切なのは嬉しいけれども、制度がちょっと
Guest
そうなんですよね、
Guest
かといって、ちょっと修正も時間かかり修正できるのかな。結構その辺の議論も古いので、もしかしたらこのままなのかもしれないんですけど、
Guest
もし、使うケースがあったら、ちょっとこの辺を気にしといた方がいいかもしれないです。
Guest
確かに、なかなかこれは、ブレーキングチェンジに、なんか、バグフィックスのつもりが、ウレイキングチェンスになり得るところなんで、なかなかこうコンテレビュートするにしても、ハードルが高い。
Guest
そうそうなんですよね、
Guest
しますええね、なんかかって他のこれまで今プロダクションで動いてる何かのコードが動かなくなる可能性がありそうな変更になってしまいますね。
Guest
そうそう、そうなんでうん、ちょっと今後のプルリク動向をよち
Guest
くという感じですね。
Guest
はい、で、もう1個がこれもちょっと困ったのが、スタイルの扱いで。
6. style の扱いについてのハマりどころ
Guest
はい、
Guest
これがビーのv2とv3で結構違うところなんですけれど、
Guest
あの雇用素。あ、ウェブコンポーネンツを出力するためのビーコンポーネント。
Guest
はい、
Guest
ビューコンポーネントが、ネットしている構造の場合、その雇用素の
Guest
コンポーネントが持っているスタイルをはい、成功法だと、シャドルートに挿入できないっていうことがあるんです。
Guest
例えば、プレービーのコンポリント今回作っている場合、その中に例えばボタンみたいなコンポ。
Guest
あ、そうそうそうそうそう
Guest
はい、ボタンのスタイルが入ってこない。
Guest
そうそうそうそうそうなんですね、で、元々のv2だと、その辺再帰的に取得して挿入してくれてたと思うんですけど。はい、
Guest
あの分散だとそれができないので、うん、ちょっと困ったなっていう構造になってます。
Guest
で、webコンポーネンツビルドをするにあたって、ビューのローダーとか、バイトのプラグインで、
Guest
その元々はスタイルをヘッドの要素のところにこう勝手に挿入してくれるじゃないですか。はいで、それをウェブコンポーネンツ用にシャドルートに挿入するように、
Guest
よしなにやってくれるんですけど、その対象が。vさんの場合は、ルートのコンポーネントのみになって、い
Guest
で、何もその辺知らなかったタイミングでポチって出力をしてみたら、あの1番側の
Guest
cssしか当たってなくて、あれ、レレレっていう感じになったことがあって、ちょっと困っちゃいましたね。
Guest
でv。産用に、そのローダーとか、バイトのプラグインとかが、そのスタイルを取得してくれてて、
Guest
で、ディファイン、カスタムエレメント側も。シャドルートに挿入をするっていう機能は、もうちゃんと実装されてるんですね。はい、
Guest
されてるんですけど、こう再帰的に取るっていうと、このプロジェクトもそもそも入ってないので、ちょっとこういうのが起きちゃっていたっていうのなんですよ。
Guest
で、ちょっとこれ困ったので、プロリとか出してやってみたりしてたんですけれど、基本的に
Guest
ココンポーネントもウェブコンポーネンツにして使ってほしいみたいなんですね。少なくとも今は
Guest
なので、ちょっとここはハックが必要な部分です。
Guest
応援クーポンは、そのクーポンポンポーネントがあるんですけど、結構大きい1つのコンポンとしては、かなり大きいコンポーネントなので、結構細かく分割をされているので。今更それを1つのおっきいのになんてとんでもないっていうことなので、
Guest
自分でそのスタイル文字列を再帰的に取得して、
Guest
自分でしゃシャドルートに挿入するっていう実装を追加
Guest
ていうのが対策ですね。で、一応ディファイン、カスタムエレメントにも、そのスタイルを受け取る口はあるんですね。はい、
Guest
スタイルの受け取る口はあるので、自分で全部取得をしてえ、渡すっていう
Guest
ことをする必要があったので、これもAPI側でやってくれると嬉しいなとちょっと思ってます。
Guest
で、まあ、ちょっとatがでやってほしいなと思って投げてみたけれども、ま、今の方針的にはなかなか
Guest
うん、
Guest
難しいなって
Guest
そうですね。あの、
Guest
スタイルを取得するために、そのあるコンポーネントが持ってる雇用素のコンポーネントを取得して、で、どんどんやってかなくちゃいけないんですけど、
Guest
その雇用素のコンポーネントを取得できるコンビの書き方はいが限られてるので。
Guest
ああ、なるほど、
Guest
ちょうどプロリクの話で出てきたのはなんだっけ。スクリプトにセットっていうのをつけて、あの、簡易的に
Guest
コンポーネント記述できるケースがあると思うんですけど、
Guest
そういうので書いちゃうとインポートはするんだけど、雇用、そのコンポーネンツを表現しないので、取れんとなので、再帰的に取れないっていうのが
Guest
ありましたね。なので、ダメなケースがある以上、このままだとダメだねみたいな話にな
Guest
てましたね。なんか、結構ビューって結構いろんな書き方があるので、ちゃんとそれを全部どのケースでも大丈夫なようになんないとダメだねっていう方針があるみたいで、
Guest
ちょっとこのままだとダメかもなって思いましたね。結構プロプスもそうですけどね、あの、プロプスも、タイプを定義するパターンと、配列で入っちゃうパターンもあると思うので、さっきのそのプロプスの変換の都合とかも、これに
Guest
近いのかなって、ちょっと思ったりもしましたね。こう、色んな書き方ができる分、こういうところで辛いんだなと。
Guest
ま、そのbgs側が色々な書き方を容認してくださっているのは、結構基盤の苦労があってこそなんだなとええいて、改めて実感できるというか、
Guest
そう結構ちょっと面白かったですね。こう、色々と
Guest
書きや書き、いろんな人にとって書きやすいケースにすると、こういうところに影響が出るんだっていういい勉強になりました。
Guest
あ、なかなか難しいですね、なんか使ってみて、コントレビートしようと思ってわかる、
Guest
そのこの方の体調の難しさみたいな。
Guest
そうそうそうそうそうそうなんですよね、で、うん、まあほんほんとは。多分、ドキュメントを隅々まで見てから、コントリーピートするべきだったと思うんですけど、まあ、ちょっとそれには限界があるんで、僕のわかる範囲で読んで、あ、でもこれは確かに
Guest
機能としてないなと思って出すと、あ、こういうケースがあるのかわからんみたいな
Guest
感じですね。うん、うん
Guest
で終わりましたね。
Guest
そうなので、結構この辺困ってる人結構多いみたいで、うん、多分何かしら動きはあるとは思うんだけど、止まっちゃってるんで、
Guest
うんっていう感じですね。
Guest
あるいは、ポンテリビュートチャンスかも
Guest
しれないですよ。そうそう、このトリビュートチャンス。
Guest
そうなんですね、だから、もっといい手段とかあるといいのかもしれないですね。
Guest
結構びなんだろうな。ビューで作ったものを、わざわざウェブコンポーネンツにしたい時って
Guest
なんだろうな。結構大きいコンポネントだから、出力したいケースがあると思うしい。使います。ってことは、ある程度大きいものだと思うから、
Guest
こうネスとしたビーコンポーネントもあった方れた方がいいんじゃないかなとは思うんですが、という感じですね。
Guest
なんかあれですもんね。小さいものだったら、それこそそれぞれで作ってしまった方が都合がいい。
Guest
あ、そうそうそうそうそうそうそうそう
Guest
別々にメンテナンスするのが難しいものこそ、ウェブコンポーネント化したいし、
Guest
なんかするだけの価値があるっていう風なええもある気がしますから、ちょっと対応は期待したいところでは
Guest
そうですね。で、一応成功法としては、その古コンポーネントも
Guest
ネストされたコンポーネントもウェブコンポーネンツ化してね。はいはい、とは言われてるんですけど、それはそれで
Guest
違う気がする
Guest
っていう。
Guest
いや、どうなんだろうな。なんかたい試してないから、もしかしたら怒られちゃうかもしれないですけど、多分そのウェブコンポネしちゃうと、その親とこの繋がりが、そのいわゆる
Guest
ウェブコンポーネント同士の繋がりになるんで、ビューとしてやりたい機能とかできるのかな。みたいな、
Guest
親と子の関係がびの世界でなくなると、なんか色々不都合ありそうな気がするんだけど、どうだろうなとかってちょっと思ったりしてます。
Guest
あと、バンドルが分かれるのか大丈夫かとか、ちょっと気になるところもそうそうそう
Guest
あ、それで言うと、なんかさっき少し話にあってましたけど、そのウェブコンポーネンツにする場合の、ビルドサイズとかも気になる。課題としてあると思うんですけど。
Guest
ああ、そうですね、けど、
Guest
その気になるウィルドサイズはどうでした。やってみて、
Guest
あ、やっぱランタイム分入っちゃうので、そこは許容するしかないなっていう感じですね。あの、
Guest
さっき言ったかもしれないんですけど、その組み込む先のcmsはビュー2で書かれていて、今回の使います。クーポン側はビュー3で書いたので、
Guest
ランタイムの共存みたいのはできないので。
Guest
ウェブコンポーネンツ側で、v3のえー団体も持ってないと動かせないので、その分ちょっとバンドルが
Guest
大きくなっちゃうっていうのは、まあ、しょうがないよねっていう範囲には
Guest
なってますかね。で、結構使い回す前提なので、あんまりライブラリーも入れたくないなっていうのでは。いさい、最初ちょっとこう脳みそ止めて、色々入れてたものを結果外すみたいなのは、まあまあ当たり前のように出てきましたね。
Guest
あとはいえ、ランタイムだけってそんなに重いもんでもないですかね。
Guest
嘘ですねでも、3、3、4割ぐらいがランタイムになったか
Guest
そうで、あのエバーさんとか言ってましたけど、これあの、結局ランタイムもたくさんコンポーネントがある分、あの1コンポーネント。
Guest
あのランタイムのサイズが小さくなるので、
Guest
まあ、うん。そういう今後どんどんその辺の気になるとこも減るかなとかは思ったりもしますかね。まあ、
Guest
今回に関して結構その歴史のあるcms側、cmsアプリ側にこう新しいコンポイントを組み込んでる
Guest
ので、なんか、そういうランタイムはちゃんと完全に分けちゃうと、それはそれで素結合でいいのかな、なんて、ちょっと思っちゃったりも
Guest
するんですよね。そのランターによってこう意外とええってなったりすることないかなとか、ちょっと思ったりもしつつ
Guest
あればできるかなとは思いますね。あとは、cmsの中でもcms内もかなり機能がたくさんあって、
Guest
クーポン以外にもものすごくたくさん機能があるので、みんながみんな必ず高頻度に開く画面ではないんですね。はいはいはい
Guest
で、そういうところもあって、許容できるかなっていう背景もありますね。必ず、トップで出てくるとかになると、ちょっと色々考えなくちゃいけないんですけど、確かにか、
Guest
今回はプレビューっていうま、ある程度アクションを起こした先にあるから、まあ、一旦許容しても良いか。
Guest
そうそうそうそうですね、
Guest
じゃ結構まああれですかね。こう投下的にってか、あんまりフレイマークを意識せずにこう。カスタムエレメントとして使えるのは嬉しいけど、まあ、全体としてはまだ
Guest
気になるところもあって、うん、ま、あとはいえ、今回のケースターとマッチしていたと言えるんじゃないかなって、そうそうそう
Guest
そうですね、なので、なんか、ウェブコンポレンツを作りたいなっていうモチベーションで、
Guest
じゃあ、ちょっと複雑だし、病使っちゃおうかみたいなのだと、ちょっと苦しみを覚えるか。はいはいはいしれないですね。だったら、せめてプリアクトとかの方がいいんじゃない
Guest
かな。みたいな
Guest
とこはありますが、
Guest
ですが、あって、そっから切り出すってなった。
Guest
そうそうそうそうそうあの、かなり強力な選択肢になるんじゃないかな、とは思いますね。うん、
Guest
やっぱり結構アトリビュートとプロプスの変換とか、あの、なんだっけ。イベントはいの変換とか、スロットとか。やっぱめんどくさいので、
Guest
その辺を。やっぱコアAPIでちゃんと持ってくれるっていう構造はやっぱり助かるので、
Guest
もし、ビーアプリので作ってたものが、一部のコンポーネントを外に出したいって話であれば、結構選択肢にしてもいいんじゃないかな。
Guest
そうですね、確かになんかそっちの切り出したいが、ベースであれば、全然今の段階でも、こう選択肢として活用できそうなところはありますね。
Guest
今回はその私、結構ビブコンポーネントで共通ってから、フレームワーク全く印象でしたけど、今回みたいに、ビュー2とビースみたいなバージョンをまたぐケースでも使えますし、
Guest
振り回しは結構よさそうな気がしますね。
Guest
そうですね、今回、僕はあの、その団体も自分で持っちゃいましたけど、別に共通で使ったって別にいいことなので、
Guest
その辺は結構柔軟にできるから、そういうのができれば、多分バトルサイズとかもだいぶ気にならなくなると思うので、
Guest
もしぜひ今後またよりこう色々切り出すところも増えてきて、なんかそれに立って課題感を感じたり、逆に
Guest
なんかあの、今よりもっとほんとは使い勝手いいじゃん。みたいなところが増えてきたりしたら、ぜひまたちょっとインサイドきたいところでは、はい
Guest
はい、わかりました
Guest
じゃあ、ひがマージされたらまた出ます
Guest
それは是非お願いいたします。
Guest
はいえ、今回は山本さんをゲストにLINEオフィシャルアカウントでのえークーポンアプリにて使った。ディファインタムエレメントについて話を聞いていきました。
7. クロージング
Guest
ライン株式会社のフロントエンド組織UITでは、このようなフロントエンドに関する議論や、意見交換を日々行っております。
Guest
UIT INSIDEでえ、公開しているコンテンツの中には、市内の勉強会や交流会の中で得られたえ、知識等々もありますので、今後も積極的にポッドキャスト内で紹介していければと考えております。
Guest
このポートキャストについてのえ、ご意見やご感想については、え。ハッシュタグ
Guest
シャープ、UIT、アンダースコアインサイドにてつぶやいていただきますと、スタッフの方で拾わせていただきますので、ぜひぜひ
Guest
ついていただければと思います。
Guest
また、このコントキャストを通じて、ラインに興味を持ってくださった方は、湘南とサカ部にあります。求人のリンクより、ご連絡いただければと思います。
Guest
現在新卒採用、中途採用とに行っておりますし、えズムにてカジュアル面談を行っておりますので、気軽にご連絡いただければと思います。
Guest
名前をつけると、例えば山本さんと話したいです。とかってつけると、多分やさんさんカジュアルメダに出てきてくれるんで、ぜひぜひお気軽にえ、ご連絡いただければ
Guest
思います。はい、
Guest
ぜひ一緒に公式アカウントを開発しましょう。
Guest
というわけで、今回は山本さんとともに、ラインカスタムエルメントについて話していきました。本さんありがとうございました
Guest
はい、ありがとうございました。
