ep.29 SPA × Animationの悩み Vue/Reactでのかしこい実装方法と react-spring への期待 | UIT INSIDE

2019/11/15 に公開1963 views

このエピソードについて

@potato4d と @spring_raining が、 Vue.js のアニメーション機能、 React の場合どうやって実現しているかなどについて語りました。

SPA の「消えるとき」のアニメーションの話
- 簡単なものだと CSS アニメーションは便利
- transition
- animation / keyframes
- 一方で DOM 要素の大きな変化には追従しづらい
  - フェードアウトのアニメーションが終わってから DOM を消したい
  - アニメーションの状況に応じて動かしたい
- Dirty な方法だとつらい
  - setTimeout

Vue.js の Transition

https://jp.vuejs.org/v2/guide/transitions.html#ad
Vue.js コアに存在する組み込みコンポーネント
- <slot /> などのように Vue.js が意味のあるタグとして提供している
- class や style のつけ外しと DOM の表示管理を行う

React コミュニティの react-transition-group

https://github.com/reactjs/react-transition-group
React コミュニティ製のアニメーション管理ライブラリ
- class や style のつけ外しと DOM の表示管理を行う

注目のライブラリ react-spring

https://github.com/react-spring/react-spring
React 専用のアニメーション管理ライブラリ
- アニメーションの速度や easing まで含めて react-spring で管理する
spring の名の通り、バネの原理でプロパティを管理する
- mass(重さ)やtension(バネの強さ)、friction(摩擦係数)などを設定することで、アニメーションを統合的に管理可能

BGM & SE: Maoudamashii

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

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

Guest 00:02
今週もuテンサイドえ、やっていきたいと思います。まず、初めにこのポッドキャストについて説明させてもらいます。このポッドキャストは、ユーザーインターフェースと、テクノロジーを愛するエンジンナたちが、毎週、最新のフロントエンドの動向について

Guest 00:16
語るためのポッドキャストです。

Guest 00:17
最新のウェブ標準の動向や開発、フレーマークの変遷、また、またゆやuxに関することまで、最新のトレンドをキャッチアップすることを目的

Guest 00:26
としております。え、今回はですね、potato4dと、えーはさんの2人でやっていこうと思います、よろしくお願いしますよろしくお願いします。

2. SPA の消滅時のアニメーションについて 00:35

Guest 00:35
今回なんですけど、

Guest 00:37
ちょっと聞いてみたいことがあって、spa作ってる時にま、結構アニメーションの管理とかってやることあると思うんですけど。まあ、その簡単なものだったら、csnのトランジションとか、あと、あのアニメーションとキーフレームステ

Guest 00:49
やったりとかすると思うんですけど。まあ、例えばそのドムが消える前には、ちゃんとアニメーション終わってから消したいとかになると、ふわって、あ、そうそうふわってなかったら、もうモーダルふわって出したら、ふわって消したいじゃんみたいな、

Guest 01:01
そういうよくあるアニメーションやるときって、どうしてもcssだけじゃできないことってあると思うんですけど、なんかその辺どうやってるかなって話をちょっと今回したいなと思ってて、

3. Vue.js の transition について 01:12

Guest 01:12
ええ、まあ、ちょっと。私の場合、結構ビュージーのそのトランジションていうタグを使ったアニメーション機能ってのをよく使うんですけど、使ったこととかあります。

Guest 01:27
はい、なんかこれについてじゃ、ちょっと今回紹介さしてもらいたいなと思ってて

Guest 01:32
ま。何かって言うと、これは、え。butsって、その組み込みでカスタムタグみたいなのが提供されていて、

Guest 01:38
なんでしょう。リアクトでいう、チルドレンのレンダーのためには、スロットみたいなものとかま、専用のタグがいくつか組み込みで提供されてると思うんですけど、そのうちの1つが、トランジションコンポーネントっていうのが、

Guest 01:48
はいはい設定されていますとでま、トランジションはえ、ネームを受け取るまネームをプロップスとして、受け取ってま中に、チルドレンを受け取るみたいな。ラッパーなコンポーネントなんですけど、

Guest 01:58
ま、これがえ何をするかっていうと、そのなんでしょう。

Guest 02:02
アニメーションのえ、状態用のクラスをつけてくれるみたいな機能になってます。と、なんで例えば、vfとかv装ま、そのそもそも表表示するとか、まあのディスプレを何にしたり、え、ブロックにしたりするみたいな

Guest 02:15
表示のえ、入れ替えとかをした時っていうのに、え、クラスワータッチしてくれるというやつになるんですよね。

Guest 02:21
ま、なんでこれはまあやると何が起こるかっていうと、ふわって消えてほしいものとかがあれば、ふわっと消えてほしいものの、親にトランジションを付けて、その本本体に対してvを付けておけば、はい、おになったら

Guest 02:34
ふわって出てきて、ふわって消えるとか、まあとなんでしょう。よくあるまニュース欄とかって押したら、サイトがこう綺麗になって、綺麗に閉じてほしいとかあるじゃないですか。はいはいまこういうやつとかでも多分結構使われると思うんですけど。ま、そういう時にトランジションで加工ってやると、

Guest 02:49
acssが提供されるって感じなっはいて、ちょっとこれ見てほしいんですけど、あ、ちょっとその他にも貼っておきますね。

Guest 02:55
ま、こういうサンプルが提供されていますが、これが消えてから消える消えてからドムごと消えるはいみたいなやつが

Guest 03:02
例えばここトランジション、え、csのsのトランジションを設定しておいて、0.5秒とかなる。設定したら、はい、これを勝手にそれっぽく察してくれて、あ、0.5秒なんだなって察して終わったら消えてくれるみたいな。そうなんですよ、なんか、自分でやらなくていいみたいな

Guest 03:16
の秒数を見る。

Guest 03:18
あ、そうそうそう見てうまい具合にやってくれるみたいな感じになってて、なんでなんでしょう。

Guest 03:23
ま、よくこういうのって、自分で作ったりすると、セットタイムアウトで、まあ、なんかこっち400って書いてるから400にしようみたいなのとかって絶対出てくると思うんですけど、そういうのしなくて

Guest 03:33
くても、トランジション書いておけばできるっていう。それは、あの、

Guest 03:40
あのbgsが結構hmlの上に載せることを想定されてるからこそなのか、

Guest 03:44
そっちを尊重するってやつになっててはいえ、こういう感じですね。このvエンターとエンタとまこのvの部分は、ネームのプロップスに応じるんで、フェードとかにしたら、フェードエンターとフェドエンターとみたいなんですけど、

Guest 03:56
このトゥーの状態とエンタの状態を2つ用意して、ここの値を書き換えておいて、トランジションの時間さえ指定したら、それで勝手にやってくれるみたいな

Guest 04:05
感じになって、これが結構便利っててま。ちょっと見てえ。もしよかったら見てほしいんですけど、結構皆さんも例えばその今まで作る時にですね。

Guest 04:14
ありがちながら、それこそモーダル閉じるみたいな時にま。ハンドルクリック、モククローズ、モーダルクローズみたいなん用意して、セットタイムアウトつか

Guest 04:22
って、アニメーションやってから、エミとして、親側で消すみたいなやつになると思うんですけど、ま、それが結構消せるのがbjs

Guest 04:31
組み込みであるあるってのが結構よそだよなと思って、あと、終わったタイミングでイベントも発火できて、他もそのカスタムイベントみたいなのも呼び出せるんで、

Guest 04:40
結構これいいよなと思ってて、ま、ぜひなんか結構普段自前で実装してる人には使ってみてほしいんですけど、

Guest 04:47
なんかちょっとこういうの。それこそ、今回はささんも多分初見だと思うんで、結構実は知らなかったみたいな。

Guest 04:54
なんか結構これがいいよなと思ってるんで、推し推しなんですけど、いいですね、なんか結構便利です。

4. react-transiton-group について 05:01

Guest 05:02
これ、リアクトでこういうのあんのかな。みたいな話もあったりしてて、ちょっとそれも聞きたいんですけど、ちょっと聞いていってもいいですかね。

Guest 05:09
そうですね、まず多分1番有名なのが役とトランジショングループっていうほうほう。はい、ライブやりがありまして、

Guest 05:16
それは公式ですか。

Guest 05:19
これ公式あ、そのコミ医学とコミュニティあ、なんでまあそのまあ公式のまあなんてすか、応援政策はいはいはい

Guest 05:28
感じですね。なんか、あの、facebook管轄ではないけれども、リアクトのエコシステム内にある、オフィシャルなものみたいな。はい感じですね。なるほど、なるほど、

Guest 05:36
これはそうどこまでできる感じなん。

Guest 05:38
これはですね、そうです1件

Guest 05:41
多分さっきのやえ、ビのトランジションとま、大体一緒はいっていう感じはしますね。これもそのあれですね。クラス名をこうつけて

Guest 05:50
で、一定時間後に消してくれるみたいなセージなど。なるほど、やってくれるっていう感じですよね。でま、ap大体一緒っぽいですね。なんか、こうフェード

Guest 06:00
して、このアクティブはフェードエンターアクティブみたいな。ああ、はいはいはい、そういう感じのクラスメがいくつか用意されていてま。それがこう

Guest 06:10
消えつつあるときとか、現れつつある時にこう付け加えてはいる。はいていう

Guest 06:15
aiは提供されてますね。ほうほうほうほうただしそうですね。これははいさっき言ってたその流の

Guest 06:23
なんていうか、トランジションの秒数を見てくれるみたいな。はいはいのはないんですね。

Guest 06:27
あ、じゃあ結構自分でそこはやるみたいな。そうそう、ほんとに。

Guest 06:30
まあ、

Guest 06:31
そのcssって名前ついてるんですけれど、もはいま実際にそのなんていうんですか。アニメーションのところには関与してなくて、単純に

Guest 06:40
クラスのアタッチでダッチをしてくれる。

Guest 06:42
あの、タイムアウトっていうこうえ、プロックスが指定できるんで、ま、そこでこう見る病をこう指定してあげると、ま、その時間だけこう。はいはい、は

Guest 06:51
れるみたいで。ああ、なるほどなるほどなんですね。

Guest 06:53
これは、なんか、セットタイムアウトでやってるやつのラッパーみたいな形で、ま、そのなんでしょう。自分たちで設定する必要がなくて、宣言的だけど、まあそことは真空されてないcssは真クされてないそう

Guest 07:06
ま、ある意味シンプル。なるほど、なるほど、

Guest 07:08
リアクトっぽい感じはしますよね。なんか、なんでもやってくれるっていうよりは、ちゃんと1つのライブラリが1つの機能を持ってる感じはしますね。

Guest 07:17
そう、そこら辺が定番のトランディションあるライブラリですかね。

Guest 07:26
これは、あ、ステートステートっていうのが渡ってくるんですね、プロップス

Guest 07:32
これはあ、そっかあ、そうですね、そうですね、トランジションとcssトランジションっていう2つありまして。なるほど、なるほど、そのえ、クラスメがつくのがcssトランジション、

Guest 07:42
普通のトランジションの方はあると、はいはいそうです。あの、チルドリンがあれ、関数を

Guest 07:48
あ、タイプの形ま、単純にそのあれですよねAPIの形の違い

Guest 07:53
はいはいはいですね。

Guest 07:55
でま、ステートの中にこう、今どういう状況態かっていう

Guest 07:59
からって感じですね。ああ、なんかじゃあ、ステートとして文字列で渡ってくるんでま。それを活用して、なんか処理をしたいっていう場合には、トランジションを使うのがよくて、単にま

Guest 08:08
クラスターたちだけでいいんだったら、まあ、その自分でわざわざ細かいことやるよりは、シストランションでやってしまった方がいいって感じですね。

Guest 08:15
なんで、まあ単純にアニメーションつけたいなって思ったら、多分cssトランジション使う方がまあ、シンプル

Guest 08:22
ですね、結構今もこれ使ってたりしますか。

Guest 08:26
そうですね、やっぱりこう

Guest 08:28
なんていうんですか。普通のトランジションとか、アニメーションでできないっていうのが、その要素のあの出現と消滅がせい、はいはいっていうとこそこだけです。そこをまやるためには、やっぱりこういうジェース側のなんか、アプローチが

Guest 08:43
必要かそうですよね、で

Guest 08:45
ま、例えば最近やったやつだとこうなんですかね。ページの繊維のアニメーションつけたいみたいな。はいはいはい、あったりするじゃないですか。例えば、その

Guest 08:54
こう普通にこう実装すると、ページの切り替えってぱって切り替える。

Guest 08:59
そうですね、パッと切りがありますね。

Guest 09:00
それをま、例えば、こうフェードインでこうわってページ遷移したりとか。はいはい、あと、もっとこうisっぽくこう。

Guest 09:10
ああいう感じのやつを

Guest 09:12
やりたいってなったら、やっぱりこういう制御がするとできますよね。2つコページをレンダリングしてで、まあ上からこう次のページのはいはい

Guest 09:22
えども被せるみたいなかせるみたいな、はいていう感じで、まあ大活躍したって感じですね。

Guest 09:32
ちなみに、ちょっとそれ話それるんですけど、上から新しいページかるの実装するのって難しくないですか。

Guest 09:41
難しいですね、

Guest 09:42
なんかただのそれこそルーター系のライブで使えなくなるじゃないですか。まあ、使えなくはないけれども、使うのめちゃめちゃ難しく、あ

Guest 09:49
だったかな。確か、リアクトルーター一緒に使いましたねリアクトルーター使ってはいでえそうや、

Guest 09:58
多分そのまで来たから、多分そういう機能が。

Guest 10:02
はい、多分あったあったはずです。

Guest 10:05
ですけど、はい、そうですね、なんか、やっぱりそのそれを実現しようと思ったその2つ

Guest 10:11
ページを用意。そうですね、用意しないといけないから、まあ、必然的にこう軍隊系のあり

Guest 10:17
欲しいですよね。まそうっすよね、いや、なんか結構難しいよな、難しい。

Guest 10:22
いや、なんかそれみんな作りたがるじゃないですか、やっぱ、こうシュってなってほしいんでけど、みんなそれ作りたいけど、作るのはむずいよなといつも思うんですよね、

Guest 10:31
難しいですよね、うん、なんか最初から最初に作るときにか

Guest 10:36
あ、そうですよね、それ、ありきで作っておかないと。もうぱっぱって切り替わって、そのそのページが描画された時の初期化処理とかが大量にある状態だと、もうできないじゃないですか。できないというか、まあ、めっちゃ頑張らないと。

Guest 10:50
いや、なんか単純に気合が入りそうな領域ですよね、この辺は

Guest 10:54
ここはどうなんですか。理由とかやと、うまいことやってくれたりしたら

Guest 10:59
嬉しい。ああ、私はいつも嫌いになりたい。なんか、なんで上手いことやってくれるやつなくないみたいな気持ちで結構いますね。

Guest 11:08
なんか、あるんですかね。そういうの

Guest 11:10
ページ戦に特化したアニメーション

Guest 11:13
ベーションのライブみたいな。多分、自分でbcsでやるなら、bcsって、結局、ビールーター以外に、ルーティングの

Guest 11:20
ウェイマークの選択肢みたいなんてないんで、

Guest 11:26
機能としてはなんかなかった気がするが、まあ、なんか

Guest 11:30
あのページ繊維のトランジションみたいな自体は確かあった気がしてて、なんかだからなんでしょう。

Guest 11:37
あの、カード型uyがフェードアウトしてから、新しいカードのページがフェードインするみたいな気がするんですけど、2つ同時に見せるのはなかった気がするんですが、あんのかなみたいなま、それやってる人がいたら、知りたいなぐらいの

Guest 11:52
ですね。ちなみに、なんかもう1個聞きたかったのが、実はこの話ちょっととろうと思って、とる前にtwitterで、

5. react-spring が便利な話 11:54

Guest 12:01
なんかbugsはアニメーションがあるから、まあ、なんかそれ使ってるんだけど、リアクターの人ってまリアクターよくまみ、大体のもの、自分たちでギル選定してると思うんで、何使ってんの。みたいなことを書いたら、

Guest 12:13
あのリアクトスプリングがお便利だよ。みたいな話を聞いたんですけど、それってなんか自分全く知らないんですけど、ちょっと教えてもらっていいですか。

Guest 12:21
すか、じゃあ、リアクトスプリング紹介。あ、僕結構好きなんですよこれが、

Guest 12:26
それはスプリングレイニングだけなんですか。

Guest 12:29
やっとスプリングつながりで、

Guest 12:31
スプリング繋がりでですね。

Guest 12:35
そうですね、リアクトスプリングはまなんですかね、そのま、cssのアニメーションからちょっと離れるんですね。ほうほうで、え、まじ純粋なこう。アニメーション大材として使うものなんですけれども。はい、

Guest 12:49
今までのそのcssのトランションのこうアプローチだと、なんか、ここの秒数でこの変化をするみたいなのをはい、定義するじゃないですか。はいはい、

Guest 12:58
それとは違ってリアクトスプリングはあのなんですかね。その

Guest 13:02
繊維の動きとかは、ヤトスプリングがに任せてま。この状態から、この状態に移るっていうのだけ、制御する

Guest 13:11
ま、その間の繊維をどうやって制御するかっていうと、スプリングなので、このバネのまい概念を使って

Guest 13:20
ま。例えば、テンションっていうま強さはいとまフリクションなんでこう摩擦力みたいなのと、はい、あとますなんでまあ重さ重さみたいな

Guest 13:29
の3つですね。3つを基本的に使ってこう繊維を。

Guest 13:34
ああ、なるほど決めるっていう

Guest 13:36
やつなんですね。これ、今画面見せてるんですけど、もまはテンションを強くするとこう

Guest 13:41
繊維が早くない。はいはいで、今、摩擦力を強くすると

Guest 13:46
ゆっくりああ、なるほどなるほど、すごいっすね

Guest 13:50
ていうところですよね。こ、これがまあそのやくとスプリング。

Guest 13:55
じゃあ、あれなんすね。なんか、cssでガリガリ書いてるものを繋げるっていうよりは、ほんとに。なんかその設定をどんどん書いていって、それどうしようの。

Guest 14:04
ジョイントだけを自分たちでやっていくみたいな感じなんすね。

Guest 14:08
で、まあ、さすがにこれだけだとまあ、ちょっとしんどいんでま。例えば、こうなんていうか、ユーズチェインみたいなやつだと、

Guest 14:16
ここのスプリングの繊維をま複数つげるみたいな。

Guest 14:21
あ、その今サンプル見てるのだと、ボタンを押すと、えカードが開いてきて、カードコンテンツがしわばばて出てくるみたいな。

Guest 14:28
これは、単体としては、まあ、その開くやつと白いところが出てくるやつと、そのそれぞれの繊維みたいなんがあるっていう

Guest 14:36
ですね。そうそう、そういうそのまあそういう組み合わせみたいなので、ま複雑な感じのやつを作っています。

Guest 14:42
すごいっすね

Guest 14:43
ですね、これはま、結構その今までそのアニメーションをこうどれ、どうやってうまく見せるか。はいは大体こう。

Guest 14:53
レジェック関数でこう指定してそうですね。わってややる時とかはこうこうブラウザのあの

Guest 15:03
ビジ曲線の設定やるっていうあれがすごい今まですごいやってたのがバカバカしくなるみたいな。や、

Guest 15:13
そうっすね、毎回あれっすもんね。あの、まず、イージングスネットで1番近いやつを身につけてきて、キュービックベジェ選んできて、自分よりに調整して出来上がったみたいな、

Guest 15:26
そう、そういう感じ、

Guest 15:27
そういうフローがなくなるやつですよね。

Guest 15:30
いや、なんでまこれ。こういうパラメーターで指定する利点っていうのは、はい、やっぱりその

Guest 15:38
例えばそのデジ曲線だと、例えば、おオパシティだけはこういう曲線で、はい

Guest 15:44
はい、動きは

Guest 15:45
こういう曲線でみたいなのをまそれぞれ指定するみたいなのは、結構大変な

Guest 15:50
大変ですね。

Guest 15:51
調整を続けないといけないんで、まそこら辺とかをもうこういうのを設定しておけば、もう

Guest 15:59
秒数とかも。まあ勝手にやってく

Guest 16:01
うまい具合にはいはい

Guest 16:02
っていうところですね。いや、

Guest 16:06
これはめちゃめちゃすごいっすね。

Guest 16:08
これや、これ結構あんまり薬と関係ない気がするんですけど、普通にjのライブやとして、もし

Guest 16:16
ビのスクリングとかないんです。

Guest 16:22
とかで喋るとイビークラススプリングブートの記しか出ない。そうじゃないんだよなってなります。

Guest 16:31
でもこれめちゃめちゃいいですね、

Guest 16:33
なんかこのあのなんていうんですか。保管関数だけ取り出すライブとか。

Guest 16:39
いや、欲しいっすねの方がいろんなやつで使えてうれ

Guest 16:44
しい気がしますね。

Guest 16:47
いや、でもえ、すごいっすねこれ

Guest 16:50
よかった。

Guest 16:52
いやえ、なんか知ってる人が車内にいてよかったシリーズですね、

Guest 16:57
アクセスプリング使っていきましょうい

Guest 16:59
スプリングいいっすね。私も、リアクトのプロジェクトなくはないんで、やっていきたいなと思いますね。いや、これはめちゃめちゃいいですね。

Guest 17:07
というわけで、ビージのアニメーションの話をする予定から始まったかなんですけど、リアクトスプリングが便利という話にきそうですね。

Guest 17:16
いいんですかね、いいんですよ、いいんですよね、はい、じゃあえそんな感じで決めたいと思います。はい

6. クロージング 17:24

Guest 17:24
えというわけでですねえ、今回はえ、spaのアニメーションま、cssでできるとこはそれでいいんだけど、ま、消えるときに、最後の後処理とか考えると、

Guest 17:33
どうしてもえ、jsとかかってくるねっていうところでま。ビュジエの組み込みアニエーションが便利って話だったり、まあ、リアクトどうなんだっけ。って話をしてたら、ま、リアクトスリーが結構便利そうでしたって話をしてきました。

Guest 17:51
ジャスクリットや、フロントエンドに関する話題について、日々議論が行われております。

Guest 17:55
またですねえ、社内の方で勉強会とか行っておりますので、その中でネタえ出たネタとかでですね。オトキャストで話せそうなものに関しては、

Guest 18:03
何かえ持ってこようかなと思っております。

Guest 18:06
その他にですね。このポッドキャストについて、え、ご意見やご感想もお待ちしております。え、twitterでですね。ハッシュタグえ、シャープut、アンダースコアインサイド、え、シャープUIT、アンダースコアインサイド

Guest 18:17
でつぶやいていただきます。とえ、今後のコンテンツ作戦を参考にさせていただきますので、え、ぜひぜひえツイートでいただければと思います。ということでですね

Guest 18:27
今週はえ、spa開発の時にですね。え、重要になってくるえ、アニメーション周りのえードム操作のをどうやって実装するか、話をしていきました

Guest 18:36
ありがとうございました、ありがとうございました。