音声書き起こし
1. オープニング
Guest
はい、こんにちは
Guest
こんにちは
Guest
今週もよいサイドやっていきたいと思います。え、まず、初めにこのポットキャストについて説明いたします。
Guest
このポッドキャストは、ユーザーインターフェースと、テクノロジーを愛する開発者たちが、毎週最新のフローにエンドの動向について語るためのポッドキャストです。
Guest
最新のおび、標準の動向や開発、フレームワークの変遷、またまたurやuxに関することまでえ、最近のトレンドをキャッチアップしていくことを目的としております。
Guest
今回はですねえ、イテンサイドえ、恒例のメンバーとなります。私はたとええはるさんとえ、2人でやっていきたいと思います、よろしくお願いしますよろしくお願いします。
2. 非同期処理の中間状態のハンドリング
Guest
ええということでですね。今週のテーマなんですけど、ま、ちょっと。今週ほんとは、あの、ビーフェスジャパンのイベント終わった後の話をしようと思ってたん
Guest
ですけど、ちょっと台風によって中止って形になってしまったんで、ちょっと別のテーマで話そうかなと思っております。で、ちょっと今日は相談なんですけど、はい、
Guest
あのspaを作ってる時のはい、まあはい、状態管理の話の1つなんですけど、
Guest
あのhtttリクエストはいを飛ばす。まあ、基本spaとAPIと連携すると思うんですけど、その時に
Guest
あのなんでしょう。例えば、ウェブサービスとか作って、あの、自分でシートデータ入れてる間はいいけど、本番動かしてみたら。リクエスト飛ばして成功した後、初期状態の空っぽの時にブランクのデータ表示したりとかあるじゃないですか。
Guest
ていう時のその取得中は、ローディングを出す0件の場合は、取得は終わってるけど、0件の場合はないを出す成功してる場合は、これを出すみたいな。あの出し分け
Guest
をするとき、みんなどうやって設計してるかなっていう。
Guest
なるほど、
Guest
だから、みんな悩んでるけど、あんまり議題に上がらなそうなやつ、そう
Guest
談したいなとなるほどってまして、
Guest
結構ベストプラクティス的なものはあるけど、それが最善なのかっていう
Guest
そうっすね、依頼はあります。結構どうしてるかなというの聞きたかったんですけど、いきなりですけど、どうやってます。
3. 各フレームワークでありがちな処理方法
Guest
そうです、そうですね、僕が昔昔ってか今もしその趣味で、そのアトのアプリケーションで、例えば
Guest
まリラックス使うってなると、多分そのなんていうんですかね。1つのリクエストに対して、こうえ、リクエストとサクセストフェイル。
Guest
まあ、3つの状態を持つっていうのがま、これ、結構割と定番みたいな感じですけど。
Guest
ま、簡単なやつだと、アクセス中はそのリクエストで、そのズローディングをトゥルーにして、で、サクセスになったら、まあ、イズローディングフォースにして、でで
Guest
入れる。はいはい、はい、
Guest
よくあるやつなんですけれども、僕はそれはあんまりいいとは思ってなくて、そう複雑になればなるほど、
Guest
崩壊しそうだな。まあ、そうすけれども、まあ、個人開発ならそれでいいかって感じです。
Guest
なんか、そのよくあるそのリラックスのあの実装を。あの、私も見たことあるんですけど、
Guest
あれやるときって、なんかこうもグローバル生徒に状態を持ってやって、で、取った後の状態も、その取得後のリストみたいな状態も両方持ってやる感じですよね。ああ、そうです。ですよね、
Guest
なんかあれもいいのはいいけど、なんかリソースに対して毎回フラグ立てないといけないし、リクエストのなんか
Guest
あれですよね。大体それやるときって、なんか状態みたいなのを、なんか状態増えれば増えるほど増えただけ。なんかいいなみたいなを手にしないといけなくて、辛いやつですよ。
Guest
いず、イズローディングが1つなのかっていう
Guest
イズローリング1つなのか、問題みたいなのが結構あるよな。そうですよね、やっぱそうなりますよね、
Guest
僕、最近結構業務はいはい、開発して問題だなって思うのがローリングって結構なんていうんですか。コンポーネント単位で定義するっていうのが結構直感的だと思う。あ
Guest
あ、そうですね、
Guest
例えば、その画面まず画面全体をローディングしてで、ローディング中、画面が画面全体でてます。はいで、ローディングが終わ
Guest
で、次に別のあの、その中の1つのコンポーネントのローリングが始まって、で、そこでもまたローディングがはいはい共有されてっていう感じで、そのローリングが終わっても、また別の
Guest
根本とのロドローディングが始まるみたいな。はいはいまになってて、いつまで経ってもローディングが終わらないみたいな。
Guest
あ、まず、親の全体で、アプリケーション使う情報の認証とかのローディングが入ったと思ったら、さらにそれぞれのリソースの入るみたいな、
Guest
なんかいる中に、そのローディング中のくるくるが泣いてて、あれ、なんとかしたいな、
Guest
なんか辛いっすよね、やっぱり
Guest
なんかいい方法は知りたい。僕も知りたい
Guest
で、なんか状態の管理も結構難しいし、どうしようかなってのは私も悩みですね。結構bgsのアプリ
Guest
えションの場合は、みんな雑にやってるようなっていう気持ちがあって、例えばなんでしょう。
Guest
あまり体育休許で書いてる人多くないじゃないですか。はい、そうなったら、なんか例えば、その配列とフォールスのユニオン体育にしてしまって、
Guest
そうはその間は何もないた。ポルスとかなるとか、アファインドとかの時は何もないから、ローディング中にするが、はい、タイプがまてか、レングスが
Guest
持っている場合は、その配列ではいみたいなことをやま、そこで判断するみたいな。実装をよく見るんですけど、なんかこれは
Guest
なんかタイプ。スクリプト、フレンドリーではないなみたいな気持ちになって、楽では。まあ楽楽ですし、そのコンポーネント内でうまく閉じてくれるんで、いいっちゃいいんですけど、微妙だよなと思って。
Guest
うータイプス、クリフトタイプ、スクリプトをまあ使うってなると、多分そのいないナムが適切かどうかはわかんないですけど、その結構その
Guest
タイプの合成で、まあ、このローディングの時はこの
Guest
このクラスでこのえ、まあ、ローディングが終わったら、このインターフェースでみたいなできるんで、まあまだ全然
Guest
可能性は全然あるって感じですかね。ま、ただそれでいいのだろうか、という気持ちもするっていうとこですよね。
Guest
ただ、ちょっと他のアプローチと式になってるのもあって、例えばその
Guest
なんか取得が終わるか終わってないかみたいなのって、例えばアンギラだったら、エーシングパイプとかで解決するじゃないの
Guest
ですか。なんか、テンプレート内にはい、そのそもそも非同期であることを明示してしまえる機能が、要は。あの、アンエラテンプレート内で、あれって全部rxじゃないですか。
Guest
なんでrxの対象となるオブザーバブルなものを、そのエイシンクっていうプレフィックスをつけてやってやると、
Guest
はい、解決されるまでの状態を持つみたいなのがあるんで、なんかそういうのが各フレームワークになるほど、備わっていれば、
Guest
アプリケーション側が関心を持たないといけないのは、そのaシクが処理されてるかどうかみたいな。で、もうあの、そこがいいかなみたいな
Guest
デートでもそういう機能
Guest
があるそうですね。なんでそことうまく組み合わせると割と快適に書けるんで、あれはあれだなと思いつつもリアクトとかビーって、あんまり。自分の
Guest
観測範囲では、その機動機処理とかをうまく使えるやつがないかな。
Guest
自分でやってくれって感じですよ。そうですよね、
Guest
っていうのがあって、結構そこみんな結構苦しい実装になってるんじゃないかな、という気が
Guest
ま。どれも一応行ったんだよな。ありますよ、しますね、なんでそれら
Guest
のどれを選ぶかって話はな気はするんですけど、まあ、なんかどれがいいんだろうなっていうとこですね。
Guest
ちなみに春雨さん最近はプロジェクトはあのビルジェースですか。
4. 外部パッケージと組み合わせての解決方法
Guest
はい、そうですよね、
Guest
ロードロードロードに今なってる感じっていうとこですよね。
Guest
その労働の表現自体は、ちゃんとやあの対策をしていて、そのはいはい、あの、ディレクティブで、ローディングのこう
Guest
コンポレントみたいなのがあってま。それで、そのローディング中は表示させないけど、ローディングは終わったら表示させるっていうところまではできてるんです。
Guest
てことはあれなんですね。そのディレクティブを付与するだけで、
Guest
その特定ののリソースへの取得が完了してるかどうかを見てくれて。してない場合は、ホールバックのコンテンツが表示されるっていう。あ、それは全然デレクティブとかもありですね。
Guest
まあ、ありっちゃあれなんですけど、逆に簡単すぎて、さっきのそのローリングのそうアイコン増えすぎ問題
Guest
ま、確かに確かにでもディレクティブで解決するのは、やり方としてありですね。私は結構あのラッパーホンポーネントとか。
Guest
あ、そうですね、ビュビ、プロミスシッドっていうプロミスedはいえ、あのプロミスラッパーみたいなコンポーネントライブラリみたいなのが、実は一応あって、うん、これあれですね。あの、
Guest
確かビーファイヤとか、あの、ファイヤベースとの連携ライバリーとかを作ってる。コアの人が作ってるはいやつがあるんですけど、
Guest
これみたいな形のdjcだと、こういうそのフロミスオブジェクトを渡してしまって、うん、スロットで解決するみたいな。
Guest
あ、はいはいはい、
Guest
ちょっとこれシノートに貼っときますけど、こういうスロットでの解決のイメージが、その変に状態持たないんだったら、あるのかなっていう。
Guest
そうですね、デロミスが解決されてない場合は、まあまた人だろう。
Guest
ま、なんか妥当なぽいアプローチな
Guest
気はしますよね。っていう印象が強かったんで、ディレクティブってのは、自分の中にあんまイメージなかったんで、確かにディレクティブもありだよなっていう気は
Guest
そう。ティブの中のま方によります。単純にその今トゥルーフォロスになってるっていうのが、まあ、
Guest
なんかこう上手いことできる。はいはいはい、気はするんですけど、まあ、確かにそれて
Guest
ちゃでも、ちゃんとこうテンプレートテンプレートっていうか、そのそうスロットに入れれるようにすれば、そういうカスタマイズやりやすい
Guest
こう、ネームドスロットっていう解決方法もあるかな、という気がしますね。こうすると、ペンディング、リザブル、リジェクトを全部まとめて取れるんでいいかなと思うんですけど、
Guest
なんか、ディレクティブ使う場合って、デジェクトの場合って、どういうってハンドリングすることになるんですかね。
Guest
エジェクトの場合は、ベットコンポーネントを用意して、皮で切り替えるみたいな。あ
Guest
てことは、今のその履歴っていうのは、成功しても失敗しても、とりあえず終わったら出してくれたら、ああ、なるほど、なるほど、
Guest
確かにそれはそれでシンプルですよね、あの、なんでしょう。デレクティブ自体は、プロミスが終わってるかどうかの関心しか持たないわけで。
Guest
なるほどあ、結構それもありな気がしますね、履歴という結構妥当感はありますね。
Guest
なんか、今じゃあこういう話してますけど、なんか今のリアクトリラックス、スタイル以外で。はい、なんかやるとしたらはめんどういう形でやるのがいいと思うとかあります。
Guest
うん、そうですね、また、逆トの話になってしまうんですけど、はいはい、最近やった。個人開発ではその
Guest
グラフqlを使ったんですけど、はいはいはい、あれってもうアポロっていうその
Guest
プロジェクトがありまして、そこでもう結構なんでもやってくれるみたいな。その状態管理みたいにやってくれるんですよ。なので、
Guest
その時は結構それに乗っかってやりました。
Guest
なんかあれですよね、しかも、アポロ自体がそのいい感じに、リアクティブなアクトレンゲを用意してくれてるって感じですか。
Guest
スケート管理とかも、その
Guest
なんていうんですか。その、あのアプリのデータがそのグラフql内に閉じてたら、多分それだけで、はいはい、大体満足できるみたいな
Guest
感じ。なんで、もしかしたら、結構その通信
Guest
のプロトコル自体にも関係してるかもしれない。ああ、grpc使うともしかしたらgrpcに最適な。そういう
Guest
はいはいはい、みたいなのも
Guest
あるかもしれない。ちょっとよくわかんないですけど、それもまあ1つの
Guest
ほかもしれない。確かに確かにそうですね、今までなんでしょう。APIって言ったら、頭の中で、とりあえずジェイソンが出てくるみたいなとこはあ、そうであると思う。なんか普通にジェイソンレスト、APIた話
Guest
そう。ジェイソン色がかりなので、我々は。
Guest
でも、まあ確かにそうですよね。あの、アポロリンクステートとかで、状態をリンクしてしまえば、それで解決するという話は確かにありそうな気はしますね。
Guest
あれの場合ってそのなんでしょう。
Guest
あれですね、エクエリ叩いたりとか、ミューテーション叩いたりした場合の、そのあのグラフキエル操作の途中状態って、どういう感じで、アポロ側では担保してくれるんですか。
Guest
要は、そのペンディングみたいなのって表せるんですかね。心ング
Guest
あ、そうですね、ペンディングちょっとあったと今調べます。はい、あ、はいはいですね、どれですか
Guest
でも、ちょっと小のの方にはかってきますね。
Guest
ま、こんな感じで、そのラフェールのクルをはい、書いてであれですね。
Guest
ゆそのローディングとエラーっていう、まあ、2つの
Guest
値がもう見られてます。それがまあ存在したら、ローディングコンコンと返すみたい。
Guest
はいはいは、い
Guest
ま、その方針的にはさっき言ってた。そのローディングのステートカットなら返すみたいなのに。そうですり理由っていうのは、そのなんていうか見える部分に関しては、まあ、そういうあ
Guest
あ、エラーも同じような感じ。はいはいはい、
Guest
ただあれなんですね、その自分たちで、そのイラムとかを管理するには、もう失礼。
Guest
そもそもそのなんでしょう。
Guest
あれですよねえ、これはフックもあるんですね、今、フォロワーにはあ、そうですね、なるほど、なるほど、リアリアクス側がモリとして、ローディング状態エラー結果っても全部返してくれるって感じなんですね。そうですね、
Guest
ユズクリっていうそうなクスはありますね。で、まあ、ローディングとエラーとデータってのが、
Guest
ああ、確かにこれでやってしまえば、だいぶそのなんでしょう。自分たちで実装する必要がないですし、なんか、リラックストとかにすごい。なんか、
Guest
寝食されるわけでもないんで、
Guest
そうっすね。筋が良さそうですね。そう、これだけでずっと閉じてたらすごい便利だと思いますよ。
Guest
確かにそうですね、こういうアプローチはすごいいいですよね。
Guest
ブラフキ、エアプロー使ってる場合は、ま、これでうまくリンクさせるっていう点もあるっていうところですよね。なるほど、なるほど、
Guest
まあそれでなくても、例えばまあ自分で貸したもの作るでもいいですし、色々できることはありそうですね。別に復活で解決できる系の話なきも、
Guest
してこなくもない感じはありますね。
Guest
ここの場合だと、そのボーディングとエラーっていう2つの名前ですけど、まあ、そこは結構工夫できるかも。そうですね、他にもなんかいろんな値が考えられるところですよね。
Guest
そうっすね、確かにちょっと
5. React.Suspense への期待
Guest
あのもう1個気になってるのがあって、私一切触ってないんで、触ってないベースでも知ってたら教えてほしいんですけど、あの、リアクトのサスペンス
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
全部な気がしてきた
Guest
どれも一応いたというか、ま、どれも別に悪くはなくて、結構好みな気はするですけど、どれで倒すと1番
Guest
ま。誰も困らないというか、驚きが最小になるかっていうとこですよね。
Guest
どうすか。なんか今色々お話しましたけど、はい、これちょっとじゃあ次試すかみたいな感じであります。どれが
Guest
薬とサスペンスはぜひ使ってみた
Guest
そうですよね、私もこれちゃんと使ってみようかな。
Guest
ポッドキャストで話題に出すように、そういえば、ああいうものもあったなと思ってた。段階で一切使ってないんですけど、
Guest
これ使ってみるのあり感めちゃくちゃありますね。
Guest
そうそうあれですねビとかだと、そのさっき言ってたビープロミスドは
Guest
そうね、一応有力ここぽい感じはしますよね。
Guest
あと、ちょっと気になる展開としては、先週ポッドキャストでちょっと話したんですけど、ビューネクストには同じようにサスペンスが入るかも。みたいな。はい、おっていう流れがあるっぽいんで、
Guest
作るぜって言ってるんで、実は
Guest
あんまり実装上が概念として変わらないんで、とか、今はビープロミスで作ってみて、うん、サスペンスィー3が来たら、サスペンスやってみるかみたいな。あれ、なんかなか
Guest
そうですよ
Guest
かね。あのま表のま実装は変えずに、その裏側のそのレンダリングの仕組みを
Guest
リサスペンスにすみたいなら、ライブラリとしては、そういうことも
Guest
できそうですよね。そういうのもありそうなんで、全然なんか可能性としてありそうだな感はありますね。いや、ちょっと。これは
Guest
サスペンス回り中心になる可能性も含めて見ておくべきな感じはしてきますね。
Guest
いや、さすがにビールでも、リアクトでも書けるっていう話になったら、採用量は増えてきた
Guest
そうですね。なんか、何かしらこう答えが出してくれる
Guest
そうですね。いや、これはまあみんなそうなんで、サスペンスオブなり、
Guest
まあ、それこそグラフケル使うぜっていうなら、ポロ使ってみるないっていうとこで、解決していきましょう。って感じですかね、
Guest
まあ、自分たちで答えをつけていきましょう
Guest
ね。ま、ただ、有力な選択肢はたくさんありそうなんで、貼っとくから是非見てくれって感じですかね。
Guest
はい、
Guest
じゃあ、そんな感じで決めますか。
Guest
今日はえーspaのえ、状態管理、特に非同期通信とか。まあ、プロミスを扱うものっていうとこについて、
6. クロージング
Guest
どうやってしょっていくのがいいかなっていう話をえしていきました。
Guest
結構ですね。今回の場合は、え、それぞれのフレームワークでの解決方法のは組めてやっていきました。ラインのUITsではですね、このようなえ、ジャパスクリプトやフロントエンドに関するワークについてえ、日々議論が行われています。
Guest
毎週金曜日にあるテイスラーベン協会という勉強会で、え、ナジ教育を行ってたりしますので、そちらの方でえ出た話題などについてはですね。ポートキャス内で、え、どんどんこ
Guest
返していければと思います。え、その他ですね。このポッドキャストについてのえ、ご意見やご感想もお待ちしております。え、ファッシュタグシャープUIT、アンダースコアインサイド
Guest
シプUIT、アンダースカインサイドにてついていただけます。とえ、今後のコンテンツ作戦を参考にさせていただきますので、え、ぜひぜひえついていただければと思います。
Guest
ということで、今週はですね。spaのえ、非同期通信におけるえ、状態管理っていうところでえ、ポテト4ディとえーは、メの2人で話していきました。ありがとうございました、ありがとうございました。
