カテゴリー

【Rxjs基礎講座】Typescript & Babelでrxjsを手軽に試せる砂場(sandbox)を構築してみよう

※ 当ページには【広告/PR】を含む場合があります。
2020/08/26
2022/10/05
【Rxjsのすゝめ】ObservableのCOLDとHOTって結局なんなの？
【Rxjs基礎講座】RxJSのMap系メソッドをコーディングしながら具体的にどう違うか考えてみる
目次
「Rxjs」 を使い慣れてくると、「良さげな Observable ストリームを思いついたけど、ちゃんと動くかな？」みたいなアイデアが取り留めなく浮かんでくるときがあります。
そんなとき、サクッと rxjs を遊びながら試せる砂場が欲しくなってきます。
どうせなら typescript でコーディングしながら rxjs の動作チェックするけど、 ECMAScript のバージョンを砂場の中で厳密に取り扱いたくないので babel でお茶を濁したい…
今回は rxjs を用いたモダンなフロントエンド開発を行う上であったら便利な rxjs砂場 の作成手順を小ネタとしてメモっておきます。

合同会社タコスキングダム｜蛸壺の技術ブログ【効果的学習法レポート・2025年最新】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集

Requirements



言わすもがな nodejs と npm はお手元の環境で利用できる前提です。
また、この記事内でパッケージマネージャは yarn を利用します(もちろん npm でも良いのですが、以下のコマンドはその都度読み替えてください)。
参考までに現在の著者の手元の環境では、以下のようになっております。 

            $ node --version
v12.13.1
$ npm --version
6.12.1
$ yarn --version
1.19.1
合同会社タコスキングダム｜蛸壺の技術ブログ【効果的学習法レポート・2025年最新】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集

rxjsとtypescriptとbabelのインストール



今回は tsc で typescript のソースコードをビルドして、その吐き出した javascript コードを babel-node で実行するようなプロジェクトになります。
好みにも依りますが、コマンドラインですぐに叩けるように、以下のようにグローバルインストールしておきます。 

            $ npm i -g typescript @babel/core @babel/node

rxjsのインストール



それでは rxjs をパッケージインストールしていきます。
まずは package.json をプロジェクトに追加します。 

            $ npm init -y

とすると、 package.json が生成されますが、それほど大したプロジェクトではないので、 

            $ touch package.json

として、中身を以下の内容で編集します。 

            {
    "name": "nxjs-sandbox",
    "version": "0.0.1",
    "description": "To make a test for rxjs easier",
    "main": "dist/index.js",
    "types": "dist/index.d.ts",
    "private": true,
    "scripts": {
        "build": "tsc"
    }
}

編集し終わったら、 rxjs をローカルにインストールしましょう。 

            $ yarn add @types/node -D #tsでnodejsを使うための型定義セット(おまじない)
$ yarn add rxjs -S

これでプロジェクト内で rxjs が利用可能になりました。

tscの設定



次にtscのコンパイル設定ファイルを作成します。 

            $ tsc --init

としても tsconfig.json が生成されます。
もちろん空の tsconfig.json を作成してもらっても構いません。
今回は以下の内容で設定します。 

            {
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "declaration": true,
        "sourceMap": true,
        "outDir": "./dist",
        "strict": true,
        "moduleResolution": "node",
        "esModuleInterop": true
    },
    "include": [
        "./index.ts"
    ],
    "compileOnSave": false
}

今回は簡単に、ルートディレクトリにある index.ts ファイルをコンパイルして、es6で吐き出したjsファイルを dist フォルダに生成するようなお品書きにしておきます。
慣れてきたら、適宜書き換えてみて遊んでみてください。

合同会社タコスキングダム｜蛸壺の技術ブログ【効果的学習法レポート・2025年最新】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集

rxjsを簡単にテストしてみる



それでは rxjs で簡単に遊んでみましょう。
ルートディレクトリに index.ts と名前をつけて、空のソースコードファイルを作成します。 

            $ touch index.ts

なおこの時点で、プロジェクト構造は node_modules フォルダを除くと、だいたい以下のようになっていると思います。 

            $ tree -I node_modules
.
├── index.ts
├── package.json
├── tsconfig.json
└── yarn.lock

それでは index.ts に以下のような内容で編集します。 

            import { range } from 'rxjs';
import { map, filter } from 'rxjs/operators';

const range$ = () => {
    range(1, 100).pipe(
        filter(x => x % 2 === 1),
        map(x => x + x)
    ).subscribe(x => console.log(x));
};

range$();

内容は１から100までの整数を、奇数だけフィルターして、その奇数どうしを足したものを出力しております。


tscビルド



それではビルドしてみます。 

            $ tsc

なおここでは、 tsconfig.json にソースコードファイルをインクルード指定しています。
こうすることでコマンドでファイルを引数で指定しなくても勝手にファイルを見つけてビルドしてくれます。
正常にビルドできたら、 dist フォルダ以下に出力されたjsファイル等が出てくるとおもいます。 

            $ tree -I node_modules
.
├── dist
│   ├── index.d.ts
│   ├── index.js
│   └── index.js.map
├── index.ts
├── package.json
├── tsconfig.json
└── yarn.lock

jsコードの実行



それでは rxjs がきちんと動作するか試します。 

            $ babel-node dist/index.js
2
6
#...中略
194
198
Done in 0.49s.

問題がなければ、いい感じで rxjs のコードが動いていると思います。

合同会社タコスキングダム｜蛸壺の技術ブログ【効果的学習法レポート・2025年最新】Angular(JSフレームワーク)をこれから学びたい人のためのオススメ書籍＆教材特集

まとめ



以上、非常にシンプルな手順で rxjs の砂場が構築できました。
もちろん typescript も合わせてリアクティブプログラミングの勉強できるので一石二鳥かと思います。
とはいえ、まだ今回程度のソースコードだと、 babel-node を使わなくても、ただの node で動作するレベルです。
これからまだまだ ECMAScriptの機能拡張が進化 していきますので、 typscript&rxjs の理解が深まるほど babel の力添えが必要となってくると思います。
【Rxjsのすゝめ】ObservableのCOLDとHOTって結局なんなの？
【Rxjs基礎講座】RxJSのMap系メソッドをコーディングしながら具体的にどう違うか考えてみる