ep.4 改めて React Hooks | UIT INSIDE

2019/03/07 に公開1304 views

このエピソードについて

キャスト紹介

@potato4d
@kawasako3
- LINE は2015年入社
  - LINE@ > LINE NEWS > ？
- 前職ではマークアップエンジニア

改めて React Hooks API とは

モチベーション
- Function Component にロジックを追加したい
- 公式には手段が提供されていなかった
- よく使われていた renderProps, HOC どちらもコンポーネントツリーを汚染する問題がある
Hooks は React が公式に提供する Function Component の拡張手段
2月に v0.16.8 で Hooks が出てから現在 v1.6.3

優位性とか

extend や mixin との違い
学習曲線と分業
実用
- form 作るのがしんどい問題
- 複雑なイベントハンドリングの抽象化

hooksを取り巻く環境

ライブラリとして renderProps HOC 両方提供しているものはよくある Formikなど
hooks の提供も検討されているがまだ unstable だったりする
- 自分で書くのは簡単なのでやってみるのもいいかも
今後は hooks ベースで書いて HOC と renderProps も提供するみたいな世界観になりそう

BGM & SE: 魔王魂

採用について

使用素材・クレジット

BGM&SE

音声書き起こし

1. オープニング 00:00

Guest 00:00
それではUITeensid第4回え、やっていきたいと思います。え、まず初めにえ、このポッドキャストはえ、LINEUITsに所属する開発者たちがえ、毎週最新のフロンテドの動向について語るためのポッドキャストです。

Guest 00:14
最新のweb標準の動向から開発、フレーム枠の変遷、またまた、uやuxに関するようなアップデートまで、

Guest 00:20
週のえ、全週までの内容をキャッチアップすることを目的としております。

Guest 00:25
今回はですねUIT所属のジスラーである私は、たと同じくUITえー所属のジェラーである。えと、川崎さんと一緒にやっていきたいと思いますよろしくお願いしますよろしくお願いします。

2. キャスト自己紹介 00:39

Guest 00:39
ではですね、まず、初めに。今回川崎さん初めての出演となるので、え、自己紹介の方お願いしたいと思いますか。さきさん自己紹介お願いします

Guest 00:48
はい、twitterとかでは。えかささんさんって、スリーのさんですけど、

Guest 00:55
とかでやっていて、まあ、別にあの特にそちらでは有益な情報は全くつかないので、特にフォローとかはいいんですけど。

Guest 01:03
LINEは2015年に入社して、え、今3年えですかね

Guest 01:10
働いています。元々は、広告系のちょっと代理店系の

Guest 01:16
ま、ficcっていう会社なんですけど、そちらでえま、カッペンジニアとして

Guest 01:21
働かせてもらっていて、まあ、当時はまあえいわゆるブランドサイトのコーディングとか、まあ、

Guest 01:28
ちょっと変わり種だと、まあ、ご存じの方もいないかもしれないですけど。ま、jpgっていう。まあ、日本の

Guest 01:35
デザイナー向けのポート、フォリオサービスとかがあったんですけど、まその辺の流構築とかを結構やって

Guest 01:44
いて、もっと遡ると、学生の頃はま、それこそイラストレーターの使い方とか、ホットショップの使い方とかをすごいやってて、

Guest 01:52
で、まあ、時代の流れで100とかシとかの勉強もあって、で、ホップボンっていう。

Guest 01:58
ま、当時はテイブルレイアウトはちょっと古くなってきたので、みんなcss書こうぜみたいな時代だったので、まあ、それで結構勉強とかをしていて、

Guest 02:08
で、まあ、LINEはたまたまその著者だった。今の情緒の福島さんですけど、のついた経緯で、ちょっと応募したら通ってしまったという。

Guest 02:20
元々は、デザイナー系のところの。まあ、フォトショップとかっていうとこから入ったみたいな感じなんですかね。

Guest 02:25
ま、そうですね、ただ、それでちょっと手に職がついたかっていうと、全然そうではなくて。

Guest 02:30
まあ、ツールとしては使えるけど、それはデザインができるのはまたちょっと別だと思うんで、まあそんな感じですね。

Guest 02:36
なるほど、ありがとうございますじゃあえ、本日はよろしくお願いしますよろしくお願いします。

Guest 02:42
えーということで、え、今週のフロントエンドの話にえ、移っていきたいと思います。ちょっとですね、今回のユテインサイドでは。実はえ、utインサイドっていうのはえ、今回公開版でやる前にですね。

Guest 02:53
少し社内で話していた企画が、えー企画としてやっていたえ、期間があるんですけど、

Guest 02:58
その時にかさきさんの方がですね。少しリアクトフックえ、最近ちょっと話題になってきている。リアクトックについてえ、話してもらっていたりしましたと

Guest 03:06
で、それについてま、ちょっとえ、その後改めてえ、触ってみたっていうところがあるので、まその辺の書簡とかっていうところを聞いていければと思っております。

Guest 03:15
で、まず初めにですけど、ま、ちょっと改めてリアクトックスっていうのが、まあまだ出たばっかりで、まえ触ってる人もえ、いるとは思いますけど、触ってん触ってない人もいると思うんで、ざっくりと概要って教えてもらっても大丈夫ですかね。

3. React Hooks 改めて概要 03:22

Guest 03:28
はい、リアクトフック自体はまあ、その前に話した時ってのはまだアルファバで16.7に乗るって言われて、

Guest 03:37
開発がされてたんですけど、まあ、結局その時は出なくて、今16.8が2月に実施されて、その

Guest 03:45
時から乗ってる。新しいAPIになるんですけど、まあ、どういったものかっていうと、モチベーションとしては、そもそも関数型のコンポーネントに何かこうロジックステート持たせたいとか。

Guest 03:58
ま、それこそよくあるのは、リダックスのコネクト関数であったりとかま、何かこうロジェクト追加したいって、モチベーションがあった時に、今リアクトだとデフォルトでそれを

Guest 04:07
追加する手段が提供されていなくて、でま、よく実装されてたのは、あのレンダープロップスとか。

Guest 04:16
一応し、ハイオーダーコンポーネントとか。

Guest 04:19
そういったものが、手法としてよく使われてたんですけど、まあ、どっちもコンポレットツリーを汚染するっていう問題が

Guest 04:27
あって、まあ、要するに純粋な。例えば、リストアイテムっていう

Guest 04:32
コンポーネントがあったときに、それに何かステートを与えたいとなったら、上からそのステートを与える。

Guest 04:39
なんか、ラップみたいなコンポーネントを被せてあげて、まあ、もうそれはそもそもリストアイテムって、純粋なコンポーネントではなくなってしまうっていう問題があって、で、まあ

Guest 04:49
元々そういうことするためのリコンポーズとか開発されてた方が、facebookに入社されてま

Guest 04:56
それを公式に提供したっていうのがですね。で、今もう2月に16.8が出て、

Guest 05:06
まだ1ヶ月ですけど、バージョンが3つぐらいがってて、じゅえ

Guest 05:12
16.8.3が今もう出ているというのがま現状です。

Guest 05:18
元々リゴンポーズっていうのは、まあ割とリア高い間はよく使われてたかなと思うんですけど、じゃあ元なるとも結構あれですかね

Guest 05:25
作者的にはもう離婚ポーズではなくて、ちゃんと成長させていこうみたいな感じで、今進んでるって感じなんですかね。開発体制としては、

Guest 05:33
そうですね、あの、foxのまあ、APIの

Guest 05:39
なんて言うんでしょう。仕様が公開された時にも、リコンポーズは今後はメンテナンスとかは。

Guest 05:45
アップデートはしていかないよっていうのは、正式にえ発表されていて

Guest 05:50
ま。今後はリコンポーズが担っていた部分に関しては、フックスに移行していきましょうという流れがあります。なるほど、なるほど、

Guest 05:57
ありがとうございます。いや、結構ま、これからをのま根幹となっていくような書き方にもえ、近づいていくって感じですね。

4. Hooks の利点 06:08

Guest 06:08
ま、そんなリアクトfxえがあるかなと思うんですけど、ま、結構え、パッと見の見た目だったら、今までと変わんないじゃん。みたいなところとかま、それなりにあるかなと思うんですけど、ま、そういったところでま、ちょっと

Guest 06:19
え。実際どういったところが良かったんだっけ。みたいなところとかから聞きたいなと思うんですけど、なんかえ教えてもらっても大丈夫ですかね。

Guest 06:26
そうですね、まあ、いくつかあると思っていて、そもそもその

Guest 06:34
外からそのロジックを追加するとか、まあ、そのロジックをちょっと分離して、

Guest 06:40
コンポレートで使います。みたいなところだと、例えばまクラスベースだと、軽症エクステンドを使ったりとか。まあ、

Guest 06:47
ビュートからミックスみたいな機能もありますけど、ま、その辺と何が違うかっていうところの

Guest 06:53
話だと、エクステンドとか。ミックスインって、基本的にはコンポーネント

Guest 06:58
まあ、悪い方すると汚染するんですね。コンポーネントに対してあるプロパティを与えたり、メソットを与えたりっていう考え方だと思うんですけど、

Guest 07:06
フックスの場合はどっちかっていうと、フックス側がステートを持っていたり、コールバックを持っていて、それを返すみたいな形になっていて、かなりコンポーネントとちょっと

Guest 07:16
素結合になっているというのが1つあって、でま、そういった点でなんて言うんでしょうね。あの、

Guest 07:25
例えば実用的な例で言うと、まよくあるスライドショーを実装したりとか、

Guest 07:33
なんか、その要素をドラックしたときに、何かの許したいみたいな。タッチイベントをハンドリングするときって、結構自前でやると、最初に触った位置を取っといて、

Guest 07:43
動かした位置を取っておいて、話した時、え、どのくらい移動したか、どっち方向に移動したかみたいな計算して

Guest 07:50
で下手するとま、画面外にカーソルを行かせると、タッチエンドが発火しない場合があるんで、その辺のケアをしたりとか

Guest 07:57
ま、そういう実装を結構よくすると思うんですけど、その辺を結構抽象化して、フックの中に入れてしまって。ユーズタッチ、ムーブ

Guest 08:06
イベント、ファンドラーみたいなのを呼び出したら、そのフックがそれぞれの必要な。コールバ。

Guest 08:14
イベントリスナーに登録するようなコールバックを返してくれて、で、それを書く。コンポレントに割り当てて使うみたいなことが

Guest 08:21
しやすい。これは、ミックスインだと、例えば、それをやりたいのは2つあった時に、20でその

Guest 08:28
プロパティとかをアすることはできないので、どう実装するんだっけみたいな。そこにミックスインで渡すプロパティを動的に、

Guest 08:35
なんかプレフィックスみたいな形で渡せるようにするとか、結構その辺の実装は複雑になるので、ま、そういう点でちょっとはいい性がありそう。

Guest 08:44
やっぱあれっすかね、

Guest 08:46
それって、まあ、例えば今までって割となんでしょう。データフロー的なドメイン的な部分と、ビューのとの部分は、ちゃんとフロップスで、まあ、リラックスからすとで渡しましょうよ。みたいなところで、切り分けみたいな話してたと思うんですけど、まあ、もっとなんでしょう。

Guest 08:59
ミクロというか、その有愛的なパーツであっても、まあ、こう機能的な部分とダメを分離するっていうところがまやりやすくなったというか、

Guest 09:07
まそれぞれです。結合にしやすくなったって感じですかね。

Guest 09:10
そうですね、まあ、前話した時もちょっと話してましたけど、多分分割統治みたいのがしやすくなるんですね。ここ

Guest 09:18
そうですね、はい、確かにその辺は合いそうかなという気がしますね。

5. Hooksをどのような場面で使っていくか 09:28

Guest 09:28
ちなみに、その実際じゃあ、そう

Guest 09:32
使っていくにあたっての優位性みたいなところとかって、もう少し深掘りしてはえ、実例とか聞けたりとかしますかね。イメージするものとかって、

Guest 09:40
あ、そうですね、僕がまだちょっと会社の案件では使えてないんですけど、個人的に作ってみたのは。ホーム

Guest 09:49
リアクトでフォーム作るのめっちゃ辛いみたいな話あるじゃないですか。

Guest 09:52
ありますね

Guest 09:53
で、これフック使うトすごい簡単にできて、

Guest 09:57
今までってフォームまコントロールプル。コントロールされてるフォームを作るには、まず、その

Guest 10:07
フォームの値をステートコンポーネントに対して単一のステートに、まあ、例えばドットフォーム、

Guest 10:16
ドットネーム、ドットメッセージみたいなのを入れて、管理する必要があったんですけど、フック使うとその

Guest 10:25
ユーズフォームみたいなとこの中に中でユーズステートを宣言して、で、そのステートはもう完全にフォームの値だけが入るステートで。

Guest 10:33
そのステートも当然返すし、例えばオンチェンジ、ハンドルオンチェンジみたいなハンドラをその服装の中に作って返してあげて、

Guest 10:43
で、それをま、例えばインプットのコンポーネントに登録してあげると、

Guest 10:48
フック側で内部的にク側で宣言されてるステートの値が書き替わって、

Guest 10:54
で、今度数側にオサブミットみたいな渡してあげると、ホームがサブミットされた時に、

Guest 11:00
まあ、そのステートに入ってる値を引き数に渡して、コールバック読んでくれるみたいなものがすごく簡単に作りやすい

Guest 11:08
し、それを作っとけば、どこのコンポーネントでも、そのコンポーネント改造することなく、フォームをアタッチできるので、すごい便利ですかね。

Guest 11:17
確かにそうですね、結構今まではその辺はまあ上昇というか書きづらいですしかつまあその辺の都合もあってなんでしょう。結構、

Guest 11:27
リラックススリーに全部載せようぜ。みたいな話になりがちだったと思うんですけど、まそこがうまくぜうまく隠蔽されることによってまユズみたいな形で隠蔽されることによってまその辺

Guest 11:37
ですよ。書き心地的にも書きやすいし、会話的にもちゃんと分割統治やしやすいみたいなのもありそうっすよね。

Guest 11:43
そうですね、まあ、あとなんかちょっと別軸なんですけど、分離みたいな文脈で言うと、あのなんだろう。

Guest 11:52
フック使う場合のリアの学習曲線って、またちょっと通常の根本。クラスベースのやつと、また違う

Guest 12:01
学習曲線があって、何かっていうと、今までって、そのレンダープロップスとか、hocを使う場合って、その

Guest 12:08
コンポーネントツリーの汚染っていうのがあったので、例えば、純粋にh1があって、pがあって

Guest 12:14
ていうところに何か機能的なものが入ってくるんですね。例えば、有名なやつだと、リアとドラッカブルみたいなドラックできるようにしようってなった時に、そのpをドラッカブルみたいなコンポメントでアップするんですよね。でも、それって

Guest 12:26
ドムとは別に1対1ではなくて、その機能アタッチするために、そのコンポレートツリーが汚染される

Guest 12:34
で。ただ、フックを使う場合は。今までそのコンポーネントでアップしていたところを連打。

Guest 12:41
jxを返す前に呼び出して、例えば、そのpという要素をブラックブルにするんだったら、そのpコンポーネントの

Guest 12:51
プロプスとして必要な例えば、オンタッチムーブとか、オンタッチスタートとかを

Guest 12:57
渡してあげるみたいなことはするので、できるので。例えば、

Guest 13:02
デザイナーの人でロジックとかはちょっと書けないけど、もまjxぐらいだったらほとんどいてみるし、書けるよみたいな人が、とりあえず、その

Guest 13:09
jxの見た目だけをコーディングして作って、それをえプロジェクトかを書くのが得意な人が受け取って、

Guest 13:17
あとからそのロジックを足していくみたいな。やり方がすごいし、やすくなるし、それを作った後に、じゃあ、ちょっとこ。このデザインを変えたいとか、順番を変えたいみたいな時に、すごい入れ替えやすい

Guest 13:29
ていうメリットが結構あるかなと思ってます。

Guest 13:32
なんか、結構あれですよね、聞いてる感じだとあれですよね。こう

Guest 13:36
なんか、割とビーレスとかって、そういうところで指示されていたみたいなのがあると思うんですけど、なんか、その辺のライトさんを持ちつつも、ちゃんとリアクトらしい書き方というか、剣朗な書き方というか、がしやすくなるようなイメージは

Guest 13:47
1点以上あるかなって感じがしますよね。

Guest 13:51
じゃ、結構あれですかね、今回のえ、フィックスによってま。その分業みたいなところも、前よりはやりやすくなるかなって感じがするってことすかね。

Guest 13:58
そうですね、まあ、最近あとスタイルドコンポーネントとか、あの、リアクト内でも、あのジェジェイcssみたいな。逆かcsseで

Guest 14:10
みたいなのがやりやすくなってたりもしますし、まあ、そもそもあんまりなんかそこのjtcss結合したくないみたいな話だったら、

Guest 14:20
まあ、シシスモジュールとか伝統的な方法も使えるし、まあ、結構やりやすくなるんじゃないかな、という風に思っております。

Guest 14:30
結構まあ、期待が持てるって感じですよね。そうですね、まあ、そんなリアクトフックですけど、

6. 周辺ライブラリの対応状況 14:36

Guest 14:38
そうっすね。ま、今までえとはいええ、結構ま公式のドキュメントとかえ。でも、今までのものと

Guest 14:45
えこう壊れるわけではないというか、まあ、破壊的変更があるわけではないんで、まあ、インクリメンタルに使っていくといいよみたいな話がえ、結構個式のドキュメントとかにも書かれて

Guest 14:54
たかなと思うんですけど。まあ、自分たちのプロダクトはまあ、徐々にフックに移行するとして、まあ、もっと周りというか、まあ大局的に見るとまあどんな感じに事情変わっていきそうですよね。例えば、まあライブライ的なとこがまあ、今まで

Guest 15:08
そのフックがない時代のものっていうのを前提にしてたのがフックに変わっていくのか、ま、それともそうではないのか、みたいなとこって現状とか。もししたりしたら、その辺も組み合わせて聞きたいなと思うんですけど、

Guest 15:19
なんかご存じですかね。

Guest 15:21
ま、今その周辺ライブラリ的なところで言うと、まだステーブルのアバージョンで、ユーズワンとかを提供してるものってのはそんなに多く

Guest 15:30
なくて、まあ、有名なところだと、リアクトリダックスとかは、まだ内部的な実装の書き換えま。

Guest 15:37
それをやるために、v6リダリアトリダのv6で、あのコンテキストリダリアとリダックが内部的に持ってるコンテキストを

Guest 15:48
陰法としてま。フック的には、ユーズコンテキストを使うと、今まで一応

Guest 15:55
形式で受け取ってた。ニスパッチ関数とかまあ、ステートとか受け取れる。

Guest 16:00
まあ、口だけ作ってある準備はされてるんですけど、まだ提供されてないみたいな

Guest 16:05
状態で、まだちょっとそういうライブラリで、あの、実際に使っていくみたいな。難しいんですけど、また、だ

Guest 16:13
まどのライブやりもそういう準備は全然進めていてま。さっきのリラックスの例で言えば、それをユーズコンテキストつかするして、自分で一応しか一押しじゃないやえ、服装を書けば

Guest 16:23
使えるみたいな状態なので、ま。それをちょっと一旦自分で書いてみても、使ってみるみたいなのは、全然できると思います。なんか、個人的には、

Guest 16:32
コンポーネントのま、ステートは、プロップスで受け取るんだけど、ディスパッチだけしたいみたいな

Guest 16:41
モチベーションがたまにあって、まあ、例えばええなんだろうな。うん、それこそなんかチャットボックスみたいなやつで、

Guest 16:51
チャトにまあ、今入力されてるみたいなやつはま、親のチャットアプリ、コンポネットみたいな、そのメス

Guest 16:59
なんだろう。メッセージのタイムラインとかも一緒になってるコンポレントから受け取るんだけど、でも、なんか親からオンサブミットみたいな、受け取ってみたいなめんどくさいので、

Guest 17:08
ま、そのココンポーネントで好き勝手にディスパッチしたいみたいなモチベーションの時があって、なんでユーズディスパッチみたいなだけ書いて

Guest 17:14
ま。それが内部的に何知ってるかって言うと、リラックスのディスパッチを叩いてるだけのhocみたいのを1cじゃないや、hocって言っちゃうね。これ、マルクスを書いて

Guest 17:27
使うみたいなことは結構してます

Guest 17:30
確かに、その使い方は割とありますもんね。実際スケスケートまでまフルフルで降ってくることは要らないけれど、ディスパッチしたいってのは結構あるかなと思うんで、

Guest 17:39
確かにそういうとこでも良さそうですし、まあええそうですね、自分たちのアプリケーションだけじゃなくて、ライブラリ的なとこもまだんだんなんでしょう。イングリメンタルにというか、まあ自分で

Guest 17:49
書いてま3つ無視。それが貢献できるなら、まあ、オープンソース的に貢献してもいいし、みたいな感じですよね。

Guest 17:55
そうですね、多分今だから結構チャンスでなんかいろんなところでこの対応が始まってるので、

Guest 18:01
あのまだ対応されてないもの見つけて対応して、まあ、クエストを送ると多分マジされるあと、逆にそれがされない。

Guest 18:11
あの、ライブラリアこのタイムでちょっと死んでいくんじゃないかな、みたいなのは、ちょっとありますよね。

Guest 18:17
結構変わっていくパラダイムに対応するライブラリかどうか、みたいなのをちょっと見分ける

Guest 18:22
そうですね、このコンポレート使っていいかな。みたいなのを判断するときに、そのリポジトリでフックとかユーズなんとかって検索してなかったら、

Guest 18:32
あ、ちょっと危ないかもなっていう、

Guest 18:35
そういうのにも使えそうですね。あ

7. クロージング 18:40

Guest 18:42
えということで、えと、今回はえ、川崎さんえにですね。ま、リアクトフックについてま、軽く触ってみた書簡みたいなところをえーお聞きしました。え、

Guest 18:52
LINEuティッシュはですではですね、毎週のようにですね。フロントエンドについて、えーティのエンジニアたちが議論するためのえ、ギットハブイ州とえと勉強会が行われております。

Guest 19:03
ま、例えばですね、ギョンについてではですねま、他にも今週え、話題が3つぐらいあってま。例えば、サファリのえークのえ、有効期限がま、セキュリティ的なたまトラッキング防止みたいなところでま。短くなるかもしれない

Guest 19:16
いうところだとか。まあ、ウェブアセンブリーで、あの正エンジンの見車がえ、実装されつつあるみたいな話とかまちょっとタイムリーな話で言うと、ノードジェースにちょっとぜ弱性があったんで、ま、ちょっと

Guest 19:27
え更新しないといけないかな、みたいな。ま、結構うちとしても、ssrの事例とかあったりするんで、まあ、気になるところではあったりとかしたっていうところでございます。

Guest 19:37
まあですね、勉強会の方ではですね。ま、ちょっとリットエレベントな話があったりとかっていうとこで、まあ割とフロントええま。フロントエンドのフロントエンドという

Guest 19:44
か、まえーウェブ的なウェブ標準的な話もある。あるかと思えばまえ、バックエンドのノードジェイスの話もあったりってことで、ま、結構面白い。えー種だったかなと思います。

Guest 19:54
またですね、今ちょっと上げたような話題については、タイトルとえリンクっていう形でえ、シノートの方に貼っておきますので、まご興味のある方は、ぜひぜひ見ていただければと思います。

Guest 20:05
今週のUIT INSIDE第4回。リアクションクについてっていうところは、以上でさせていただきたいと思います。

Guest 20:13
今週はですね。私はたとえー川崎さんの2人でお送りしました。え、ありがとうございました、

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