Zenn
🦔

RxJSを覚えないAngularの書き方【2021年/RxJS7版】

2021/12/15に公開1件
Angular
RxJS
Ionic
tech

本記事は 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のサポート をしたりしているので、わざわざフレームワークの選定レベルで避けて通るようなものではなくなってきた感じはあります。

それでは、また。

脚注

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

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

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

Discussion