この記事の内容はRxJS7から非推奨となりました。最新版に対応したものは https://zenn.dev/rdlabo/articles/60b4be5be02704 で公開しておりますので、こちらをご覧ください。
「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';