ep.57 Vue 3 Study 『よりよい Directive を求めて』 | UIT INSIDE

2020/08/14 に公開942 views

このエピソードについて

@potato4d が @inaoki.misato に Vue 3 で変わる Directive のアップデート内容について話を聞いてみました。

ゲスト紹介
- inaoki
  - UIT Front-End Dev 5 Team
  - LINE Wallet などのフロントエンド開発を担当
Vue 3 Study について
- UIT 内で行われている Vue 3 の新しい機能を学ぶ会
- 社内で共有した内容は UIT INSIDE でも紹介
変更点の紹介
- Directive arguments の中で変数を使えるようなった
  - v-bind:[foo] : :[foo]
  - v-on:[foo] : @[foo]
  - v-slot:[foo]: #[foo]
- Custom Directive APIがリデザインされた
- また、Directive に変更がない箇所でも、 Fragment の変更などによって考慮事項が増えた
実際の Directive 使用例
- LINE Wallet の開発時、 intersection observer によるイベント表示を付与するために自作
  - 画像を lazy load したがったが、影響が大きい
  - Image コンポーネントのようなものを作るより、手軽かつ多様なパターンに対応できる
- 新規案件では同様の処理を実行できる OSS の vue-observe-visibility を利用することが増えた
  - https://github.com/Akryum/vue-observe-visibility

Refs

フロントエンドエンジニア / フロントエンド開発センター| 求人詳細 | LINE株式会社
- https://linecorp.com/ja/career/position/475
BGM: 騒音のない世界
- https://noiselessworld.net/
SE: 魔王魂
- https://maoudamashii.jokersounds.com/

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:08
こんにちは

Guest 00:10
こんにちは

Guest 00:11
今週もUIT INSIDEを始めたいと思います。UIT INSIDEは、ユーザーインターフェースと、テクノロジーを愛する開発者のためのポントキャストです。

Guest 00:21
最新のweb標準の動向や開発、フレームワークの変遷、またまたuriやuxに関することまで

Guest 00:28
毎週フロントエンドの情報を発信していくことを目的としております。ハッシュタグはUIT、え、アンダースコアインサイド。

Guest 00:36
ご意見やご感想はいつでもお待ちしております。

Guest 00:40
さて、今回はですねえ、私え、あなたにおホストにですね。ゲストに直樹さんを招待いたしまして、ビースリータリーのシリーズのえ、ディレクティブ編について、え、お話をお聞きしようかなと思います。

Guest 00:54
えなおきさんよろしくお願いいたします

Guest 00:56
はい、よろしくお願いしますと、私はUITのフロントエンド

2. ゲスト紹介 01:00

Guest 01:05
の5チームでロントエンド開発をしていまして、主にjavascriptと、

Guest 01:12
あと、プロジェクトによっては、シースまマーカップの両方担当しています。でも

Guest 01:18
なみのプロジェクトとしては、LINEウレットなどのま、フロントエンドの開発を担当していますよろしくお願いします。

Guest 01:25
はい、よろしくお願いいたします。

3. About Vue 3 Study 01:30

Guest 01:30
じゃあ、それではですね、ちょっとディレクティブの変更にえーついて移っていく前に、簡単にビーススタディについておさえします。ビルススタディはえ、uyt内で行われているきるビュー3に向けてですね。

Guest 01:43
新たな機能だとか、ブレーキング、チェンジスなどをえまとめて、え、お互いに学んでいくかとなります。

Guest 01:50
基本的に1人1テーマずつ持ち寄って、rfcの内容だとかえ、実装ベースへの変更おっていくかとなっております。

Guest 01:57
これまでにですね、外に出している分でも、6回えほどやっておりまして。まあ、社内ではもっと色々共有しているんですけど、

Guest 02:05
以前もアテンサイトで何度かご紹介させていただいておりますので。え、推し興味のある方は、

Guest 02:11
ショーノートにあるリンクから。過去のエピソードに飛んでいただければと思います。

Guest 02:18
今回はですね、その中で7回目として、リレクティブ編をえいなおきさんにえご紹介いただこうと思っております。

4. Directive の変更について 02:20

Guest 02:24
それではですね、早速えいのきさんに、ディレクティブの変更について紹介だいてもよろしいでしょうか。

Guest 02:31
はい、まディレクティブについて。そうですね、担当したんですけど、コピ2つ変更が

Guest 02:41
あります。はい

Guest 02:42
で1つ目がディレクティブ、オーギメンツの中で変数を使えるようになったっていうところと、あとも2つ目が。カスタムディレクティブAPIがリデザインされたというものです。

Guest 02:56
はいはい

Guest 02:56
で、まず1つ目のディレクティブオーグメンツの中で変数を使えるようにしたっていうま点なんですけど、はい、ざ

Guest 03:06
くり言います。と、はい、このvバインド。コロンって括弧フって書くと、フの部分が

Guest 03:13
hっていうへん。なんか、へんキーが入るようになったんですけど、そのキメに。変数を指定できるようになったっていうものです。はいはいはいで対応しているディレクティブが、vvインド

Guest 03:24
とvオンブスロット。ちょっと微妙に名前が変わったやつですねでも、変数を使えるようになります。

Guest 03:34
はいていうものですね、で、ショートハンドもま一旦整理すると、v。バインドはcronvoはアットマーク

Guest 03:43
ブスロットはで、シャープも使えるので。まあシャープか、大かこ

Guest 03:51
変数名、大角閉じて書くと、あの変数がショートハントでも使えるようになるようです。はい

Guest 03:59
ということは、これまでイベントとかのところがオンクリックみたいな形で書くしかなかったところがまそのものに応じた形に、常に変数の展開がに対応したっていう

Guest 04:10
感じ

Guest 04:10
ですかね。そうです、そうです、そうですね、ブイバインドとか結構便利

Guest 04:14
そうっすね、ブバインドが1番よく使いそうな感じはしますね

Guest 04:19
あとはあれですかねvオンとかで、クリックとあのタッチのスタートとかをま、デバイスによって切り替えたいとか。

Guest 04:26
確かに普通にありますね。

Guest 04:28
きそうかなとか思います。あれ、ちょっと便利にテンプレート、デブイーフで切り替えて、それぞれあの点数の中身に応じてとかしないといけなかったのか、

Guest 04:37
展開できるようになるってのは結構便利。そうっすね

Guest 04:41
ちなみにこれは以前でもそのvバインドとか、voでも

Guest 04:50
あれですね。オブジェクトを指定すると、確か動的に定義できたはずなんですよね。

Guest 04:58
あ、そうなんですね、

Guest 05:00
そうですで、これがその今回のモチベーションの部分なんですけど、はい、

Guest 05:07
ルイバインドイコール。まだ、ダブルコーテーションで、オブジェクト

Guest 05:13
で、オブジェクトの中に。キー名とバリューを書いてあげると、一応その

Guest 05:19
動的に金名を指定することが今までもできました。はい、で、ここで以前できたのと、新しいそのAPIの違い

Guest 05:29
ていうのは、ま、その見やすさみたいなところもあったりはするんですけど、も。はい、多分、大きなところだと、効率の悪いコードが生成されてしまっていたそうで。はい

Guest 05:39
はいなので、え、あのv3と同じようなことがしたいのであれば、まあ、パフォーマンスのことを考えたら、新しいAPIを使った方がいいのかなとは

Guest 05:49
おまえま。これまでも一応記述はできたけれども、もう少しシンプルにかけて、かつ効率のいいコードが生成できるようになるっていうのが、今回の特徴っていうところですかね。

Guest 05:59
はい、

Guest 06:01
私全然このvバインドだとか、voに直で指定すると定義できるのを知らなかったんで、これまでもできたんだっていうのがちょっと驚きかつ。

Guest 06:11
まあ、でも、今の方がこのビュー3でできるようになるものの方が素直で良さそうですね。

Guest 06:16
そうですね、なんか、前もできたっちゃできてたみたいなんですけど、なんか、ドキュメントにそれほどしっかり書いてなかったみたいで。なるほど、なるほど、なんかその辺りも結構こうトリッキーというか、知られてない手法って紹介されてました。

Guest 06:30
はい、

Guest 06:32
ああでもいいですね。こういう風にまより書きやすくなるってのは

Guest 06:36
良さそう。はい、ありがとうございます。はい、

Guest 06:38
これはまあほんとにディレクティブオギメンツに変数を使えるようになったみたいな話なんですけど、

Guest 06:45
まあ、もう1個目に関しては。カスタムディレクティブAPIが、リデザインされました。でま、リデザイン

Guest 06:53
て言ってるんですけど、主には

Guest 06:57
そのライフサイクルメソッドがまリネームされたり、ま削除されたり、なんかタイミングを変えたみたいな。はいはいはい、話でもうほんとに表を書いたぽんて終わっちゃうんですけど、

Guest 07:09
そもそもこれは。コンポーネントのとライフサイクルの名前とか。使用にすごい寄せたかったみたいで、

Guest 07:17
あ、はいはいはいはい

Guest 07:19
で既存のフックって呼ばれる。ライフサイクルメソッドをリネームしたり、タイムグ調でしたっていう話ですね。

Guest 07:26
で、例えば、バインドっていう名前のフェンス名だったんですけど、それが、ビフォアマウントっていう名前にデニムされたりです。とか、インサーペットっていう名前が、マウンテット

Guest 07:38
になったり。あと、アップデートっていうものがあったんですけど、ま、それが微妙に名前が変わって、アップデートみたいになったり、はい

Guest 07:47
ていうので、ちょっと新しいその修正されたバージョン見ると、結構こう馴染み深い。メソット名に

Guest 07:55
が多いのかなっていう感じになってお

Guest 07:57
そうっすね。結構アップデートとかって言われても、いつだよってなったりします。ビフォアマウンドとかになってくれると、結構コンポネントのこの段階で呼ばれるんだなってのが

Guest 08:07
イメージしやすそうで、結構わかりやすくなってる感はありますね。

Guest 08:11
はい、そうですね、

Guest 08:13
で、まあ、あと小話みたいなところなんですけど、これもともとその調査する時に、ビ3のrfcのドキュメントを見ながら

Guest 08:22
調べてたんですけど、そのさっき、ディレクティブオーゲメンツの中で、変数を使えるようにしたっていう話が

Guest 08:32
をしたじゃないですか。はい、でなので、このカスタムディレクティブAPIを使って、カスタムディレクティブを実装するときにも、その

Guest 08:42
デレクティビオビメンズが変数で来る。はいことが想定されるようになるので、まあ、ちょっとその辺も気を付けて、実装しろよみたいなことがちょ、

Guest 08:52
はい、今までは気にしなくてよかった。まあ、一応オブジェクトでやってくるので、まあ、ちょっとそのオブジェクトやってきた時に、ちょっとカスタムデレクティブ

Guest 09:03
がどう動くかみたいな。ちょっと実装したことないんで、わかんないんですけど、はい、まあ、そのあ、今までよりもそのそういうユースケースが増えるっていうところでま。ちょっと

Guest 09:12
ちょっとああ、そうかなと思いま

Guest 09:13
はい思いました。

Guest 09:15
いうような感じです。

Guest 09:17
確かにま、大体その動的というよりは、性的に普通に記述されてるものだと思い込んでるところがま、こんな形で気軽に使えるってのはあると思う。

Guest 09:26
使われるケースも増えそうですしま、結構ディレクティブとかって、1回実装して定義すると、影響範囲とか利用されるところも多いものな気はするんで、

Guest 09:35
結構気を付けないとけなさそうっすね。うん、うん、うん、あ、ありがとうございます。

Guest 09:44
あと、ルートコンポーネントが複数取れるようになって、ああ、フラグメントですね、

Guest 09:53
が、使えるようになったじゃないですか、なので、この辺もちょっとカスカム、ディレクティブ使う時に気を付けてください。みたいなのが、

Guest 10:03
なんか、ココンポーネントに

Guest 10:06
カスタムディレクティブを使う時に、ココンポーネントがマルチプルルートをなんか違う。なんて言うんですか。フラグメントを使った

Guest 10:16
ルートコンポーネトが2つあるコンポーネントだと、なんかどっちにバイントするんだみたいな。そういうのもなんか

Guest 10:24
はなんか普通にv。バインドドル、アトリビュートですね。それを使ってくださいっていう話もあったりしましたね、なので、ちょっとなんか、

Guest 10:34
その他のそのrfcでその増えた機能はいにちょっと影響受けてる部分とかも

Guest 10:43
あったりして、ちょこちょこあったりして、結構まあちょっと面白いなって思い。

Guest 10:48
結構デレクティブ自体はシンプルな変更では、ある一方で、フラグメントとかで、まあ、ここもポネて呼び出す時に、複数

Guest 10:57
ルートノードがある場合にま、これまでは1つ前提で行けたのがそうではなくなるとか。結構影響が他の

Guest 11:06
rfcの影響を受けているところがあるのは、面白いところですね。

Guest 11:13
この辺のそのなんか、抜け漏れ抜け漏れというんですかね。

Guest 11:17
なんか、新しいのが増えたから、別のrfcの機能でこういうとこ影響しそうみたいなカバーできる。その体制体制というか、コミュニティーの

Guest 11:25
改正なんでしょうかね。なんか、その辺りがすごくいいなってそうっすね、他のライブラリもそういうことか、多分されてるんだと思うんですけど、

Guest 11:35
結構親切というか。デレクティブ開発者は、デルクティブのドキュメントを見たら、何をアップデートしたらいいのかがわかるようにはいなってるっていうところはいいですね。

Guest 11:44
ただ、そういうのはほんとにビジコミュニティの良さが現れてる感じではありそうですね。

Guest 11:53
そんなとこですかね、

Guest 11:56
今ですねえ、言及されたえと、フラグメントによる影響などはですね。以前のitサイドでもえ、フラグメントという形でご紹介とかさせていただいてるので、え、もしよければ、

Guest 12:07
相互の関係とかね。アップデートするために、これを聞いてる方たよければえ。他のエピソードと合わせて、え、おき

Guest 12:15
聞いただければと思います。まあ、結構デレクティブは他との相互に影響を及ぼすような変更でもあるかなと思いますので、その辺を見てもしえ、現場で

Guest 12:24
デクティブをえ使っていることがあればね。注意いただけるといいんじゃないかなと思います。

5. 作る側からみる Directive 12:33

Guest 12:33
じゃ、ちょっと今ここでですね。結構

Guest 12:35
ディレクティブによる変更と結構、今回デレクティブ作る側っていうのがえ、使われるケースが綱領事項が増えて、多分アップデートしないといけないものとかが

Guest 12:45
出てきたかなと思うんですけど。実際、カスタムタムデクティブとかって、結構イナさんとかって、現場で使うこととかあったりしますかね。

Guest 12:55
ですね、はい、1としたのは1回だけあって、

Guest 13:03
で、いつも使ってるやつが。ライブありなんですけど、そういえばもう1個ありますね。定番のやつがで、

Guest 13:10
実装したやつより、ちょっと先にちょっと自分でいつも使ってるライブありなんですけど、あのオブサーバブルなAPI。インターセクションオブサーバー

Guest 13:22
で出現。

Guest 13:23
あした時に

Guest 13:24
に、いつもハッキングのイベントを送るってあるあるだとのややるじゃないですか。また、分やるあるあるだと、

Guest 13:32
それをはい、それをするためのデレクティブのライブラリがあるんですよ。理由だと、なんかビューザーはい、ブビジビリティ

Guest 13:45
はい

Guest 13:47
はい、そうです。そうです、

Guest 13:49
これをいつも使っていて、

Guest 13:52
これは今担当してるプロジェクトほぼ全てに入ってますね。そう表示されたら、ああ、イベントを送るって

Guest 13:59
いいですね。こういうのがこういうのは、ゲティブになってると、確かに結構便利そうな気がしますね。

Guest 14:07
で、あとはこれにちなんで、今はちょっと別のこ。普通にコンポーネントを実装してやっちゃったんで、使ってないんですけど、最初にちょっと

Guest 14:16
LINEクーポンを最初あ、画像表示に

Guest 14:22
普通に今あの入った時は普通にイメージタグで表示してたんですよね。で、LINEクーポンって、トップページ

Guest 14:30
をま見ていただくとわかるかなと思うんですけど、100件以上のクーポンがリストでざって出るんですよ。はい

Guest 14:38
で、そこを特になんかく。まあ、工夫をしてないというか、なんか

Guest 14:44
まい、一見。そのLINEクーポンのトップページをの画像を表示するのに、ただのイメージタグを使っていたんですけど、やっぱりちょっとパフォーマンスというか、1番上のファーストビーの画像を1番最初に出したかったので、

Guest 14:59
ターセクション、オブサーバーAPIを使って、まあ、普通に画面ファーストビルを優先的に画像を読み込むみたいな画像遅延、読み込みみたいな

Guest 15:09
処理を。はい、あ、作った時に、それをカスタムディレクティブで作ったんですよね。

Guest 15:16
既存のイメージタグに使うように、

Guest 15:24
そうそういうカスタムディレクティブを作りました。

Guest 15:28
うん、うん、うんうん、結構影響範囲も大きいし、簡単につけられる方がいいかな。

Guest 15:34
で、まあ、新しく自分で01でやるやつは、そのイメージ。普通にコンポーネントを作って、そこでま似たようなことをしてるんですけど、

Guest 15:43
それが初めてカスタムディレクティブを使った時じゃないかな。とい、

Guest 15:46
そういったドムイベントとか、結構ちょっと実装がめんどくさいけれども、1回実装したら、汎用的にコンポネート問わず、使えるようなものは

Guest 15:56
外に行って見せると、

Guest 15:57
あと、そのそのイメージコンポーネントがにしなかった理由のもう1つが、背景に画像を差し込んでたんですよね。

Guest 16:08
なので、はいはい、スタイルで指定してたんですけど、そこを

Guest 16:13
えはいとカスタムディレクティブにして、あ、表示領域に近づいてきたら、バックグラウンドの値を書き換えるみたいな。

Guest 16:23
はい、そういう処理をしたかったので、そのカビレクティブにしたんです。

Guest 16:27
はい、なるほど、なるほど、はいはい、

Guest 16:30
普通にsrcとかではなくて、あ、そうでグラウンドの。はい、

Guest 16:36
これはまあ便利便利でしたね

Guest 16:41
確かに結構便利そうな気がしますね。

Guest 16:44
なかなかデレクティブって、その作る時にま予想しない、使われ方とかするケースもやっぱり出てくるんで、

Guest 16:51
ま。デレクティブで解決するかどうかって悩むところかなと思うんですけど、確かにそういった結構かなり汎用性の高いものだと、

Guest 17:00
デレクティブ同してやると良さそうすね。など、ちょっとこれ、私がたん単純に気になってたみ。どうやってデレクティブつか

Guest 17:11
カスタムデクティブ使ってるんだろうって話だったんで、ちょっとただの興味本位の質問となってしまって、申し訳ないですけど、ありがとうございます。

Guest 17:21
ですね、ま、ただ、そういうのももしかしたらあれですね。ルートのノード複数持つ場合とかは、そういったケースだとで出てきそうですし、やっぱり

Guest 17:31
。その辺りの内容とかは今後

Guest 17:34
出てくるかもしれないですよね。ま、特にライブラリカ車者さんの方が普段多いのかなって印象はありますけど、そう思います。そうですよね、うん、うん、

Guest 17:45
もうどうするんでしょうね。そのインターセクションオブザーバー使って、検知した時とかに、もし1回だけ実行されてほしい。シチュエーションだと思うんですけど、その場合って、多分見えた時に、

Guest 17:56
なんかふふたつ以上ルートノードある時って、2回イベント発火してしまいそうで、かなり結構難しいところでは

Guest 18:05
ありそうっすよね。

Guest 18:06
なんか、元々その実装した時もまあった問題ではあったんですけど、結局そのspaなので。

Guest 18:14
最初はそのはい。アンディファインドで、画像がはい、画像のurlが入ってくるんですよね。

Guest 18:21
そのカスタムディレクティブのバリ。はいはいはい、でも、あの途中でそのAPI呼び出して、戻ってきた時に、アンディファインドだったurlが、htmlじゃなかったらすいません。urlに

Guest 18:33
なるので、なんかそこで変更検知してみたいなのは、

Guest 18:38
あ、はいはい、なんか

Guest 18:41
ややこしくなりそうな感じはしますけど、

Guest 18:54
やっていかないとなって、はい、やってみて

Guest 18:56
鍛えるなんか鍛えるか

Guest 18:58
って感じですかね。うん

Guest 19:01
はいはいはいのさんありがとうございました。

6. クロージング 19:04

Guest 19:07
というわけでえ、今回はですね。ビーススタディディレクティブをテーマにえなおきさんとともにえ、話していきました。

Guest 19:15
ラインのフロントエンド開発組織UITでは、このようなフロントエンドに関する議論や、キャッチアップを日々の行っております。

Guest 19:24
今回のビーススタディやえ、以前に開催したえ、ゴールデンウィークの自由研究企画など。

Guest 19:30
社内のですね。え、キャッチアップ企画から始まったコンテンツも用サイトには多くございます。

Guest 19:36
こういったものも、今後も発信していければと思っております。

Guest 19:41
またですねえ、このポッドキャストを通じてですね。ラインのフロントエンドエンジアや開発組織え、技術、キャッチアップの様子などに興味を持っていただいた方は、

Guest 19:50
えぜひぜひえ勝ちは面談を受け付けております。

Guest 19:53
もしですね、簡単に話してみたいとか、えとま、こういったいった技術のところ聞いてみたいとかあればですねえ、シート

Guest 20:01
家にですね。求人へのインクをえ、設定しておりますので。そこからですね。えごアクセスいただいて、お気軽にご連絡いただければと思います。

Guest 20:10
今とかだとですねえ、ズムとかで軽く話しましょうとかも全然受け付けておりますので、え、まずはお気軽にご連絡いただければと思います。

Guest 20:19
え、そんなところでえ、今回はですねビースディレクティブをテーマにですね。

Guest 20:25
いなおきさんとともに話していきました。えいなおきさんありがとうございました

Guest 20:30
はい、ありがとうございました。