Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

やりたいこと

http://reactivex.io/rxjs/manual/overview.html

ここのデモコードに

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から普通に読みこむ

うまくいきましたわ。

agajo
あんなに勉強して、親に高い予備校代も出してもらって東大に入り、卒業したのに、今では家と食事を親に頼りながら、年金と住民税を払うためにトイレ掃除をしている者です。
https://portal.oka-ryunoske.work/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした