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

「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

の力添えが必要となってくると思います。