Angular
RxJS

RxJSを覚えないAngularの書き方

「RxJSを覚えないといけないからAngularは大変だ!」「RxJSはテスト難しいからつかいたくない」などと時々聞くので、RxJSを覚えないAngularの書き方を書いておきます。


AngularでRxJSを使う場所

まず、よく「AngularはRxJSを使う」とよくいいますが、具体的にどこに使われていますでしょうか。

これいうと、大体驚かれるんですが「package.jsonでインストールされているだけ」です。1

特にデフォルトでRxJSが書かれてて、それを理解しないと作業を進めることができないわけじゃありません。

ただ、いくつかのAngularのAPIでRxJSをデフォルトにしているものがあります。それがHttpClientです。


HttpClientとは

RxJSを使ったajaxのようなものです。URLを叩いて、値を取得してきたりします。jQueryでAjaxを使ってた皆さんは、以下のように書いてたと思います。

$.ajax({

url:'https://example.com',
})
.done( (data) => {
// 成功時
})
.fail( (data) => {
// 失敗時
});

それが、以下のように変わります。

this.http.get('https://example.com').subscribe(

done => {
// 成功時
},
fail => {
// 失敗時
}
);

ajax だとdone failを書くと思うのですが、同じように使えます。ただ、subscribeというのを書かないといけないだけです。2

終わりです。

いや、本当ですって、実際、私はこれだけの知識でアプリリリースしましたし。

RxJSって、覚えたら様々なAPIがあって、それを使ったら様々な便利な非同期処理を実行することができるものなのですが、Anguarで「RxJSを使わないとかけない処理」ってこれぐらいなものですよ。3

ですので、「RxJSを覚えないといけないから、Angularは難しい」と思い込んでる方はおそらく思い込みじゃないかなと。便利なパッケージが同封されているだけだと思って、気軽にはじめてもらえればと思います。


subscribeも書きたくない

もうちょっというと、Promiseベースで、async-awaitを書きたいという方向けです。jQueryをいれてajaxを使うとか、JavaScriptライブラリのaxios使うとかいろいろやり方はあるのですが、ここでは「RxJSベースのHttpClientをPromiseに変換する」方法を書いておきます。

this.http.get('https://example.com')

.pipe(first())
.toPromise(Promise)

これだけで、RxJSはPromiseになりました。ですので、以下のような使い方ができます。

const f = this.http.get('https://example.com')

.pipe(first())
.toPromise(Promise);

f.then(data => {
// Promiseっぽく書ける
});

もちろん、async-awaitも使えますので

async get(){

const f = await this.http.get('https://example.com')
.pipe(first())
.toPromise(Promise);
console.log(f); // Promise実行後の値が入る
}

みたいな書き方もできます。

もうこれで、Angularを採用するのに、RxJSは課題ではありませんね。

ちなみに、もうひとつよく挙げられる「AngularはTypeScriptがあるから...」も、「TypeScriptでReactを書く」みたいな記事がでてたり、Vue.js公式がTypeScriptのサポートをしたりしているので、わざわざフレームワークの選定レベルで避けて通るようなものではなくなってきた感じはあります。

それでは、また。


補足

先程の書き方するには、operatorsからfirstを呼んでくる必要があるので、なぜか動かないと悩んだ場合は上に以下の行を書き足してください。

import { first } from 'rxjs/operators';





  1. 内部処理では使われていますが、ユーザが書くエリアにはないので「インストールされてるだけ」という表現をしています。npm removeしたらもちろんエラーでます 



  2. next error complete などの概念はスキップしています。必要なときに覚えればいいのです。 



  3. @rxjs/store(Flex/Redux的な処理)とか書き出したらもちろん変わりますが、それ書く頃には中級者です。覚えてください。