読者です 読者をやめる 読者になる 読者になる

Carpe Diem

備忘録。https://github.com/jun06t

RxJSのfinallyの挙動

Rx Angular Observable

概要

Angularにはリクエストのクエリパラメータを取得する方法として、

@Component({...})
export class MyComponent implements OnInit {
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.params.subscribe((params: Params) => {
        let userId = params['userId'];
        console.log(userId);
      });
  }
}

というようにActivatedRouteがあるのですが、今回はその中でAPI側コールし、もしかしたらエラーが発生する可能性もあるのでfinallyで後処理を必ずさせたい、という状況でした。

そこで

    this.activatedRoute.params
      .finally(() => {
        // 後処理
      })
      .subscribe((params: Params) => {
        let userId = params['userId'];

        // エラーが起きるかもしれないAPIコール
      });

としてみたところ、finallyの処理が実行されませんでした。何故でしょうか?

続きを読む

Tasks(Macrotasks), Microtasksについて

Angular Node.js JavaScript

概要

Angularで出てきたfakeAsyncやwhenStableを使う時に、microtasksの話が出たのでちゃんと理解しようと調べてみました。

実験

以下のjsのログ順はどうなるでしょうか?

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

MicroTask1

続きを読む

AngularでAsync pipeを使う

Angular Observable

概要

AngularのPipeの中にはAync PipeというPromiseやObservableな非同期オブジェクトをそのままtemplateで表示できるPipeがあります。 今回はその使い方を紹介します。

環境

  • angular 2.4.8
  • rxjs 5.2.0

async pipeのメリット

主なメリットは以下の2つです。

フロントではメモリ管理が大切なので、特に後者は嬉しいメリットですね。

続きを読む

Dockerでのdev, stg, prd環境分け

Docker

概要

dockerを扱う上で、dev, stg, prdの環境で動かす際の分け方について考えてみました。

環境

  • docker 1.13.1
  • docker-compose 1.11.1

主な分け方

思いつくのは以下の5つです。 

  1. imageを分ける
  2. 全環境のconfigファイルをimageに保持させ、RUN時に指定
  3. templateを埋め込んでおいて、envsubstで環境変数使って書き換える
  4. data volumeでconfigをマウントして使用する
  5. 環境変数で設定できるように実装し、envを指定する
続きを読む

Elasticsearchの前方一致について考える

Elasticsearch

概要

以前Prefix Query の注意 - Carpe Diemで述べたように、PrefixQueryはsearch queryがnot_analyzedになるので意図しない結果になることがあります。
一方で前方一致は検索の利便性を向上させる上でメリットが大きいので、入れておきたい要素でもあります。

今回は前方一致を考える上で何が良いかを調べてみました。

環境

  • Elasticsearch 5.2.1

Prefix Query

メリット

  • 文字通り前方一致のクエリであることが分かる

デメリット

  • search analyzerは指定できないので、index時にnormalizeで小文字などにしてしまうと、大文字による検索でヒットしない
  • 内部的にはregexpによる一致なので短いと重い
続きを読む

Cold Observable と Hot Observable

Rx Observable

概要

Observableを学ぶ上でCold ObservableとHot Observableの違いを理解していた方が良いと聞いたので調べてみました。

環境

  • rxjs 5.1.0

ざっくり表

Cold Observable Hot Observable
イメージ オンデマンド再生のような、選んだら再生。
再生するシーンは開始タイミングに依るので、人によってそれぞれ
テレビのような垂れ流し。
再生するシーンは皆同じ。
データの開始タイミング subscribe()されたら connect()されたら
データを流すStreamの数 subscribeしてる数 1つ。いくつsubscribeしても同じStreamを見る
データを受け取るStreamの数 subscribeしてる数 subscribeしてる数。
送信してるStreamは1つでも、unsubscribeは受信してる個々で行う必要がある
続きを読む

RxのflatMapの使い方

Rx Observable

概要

AngularでHttpModuleを連続して使う必要が出た時に、「毎回subscribeでネストが深くなるのが嫌だなぁ」と思ってぐぐったところ、「flatMapを使うと良いよ!」という記事を見つけて使ってみようとしたのがきっかけです。

他のmapやfilterなどと違ってパッと理解できなかったのと、lodashのflatMap(arrayをflattenするやつ)のイメージのせいで詰まったのでまとめました。

環境

  • rxjs 5.1.0

flatMapはmap + mergeと考えるとイメージしやすい

公式のflatMapのイメージ図は以下です。

f:id:quoll00:20170225091903p:plain

ref: ReactiveX - FlatMap operator

初見だと分かりづらいですね。
なので map(itemを変換)とmerge(複数のObservableを束ねる)がくっついたもの と考えるとイメージしやすいです。

続きを読む