本番でどう使うかとか、モジュールがどうとかNodeJSがどうとかはどうでもよくて、

いいからとにかくRxJSを動かして、どんなものなのか様子を見たいだけなんじゃ。

やりたいこと

ここのデモコードに

ov02.js

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .subscribe(() => console.log('Clicked!'));

というものがある。(ov02.jsという名前は僕が適当につけたので意味はないです)

Observableが初めて出てくる、とても簡単なコード。これを動かしたい。それだけでいい。まずは。それだけでいい。

ブラウザでボタンをクリックすると、ブラウザのコンソールに「Clicked!」と表示される、ただそれだけ。

ブラウザのコンソールは、例えばChromeなら、適当な所を右クリックして「要素を検証」をクリックして出て来る開発者ツールで、コンソールタブを探せば出てきます。

問題は何

上のov02.jsと、このov02.htmlを同じフォルダに置いて、ブラウザでov02.htmlを開きます。

ov02.html

<!DOCTYPE html>
<head>
</head>
<body>
  <button>button</button>
  <script src="./ov02.js"></script>
</body>

ov02.js

var button = document.querySelector('button');
Rx.Observable.fromEvent(button, 'click')
  .subscribe(() => console.log('Clicked!'));

(ov02.jsは再掲)

当然、動きません。何故なら、RxJS本体を読み込むコードがどこにもないからです。

結論

CDN経由でRx.min.jsというファイルを入手して、同じフォルダに置いて、普通にHTMLから読み込んで動かすことが出来ました。

修正版のHTMLがこちら。ov02.jsファイルはそのままで大丈夫です。

ov02.html

<!DOCTYPE html>
<head>
</head>
<body>
  <button>button</button>
  <script src="./Rx.min.js"></script>
  <script src="./ov02.js"></script>
</body>

Rx.min.jsというファイルは、このサイトを使って入手しました。
https://cdnjs.com/libraries/rxjs

そもそもこのRxJS、ライブラリなんだから、jQueryと同じように、本体ファイルをHTMLから読み込めば動くんですね。

RxJSを読み込む行は、RxJSを使用するJSファイルを読み込む行よりも上に書きましょうね。先に読み込まないといけないですからね。

いやあ、なんか、NodeJSを使ってimportやらrequireするものだっていう先入観があって、遠回りしてしまった。

CDNというのは、「コンテンツデリバリーネットワーク」のことで、めちゃくちゃ簡単に言うと、コンテンツを受け取る側にとっては「ファイルが入手できる所」くらいの意味です。

いやもっとメリットあるんですけど、とにかく、「CDNにアクセスすると、ファイルが手に入る」ということです。

CDN使う方法も本家サイトに書いてあったけど、なんか「CDN」ってアルファベットで言われた瞬間「何かのインストーラかな。入れてないな〜」とか思っちゃったんですよね。情弱すぎる。

`node`で動かすなら

ブラウザではなく、ターミナルなどを使ってnodeコマンドで動かす場合はこちら。

ov06.js

Rx = require('./rx.min.js');

Rx.Observable.of(1,2,3).subscribe(x=>console.log(x));

JSファイルの冒頭でrequireを使って読み込んでやれば動きます。

コマンド

node ov06.js

出力

1
2
3

以下、遠回り中のぼやき

以下、ぼやきです。役に立つことは書いてません(なんですって…！)

そもそも、元のov02.jsにimport文を足してhtmlから読み込んで試そうと思ったらハマった。

俺のバージョンのchrome(64.0)はjavascriptのモジュール機能に対応してるらしいからいけるのかと思ってしまった。

importやrequireはブラウザのコンソールからは使えない

importしたいモジュール(?)をコンソールから呼ぶことは出来ない

普通にJSを読み込んでもimportやrequireはうまく動かない

import { hoge } from ...

は、unexpected token "{" って怒られる。"import"の時点で怒られてるわけではないのか。

import Rx from ...

とすると、unexpected identifier らしい。はあ。

ブラウザはnode_modulesに対応していない

import Rx from... がダメなのはこのせいか？

ローカルからモジュールのインポートはできない

html側を

<script type="module" src="./hoge.js"></script>

とすると、CORSポリシーに反するということで怒られる。

hoge.js自体はモジュールとして記述してるわけじゃないんだけど、どうなんだ？

その冒頭にあるimport文がまずいのか？？

まあnode_modulesに対応してないんじゃ結局だめだけど。

バンドラ(?)とかいう謎概念を使えば良い？？

確かに、Angularのテストサーバーを動かすと、webpackがどうこういうメッセージがでる。

webpackは一体どんな仕事をしているんだ。わかってないぞ。

CDNからRx.min.jsを手に入れてHTMLから普通に読みこむ

うまくいきましたわ。

いいからとにかくRxJSを動かしてみたいだけなんじゃ