孤独プログラマー譚

孤独死が近い。

React Redux

Vue.jsのVuexと似てるけど、こんなんだったっけな。 import React from 'react'; import QuxComponent from '../QuxComponent/QuxComponent'; import { createStore } from 'redux'; import { Provider } from 'react-redux'; const BazComponent = () => { …

React hooks useContext 切り出し

切り出されたコンテキスト。 import React, { useState, createContext } from 'react'; export const QuxContext = createContext() export function QuxContextProvider(props) { const [value, setValue] = useState(0) return ( <QuxContext.Provider value={[value, setValue]}> {props.children} </QuxContext.Provider> ) } …

React hooks useContext

え、useContextがあったらReduxいらないってこと…? import React, { useState, useEffect } from 'react'; import BarComponent from '../BarComponent/BarComponent'; export const UserCount = React.createContext() const FooComponent = () => { const…

React hooks useEffect

え、useEffect便利すぎへん? Vue.js3未満にそういう機能ないように思うけど…。 Vue.js3(Vue-next)が出るまで、完全にReactがリードしてるような…。 increment1のボタンをクリックした時のみ、コンソールが出力される。 import React, { useState, useEffe…

React hooks 全て選択チェックボックス

import React, { useState } from 'react'; const FooComponent = () => { const [a, setA] = useState(true) const [b, setB] = useState(true) const [c, setC] = useState(true) const selectAll = (e) => { let bool = e.target.checked ? true : false …

React hooks useState

Reactのクラスコンポーネントを触ってみたが、双方向データバインディングのあるVue.jsに比べて使いにくすぎて驚いた。 ただ、Hooksは使いやすい。これなら、Reactでも普通に使っていけそう。 import React, { useState } from 'react'; const FooComponent …

Angular FormArray

配列で動的にフォーム生成したい時は、FormArrayを使う。 farray = this.fb.array([ true, false, true, ]) <input type="checkbox" [formControl]="farray.at(0)"> <input type="checkbox" [formControl]="farray.at(1)"> <input type="checkbox" [formControl]="farray.at(2)"> <div>a: {{farray.at(0).value}}</div> <div>b: {{farray.at(1).va…</div>

Angular FormControl, FormGroup

モデル駆動型フォーム。 foo = new FormControl fgroup = new FormGroup({ bar: new FormControl, baz: new FormControl, }) テンプレート部分。 controlsプロパティ、またはgetメソッドで子formControlにアクセスする。 <input type="text" [formControl]="foo"> <form [formGroup]="fgroup"> <input type="text" formControlName="bar"> </form>

Angular セレクトボックス

初期値。 selected = 'foo' テンプレート部分。 <select [(ngModel)]="selected"> <option value="foo" [selected]="selected == 'foo'">foo</option> <option value="bar" [selected]="selected == 'bar'">bar</option> <option value="baz" [selected]="selected == 'baz'">baz</option> </select>

Angular 複数チェックボックス

複数選択できるチェックボックス。 Vue.jsなら配列形式でデータを持てるんだけど…。 Angularは面倒くさいなぁ…。 data = [ { value: 'foo', selected: false }, { value: 'bar', selected: false }, { value: 'baz', selected: false }, ] foo<input type="checkbox" value="data[0].value" [(ngModel)]="data[0].selected"> bar

Angular ラジオボタン

ロジック部分。初期値。 selected = "foo" テンプレート部分。 foo<input type="radio" value="foo" [(ngModel)]="selected" [checked]="selected == 'foo'"> bar<input type="radio" value="bar" [(ngModel)]="selected" [checked]="selected == 'bar'"> baz

Angular 全て選択チェックボックス

連動するチェックボックス。 テンプレート部分。 foo<input type="checkbox" [(ngModel)]="foo"> bar<input type="checkbox" [(ngModel)]="bar"> baz<input type="checkbox" [(ngModel)]="baz"> <br> all<input type="checkbox" [(ngModel)]="all"> ロジック部分。ゲッターとセッターを利用する。 foo = false bar = false baz = false get all() { return this.foo && t…

RxJS complete()

forkJoin はcomplete()を感知する。 let sub1 = new rx.Subject let sub2 = new rx.Subject rx.forkJoin(sub1, sub2) .subscribe(cl) sub1.next(1) sub1.complete() sub2.next(2) sub2.complete() // [1, 2] sub1.next(1) sub2.next(2) // 表示なし concat …

RxJS errorでストリームが止まる

error が発生したら、後続のストリームは無視される。 obs(123) .subscribe(cl_next, cl_error, cl_complete); // next:123 // error:123 共通関数。 function obs(v = 0) { return rx.Observable.create((observer) => { setTimeout(() => { observer.next(…

RxJS Subjet

Subjectの発火箇所と、発火後のロジックは分ける。 const rx = require('rxjs'); const op = require('rxjs/operators'); let sbj = getSubject() sbj.next(1) sbj.next(2) sbj.complete() function getSubject() { let sbj = new rx.Subject sbj.subscribe(…

RxJS if elseをどう表現するか

iif という関数がある。 iif自体は、Observableを返却する。 let arr = [1, 2, 3, 4, 5] rx.from(arr) .pipe( op.mergeMap(v => { return rx.iif( () => v % 2 === 0, rx.of(`偶数:${v}`), rx.of(`奇数:${v}`), ) }) ) .subscribe(cl) // 奇数:1 // 偶数:2 /…

RxJS ループはfromで置き換える

ループはfromで置き換える。 ループはもう使わなくていいでしょ。 非同期通信じゃなくても、RxJS使っていく方向でいいんじゃないか。 と思ったりもする。 let arr = [1, 2, 3, 4, 5] rx.from(arr) .subscribe(cl)

RxJS if文はfilterオペレータに置き換える

if文はfilterオペレータに置き換えることが出来る。 rx.of(0, 1, 2, 3, 4) .pipe( op.filter(v => v % 2 === 0) ) .subscribe(cl) // 0, 2, 4 と表示

RxJS 副作用のある処理はtap

ストリームと関係のない処理は、積極的にtapを使いたい。 パッと見で「副作用のある処理」が分かるようになる。見やすい。 let foo = rx.interval(1000).pipe(op.take(1)) foo.pipe( op.tap(cl) // 0と表示 ) .subscribe(cl) // 0と表示 function cl(v) { co…

RxJS Promise.all()はforkJoinで書き換え

Promise.all()。 すべてのPromiseが発火されるのを待つ。 let foo1 = getPromise(123) let foo2 = getPromise('abc') Promise.all([foo1, foo2]) .then(cl) // [123, 'abc'] forkJoinで書き換えられる。 let bar1 = rx.interval(100).pipe(op.take(1)) let b…

RxJS 2度クリック防止

よくある「非同期通信が走るボタンクリックで、2度押し禁止」。 RxJSはexhaustMapで対応できる。 わざわざフラグ用の変数を作る必要がない。 const rx = require('rxjs'); const op = require('rxjs/operators'); rx.interval(100).pipe(op.take(5)) .pipe( …

RxJS exhaustMap, switchMap

exhaustMapは、後続の処理をキャンセル。 rx.of(1, 2, 3) .pipe( op.exhaustMap(obs), // 1 ) .subscribe(cl) switchMapは、先行の処理をキャンセル。 rx.of(1, 2, 3) .pipe( op.switchMap(obs), // 3 ) .subscribe(cl)

RxJS awaitをRxJSを書き直す

awaitの連続。 (async () => { let foo = await getPromise() foo = await getPromise(foo) foo = await getPromise(foo) cl(foo) // 3 })() function getPromise(v = 0) { return new Promise((resolve) => { setTimeout(() => resolve(v + 1), 1000); }); …

awaitって何してるのか

今さらだが、今まで何となくawaitを使っていたけど、そもそも何をしてるのか。 (async () => { let promise = new Promise((resolve) => { setTimeout(() => resolve(123), 1000); }); let foo = await promise cl(foo) // 123 })() await は promiseオブジ…

RxJS mergeの使いどころ

複数のObservable、同一のsubscribeメソッドの時は、mergeでまとめることが出来る。 まとめる前。 let obs1 = obs(1) let obs2 = obs(2) obs1.subscribe(cl) // 1秒後に発火 obs2.subscribe(cl) // 2秒後に発火 まとめた後。 let obs1 = obs(1) let obs2 = o…

RxJS pluck

オブジェクトのプロパティ名を指定して値を返却できるオペレータ。 mapオペレータで十分な気がする。 let obs = of( { a: 1, b: { c: 2 } }, { a: 3, b: { c: 4 } }, { a: 5, b: { c: 6 } }, ) obs.pipe( op.pluck('a') ).subscribe(cl) // 1,3,5 obs.pipe( …

RxJS exhaustMap

初めのストリームが優先して実行される。 実行中に後から来たストリームは、キャンセルされる。 switchMapと逆バージョンのようなイメージ。 of(0, 1, 2).pipe( exhaustMap(x => sto(x + 1)) ).subscribe(cl) // 1 timer(0, 500).pipe( exhaustMap(x => sto(…

RxJS オペレータscan, reduceの違い

scanはストリームごとにnextを発火する。 of(1, 2, 3, 4).pipe( scan((acc, val) => acc + val, 10) ) .subscribe(cl) // 11, 13, 16, 20 reduceは、最後のストリームだけ、nextを発火する。 of(1, 2, 3, 4).pipe( reduce((acc, val) => acc + val, 100) ) .…

RxJS 結合オペレータ覚え書き

let obs1 = sto(1) let obs2 = sto(2) merge(obs1, obs2).subscribe(cl) // 1秒後に1, 2 concat(obs1, obs2).subscribe(cl) // 1秒後に1, 2秒後に2 forkJoin(obs1, obs2).subscribe(cl) // 1秒後に[1, 2] zip(of(1,2), of(3,4)).subscribe(cl) // 1秒後に[1,…

RxJS Subject

Subjectは、Observable + Observer である。 Subjectはユニキャストできる。 Subjectは、Subjectオブジェクト作成後、後々ストリームを流せる。 Observableオブジェクトより、使い勝手が良さそう? let sbj = new Subject sbj.subscribe((val) => console.lo…