RxJSを覚えないAngularの書き方【2021年/RxJS7版】
本記事は Ionic Framework / Capacitor / Stencil Advent Calendar 2021 Advent Calendar 2021 の記事です。 RxJS7のリリースに伴い RxJSを覚えないAngularの書き方 は非推奨となったので、2021年/RxJS7版としてリライトして公開しています。
「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(
{
next: (done) => {
// 成功時
},
error: (fail) => {
// 失敗時
}
}
);
ajax だとdone failを書くと思うのですが、同じように使えます。ただ、subscribeというのを書かないといけないだけです。[2]
終わりです。
いや、本当ですって、実際、私はこれだけの知識でアプリリリースしましたし。
RxJSって、覚えたら様々なAPIがあって、それを使ったら様々な便利な非同期処理を実行することができるものなのですが、Anguarで「RxJSを使わないとかけない処理」ってこれぐらいなものですよ。[3]
ですので、「RxJSを覚えないといけないから、Angularは難しい」と思い込んでる方はおそらく思い込みじゃないかなと。便利なパッケージが同封されているだけだと思って、気軽にはじめてもらえればと思います。
subscribeも書きたくない
もうちょっというと、Promiseベースで、async-awaitを書きたいという方向けです。jQueryをいれてajaxを使うとか、JavaScriptライブラリのaxios使うとかいろいろやり方はあるのですが、ここでは「RxJSベースのHttpClientをPromiseに変換する」方法を書いておきます。
import { firstValueFrom } from 'rxjs';
firstValueFrom(this.http.get('https://example.com'))
これだけで、RxJSはPromiseになりました。ですので、以下のような使い方ができます。
import { firstValueFrom } from 'rxjs';
const f = firstValueFrom(this.http.get('https://example.com'));
f.then(data => {
// Promiseっぽく書ける
});
もちろん、async-awaitも使えますので
async get(){
const f = await firstValueFrom(this.http.get('https://example.com'));
console.log(f); // Promise実行後の値が入る
}
みたいな書き方もできます。
もうこれで、Angularを採用するのに、RxJSは課題ではありませんね。
ちなみに、もうひとつよく挙げられる「AngularはTypeScriptがあるから...」も、「TypeScriptでReactを書く」みたいな記事がでてたり、 Vue.js公式がTypeScriptのサポート をしたりしているので、わざわざフレームワークの選定レベルで避けて通るようなものではなくなってきた感じはあります。
それでは、また。
Discussion
この記事で助かりました。御礼。