Typescript & Babel で rxjs が手軽に試せる砂場(sandbox)を構築する


2020/08/26

rxjsを使い慣れてくると、「良さげなObservableストリームを思いついたけど、ちゃんと動くかな?」みたいなアイデアが取り留めなく浮かんでくるときがあります。

そんなとき、サクッと
rxjsを遊びながら試せる砂場が欲しくなってきます。

どうせなら
typescriptでコーディングしながらrxjsの動作チェックするけど、ECMAScriptのバージョンを砂場の中で厳密に取り扱いたくないのでbabelでお茶を濁したい…

今回は
rxjsを用いたモダンなフロントエンド開発を行う上であったら便利なrxjs砂場の作成手順を小ネタとしてメモっておきます。


Requirements

言わすもがなnodejsnpmはお手元の環境で利用できる前提です。

また、この記事内でパッケージマネージャは
yarnを利用します(もちろんnpmでも良いのですが、以下のコマンドはその都度読み替えてください)。

参考までに現在の著者の手元の環境では、以下のようになっております。

            
            $ node --version
v12.13.1
$ npm --version
6.12.1
$ yarn --version
1.19.1
        

typescriptとbabelのインストール

今回はtsctypescriptのソースコードをビルドして、その吐き出した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フォルダに生成するようなお品書きにしておきます。

慣れてきたら、適宜書き換えてみて遊んでみてください。


テストコード

それでは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$();
        
内容は1から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のコードが動いていると思います。


まとめ

以上、非常にシンプルな手順でrxjsの砂場が構築できました。

もちろん
typescriptも合わせてリアクティブプログラミングの勉強できるので一石二鳥かと思います。

とはいえ、まだ今回程度のソースコードだと、
babel-nodeを使わなくても、ただのnodeで動作するレベルです。

これからまだまだ
ECMAScriptの機能拡張が進化していきますので、typscript&rxjsの理解が深まるほどbabelの力添えが必要となってくると思います。
記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。