孤独プログラマー譚

孤独死が近い。

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…

RxJS tap

前回と同じ、こちら共通関数。 function sto(x, time = 1000) { const observable = new Observable(subscriber => { setTimeout(() => { subscriber.next(x) subscriber.complete() }, time); }); return observable } function cl(x) { console.log(x) } …

RxJS mergeMap, concatMap, switchMapの違い

以下、共通関数。 function sto(x, time = 1000) { const observable = new Observable(subscriber => { setTimeout(() => { subscriber.next(x) subscriber.complete() }, time); }); return observable } function cl(x) { console.log(x) } mergeMap of(0…

Observable resolveする方法

Promiseのresolve( )に該当するのが、Observableのnext( )になる。 Observable.create((observer) => { setTimeout(() => { observer.next(1) }, 1000) }) .pipe( map(val => Number(val) + 2), map(val => Number(val) * 3), ) .subscribe(val => { console…

Angular Observable, Promiseの相互変換

ObservableもPromiseも、似たようなもんだと思ってます。 import { from as fromPromise } from 'rxjs'; const foo = this.http.get('http://localhost:3000/') console.log(foo) // Observable foo.subscribe(res => console.log(1, res)) const bar = foo.…

test

" copy file path command! -nargs=0 CopyFilePath call s:Clip(expand('%:p')) nnoremap <space>f :CopyFilePath<CR> command! -nargs=0 CopyDirPath call s:Clip(expand('%:p:h')) nnoremap <space>d :CopyDirPath<CR> command! -nargs=0 CopyCwd call s:Clip(getcwd()) nnoremap <space></space></cr></space></cr></space>…

Promise then, catchの連結

以下のコードは、どのような出力になるか? const promise = Promise.reject() promise .then(() => console.log(1)) .catch(() => console.log(2)) .then(() => console.log(3)) .catch(() => console.log(4)) .then(() => console.log(5)) .catch(() => co…

Promise 非同期メソッドの結果で処理を分岐

よくあるのが、オブジェクトをresolveし、その中に分岐用のフラグを含める。 まったく美しくない。見ててつらい。 const confess = (iLoveMai) => { console.log(iLoveMai ? '私は白石麻衣を愛しています。' : '私は白石麻衣を愛していません。' ) } const {…

Promise catch()からthen()への復帰

catch()からthen()へ。 そして、then()からcatch()へ。 const promise = Promise.resolve() promise .then(() => { console.log(1) throw new Error() }) .catch(() => { console.log(2) return }) .then(() => { console.log(3) throw new Error() }) .catc…

Promise reject と catch

以下の2つは、書き換えられる。 const foo = () => { return new Promise((resolve, reject) => reject(new Error('foo_value'))) } const bar = async () => { throw new Error('bar_value') } catchで受ける。 foo().catch((err) => console.log(err.messa…

JavaScript Promise.thenメソッドの返却値

asyncメソッドと似たような考え方でいいと思う。 const promise = new Promise(resolve => resolve()) const foo = promise.then(async () => { await new Promise(resolve => { setTimeout(resolve, 1000) }) return 'foo_value' }) const bar = promise.th…

JavaScript Promiseとasyncの書き換え

以下の2つ、Promiseとasyncメソッドは書き換えられる。 foo() { return new Promise((resolve) => { setTimeout(() => { resolve('foo_value') }, 1000) }) } async bar() { await new Promise((resolve) => { setTimeout(resolve, 1000) }) return 'bar_val…

Angular ルーティング

ルーティングの最低限の構成。 /* app-routing.module.ts */ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { FooComponent } from './foo/foo.component'; const routes: Routes = [ { path:…

Angular FormControl

FormGroup を使わないパターン。 export class AppComponent { foo = new FormControl('foo-desu', [ Validators.required, ]) } <input [formControl]="foo"> <div>value: {{foo.value}}</div> <div>error: {{foo.errors | json}}</div> FormGroup を使うパターン。 export class AppComponent { constructor(…

Angular バリデーションエラー表示

ngModel経由なら、input要素のvalue, error とも取得できる。 <input #foo="ngModel" [(ngModel)]="metas.foo" required> <div>value: {{foo.value}}</div> <div>error: {{foo.errors?.required}}</div> export class AppComponent { metas = { foo: '', bar: '', baz: '', } } ngForm経由では、input要素のvalueは取得できても、errorは取…

Angular 全て入力後に送信可能になるボタン 2

formを使わないバージョン。応用は効かせやすいかも。 <input [(ngModel)]="metas.foo"><br> <input [(ngModel)]="metas.bar"><br> <input [(ngModel)]="metas.baz"><br> <br> <div>disabled: {{disabled}}</div> <button [disabled]="disabled">Submit</button> export class AppComponent { metas = { foo: '', bar: '', baz: '', } get disabled…

Angular 全て入力後に送信可能になるボタン 1

Vue.jsに続いて、Angularでも。 テキストフィールドに全て入力完了後、disabledが解除されて送信可能になるボタン。 <form #metaForm="ngForm"> <input name="foo" [(ngModel)]="metas.foo" required><br> <input name="bar" [(ngModel)]="metas.bar" required><br> <input name="baz" [(ngModel)]="metas.baz" required><br> <br> <div>disabled: {{metaForm.invalid}}…</div></form>

Angular 複数チェックボックスを全て選択で切り替え

Vue.jsに続いて、Angularで全て選択を切り替え。 <input type="checkbox" [(ngModel)]="metas.foo">foo<br> <input type="checkbox" [(ngModel)]="metas.bar">bar<br> <input type="checkbox" [(ngModel)]="metas.baz">baz<br> <br> <input type="checkbox" [(ngModel)]="all_checked">all<br> export class AppComponent { metas = { foo: …

JavaScript オブジェクトの結合

オブジェクトの結合について、情報整理。 以下、既存のオブジェクトに、別のオブジェクトを結合する場合。 ES6で書けない時はjQueryを使う。 var nogizaka1 = { shiraishi: 'mai', akimoto: 'manatsu', } var nogizaka2 = { hori: 'miona', suzuki: 'ayane',…

JavaScript プロパティの初期化

JavaScriptの小ネタ。以下、よくあるインスタンス生成時のプロパティセット。 var personal_info = { name: 'Tom', age: '20', } function Person(personal_info) { this.name = personal_info.name this.age = personal_info.age this.indroduce_myself = f…

Vue.js Ajaxを使った連動するセレクトボックス

1つ目のセレクトボックスの項目を非同期通信で取得。 そこで選択した項目を元に、2つ目のセレクトボックスの項目も非同期で取得する。 <div id="app"> <select v-model="selected_category_id"> <option v-for="item in category_list" :value="item.id">{{ item.name }}</option> </select> <div>{{ selected_category_id }}</div> <select v-model="selected_animal_id"> </select></div>

Vue.js 全て入力後に送信可能になるボタン

テキストフィールドに全て入力完了後、disabledが解除されて送信可能になるボタン。 <div id="app"> <div><input v-model="field1"></div> <div><input v-model="field2"></div> <div><input v-model="field3"></div> <div>{{ entered_all }}</div> <button :disabled="!entered_all">submit</button> </div> new Vue({ el: '#app', data: { field1: '', field2…

Vue.js 複数チェックボックスを全て選択で切り替え

よくある「全て選択」チェックボックス。 <div id="app"> <div v-for="(item, index) in items"> <input type="checkbox" :value="item" v-model="checked_items">{{ labels[index] }} </div> <div>{{ checked_items }}</div> <input type="checkbox" v-model="checked_all">check_all<br> <div>{{ checked_all }}</div> </div> new Vue({ el: …

Vue.js 単一ファイルコンポーネントと通常使用の併用

通常使用とは何なのかというと、HTMLのscriptタグ内で、new Vue() してやること…ということにします。単一ファイルコンポーネントは使いたい。 でも、他のHTML要素の方も、Vue.jsで制御したい。 その場合、どうすればいいか、調べてもよく分からなった。例え…

Windows+PHP+Vdebug ブレイクポイントで止まらない

Vimを使う者として、IDE(統合開発環境)に負けたくないという気持ちはある。だが、さすがにログや画面にvar_dump()し続けることに疲れてきてしまった。ということで、vdebug(ステップ実行できるVimプラグイン)を使うことにした。環境: Windows10 Docker …

jQueryでMVVM

案件によっては、自由にJSフレームワークを使えないことがあるかもしれない。 既存システムがjQueryだけで作られているので、それを踏襲する必要があるかもしれない。そんな時、jQueryでMVVM…双方向データバインディングが出来ると、作業が楽になる。以下の…