RxJSとは何か、なぜそれを知ることが役立つのか

この記事では、RxJS 5+プロジェクトマネージャーであるGoogleエンジニアのBen Leshとのインタビューの翻訳を共有します。

フロントエンド開発の広大な世界には、多くの興味深いツールがあります。 私は実践的なことを学ぶための正しいアプローチを見つけるよう努めており、RxJSコミュニティの最も著名な代表者の1人であるBen Leshと話をすることにしました。 RxJSについてもっと知りたいと思ったのですが、なぜ初心者の開発者がリアクティブプログラミングの学習に時間を費やすべきなのでしょうか。 さらに、プロジェクトでRxJSを使用する理由を理解したかったのです。 BenはRxJSの使用方法を教えてくれ、このテクノロジーについて学ぶためのヒントを共有しました。

RxJSはどのような問題を解決しますか？

プログラミングは常に問題の解決策であり、特定の質問に対する答えを見つけるのに適したツールの検索です。 RxJSの場合、解決すべきタスクは、さまざまなイベントを使用して非同期呼び出しを処理する機能です。 これは、さらに詳しく説明する価値があります。

データを使用して特定のアクションシーケンスを生成する関数を作成しているときに、この作業中にエラーが発生したとします。 関数を使用してリクエストのシーケンスを処理するだけの場合、エラーを返すためにいくつかのオプションの手順が実行される場合があります。 エラーをすべての関数に渡すのではなく、不要になったすべてのAjaxリクエストを経由せずにエラーを取得してビューを更新できる必要があります。

このスタイルでエラー処理を整理するためにプロミスが作成されることに気づくかもしれませんが、RxJSはシーケンシャルアクションを新しいレベルで操作するという概念を採用しています。 Promisは単一の値のみを処理できるため、この構成のユースケースが制限されます。 これに加えて、約束をキャンセルすることはできません。つまり、フローを非常にうまくブロックしてリソースを浪費する可能性があります（低電力デバイスの重要な考慮事項）。

対照的に、RxJSは複数の通信チャネルを提供することでこれらの制限を排除する方法を提供します。これにより、マルチステップイベントの処理が簡素化され、効率が向上します。 さらに、RxJSを使用すると、開発者はイベントを生成する必要があるすべてのものを均一に表現できます。 すべてが同じに見える場合、リクエストの結合、結合、実行のすべてを簡単に処理できることがわかります。 これにより、RxJSは非常に強力なツールになります。

RxJSを学ぶ理由

一方で、RxJSは、複雑な一連のアクションを簡単に操作できる簡潔なコードに変換できる強力なツールです。

一方、この単純さは多くの言語メカニズムに基づいており、それらの研究には時間がかかります。 ただし、1行のコードで3セットのイベントを必要とするドラッグアンドドロップメカニズムを実装するようなことができることに気付いたとき、得られた知識は努力する価値があります。

これにより、これらのイベントを一緒に接続して（マウスボタンのクリック、マウスの移動、ボタンのリリース）、短く正確な1行のコードを取得できます。 通常のアプローチでは、これには数十行のプログラムが必要です。

RxJSを使用する利点は何ですか？

RxJSをコードに統合するときに開かれる最も魅力的な機会の1つは、RxJSを使用すればするほど、このテクノロジーでできることです。 RxJSは、すべてのキューブが同じ形状であるため、レゴが新しいデザインの開発に最適であるという意味で、レゴコンストラクターと比較できます。 同様に、観察されたオブジェクトはすべて同じように見えるため、多くの興味深いソリューションを試すことができるため、それらを使用して何かを作成することは魅力的なタスクになります。 コード内で観察されたオブジェクトをより多く使用するほど、既存の構造に基づいて新しい何かを作成する機会が増えます。

監視対象のオブジェクトを大きなコードベースに統合するプロセスは何ですか？

観察されたオブジェクトは、ほとんどすべてのアプリケーションで使用できます。 チーム開発について話している場合、これには時間がかかることがありますが、次の条件が満たされている場合、移行を簡素化できます。

• 作業は、シンプルで適切なオブザーバブルオブジェクトの使用から始まります。
  
• 変更は十分にコメントされています。
  
• 各チームメンバーには、実行されたアクションの意味が通知されます。
  

誰もが自分のペースでそのようなことを習得しますが、最終的に、チームがRxですべてを行っていることに気付いても驚かないでください。 監視対象のオブジェクトを使用して特定のアクションを実行すると、それらはすべて同じように見えます。アプリケーションに類似したオブジェクトが表示されるようになると、それらを使用する方がはるかに興味深いです。

オブザーバブルオブジェクトの使用が推奨されない状況はありますか？

もちろんあります！ JSプログラミングでよくあることですが、単一のアクションを実行する別のイベントがある場合、RxJSの使用は少し奇妙です。 もちろん、ここではRxJSを適用できますが、やり過ぎになります。

ドラッグアンドドロップ操作は、RxJSが理想的に適しているタスクの優れた例です。 これは多くのアクションを伴うイベントであり、可能であれば、その複雑さは常に軽減するのに役立ちます。

オブザーバブルオブジェクトを使用するタイミングを理解する方法

コンテキストに基づいて、監視可能なオブジェクトを使用するかどうかを決定するときに役立ちます。 例：

• 特定のアクションが複数のイベントを引き起こす場合-RxJSを使用します。
  
• 非同期操作が多数あり、それらの共同作業を調整しようとしている場合、RxJSもここで役立ちます。
  
• 配列で巨大なデータセットを処理し、このデータのステップごとの処理を整理する必要がある場合、RxJSオペレーターは、中間配列を作成せずにこれらのデータセットを処理するときにトランスデューサーのようなものとして使用できます。その後、ガベージコレクターを使用して破棄する必要があります。
  

Rxオペレーターの研究を決定するとき、どこから始めますか？

開始する演算子のリストには、 map 、 filterおよびscan含める必要がありmap 。 その他の重要な演算子には次のものがあります。

• switchMap
  
• concat
  
• share / shareReplay
  

演算子のリストを、最も頻繁に必要な10個未満に絞り込むことができます。 もちろん、 pairwise 、 bufferCount groupByなど、実験できる演算子があります。 これらの不思議な演算子は理由がありますが、あまり頻繁には使用されません。 ただし、これらの演算子によって実装されるアクションを実行する必要があるまれなケースでは、自分でアクションを作成する方法について困惑する必要はありません。

Reactのようなフレームワークを使用してRxJSを使い始めるのは簡単ですか？

ReactでのRxJSの使用は、Angularでの使用と非常によく似ており、完全に実装されています。 Angularでは、観察可能なオブジェクトはシステムの本格的なエンティティであるため、Angularでこのテクノロジーを使用することは非常に簡単です。 ただし、これはcomponentDidMoun tでRxJSにサブスクライブし、componentWillUnmountでサブスクライブ解除するよりも複雑ではありません。 このすべての基礎はAngularと同じ考え方ですが、Angularではこれらのメカニズムが組み込まれているだけで、Reactではすべてを手動で実装する必要があります。

Rxのデバッグに関するヒントを共有できますか？

他のテクノロジーと同様に、Rxについて学習すると、経験を積むにつれてデバッグが容易になります。 デバッグが難しい状況がいくつかあります。 現在、Chrome開発チームと協力してこれらの問題を解決しています。

プログラマが直面する典型的な困難な状況は、 mergeMapから何かを返し、 mergeMap可能なオブジェクトを受け取ることを期待している場合ですが、これは監視可能なオブジェクトではないことがわかります。 次に、観測可能なオブジェクトであると考えられるものを返した関数を見る機会を得たいと思っていますが、そうではありません。 これを示す方法は現在ありません。何が返されるかを正確に知ることは不可能なためです。

デバッグのヒントを次に示します。

• console.log()呼び出しをconsole.log()しないでください。
  
• 監視対象オブジェクトのチェーンにdo演算子を含めます。これにより、さまざまなステップで監視対象オブジェクトの状態とその戻り値を確認できます。
  

RxJSの将来についてどう思いますか？

RxJSでは、注意する価値のあるいくつかの変更が予想されます。 そのため、いわゆる「lettable」オペレータがまもなく利用可能になります。 この概念のおかげで、たとえば、オブジェクト自体にmap演算子を使用する代わりに、呼び出されたときに別の関数を返すmap関数があります。 この関数は、監視対象オブジェクトによって使用され、独自の演算子を使用して実行されたのと同じアクションを実行します。 たとえば、 observable.map.filter.scanようobservable.map.filter.scanものを書く代わりに、 observable.compose(map, filter, scan)書くことができます。 他の関数を作成するための関数がある場合、多くの関数型プログラミングの可能性が開かれるため、これは非常に深刻で有用な変更です。 この改善に関連するもう1つの改善点は、パッケージを構築するときに未使用のコードを削除することです（ツリーの揺れ）。

現在、このような最適化はRxJSでは発生しません。 すべてがプロトタイプです。 これにより、ポイントを介してオペレータレコードを使用できますが、特定のプロジェクトで実際に使用されていなくても、すべてのソースコードが使用されていると見なされるため、システムはパッケージのサイズを最適化できません。

RxJSの人気の高まりは、ReactとAngularにどのように影響しますか？

RxJSがよりアクセスしやすくなり、さまざまなプロジェクトへの統合が容易になっているため、フロントエンド開発者の間でより広く普及することを願っています。 現在、RxJSの広範な採用には2つの障害があります。 1つ目は学習の難しさです。 2番目はライブラリのサイズです。 RxJSは長い間存在していましたが、メインの開発チームが登場する前は、それをプログラマに簡単でわかりやすい方法で提示する方法を理解することは困難でした。

Rxの作成者は素晴らしい人々ですが、彼らは複雑な用語を使用しているため、開発者のコ​​ミュニティからのプロジェクトへの注意が欠けています。 ただし、This Dotのような教育リソースのおかげで、このすばらしいツールへの関心が高まっています。

RxJSのさらなる配布を促進するために、私は現在、ライブラリのサイズを縮小することに取り組んでいます。 Tiny Rx、またはT-Rxをお楽しみに。 一言で言えば、このプロジェクトでは24キロバイト（圧縮g-zip）ライブラリをわずか3 Kbに減らすことができました！

RxJSの人気がどのように高まっているのか、より多くのプログラマーがRxJSを使用しているのを見てうれしいです。 さらに、誰もがRxJSに参加して、この強力で便利なツールの開発に実現可能な貢献をすることができると言わなければなりません。

RxJSの機能に少し精通していて、さらに学習したい場合は、 Rx Workshop 、 Intro to Rx 、 Thinking Reactively、およびRxJS in Depthを参照してください 。

親愛なる読者！ プロジェクトでRxJSを使用していますか？