皆さんこんにちは。筆者は最近Recoilを推す記事を量産しています。その成果か、Recoilは非同期処理を交えたロジックを書くのが得意であるということは以前よりも知られるようになりました。その次のステップの話題としてよく見られるのが「Rxと似ている」「Rxとどこが違うの？」といったものです。Rx (Reactive Extensions)、とくにフロントエンドの文脈ではRxJSですが、これは非同期処理を交えたロジックを記述できるという点で確かにRecoilと類似しています。 そこで、今回はRecoilとRxJSの共通点や違いについて、具体例も交えつつ解説します。 コンセプトから見るRecoilとRxJSの共通点・相違点 RxJSの特徴については、RxJSのイントロダクションにわかりやすく書いてあります。 RxJS is a library for composing asynchronou
ReactでRxJSは流行するのか？
こんにちは、エビリーの新規プロダクト開発を担当しているイサミと申します。 私は、今年の６月までは Unity を用いたゲーム制作のお仕事をしておりました。 前職では、イベント通知やネットワーク処理などの非同期関連の処理において、頻繁に UniRx を使用していました。 フロントエンドでも、ゲームと似たような非同期処理はたくさんあります。 しかし、フロントエンドを勉強する過程で Rx についてほとんど聞いたことがないのが現状・・・。 本記事は、便利な機能であるはずの Rx が、なぜフロントエンドに浸透していないのかを調べてみた雑記です。 時間のない方向けに、結論を先に書いてしまいますと 「可能性はありそうだけど、まだ数年は掛かりそう。」 というものが所感でした。 便利なのは間違いないのですが、「必要性の低さ」と「学習コストの高さ」が問題だと感じました。 詳しく気になる方は、記事読んでね 😎
Angular のための RxJS
これは何？ all-user.github.io RxJSのObservableを返すコードを書くとそのストリームに流れてくるイベントがリアルタイムに可視化されるエディタです。 下は実際に触っているところをスクリーンキャストにしたところです。 ダブルクリックの判定を書いています。 RxJSのObservableを直感的に扱えるように 以前このブログで書いた非同期処理の記事の中では次のように紹介しました。 値が次々に流れてくる川の流れのような時間軸を、そのまま抽象化したオブジェクトと言えるかもしれません。 RxJSを使うと、その川の流れのようなオブジェクト同士を、つなげたり、束ねたり、分岐したり、フィルターしたりできます。 イメージで伝われ！図解JavaScriptの非同期処理 - メモを揉め この川のことをイメージする時にマーブルダイアグラムを見たり、プリントデバッグしたりしていたのですが
マーブル図で怖くないRxJS
Rx初心者がいきなりRxJSのコードを見ると「RxJS意味がわからない、怖い」という印象を持ちがちです（実体験）。 そんなRxJSもマーブル図でゆるく理解すれば怖くありません。 初心者向けにマーブル図を紹介します。また実際にプロダクトで実装したRxJSの活用事例を紹介します。
RxJS - mergeMap vs switchMap、適切に使い分けましょう！ - KAKEHASHI Tech Blog
はいさい！カケハシの新米メンバー、オースティンと申します。 沖縄から参上しております！ 概要 RxJS のmergeMapとswitchMapの違いと使い方について解説します。 背景 Observableを使っていると、必ず直面する問題があります。それは、複数のObservableをどうやって一緒に実行できるか、という問題です。 とあるObservableの処理が終わった後に、そのデータを元に、別のObservableでさらに非同期処理をすることは開発者として多々あります。 Promiseのthenでまた別のPromiseを返してチェーンしていくのと同じことです。 しかし、RxJS では、Promiseと違ってObservableを直列にチェーンするのに使うpipeのOperatorFunctionが複数存在します。代表的なのは、mergeMap、mergeWith、およびswitchMa
JSer.info #538 - Babel 7.14.0がリリースされています。 7.14.0 Released: New class features enabled by default, TypeScript 4.3, and better CommonJS interop · Babel Release v7.14.0 · babel/babel 2021-04のTC39ミーティングでStage 4となったclass fields/private methodsなどを@babel/preset-envがデフォルトでサポートするようになりました。 そのため、@babel/plugin-proposal-class-propertiesと@babel/plugin-proposal-private-methodsを個別のプラグインとして入れる必要はなくなっています。 また、Node.
この記事は現時点でv7.0.0-alpha.1が出ている、正式リリース前のRxJS v7について扱っている RxJS v7の大きめな変更点 scheduled が追加 v6でdeprecatedだった一部Operatorsの扱い変更 型の強化 TestScheduler の変化 scheduled が追加 scheduled はCreation Functionのひとつ。次のようにimportして使う。 scheduled の追加に伴い、一部Creation FunctionsおよびOperatorsにて、schedulerを受け取るシグネチャが（v6.5の時点で）deprecatedになっている。書き換えが必要になるが、基本的にスケジューラーを酷使していなければ、後述するパターンはそもそも必要ないことを覚えておいてほしい。 対象と動作を維持した書き換え例は次の通り： Creation F
Angular 9/8 Tutorial: Build a Web App with HttpClient and RxJS 翻訳 - Qiita
Angular 9/8 Tutorial: Build a Web App with HttpClient and RxJS 翻訳 Angular #2 Advent Calendar 2019 | 15日目 Medium Blog の Angular 9/8 Tutorial: Build a Web App with HttpClient and RxJS の翻訳です。 この Angular 9 チュートリアルでは、 REST API の作成/シミュレーション、新しいプロジェクトの足場、重要な API の設定、最終的なアプリケーションの構築とデプロイから必要なすべてのステップを経て Angular 9 サンプルアプリケーションを構築する方法を学びます クラウドへ。 例として、URL クエリ文字列とパラメーターを使用して GET リクエストを送信し、JSON データを取得して消費するため
はじめにrxjs6.3 で動作確認。 RxJS とはなにか非同期とイベントのための Observer パターンを使ったライブラリ。 イベントで渡ってきたデータを自由に加工することができるので、公式サイトでは「イベント用の Lodash」と紹介されています。 Think of RxJS as Loadash for events. 非同期といえば js にはすでに Promise や async/await などの仕組みがありますが、それらとは何が違い RxJS だと何が嬉しいんでしょうか。 また、イベントといえば click とかだと思いますが、イベントから渡ってきたデータの加工をわざわざ非同期用のライブラリでするってなんだ？って感じですね。 今回は基本の概念をひとつずつ次の順に見ていきます。 Observable：イベントや値を RxJS で受け取れる形にするOperators：受け取っ
Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationWhat you can do with signing up
Rxjsにおけるテストコードについて。Rxと言えども複雑なロジックにはテストを書いて不安を払拭しよう。 Rx自体がロジックを表現していて、テストコードを減らす役割を担ってくれるほど便利ではありますが、それでも複雑なロジックを組んだときにはRxの手順自体にユニットテストを記述すべき場合も多々あります。Rxのテストを学ぶことでプロダクションコードの記述方法も変わってくるので、紹介したいと思います。 rxjsのテストには専用の記法が使われています。nextのタイミングを1文字のアルファベットや数字、 間隔をハイフン'-'、 errorをハッシュ'#'、completeをパイプ'|'で表す記法です。このテストをRxではMarble Testと呼びます。 簡単な例として、mapオペレータの挙動を確認するテストを書いてみましょう。テストにはmochaとchaiを使います。
非同期コードのテスト - RxJS Live London
原文(投稿日：2021/02/17)へのリンク RxJSコアチームの元メンバーであるJay Phelps氏は最近RxJSを活用する非同期コードをテストする方法を説明した。このリアクティブプログラミングライブラリは非同期プログラミングでAngularフロントエンドフレームワークで使用される。RxJSは時限シーケンスとライフサイクルイベントを表現するDSLを備えたテストAPIを提供する。 RxJSは、潜在的に無制限の値のシーケンスを生成するメカニズムを囲む Observable タイプを提供する。値のシーケンスは、プログラムの外部にあるソース (ボタンのクリックなど) から発生する場合もあれば、既存のシーケンスに適用される変換の結果として発生する場合もある。RxJSは、開発者がシーケンス (演算子など) を変換できるようにする追加のAPI、タイプ、およびメソッドを提供する。ソースとシーケンス
Follow on FacebookRecently a client of mine inspired me to learn RxJS for State Management in React. When I did a code audit for their application, they wanted to get my opinion about how to proceed with it after only using React's local state. They reached a point where it wasn't feasible to only rely on React's state management. The initial discussion was about Redux or MobX for a more sophistic
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RecoilとRxJSってどう違うの？ 共通点は？ 調べてみました！
Angular のための RxJS
RxJS
RxJSのOvservableを可視化しながら編集できるエディタを作りました - メモを揉め
2021-05-04のJS: Babel 7.14.0、RxJS 7.0.0、Safari 14.1
先取りRxJS v7 (alpha.1) - Qiita
RxJS入門#1 基本の概念をひとつずつ学ぶ - Kattsu Sandbox
RxJS入門#1基本の概念をひとつずつ学ぶ - Qiita
Rxjsのテストを書いてみよう！ | Rxjs | Blog | Akari, Inc.
React with RxJS for State Management Tutorial