音声書き起こし
1. オープニング
@spring_raining
こんにちは、UITの玉田です。今回も、UIT INSIDE を始めたいと思います。
テンサイドは、ユーザーインターフェースと、テクノロジーを愛する開発者のためのポットキャストです。
最新のウェブ表示の動向や、開発、フレームワークの変遷、
@spring_raining
urやuxに関することまで、毎週フロントエンドの情報を発信していくことを目的としています。
今回はですねえは、谷さんとお客さんとえお呼びしました。で、 この3人で、えはタンスタックについて、今回は取り上げていこうかなと思います。それでは、お2人よろしくお願いします、
@potato4d
よろしくお願いしますよろしくお願いします。
2. TanStackについて
@spring_raining
はい、ではですね、今回のテーマであるタンスタックなんですけれども、まず、 タンスタックとは何ぞやということだと思いますので。これについて。じゃあはたさんちょっとお伺いしてもよろしいでしょうか。
@potato4d
はい、了解です。実は今回、私の方からこの話がえしたいっていう風にえ、時間取らせてもらって、 ちょっと概要の説明からさせてもらいたいなと思います。
タンスタックっていうと、えがもしかしたらピンと来ない人もいるかなと思うんですけど。またナさんっていうまリアと関連のライブラのえ、開発者の方がいらっしゃってま、その人が
@potato4d
え。メンテナンスしているライブの総称っていう風な形となっています。結構ですね、実際の開発に沿った おかなり筋のいいライブラリをえ、よく提供されているような。方でしてま。それらのツールをまとめて探索 っていう風なボラデーションですかね。ギターブのオバネゼーションであったり、専用のエタンスタックドットコムっていうウェブサイトとかでまとめられたりしているま、技術スタックの総称を指します。
@potato4d
で、具体的にはですね。5つぐらいのえ、ライブラリがえ属しているんですけど。今日語るプラスなんか、皆さんが触る機会も多いと思う。プラス触ったことがある方 も多いかなと思うのが、リアクトクエリーとえ、リアクトロケーション。え、最近出たやつですね。リアクトションの2つかなと思うので、今日はそのあたりのこう 割と筋の良さげと感じるリアクトライブラリー州タンク作について話せればなっていう感じで来てます。
@spring_raining
はい、ありがとうございます確かにあれあれですよね、そのたタンスタックっていきなり言われたら、ピンと来ないかもしれないですけど、リアクトリアクトロケーションならあ はあれですね。みたいな感じ。
@potato4d
あ、そうそうありますなんか ちなみに、同じそのタンスタックの中には、リアクトチャーツとかもあるみたいで。なんか、元々、あのターナーさん自身がチャートゼイジェースの会社でもあったらしくて、なんかそういうのにも結構造形がはい、深いみたいですね。あ、なるほど、 ただ私は使ったことがない、
@spring_raining
結構あれですね。5つ見てるんですけれども、ほんとにどれもなんてすか。基本的というか、 汎用性の広そうなライブよりばっかり
@potato4d
っていう感じで。そうですね、なんで今日はそこについて語りたいなとか思ってます。
@spring_raining
はい、ではよろしくお願いします、
@potato4d
お願いします。リアクトクエリーの話からしたいなと思うんですけど、あ、ちなみにさんとかあの、 たださんとかって、普段リアとエリ使ったりとかしてます。
3. React Queryの話
@spring_raining
そうですね、私はどちらかというとエダミ、アルハ。
@potato4d
ああ、なるほどなるほど、じゃああの座ったことがないみたいなわけではないけど、ま、そんなにこう普段から使ってるわけじゃないみたいな感じですかね。
@spring_raining
そうですね、あと、さらに言うと、業務だと結構もうほんとに最近美
@potato4d
を使うことがなくて、
@spring_raining
なんでさらに使う機会が少ない。正直、あんまり使ったことないかもしれないです。あ、
@potato4d
そうなんですね、なるほど、なるほど、
@spring_raining
ただあのswrとの比較とかはまあできるかなとは思うので、ちょっとまそこら辺から話せるかなっていうところですね。
@potato4d
うさんの方は、なんか使ったことあったり、普段使ったりとかしてます。
@uhyo_
リアクトクエリは多少使ったことがあるくらいで、個人的には、実はそんなに積極的に選んだりする感じでは
@potato4d
ないです。あ、そうなんですね、なるほど、なるほど、
@uhyo_
だからとユズエラブラムを選ぶとかじゃなくて、割と なんていうか、自慢で済ましちゃうというか、あんまりリアクトクレディーをものすごい使いたいってなるような、複雑なシチュエーションに出会ったことがないというか。
@potato4d
なるほど、なるほど、触ったことはあれで、別に普段こうヘビーに使ってるってわけじゃないっていう感じですかね。
@uhyo_
そうですね、
@potato4d
なるほど、じゃあ、今日はなんかその語のこうあえてこう使わない話であったりだとか、どういう時に使うかみたいな話でいけるといいですかね。
はい、じゃあ、なんかリアクトクエリについての概要とかから話した方が良さそうですかね、
@spring_raining
それがありがたいかもしれないです、
@potato4d
はい、了解ですえ、そっからはい、話していこうかなと思います。
結構ですねリアクトリーえhのトの方にurlも貼っておこうかなと思うんですけど、まかなりシンプルなリアクト 専用のhtpクライアントみたいなえーものになっていてま。一応、リアクトネイティブも対応してるみたいなんですけど、ちょっとこっちの方は使ったことないんで、あくまでもリアクトっていう話
@potato4d
にできればなと思うんですけど、まあなんでしょう。フックベースのえーま、よくあるhtpクライアントっていうのが、1番 わかりやすいですかね。っていう風なえものになってますと、ま、なんで。クエリのクライアントみたいなのを、まず 作るところから始まるアシスとか使ったことある人はわかるかなと思うんですけど、アクシスとかもそのまま叩く場合と、アスクリエイトとかで、専用のクライアント作る場合があるかなと思うんですけど、リアクトフェリーについては、
@potato4d
基本的にクエリクライアン作ってま。その生成されたクエリクライアントのインスタンストップから。クエリオ うまく呼び出してみたいな形でまえー使っていくhtpクライアントのライブラリになってます。っていうところとなります。
で、結構なんか個人的にいいなって思っているのは、なんかあのswrとかもそうなんですけど、
@potato4d
リアクト、えクエリいいなと思ってるところで言うと、まあ結構こういったクエリhdpえ、リクエスト系のライブラリー全般に言えることかなとは思うんですけど。やっぱりうまい具合に htdp通信の状態管理みたいなところをこうえ、異常しつつこう。賢く キャッシュ戦略であったりをやってくれるっていうのがえ、大きいプラス、こうえ、そういった概念をえ、広めたっていうところまで含めて結構
@potato4d
え貢献したっていう部分があるのかなと思っていて、なんかこう現場においても、それをデファクトとさせるだけの力があるっていうのが、なんか結構こういったえ、ライブラリの良さかなと思ってます。
なるほど、なんで、結構これはかなりこう持論かつ、なんか賛否の分かれるところかなと思うんですけど、なんか、spaを作る機械 において、
@potato4d
なんかおおむね。重要であるとこって、コンポメント、ディドマウントの中で、htttリクエストと、あのググラナリクスであったりのトラッキングにデータを送るとかいう処理が。あ、 あの、ウェブアプリケーション開発のうち、4割5割ぐらい占めることってよくあるかなと思うんですけど、ゆ作る以外の部分で言うと、 なんかそういうこう品質する部分が、そういったところって、例えば歴史的にはなんか
@potato4d
昔は全部リラックスに乗せてみたいなお業なことやってたりとかして、あの、あんまり筋の良くないやり方。なんか、 あの、やりたいことは、ectpリクエストをうまくキャッシュしながら、高速にデータをフェッチしたいっていうだけの要件なのに、それに、トゥーマッチな気法っていうのが、世の中にはびこっているっていうのが 結構これまでも長くあったかなと思うんですけど、なんか、このフック時代に適したコンポーネントで分割投資ができて、かつそこに対してこう副作用を意識え、あまり強く意識しなくていいえ、書き味で
@potato4d
あのりエリクエストを表現できるっていうのが結構このえーリアクトクエリーの良さなのかなと思ってます。とま、swrとかもそうですけど、こういったフェッチクライアントってのを自分たち でこう。なんか頑張るよりも、外部に異常してやれる良さなのかなと思ってて、なんか結構個人的にはそこをこう強く評価して、 自前とかじゃなくて、こういうの使ってるっていう感じではありますね。なるほど、
@potato4d
なんか結構結構個人的にあのあれですね。 あの、リアクトが結構え、ファンクションファンクションベースになる前に、クラスベースだった時代とかもあるかなと思うんですけど、あの、あの辺りからあの関数ベースに変わってってなっていくときに、まそこの あのペインポイン生まれるペイントポイントみたいなところの解消をこう
@potato4d
全部リラックスに寄せようぜ。みたいなんであったりとか、トゥーマッチな解消えか、問題解決の方法をすごい多くやっていたかなと思っていて、 なんかただ結構フックスみたいな概念も出てきて、かなりこう。あの、誰でも簡潔に え、関数ベースで、独自の機能のえ、拡張とかができるように。まやえ。前までできなかったわけじゃないが、よりやりやすくなったことによって、なんかこういった
@potato4d
こう。筋のいいえ、状態の管理方法みたいなのが、こう浸透したのかなと思っていて、なんか個人的にはすごい 略。トエリはそういうこう技術的なところは、もちろん、この書き方っていうのをディファクトにするっていう影響を与えたっていうところまで含めて、なんかすごいいい技術だなと ってるっていう感じですね。
@spring_raining
なるほど、なるほど、ありがとうございます
@uhyo_
確かにそうですね、リアフトクリリーのあのインターフェースって、結構フロントエンドの人だったら、 あ、ユーズクリじゃなかった。リアフトクエリのあの、インターフェースって言ったら、結構通じるんですよね。具体的に言うと、カリがオブジェクトで、データとローディングとエラーがあって、しかも タイプスクリプトでいい感じに片付けされていて、ああ、そうです。そうです、そうですね、リアトリ使ってなかったとしても、似たようなインターフェースを自前で作っちゃったりする人は、まあ、自分も割とそうなんですけど、結構多いと思ってまして、それくらいに
@uhyo_
まさにデファクトスタンダードになったっていうんですかね。あの、インターフェースが、それには、やっぱりリラクトクエリーの功績も結構あるのかな、という風に自分でも思って
@potato4d
ま。そうですね、なんか、私は結構そこを強く評価してますなんかなんでしょう、あの、モーメントは使えないけど、モーメントって言ったら、通じるみたいなもんで
参加者 4
ようなものなん
@potato4d
とか思ってますね。
@spring_raining
リラックスそう、ほんとに使わなくなりましたね。
@potato4d
そうなんすよね、ただ、なんか結構私の今の実はプロジェクトだと、まだあの全部のデータリラックスに入れてるプロジェクトが社内のやり方あったりして。
いや、あの、そこが禁煙でこう状態管理がすごい大変になってる子がちょうど今週も現れて、 ああ、リアクトクエリーとかにしたいならしました。
@spring_raining
あ、あの、多分あの1番その良いところっていうのは、私はその なんていうんですかね。その状態管理と、そのフェッチのなアクションをこう組み合わせるっていうところが 1番良かったっていうことは。だと認識していて、まあまあ確かに私はリアル
@spring_raining
をよく使うっていうだけなんですけれども、まその面では全然。あの、どちらともすごいいいライブラリーだなとは思いますね。
@uhyo_
状態管理の種類みたいな議論ができるようになったのも、まさにリアクトのフックが登場したいからだな、という風に思うんですね。
@potato4d
そうっすね、
@uhyo_
服によって、まあリアクトの状態がま融通ステートで作られるものみたいになって、で、融通ステートをカスタム服に組み込めるようになったことによって こう。なんか、表面的に我々はステートと思ってないけど、内部ではステートを使って、いい感じに管理してくれてるみたいのが、まさにリアフト入り。でも、 uswrでもやってくれてることだと思うんですけども、そういう新しいインターフェースができるようになったリアtfxによって、
@uhyo_
まあそれを象徴してるのが、リアクトクイリのこのインターフェースなのかなという思いますね。だから、 昔今もあると思うんすけど、facebookのリレーって
@potato4d
だった。じゃあ、ありましたね、はい、
@uhyo_
あれをfacebookがま、今はもうメタですけど、い出したくらいからこう。なんか、 ステート管理っていう概念から、このactpクライアントというか、その部分が分離されたその流れに まあリアクト入りとか、その辺もあるのかなという風に思ってます。え、確かリレーっていうのも
@uhyo_
なんでしたっけ。リアクトが、2019年の終わりくらいに、なんかコンカレントモードとか言い出して、 結局今それがやっとリアと18のrc版とかも出てて、もうすぐステーブルになりそうなところなんですけど、コンカレントモード をさらに活用する手段として、なんかリレーみたいなのが出てきて、その長中の中にリアクトクエリーとかがあるっていう風に考えると
@uhyo_
ね。このリアクトクリのこのインターフェイスっていうのも、実は密かになんでしょう。リアクト18に出てくる、そのコンカレントリンダリング に対応するように、エコシステムが向かうっていう実は、その方向にも貢献しているのかな、というような思いもありまして、 それが個人的には密かな評価っぽいな。
@potato4d
あ。うん、うん、そうですね、なんか個人的にそこ私もあえて、そこが実はライブラリを使う。え、糸のええ、美容にモチベーションになり得るのかなとか思っていて、なんかというのも、本当にトレナリングとかの話が え、出てきたことによって、こう結構なんでしょう。例えば、エグザクトリーワンスであることを前提として書かれているリアクションのユーザーフェクトと とかって、現場にめちゃめちゃいっぱいあるかなとは思うんですけど、多分そういうこう、あの、将来的なコードベースで壊れるような書き方をしているhtpリクエスト
@potato4d
の記述方法って、多分今すごいたくさん世の中に溢れ返っていて、多分そういうところって、hdpリクエスト1つ取っても、なんかバグの音声に なり得るし、多分分かる人が書かないと結構問題になりやすいコードなのかなと思っていて、なんかそういったところって、 なんかこういった。リアクトフェリー。もちろん、エリアもそうだと思うんですけど、こう
@potato4d
ある程度しっかりとしたこうコーディングがなされているって言ったら、ちょっと変な言い方になりますけど。っていうところ もあって、なんか、将来性みたいなところを含めても、そのリアクトの進化に随分に追従できるっていうのもいう安心感もあるかなっていうところも 感じていたりはしますね。個人的には
@uhyo_
そうですね、確かに、その辺の面倒な部分をライブが吸収してくれるってのは、非常に大きくて、 まあ、うそぶどのライブだと、ちょっと心配なところもあったりするんですけど、そこは信頼のタンスタックっていうこと。
@potato4d
そうっすね、かなとは思ってますねただ、あれですかね。あと、swrとの比較みたいな話で、ちょっと もう話しましょうか。せっかくですし、そうですね、 なんか、私逆にswr軽くしか触ってないんですけど、なんか、た田さん的にswrのこういうところが気に入って使ってるみたいなのってあったり。
@spring_raining
そうですね。あの、これはあの swrvsリアとクルでググった記事を適当に読み上げるっていうところ。あ、
@potato4d
全然。はい、
@spring_raining
あの、そうですね、ま、細かな思想の違いは確かにちょっとあるんですね。あの、例えば swrはその同じulから取れる情報っていうのは、まあ 大体同じっていう思い込みがああります。うん、うん、うんうん、大体基本的にそのurlをキーにして取ってくるっていうえ、prの設計になってるってのがswr。
@potato4d
そうですね。
@spring_raining
っていうところがま、そことかまでも、あの調べれば調べるほど、どちらもいいなっていう感じは あるんですよね。どちらもそのキャッシュであったりとか、そのどのタイミングで取ってくるかっていうところっていうのは、もうちゃんと管理されていますし、
@potato4d
ああ、わかわかりますわかります
@potato4d
どちらも結構良さがありますよね。
@spring_raining
で、あと、まああのすごい表面的なAPIの違いで見ると、なんか ヤトエリの方はユーズクリとか、ユズミューテーションみたいな感じでま。ちょっとグラフキューエル、フレンドリーだなっていう印象はありますね。
ま、ただイスwrも全然逆とえ、グラケール組み合わせられるし、みたいな。いや、なんで、
@spring_raining
結構好みの問題ではあるんですよ。
参加者 4
うん、うん、
@spring_raining
これはほんとにそうなんか最初に見たクイリラ。あの、ペッチライブよりも、
@potato4d
親とあ、親だと思うみたい。確かにあるかもしれないっすね、 なんか、それこそこうなんでしょう。あの、swrの方がこうシンプルにhdppリクエストに放火されてる感がこう伝わってくるん よな、とは思う。一方で、なんかよりリアとエリの方は汎用的な印象を受けますよ。
@potato4d
いや、多分なんかこういった使い方はいいとされてないんでしょうけど、なんかこうやろうと思ったら、別にectplじゃなくても、これいけるじゃんみたいな感じか、こう
@spring_raining
する。はいはい、作り
@potato4d
になってるようなとは思いますよね。
@uhyo_
リアクトクエリーの方が汎用的ってのは、まさにその通り。なんかまあ、タンスタック全般的にそういうなんか汎用的なというか、 本質を取り出した設計がうまいなという風に思ってるとこありまして。で、一方のエwrって、確かステールワイトリバルデートのことですよね。そうですね、 もしや、なんか1つの単なるソリューションが名前になってるじゃんみたいな、そういう意味でなんていうか、思想が強いというか、
@uhyo_
名前にも思想が出てるなというか、なんか、ソリューションをベースに周りを肉付けしました。みたいな印象をちょっと感じないでもらいたい
@potato4d
あ、うん、うん、うん、うん、
@spring_raining
そうですね、なんか、あのswr法がなんていうんですかね。あんまり、その フェッチっていうことに対する繋がりがあんまりないというか、そのどちらかというと、その 情報を取ってくる処理自体にフォーカスしてるみたいなま印象印象っていうか、あのかきか、味としてはそんな感じ。
@potato4d
そうっすね、うん、うん、
@uhyo_
swrは確かあんまり使ったことないんですけど、そのいわゆるキャッシュのキがもうurlにそのままになってたりするんですよね、確かあ、そうですそうです え、そういうとこからなんかとりあえずurl書いとけば上手くやってくれるみたいな、 なんていうか、ちょっといわゆるシンプルバーサスイジの軸で言うと、ちょっとイジ寄りな感じを個人的には感じてるんですよね。
@uhyo_
イラクトクリというか、タンスタック全般はもうシンプル側に振ってるみたいな印象で。
@spring_raining
なるほど、なるほど、
@potato4d
なんかこうあんまりオピニオンをこう強く寄せないなくて、柔軟性があるみたいなのは、 ま、ただなんか最終的には結構好みはきます。相談しますね、
@spring_raining
うん、多分あの、私はほんとにどちらも全然その採用して問題ない。もう 良いライブラリだと思うので、こんなにいなんて言うんですかね。どちらもいいって言えるのは、あんまりないかもしれないですね。
@potato4d
そうですね、確かに、なんか自分がプロジェクトに入った時に、どっちが採用されても、別にやちよみたいなないっていうのはすごいいいよなとは思いますね。
@spring_raining
そうなんですよ、なんか、スター数も似たような感じだったような。
@potato4d
そうですね、どっちも人気ですね、
@spring_raining
うちも人気っていう感じですし、どっちもいいピアが専念されているとはい思います。なんか、ほんとにクズ合いとかではなく、 私もこう逆得を触ってみたいなという気持ちにはなってきました。
@potato4d
あと、あれですよね、なんか、結構これからの。てか、結構なんか私自身は前から思ってたことでもあるんですけど、なんか、その APIAPIキャッシュって、別にその我々がこれまで呼んでいた状態とは、全然別なステートとは別なもの だけど、ステートとして扱ってきたものだと思うんで。なんか、ここは
@potato4d
なんかこういうのの登場によって、今は切り分けて話せるようになってるから、みんなこう状態とかの話をするときは、 何の話なのかを前置きをして話してほしいなと最近ありましたね。
なんかでも、状態管理って話からら、あのhttpキャッシュっていう概念が切り出されたっていうのも、なんかこういうライブライが出てきて、よくなった。
@potato4d
なんか、時代が前進したところだなと思ったりはしますね。うん、
@spring_raining
そうですね、リラックスも結局そのフェッチっていうところで、自分でそうしないといけないっていうところで、うん、
@potato4d
もうなんか結構個人的にリラックスの時とかに、あのhtpの結果のキャッシュをこう。
グローバル生徒に突っ込みながら、あのオスの認証情報も一緒にそこにぶっ込んでるみたいなのって、それって、全然意味合いとしては、違う状態なのに、それでうんいいのかなみたいなんて、結構こ うん。感じることがあったんですけど、なんかそういうのがこうかなり切り分けられる、切り分けて話せるようになったっていうのはすごいいいことだなと思っているし、
@potato4d
アプリケーション内の状態ってのも、アプリケーション内で、フロントの中で完結してる一時的な状態みたいなのと、 なんかhdpの状態。え、帰ってくるデータのキャッシュっていうのは、そもそも全然別物だよねっていうところは、話せる時代なのは、いい時代だなという
@spring_raining
そうですね。ま、そういったのも含めてこうステートっていうのが、今までのそのなんか、1つのステート にまとまったステートっていうよりは、そういうどんどん分かれていく、それこそその復活の。まあ、APIの精神っていうところが反映されていってるなって
@potato4d
そうっすね、
@spring_raining
話が戻っちゃいましたね。
@potato4d
じゃあ、そんな。はい、そんな感じで次行きますか。
4. React Locationの話
@potato4d
リアクトロケーションの方、こっちは結構なんか、 うょさんとは色々意見が分かれるのかなとか。なんか、ほんょさん自身もルーターライブらい使って作ってるのもあって、こだわりがあるのかなとか思ってるんですけど、 なんか結構私自身の話を先にしようかなと思ってるんですけど、私、結構リアクトリケーションも年末に出てから、
@potato4d
実際自分で触るかと思ってさり出して、まだちょっとプロダクションだと、さすがにあのルーターライブラリって、プロジェクト立ち上げの時にしか入れられないみたいな問題があるせいで、全然こう。
個人プロジェクト以上では使えてないんで、正直、プロダクションでどれぐらい使えるかってのはわからないんですけど、なんか結構 なんでしょう。今だと、ネクストジェイスを使うっていう選択肢も。まあ、もちろんあるんで。ネクストジェースを使った場合は、あの、ルーターライブラリって意識しないかなと思うんですけど、普通にシンプルなリアクトは、
@potato4d
ケーション作るならすごいリアクトロケーションって、多くのシチュエーションにマッチするのかなと思ってて、なんか、これもさっきのあの、 リアクトクエリーで話した状態管理の話とかもと共通するんですけど、なんか我々ってずっとこう。本当は使いたくないし、トゥーマッチなのを分かっていながらも仕方なく、リアクトルーターを使うっていうシチュエーションをこれまでいくと、となく体験してきたと思うんですけど、 なんかそういった時になんかこう自分で、じゃあルーター書きますか。って言われたら
@potato4d
こそのプロジェクト専用のルーターを書くのは、メンバー、新規メンバーがその行動をリーリングするのもあれだし、俺、俺の仕組みのルーターによって何か こうカバーしきれない要件があるときは、それはそれで辛いし、コストもかかるし、メントも辛いし、なんかとはいえ、こう。
なんか、リアクトルタも使いたくもないんだけど、みたいなのも結構なや。悩んだことが絶対1度はあるのかなと思っていて、
@potato4d
なんか、そういった時に薄くて必要最低限のものがあって、ただこうあの、 ちゃんと拡張性も存在している例えばなんでしょう。実際リアクトロケーションにあるところで言うと、あのルートのローダーにエイシンクのえー処理を挟むことができて、そのエイシンクの処理が終わった後に、そのルーティングのえんのエンターするみたいな処理とか、そういった ちゃんとかいところに手が届きながらも、本当に必要なものが最小限だけある。
@potato4d
みんなの思っていたルーターライブラリーみたいなのを、こうそのまま体現してくれたのが、リアクトロゲーションだなと思ってて、 結構ドックスとかには、なんかもっと大業なこう。思想の話も色々書いてるんですけど、なんか個人的にはそこがすごい1番いいライバルだなと 感じましたね。
@spring_raining
そうですね、確かに俺は多分リアクトルーターに対するみんなの思いっていう
@potato4d
て、薄くて、柔軟なろ。ルーターが欲しいっていうのを体現したライブありかなと思ってます。
@spring_raining
それに関しては、全く論の余地はないです。
@potato4d
なんか、うさ的に初めて見てた時とかどう思いました。ロケーションを
@uhyo_
そうですね、自分も個人開発でちょっと1個使ってみたんですけど、1番最初に思ったことは あれ。ルート定義ってオブジェクトでやるのって、許してもらえるんだって思いましたね。
@uhyo_
なんか、リアクトレーターだと、あの、なんかルートみたいな。はいはいはい、jxで書くじゃない。そうですね、 なんか、みんなそれ求めてるのかなと思ってたけど、リラクトロケーションはま、一応jsxでかけるみたいな拡張が用意されていたと思うんですけど、デフォルトだと、 両等定のオブジェクトでバと書くじゃない。
@potato4d
ああ、書きますね書きますね、
@uhyo_
はいはいえ、それって人々に受け入れられんだって、とりあえず思いました。
@potato4d
なんか、私は元々bjs書いてて、bgがそのスタイルなんで、全然わかんなくて出ましたね。なんかたさんはどうでした。
@spring_raining
そうですね、僕もあの昔その昔っていうか、その入社し始めて、その美を 触り始めて、最初にいいなって思ったのは、リールーターの存在ですね。ちょうど 何年か前のこの状態だと、ほんとにそのリアクトルーターぐらいしか選択肢がなくて、ネクストも
@spring_raining
どうなんだ。みたいな時期だったので、そのなんていうんですかね。この薄いルーターライブっていう存在は、 純粋に羨ましかったですね。
@potato4d
うん、じゃあ、なんか別にでアトロケーションがこういう基本をしてても、ま、それもあって、そんなに違和感はないかな。
@spring_raining
そうですね、今今だと全然違和感ないとは個人的には思いました。
@potato4d
なんか、あのうしろさんの方で受け入れられないと思っていた理由とかあったりするんですか。
@uhyo_
いや、なんか単純にまあ、リアとルーターが非常にデファクトだったということもあって、なんだかんだで結構 なんて言うんでしょうね。リラクトデーターの希望というか、パスをすらなんとかすコロなんとかみたいにかけるみたいな、 あれをかなり人々が求めていたのかな、という風に思っていたのがあって、というのも、まあ、自分も自分でその自分の
@uhyo_
ライブラインの話になってしまうけどら、ルーターライブラリ作った時に、まあ、ルートオブジェクトに定義するようにしたわけですよ。はいはい、 まあでも全然それが人々からこうなんかあんまり受けないというか、うん、人々から横上しているトを定義することの嬉しさを感じないような雰囲気を感じて、 文字列でばって定義できます。みたいな、なんかいじさというか、そういうのを人々が求めてるのかなという風に思ったんですけど、
@uhyo_
そこで、このいい設計のリアクトロケーションが、いや、俺はオブジェクトでルートを定義するんだみたいな感じで出てきたもんだから、あれ、そっちなの
参加者 4
あ、なるほどなるほど
@potato4d
なこう今になって、あのああ、俺が正しかったんだなって思うやつみたいな。
@uhyo_
いや、ちょっと自分で言うのもなんですけど、正直それ思いまして。ただ、まあ、やっぱりリアクトロケョンの設計者は、さっきはたさんもおっしゃってたように、非常に まあ、タンスタックだからか、例によって非常に筋がいいなという風には思いますね。特にひき回りをうまくこう ルーターに取り入れてるのって、まあ、比較対象ってのは、リアクトルーターはあんまりうまくやっていなかったところではあるので。
@uhyo_
あ、やっぱこれは本当に求めていたものだな、という風に感じてますね。
それこそ、ネクストジュースとかだと、そのルートに対して、非同期で紐づいてるデータっていうのは、元々上手いことやれていたんですけど、 それがクレントンリーの領域にもいい感じに持ち込まれたっていうのは、かなりなんていうか、地雷が進んだというか、
@uhyo_
そういう感じはしていますね。ただ、その一方で、つい最近そのtwitterで見たんですけど、 リアクトロケーションライトっていうのも、今作ってるらしいですね。
@potato4d
おお、そうなんですね、それは知らんかった。
@uhyo_
リアクトロケーションライトは、リアクトロケーションから、そのエイシンク周りを取り除いたものらしくて、はいはいはいはい、なんで取り除くかって言ったら、 いや、コンカレントレンダリングあるんだから、そっちでいいじゃん。ああ、将来的にはなるほど、なるほど なので、そうじはまさに。いや、コンカレントレンダリングあるんだから。確かにエシンクの機能は今あると嬉しいけど、そんなに将来的にずっと必要なものじゃなくないって正直
@uhyo_
思ってたところはありまして。でも、その一方で、それこそリアクトクイルとかの経験から、 またなさんは絶対サスペンスとか、コンカレートリンダリングのこともわかってる人のはずなんですよね。だから、あれわと、なんか短期的なというか、 なんか、生存機械の短いソリューション出してきたなというふうに、正直、アプロケーションに関しては思ってはいたんですけど、
@uhyo_
あ、ちゃんとコーガレットレンダリングのことをわかっているバージョンを出してくれるんだって思って、そっちの方にも今ちょっと期待をしていますが、あ
@potato4d
ああ、それはすごいですね。なるほど、もうやってるんですね、
@uhyo_
はいはい、
@spring_raining
なんかあの前もって考えていた可能性もなんかき聞いてたら思いましたね。なんか、あえてそういうなんて言うんすかねえしの わかりやすいAPIを用意しておいて、 で、そのコラを見て、そのリアとのそのコカリンダレンダリングを普及してきたタイミングで出すみたいな。全然そう想像ですけど、
@potato4d
やつの可能性も
@uhyo_
ちょっとやだとしたら、すごい。ほんとに戦略的ですね。うまいというか、なんというか、
@potato4d
でも、今の時点で、実はリアクトロケーションって本体あの1ファイルしかなくて、なんか、2000行ぐらいで書かれてるんですけど、
@potato4d
すごい薄いんで、さらにそっからライトって
参加者 4
なんか
@potato4d
ちょっと恐ろしいですね。
@uhyo_
そうですね、なんか4.何キロバイトだよみたいなツイートは見ました。
@potato4d
そうそう、そう、なんか私あのせっかくだから、コード読みに行こうと思って、薄いなって思ったんで、読みに行ったら、あのインデッドtsxしかなくて、
@potato4d
ああ、インデックスオtsxしかないのか
@potato4d
見てたんですけど、さらにそこにライトを。あ、じゃあやっぱあれなんすね。こう必要最小限のかつ広く受け入れられるAPIをっていうの やってるんすね
@uhyo_
ね。なので、それは本当に。まあ、コンカレントレンダリング時代の新しいデファクトスタンダードなものになりそうだな、という予感 しています。それと同時に、やっぱりパパルーティングのこと、今時の ルーティングのこと考えるためには、ちゃんとそういうaシンクなデータローディングのことも考えなきゃいけないんだな、というのは、そのリアクトロケーションを見た時に、やっぱり
@uhyo_
ま学ばされましたね。今となっては、もうただurl見て出し分けるだけが、ルーティングライバルの役目じゃないのかもって。
@potato4d
あ、あ、うん。確かになんか実態に即そうと思えば思うほど、そういったところも含まれていくのかもしれないです。
そっか、ちなみに、今リアクトルーダーの話と、これからの話しましたけど、あのうさんリミックスの方って触ったりしました。私、触ってなくて全然比較できてないんですけど、なんか気になる人もいるかなとか思ってて、あれはかなり ファットなイメージなんですけど
@uhyo_
ね。リビックスも、ちょっと個人開発で、簡単なアプリを1個作ってみました。
それは、なんか、クラードフレアワーカーにデプロイしたりして、うま、リミックスはなんかネクストジェースと比較する人と、 いや、ネクストジェースとは全然違うレイヤのものだよ。みたいに言う人の2種類がいる気がするんですけど。
@uhyo_
いや、個人的には全然ネクストジュースと比較していいものだな、という風に思いました。
まあ、普通にファイルシステムベースのルーティングがあって、という点で、ネクストジェースにかなり近いものですし ま、ルートに紐づいたAPIエンドポイントがある、それもかなりネクストジェースに近い星す。あ、あ、うん
@uhyo_
で、ネクストジェイスとの差別化がある店として、なんか、ネステットレイアトルートみたいな概念が存在するところ。
@potato4d
ああ、納豆、
@uhyo_
つまりなんかファイルシステムベースでこう。なんか、ディレクトリの改装を作ると、それが当然urlの改装として現れるんですけど、 そのか、改装ごとになんかコンポーネントエクスポートすると、それが全部 こうネスとして全部出力され、はいはいて、最終的なページが構成されるっていう。これが、リアクトルとバージョン6の
@uhyo_
ネステットルートアウトレットっていう機能を内側で使ってやってるはずなんですけど、 このネステットルートっていうのを、本格的にちゃんと使おうとめば使えるんじゃない。っていうのが1つ、リミックスの思想として 出てるのかなという風に思いました。
@uhyo_
だから、その一方でtwitterとか見てると、そんな何段階もネストさせるなんてことあんまりなくない。確かに、1度は妄想したことあるけど、みたいな。そういう意見も
@uhyo_
聞かれて、確かにこれをうまく活用するのはかなり難しいな、という風に自分も思いましたね。
@spring_raining
あの、思想としてはわかるっていう感じはあるんですけど、なんかあれですよね。あの、 多分その新規かいやつの方が向いていて、なんかなんかこう。パスとあのページの設計が紐づいていない っていうのは、あんまり向いてないっていうのは、あのちらっと見た感じで思ったんですけれども。
@potato4d
やるなら、リミックスであることを前提としたルート設計が必要というか。
@uhyo_
そうですね、もう、リミックスに合わせたルート設計をすることで、ま、その部分は輝くのかなという風に思いましたね。
あと、リミックスのもう1つの特徴として、結構エッチを押してたじゃないですか。エッチコンピューティングの
@potato4d
はいはいはいはいで、重品
@uhyo_
標準のレシピとして色々な。まあ、 エッチコンピューティングのクラウドにデプロイできる初期設定を持ってるんですね。それこそ、クラウド、フレアワーカーズとか、フライアイオとか バセルも行けるんでしたっけ。あんま覚えてないけど、そこを結構お推しのポイントにしてるところかなと思うんですけど、
@uhyo_
これは結構ネクストジェースの差別化を図ってるのかな、という印象を受けましたね。
というのも、ネクストジェースって、バーセルにデプロイしたらいい感じに。なんかラムダに でプロイして、エコンピューティングみたいな感じにしてくれると思うんですけども、どうもまだブラックポック気味というか、
@uhyo_
で、リミックスはその部分ちゃんとこう内外に抽象化して、リミックス本体に対してリミックス本体っていうのが、 エッジコンピューティにも対応した汎用的な仕組みを持っていて、それに対して各具体的な ペチコンピューティング、ホスティングのに対するアラプター。
@uhyo_
こう公式は用意してきて、それを放すことによって、具体的な1コンピューティングのプラウドにデプロイできるみたいな仕組みになっていって、 ちゃんとこのエコンピューティングっていうのを、汎用的な方法で、まあ使えるようにした、 その特定のえ、クラウドにロックインしないように作れるようになったっていうのも
@uhyo_
ま、リミックスが1つやりたかったことなのかな、という印象は使ってみて受けましたね。
@potato4d
結構あれですね、なんか今後そのそれこそよりコネクソジェースとかは、あの、バーセルのこ 向いたアップデートも増えてきてるかなと思うんですけど、なんかよりこう。あの、ロイン0というかっていう風な方向性では、 強力な選択肢にもなりそうっていう感じ。
@uhyo_
そうですね。あんまりリミックスが出た当時、みんなhhって言っていて、そんなエホームに思想強いのかなと思ったら、あんまりそうでもなかったっていう印象で、 むしろ なんでしょうね。コミュニティのことを考えて、ログインしないような作りにしてくれたというか、どっちかというと思想が強いっていうためには、ネクストジースの対抗場として、ある程度
@uhyo_
立ち位置を確保するというか、有力な選択肢であるために、そういう方向性を打ち出してきたなという印象があって、 まあ、思想的な部分としては、やっぱりその メステットルート、そっちの方が思想が出てる部分なのかな、という印象をリミックスについては受けましたね。
@spring_raining
なんか、それは今聞いて意外でしたね、
@potato4d
そう、結構意外でしたね、なんか正直なんか私の中で、あの リミックスがリアクトルーターの人の光景っていうのもあって、正直あんまり期待したくない。あるんですけど、かなり良さそうだなっていう気がしましたね。
@uhyo_
そうですね、ほんとに気軽にまあ、エコンピューティングのクラウドを切り替えられたり、 そもそもh2デプロイするのやめて、普通のvmにデプロイします。みたいな切り替えも結構簡単なので、 そこは結構押せるポイントかな、という風に思いました。自分も個人開発でリミックスで作ったものを1回、クラウドフレアワーカーズにデプロイしたんですけど、
@uhyo_
ちょっと公開してみたら。かなりクラウドフレアワーカーズの1日の無料の使用料の中95パーセントくらいまで行って、めちゃくちゃギリギリだったんですよ。
実際に公開した時までもいざとなったら、それこそ別のプラットフォームにパッと載せ替えられたりとか もできるので、そこはあ、リミックスでよかったってちょっと思ったところでしたね。
@potato4d
ああ、じゃあリミックスもかなりいい選択肢なんですね。
@uhyo_
確かに、ただ、ネクストジェースに慣れた人だと、ちょっとまたちょっと頭の転換をする必要があるかな、という風に思いました。
あと、なんかリンクとかメタタグとか、あの辺の人も結構面白くて、ルートがメストしてるっていう風に言ってるんですけど、各ルートからその なんかこのリンクタグを収録してとか、このメタタグを収録してっていうものを、まあ、コンポネントと並列にエクスポートすることができるようになってまして、
@uhyo_
そのメスとしたルートからエクスポートされたものが、全部1つにまとめて、リンクタグとして出力されるという仕組みになってるんですけど、 で、cssもその仕組みを使うことによって、なんかcsも落ちるとか、そういうのいらないよっていうのが、リミックスの公式の視聴なんですけど、つまり、 今実際にレンダリングされてるルートからエクスポートされたリンクのみがレンダリングされていて、違うルートに映ったら、元のルートのリンクは消されて、新しいルートの
@uhyo_
リンクタグのみが出力されます。みたいな仕組みになってるので、なので、cssをグローバルでプロイせずにグロ。なんかcssを ページに対して、ローカルなものとして扱うことによって、そもそもシーセースモジュールなしみたいな仕組みで なんだろう。クラス名のユニーク性を保証しなくても、生のcssかけるんじゃない。みたいな、
@uhyo_
そういう思想をリミックスは打ち出してまして。ええ、そういう考え方もあるんだってちょっと思ったんですけど。
ただ、それもそれでからない保証が絶対ないわけではないので、ちょっと不安だなと思っていて。
ミックさんそこはちょっと確信的で面白いけど、ちょっともうちょっとどうにかならなかったのかなと思っていると、
@spring_raining
なんかよくよくも悪くも独特っていう独特はなんかあれですね。悪い悪いに愛を含めてしまってるんですけど、すごいし、あのちゃんとか考えた思想を持っている。
うん、うん、うん、うんっていうのはうんましたね。いや、それがなんかこういい方に転ぶか、悪い方の転ぶかっていうのはまあ、
@uhyo_
そうですね。そうなので、私の総票としては、ネクストェースのライバルにはなり得るけど、結構思想は 違うので、考え方を変えて使わなきゃいけないかなという感じでした。あ、なるほど、なるほど、
@spring_raining
なんかタンタンスタッフからだいぶ
@potato4d
あ、でもなんかあれっすね。あの、こういう流れが最近あんのはいいですよね。
なんか、こう、イヤイヤリアクトルーター使ってたところから、ネクスレスみたいなのが出てきて、またこうちょっと色々選択肢が広がってるのはすごいいいなと
参加者 4
しますね。
@spring_raining
なんか、ルータライラを含む機能としてですけれども、なんか選択肢がまた増えてきてる
@potato4d
っていうそうっすねだなと思います。あ、なんかあとあれですね、なんかすごい余談なんですけど、あの ヤトクエリーもそうですし、ヤクトロケーションもそうなんですけど、最近こういうこうツールキットがまた 色々。あの、1周回って、新しいツールキットでみんな使う時代になって、みたいなのサイクルが来てるかなと思うんですけど、なんか
@potato4d
このあたり全部共通してて、なんか最近いいなってものがデブですが、クロムエクシンじゃないっていうのがすごいいいなとああしますね。
あの、ロケーションもクエリーもあの、タンスタックのやつって、全部デブツールスが、そのnpmインストールできるパッケージになってて、ドム上で表現されてるものになってるんですけど、なんかこう。
クロマエキステンションって、それぞれの環境で入れてねって話になるし、ここなんかこう
@potato4d
ブラザも選ぶし、なんなんやかんやこう。クローム拡張みたいなものが結構こう ふ。不安定って言ったら変ですけど、こうあんまり良い良い基盤ではない気がするんですけど、なんか、その辺がなんか専用のデブツールスになったりしてるっていうのが 結構なんか、一周回って新しくできた概念だな、みたいな気が
@uhyo_
してます。なるほど、言われてみれば、確かにそれは結構実は大きなメリットですね
@potato4d
ね。なんか、これ結構いいなと思ったりしてます。なんで そうっすね、大事だし、なんかやっぱりこう。全体的にこれまでの固定観念にとらわれるっていうよりも、やっぱりちゃんといいものを作ろうかな、みたいな感じで作られてるなと感じる時が多いんで、 ちょっとロケーションの方は、まだプロダクションは使えてないですけど、私は使ってみたいなと思ったりはしてますね、
@spring_raining
ありがとうございます。
@potato4d
ただ、ほんとにあのタンスタックのライブラリタは全部こう筋がいいし、かつ多分あの全部薄いライブラリなんで、多分使ってみるのも簡単かなとは 思うんで、薄くてパワフルでかつ守られるべきところは、しっかり守られてるぐらいかなとは思うんで、なんか、ぜひぜひ。
まだ触ったことがない人い人がいたら、触ってみてもらえるといいんじゃないかなと思ってます。っていうやつでした。
@spring_raining
私も、リアクトルケーションがファイル1つっていうのは、なかなか驚きポイントだったので、こうあれです。勉勉強用としても、
@potato4d
あ、そうですね。なんか、ルーターライブラリの仕組みを読むっていう意味でもすごい。
なんか、あの、リアクションルーターの行動を読む気にはならないっていう話は、多分皆あるかなと思う。はい、なんかこうそれも含めていいのかなと思ったりはしましたね。
@spring_raining
なんか使うものを考えていきます。
参加者 4
はい、
@spring_raining
じゃあ、はい、そんな感じですかね
5. クロージング
@spring_raining
え。今回はえーリアクトクエリー、リアクトロケーション。そして、最後はリミックスの話をちょっとだけやっていきました。
ラインのフロントの組織UITでは、このような技術的なキャッチアップをひ行っております。
ユイテンサイド以外にも、毎週の社内電気協会で、フロントエンドの情報交換を行っています。今後も、イティーンサイドを通して、このような情報
@spring_raining
外部に発信していけたらと思います。最後に、現在LINE株式会社では新卒、中途採用ともに大募集しています。
このポットキャストを聞いて、LINEに興味を持たれましたら、小のと1番下にある求人ページから、ぜひアクセスしてください。
それでは、またさんひょさんありがとうございました、
@potato4d
ありがとうございました、
@uhyo_
ありがとうございました。
