Angular2を使ってみる 4. 書いたコードを理解する
まえおき
とりあえずは環境構築ができて動くことまでは確認できた。次は前に書いたTypeScriptのCodeとかも理解していくことにする。
といっても前に参考にしたpageを読み込むだけなんだけど。
しかしいつものpatternだとこれで満足して止まる気がする。次の課題も探さないとな。……何かserver daemonを用意してserverのstatusでもとってきてweb interfaceで描画でもできるようにしてみようか？
続きを読むAngular2を使ってみる 3. 環境構築その2+RxJS
前回のオチ
前回のオチを紹介する。
実はこういうslideを見つけたわけで。
www.slideshare.net
starter kitがちゃんとあったよ……という。
こっちを素直に使うが吉。
RxJSとは
これだけではさみしいのでRxJSというkeywordがちまちま出てくるので調べてみる。
さきのslideを見るとreactive programming用のlibraryということはわかった。いやわからぬ。
…is a set of libraries to compose asynchronous and event-based programs using observable collections and Array#extras style composition in JavaScript
… JavaScriptで観測可能なコレクションとArray＃extrasスタイルのコンポジションを使用して非同期およびイベントベースのプログラムを作成する一連のライブラリです
google translateさんはほんとうに優秀になって。もう。
「RxJS」初心者入門 - JavaScriptの非同期処理の常識を変えるライブラリ | 株式会社LIG
すごく大雑把に言うと、RxJSとは非同期処理（マウスクリックなどのイベントベースの処理も含める）をするときに超絶便利なライブラリです！
ふむん。targetにしている領域は見えてきた気がする。
「ReactiveX （Reactive Extensions）」（以下「RX」）というC#発のプロジェクトがありますが、RxJSはそのJS版に当たります。
ほう。元々そういう物があったのか。
少し横道にそれてReactive Extensionsについて調べてみる
各言語に広まったRx（Reactive Extensions、ReactiveX）の現状・これから - Build Insider
2009年にマイクロソフトが初めて.NET Frameworkに向けて提供を開始したReactive Extensions（Rx）ライブラリ「Rx.NET」は、今ではさまざまな開発言語に移植され、幅広く使われている。
こわくないReactive Extensions超入門 - Qiita
Rxというのは、つまり、イベントです。
すごい潔くまとめたな。
ああそれでwhereとかselectとかいろいろ便利なこともできるやつということか。で、先の説明とかを考えると非同期なeventの取り扱いに向いたeventの実装ということっぽいなあ。たぶん。
元の道に戻る
で、jsでそれをやるといわれると ？ と思わなくもない。jsで非同期と言われるとぱっと思いつくのはajaxだけど（他にもあれこれあった覚えはある）、普通にevent loopするprogramを連想すると、jsで実現するのはつらいなーと言う印象は出てくる。
というか前にやってやたら苦労した覚えがある。setIntervalとかsetTimeoutとか使って無限ループさせる形にして画面遷移を定期的にし続けるようなcodeを前に組んだことがあるけどきちんと整理しないと組めないし見通し悪いし同期させるのもどうしようか悩んだりで苦労した。
結局同期させたい関数のためのstatusを保持するglobalなlistを一つ作ってそこをsetIntervalで定期的に監視しすべてに1 or 0が入ったらeventを抜けるとかやったような。おうふ。
あ。もしかしてこの時に使っていれば楽になったのか？
方法。Rx.Observabl.fromEventでbindするdomとhandleするeventを入れ込んで、あとはfilterやsubscribeといった先ほど横道にそれたときに見たような関数を使ってeventをうまく定義できる、と。
なんとなく価値が見えてきた。もう少し掘り下げるとRx.Observable.fromでStreamを作ってRx.Observer.createでstreamを受け取るevent handlerを作るということもできた模様。
ああなるほど。そりゃあ非同期な処理とかもしたくなる。いろいろ納得した。
……あれ？ なんでこんなこと調べてたんだっけ。
あ、そうか。Angular2で使うものの一つとしてよく上がってきていたんだった。そりゃまあjsでeventを作るなら使いたくなるだろうなあと納得できたので今回はこれで終わり。
どこかでRxJSをそのまま使って見ることもあるかもしれないし、その機会が来る前にAngular2を使う勉強の中で使うかもしれないので、使って見るのはまたの機会へ。
Angular2を使ってみる 2. 環境構築とexample
環境構築
とりあえずnodebrewで node v6.10.1はいれてある状態。筆者、nodeが必要なのかどうかすら知らないところからのstartである（ひどい
ここから以下のpageに沿って進めてみるだけの記事。
Install
と思ったらそんなことはなかったんだぜ……。
最初のpageはいきなり読み飛ばした。nodeの説明とかそこまで求めてない。command listだけほしい。僕に入力するcommandを教えてくれ、と思いながら記事を読み終えてしまった。これではなかった……。
こちらのpageはどうだろう。いける気がする。npm init -yして、と。
続きを読むAngular2を使ってみる 1. どういう物なのか
きっかけ
なんやかんやあって最近Web Interfaceを組む機会に恵まれてしまった。しまったのである。
しかし僕は最近の流行についてはいまいちよく知らない。僕の知識はjQueryで止まっている。prototypeを使ってclassっぽいものを定義してかりかり書いてる程度。素直にES6を使えという話もあるけどnodeはあんまり手を出したくなかったし(nodeに手を出すとなんでもかんでもjsでやることになりそうで個人的に趣味じゃない)。
けどそれはそれ。どうせやるならと調べてみることにした。するとReact+Reduxで行くかAngular2をで行くかみたいな話がちらほら見かけた。
といってもあんまりこの比較は適切なものではないらしい。
83 ReactとAngularっていうのを比べるのって、みんな大好きですよね。でも、ほんとはこれって比較できるもんじゃないんですよ。型が一致しないものは比較できないんですよ。
会場 (笑)
83 で、比較できないものを比較しているというのは、こういう項目を挙げてやっているっていうのは、フレームワークの相互プレゼンテーションみたいな感じで、Reactはこうですよ、Angular 2はこうですよ、という感じでやってるんですけど、ほんとにそれがみんな聞きたい話なのか？って思うんです。
すまん僕はそれを知りたかったんや……（記事を読みつつ顔を覆う）。
ということでこういう粒度の違う比較をしてもしょうがないということを知りつつも、粒度が違うということがわかったのは収穫だったので、FrameworkとしてのAngular2とLibraryとしてのReactという視点からもう少し理解を深めてみることにした。
この記事を書き始めた時点でreact-redux-starter-kitという素敵なgit repositoryがあったのでこれを使いつつ本を読んでreactを勉強しているところ。reactに手を出し始めたから余暇でangular2も触っておこうというのが今回のスタンス。
続きを読む