続・Schematics で始める @ngrx/store （@ngrx/effects篇）

Angular

前回の続き。

tercel-s.hatenablog.jp

今回は、Schematics で始める @ngrx/effects のお話。

この記事の対象読者は主に自分であり、前提となる説明やら手順やらもろもろ省いている。よく分かっていないところは逃げている。

そのため、何かの間違いでこの記事に辿り着いてしまった自分以外の誰かにとっては何一つとして得るものはない。

続きを読む

Schematics で始める @ngrx/store

Angular

前回までのあらすじ

こんにちは、たーせるです。 夏休みを利用してAngular と仲直り中。

今日は Angular で Redux 的なことをやるにはどうするんだっけ、という話。 手順やお作法が多すぎてよく忘れる。

この記事の対象読者は主に自分であり、前提となる説明やら手順やらもろもろ省いている。よく分かっていないところは逃げている。

そのため、何かの間違いでこの記事に辿り着いてしまった自分以外の誰かにとっては何一つとして得るものはない。

続きを読む

心がもやもや

最近は仕事が全く楽しくない。

坊主憎けりゃ袈裟まで憎いという言葉のとおり、会社も仕事も、コーディング作業すらも厭気が差し、仕事でも必要最低限の発言しかしなくなった。

このまま自分にとって良くない状況がいつまでも続くのはよくない。

◆

弊社は、どういうわけか「人財」という表記を好む。

僕はこういうわざとらしい真似が好きではない。 欺瞞だと思っている。

それなら何故こんなにも次々と人が辞めていくのか。

◆

本当の友だちと、ニセモノの友だち。 何が違うんだろう。

ニセモノの友だちとは、これまで何度か出会ったり離れたりがあった。

人は寂しくなると、友だちごっこがしたくなるのかも知れない。 寂しくなくなると、周囲の人を大切にしなくなるのかも知れない。

◆

過去、どんなに仲が良くても、縁が切れる事がある。

それは、決定的なきっかけかも知れないし、あるいは長年積もりに積もった結果かも知れない。

世の中、ままならないものである。

◆

誰も理解してくれない、この問題を何とかするのは自分しかいない思考によく陥る。

常に気持ちがギリギリなので、想定外の事態への対処能力が低い。

これ以上自分の責任でやばい状況に陥らないよう、自分の頭で考えなくなる。

だいたいみんなそういうものなんだろうか。

非同期サービス

Angular

Angular と仲直りをしている

まえがき

昇進してからというもの、公私ともに Angular と戯れる時間がめっきり減ってしまった。

このたび、自分へのご褒美 (?) に Surface Pro LTE Advanced を入手し、真にポータブルな開発環境を手に入れたので、きちんと刃を研ぐ習慣を身に着けたい今日この頃。

そうこうしているうちに Angular 6.1 もリリースされたことなので、ここらで「分かっているようで実は分かっていなかったこと」の総復習をしようと思った。

ここまで前置き。

今回は、Angular の Service で非同期処理ってどう捌くんだっけ、という話。

いきなり結論

結論から言うと、Observable<T> を返すメソッドを書けばよい。 たったそれだけ。

たとえば、50ミリ秒おきにランダム値を40回生成し続ける非同期 Service はこんな感じになる。

import { Observable, interval } from 'rxjs';
import { map, take } from 'rxjs/operators';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DummyService {
  getId(): Observable<number> {
    return interval(50)
      .pipe(
        take(40),
        map(() => Math.random())
      );
  }
}

すっかり忘れていたけど、RxJS は v6.0 以降、メソッドチェーンではなく .pipe()パイプ の引数に連ねる書き方に変わったのであった。

利用するコンポーネント側。

import { Component, OnInit } from '@angular/core';
import { DummyService } from '../dummy.service';

@Component({
  selector: 'app-home',
  template: `<div>{{id}}</div>`
})
export class HomeComponent implements OnInit {
  id: number;
  constructor(private dummyService: DummyService) { }

  ngOnInit() {
    this.dummyService.getId().subscribe(
      ret => this.id = ret,
      err => {
        this.id = undefined;
        console.log(`Error Occurred: ${err}`);
      },
      () => console.log('Completed!')
    );
  }
}

こう書くと、Service からストリームが届くたびに id プロパティが更新される。

また、Service の気が済んだら（すなわち終了したら）、コンソールに Completed! という断末魔を吐いたのちに購読を止める。

思えば、HttpClient を利用した非同期通信を見れば明らかだった。 なぜ気付かなかったのだろう。

今後の課題

ここまでは基礎中の基礎で、これをもう少し掘り下げて考えねばならない。

  • 非同期処理の最中に submit が行われないようにする
  • 非同期入力チェックの最中に、当該入力欄が書き換えられないようにする

あるいは

  • submit が行われた場合、処理中の非同期処理を待ち合わせる
  • 入力欄が書き換えられるたびに（実行中の非同期チェックをキャンセルした上で）再チェックを行う

といった配慮が必要だ。

ただ、こういうことを考えるのはあまり面白くないので、後に回すかもしれない。

後味の悪い話

今日は、少しだけ後味の悪い話をしよう。

最近、忌まわしい記憶のせいで頭がぐるぐるしているので、いっそここに全て吐き出してしまいたい。

◆

僕の幼馴染に、ある女の子がいた。 同じ町内に住み、幼稚園から中学まで同じところに通っていた。

ところが、その子の2つ上の兄──仮にYとする──このYから、僕は執拗にいじめを受けていた時期がある。 いじめの内容は、殴る蹴る、お弁当に異物を入れられる、等。

Yの機嫌が悪い日は、目が合うだけで襲いかかってくるので非常に厄介であった。 反撃しようにも、小学生の2学年違いといえば致命的な体格差があり、加えて向こうは武器まで所持している始末。 僕が敵う相手ではなかった。

Yの家は当時すでに複雑な家庭環境を抱えており、母親は居なかった。 祖母、父親、Y、妹（幼馴染）の4人家族で、父方の祖父は存命のようだったが絶縁関係にあったらしい。

だから、授業参観や運動会などのイベントがあると、Y家ではいつも祖母が参観していた。

Yだけは僕の天敵であったが、それ以外の家族とは多少の近所付き合いがあった。 一応、人となりも知っていたし、子供心にも決して悪い人達ではないと思っていた。

◆

そんなある日、Y家の祖母が亡くなったという報せが届いた。

あまりにも突然の訃報に衝撃を受けた。 また、Yやその妹にとって、母親同然の存在だった祖母がいなくなったということについて、その日の夜は布団の中でいろいろと考えてしまった。

それ以来、Yとは会うこともなく、月日は流れていった。

僕はその後、地元を離れて一人暮らしをすることになる。

◆

一方、Yの妹は諸事情で精神を病み、家出をしたきり所在不明になってしまった。

Y家には、父親とYの2人が残された。

そしてYの父親も、ある日を境にどんどん痩せていったらしい。 体調不良を訴え、病院で精密検査を受けたときには、もはや手の施しようがない状態の末期ガンだったという。

医師から告げられた余命は3ヶ月。

これにはさすがのYも相当堪えたらしい。 ある日突然、現実を受け入れる時間も与えられず、最後の肉親が死ぬことになった──。 まだ20代のYには十分に惨い運命だと思う。

僕も『ざまぁ見ろ』とはとても言えなかった。 けど、心からの同情もできなかった。

◆

今、Y家には、Yが一人で暮らしている。

──Yはこれだけ酷い目に遭ったのだから、そろそろ赦してやれば？ というもう一人の自分の声がときどき聞こえる。 それとこれとは別だ、という声も聞こえる。

なんだかんだで僕は、Yを赦すこともせず、仕返しもできず、胸の奥に閊えを残したまま生きている。

結局この記事も、何が書きたいのかよく分からない内容になった。

天と地と

いろいろ