2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

RxJSを入門しようと思ったら既存のサンプルコードがエラーになる!(RxJS 6.0)

Last updated at Posted at 2018-05-25

結論

2018 4月からRxJSのメジャーアップデートが行われたため、ネットに転がっているサンプルコードは使えなくなった模様。

・RxJS 6.0 変更点まとめ(@ponday さん)
https://qiita.com/ponday/items/7966787fa0bc8f3e2dde

・npm RxJSページ
https://www.npmjs.com/package/rxjs

初心者のつまづき

2018年から、晴れてプログラマーとして仕事をするようになりました。
通信系の処理を書く際に、上司からRxJSくらい使えるようになっておけと言われたので学習をはじめた次第。

node.js環境なので、いつもの通りにパッケージを追加する。
npm install rxjs --save

とりあえず、「RxJS 入門」と調べてサンプルコードを探して試そうと、サイトを巡回してみるも動作しない。
(filterとかmapとか、not a functionとなってしまう。)

【わかりやすい】RxJSで始める関数リアクティブ・プログラミング(@kitfactory さん)
https://qiita.com/kitfactory/items/c9cba37a12745acf0697

公式リファレンスのサンプルコードを書いてみるも変わらず。
・RxJS Introduction
https://rxjs-dev.firebaseapp.com/guide/overview

パスがおかしいのかと悪戦苦闘するも効果なし。
調べてみると、どうやらバージョン変更で大規模な仕様変更があったとのこと。
npm公式のリファレンスより、以下サンプルコードを実行したところ、動作を確認。

test.ts
import { Observable, Subject, ReplaySubject, from, of, range } from 'rxjs';
import { map, filter, switchMap } from 'rxjs/operators';
 
range(1, 200)
  .pipe(filter(x => x % 2 === 1), map(x => x + x))
  .subscribe(x => console.log(x));

後で気がついたのですが、公式リファレンスも右上に**「WARNING: This is BETA site」**と書かれていました・・・・・・。

image.png

とはいえ、上司のコードをリファクタする関係で前バージョンと同じ書き方を使いたいので、以下コマンドでダウングレードすることに。

npm install rxjs@5.5.7 --save

これで以前のサンプルコードでも動作するようになりました。(5.5.7の理由は、上司の使用バージョンに合わせたからです。)
サンプルコードを拝借する際には、対応バージョンも確認した方がよいなとの教訓を得ました。

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?