RxJSを覚えないAngularの書き方【2021年/RxJS7版】
本記事は Ionic Framework / Capacitor / Stencil Advent Calendar 2021 Advent Calendar 2021 の記事です。 RxJS7のリリースに伴い RxJSを覚えないAngularの書き方 は非推奨となったので、2021年/RxJS7版としてリライトして公開しています。 「RxJSを覚えないといけないからAngularは大変だ！」「RxJSはテスト難しいからつかいたくない」などと時々聞くので、RxJSを覚えないAngularの書き方を書いておきます。 AngularでRxJSを使う場所 まず、よく「AngularはRxJSを使う」とよくいいますが、具体的にどこに使われていますでしょうか。 これいうと、大体驚かれるんですが「package.jsonでインストールされているだけ」です。[1] 特にデフォルトでRxJSが書かれてて、
[Angular] Promiseを使うべきかObservableを使うべきかみたいな話
本記事はAngular Advent Calendar 2020 4日目の記事です。 前日に引き続きRxJSネタですがとりあえず丸被りしてなくてホッとしてますw AngularにはRxJSという非同期処理ライブラリがビルトインで入っています。 RxJSは非同期処理をする際にオブザーバーパターンのような恩恵を受けられるメリットがあります。 Angularの公式チュートリアルを見れば非同期処理はすべてRxJSで書かれていますが、 一方でJavaScript(ES2015以降)にはPromiseという非同期処理の仕組みがあります。 RxJSとPromiseどちらをどういうときに使えばいいのでしょうか？ 僕はWebフロントエンドにAngularから入ったので、RxJS(Observable)の性質もよく考えず使った結果、 switchMapなどのObservableを切り替えるオペレータやcomb
![[Angular] Promiseを使うべきかObservableを使うべきかみたいな話](https://cdn-ak-scissors.b.st-hatena.com/image/square/b55206dd8a570de106c639073856506394eb9d2e/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--Aj_RDHqj--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BAngular%25255D%252520Promise%2525E3%252582%252592%2525E4%2525BD%2525BF%2525E3%252581%252586%2525E3%252581%2525B9%2525E3%252581%25258D%2525E3%252581%25258BObservable%2525E3%252582%252592%2525E4%2525BD%2525BF%2525E3%252581%252586%2525E3%252581%2525B9%2525E3%252581%25258D%2525E3%252581%25258B%2525E3%252581%2525BF%2525E3%252581%25259F%2525E3%252581%252584%2525E3%252581%2525AA%2525E8%2525A9%2525B1%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Asoftoika%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzc2OWJlMTNkYjIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Ngrxをこれから始める人への入門ガイド - Qiita
はじめに この記事はAngular AdventCalendar2018 14日目の記事です。 今までReact、Vueを使うことが多かったんですが、半年前からプロダクトでAngular + Ngrxを扱うことになりました。 Angularを使い始めて思ったのは、ググっても他のFWと比べると記事が少ないなと思うのと、Ngrxについてはさらに少ないな、と思ったのでこれからNgrxを使おうと思っている人が増えるようにNgrx初心向けの導入記事です。 Ngrxとは Ngrx公式ページ。Angular.ioにあわせたドキュメントページが最近作られました。 https://ngrx.io/ NgRx Store provides reactive state management for Angular apps inspired by Redux. Unify the events in your
@ngrx/storeと@ngrx/effectsの使い方 - Qiita
NgRx v9に対応しました NgRxはAngularアプリケーション用の状態管理ライブラリです。 本記事では、簡単なサンプルを通して@ngrx/storeと@ngrx/effectsの使い方を紹介します。 ※ サンプルはNgRx v9系で書かれています この記事の対象者 Angularを利用している方 Angular + RxJSで状態管理をしたい方 NgRxを触ってみたい方 TL;DR NgRxはいいぞ。 https://stackblitz.com/edit/ngrx-todo-v9 NgRxの概要 NgRxはAngular用の状態管理ライブラリです。NgRxを利用するとAngularを利用したアプリケーションでReduxのような状態管理ができます。 NgRxは下図のような構成になっており、Reduxと非常によく似ています。 https://ngrx.io/guide/store よ
Authentication in Angular with NGRX
In this tutorial, we’ll add authentication to Angular using NGRX Store and Effects. This post assumes that you a have basic working knowledge of Angular (2+), TypeScript, RxJS and the Redux design pattern. If you’re new to NGRX, check out the awesome Comprehensive Introduction to @ngrx/store guide. Dependencies: Angular CLI v1.7.3 (Angular v5.2.0) Node v9.11.0 NGRX Store v5.2.0 NGRX Effects v5.2.0
RxJS の Operators (4) - Observable の結合 (1) - Qiita
Observable.merge ReactiveX - Merge operator Observable.merge API Document Observable.merge Source Code 可変長引数で observable を取ります。各 Observable に値が流れてくるたびに、それをそのまま流します。 import { Observable } from 'rx'; Observable .merge( Observable.from([1, 2, 3]), Observable.from(['A', 'B']) ) .subscribe( value => console.log(`onNext: ${value}`), error => console.log(`onError: ${error}`), () => console.log('onComplet
RxのflatMapの使い方 - Carpe Diem
概要 AngularでHttpModuleを連続して使う必要が出た時に、「毎回subscribeでネストが深くなるのが嫌だなぁ」と思ってぐぐったところ、「flatMapを使うと良いよ！」という記事を見つけて使ってみようとしたのがきっかけです。 他のmapやfilterなどと違ってパッと理解できなかったのと、lodashのflatMap（arrayをflattenするやつ）のイメージのせいで詰まったのでまとめました。 環境 rxjs 5.1.0 flatMapはmap + mergeと考えるとイメージしやすい 公式のflatMapのイメージ図は以下です。 ref: ReactiveX - FlatMap operator 初見だと分かりづらいですね。 なので map（itemを変換）とmerge（複数のObservableを束ねる）がくっついたもの と考えるとイメージしやすいです。 map
Angular4アプリをAngular6にバージョンアップする際の嵌りどころ - Taste of Tech Topics
こんにちは、阪本です。 最近、画面系を触ることが多くて、Angularを使ったシステムを3つほど作ったのですが、 LTSであるAngular6がつい最近リリースされたので、 作った中でシンプルなAngular4アプリケーションをAngular6にバージョンアップさせてみました。 前提 バージョンアップ前のAngularのバージョンは4.4.6でした。 Angular Material 2.0.0-beta.12を使っています。 ちなみに対象のアプリケーションは2KL強（クライアントサイド）の申請管理システムで、申請→承認のフローを実行するものです。 バージョンアップ開始 いざ、出陣！（何 バージョン変更 まずは、ncuを使って、package.jsonに書かれた各パッケージのバージョンを上げます。 C:\App> ncu Using C:\App\package.json [.......
持続可能なAngularアプリケーション開発のために大事なこと - 余白
Webにかぎらず、アプリケーションというのは作って終わりではなく、その後も継続して改修・改善されていくケースが多い。受託で開発して納品して終わりというケースでも、納品した先にメンテナンスする人がいる。 この記事では、Angularアプリケーションの開発において、いかにメンテナンス性を維持して、持続可能なプロジェクトを構成するかについての個人的な見解をまとめる。 フレームワークを邪魔しない Angularアプリケーションのメンテナンスにおいて、いちばん重要なことはいかにAngularのアップデートを阻害しないかという点に尽きる。 これはAngularに限った話ではなくフレームワークと呼ばれるものを使うなら常に必要なことであるし、 アップデートが定期的に降ってくることが決まっているAngularであればなおさらである。 アプリケーションの一番根幹となる部分の鮮度が落ちれば、その他の部分はそれに
Angular: Don't forget to unsubscribe() | Brian Love
Google Developer Expert in Angular, software engineer and skier located in Denver, CO Don’t forget to unsubscribe from subscriptions in Angular components using the OnDestroy lifecycle hook. We’ll look at: Why you need to unsubscribe When you likely should unsubscribe How you unsubscribe Updated July 7, 2018 I have updated this post to correctly use the takeUntil() operator over the takeWhile() ap
HTML要素をドラッグアンドドロップ(D&D)中にブラウザ外に出た場合、D&Dを終了するよう RxJS 5 を用いて実装する - 嵐の小舟より
HTML要素をドラッグアンドドロップ(D&D)中にブラウザ外に出た場合、D&Dを終了するよう RxJS 5 を用いて実装する HTML要素をドラッグアンドドロップ(以降 D&D)で移動させようと思ったときは、 対象要素に対する mousedown、mousemove、mouseup のイベントを使って実装するかと思います。 しかしながらウィンドウ外では対象要素の mouseup を捕捉できないため、 単純な実装ではウィンドウ外でD&Dをやめて戻った際、再度クリックなどしてmouseupが発生するまで要素が追従してしまいます。 本記事では以下の挙動を RxJS で実装してみた例です。 D&D 終了時は初期位置に移動する ウィンドウ外で D&D 終了(mouseup)を検知する とりあえず触ってみてください。Google Chrome 57.0.2987.133 (64-bit) でしか動作確
Angular2でObservableを使ってHTTPリクエストを複数送信 | VPSサーバーでWebサイト公開 備忘録 ~Linux、MySQLからAJAXまで
Observableを使ってhttpリクエストを複数実行する方法を確認しました。 ※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認） ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．3つのhttpリクエストをチェインして実行 ２．3つのhttpリクエストをパラレルに実行 ３．デモ １）ライブラリ、サービス、依存性の指定 こちらの記事参照 Angular2でHTTPでサーバーからJSONデータ取得 Angular2のHTTPクライアントはObservableをリターンします。ObservableのflatMapメソッドを使ってHTTPクライアントをチェーンして実行しています。 ※ObservableのflatMapメソッド 例）３つのhttpリクエストを順番に実行 chain() { this._h
AngularでAsync pipeを使う - Carpe Diem
概要 AngularのPipeの中にはAync PipeというPromiseやObservableな非同期オブジェクトをそのままtemplateで表示できるPipeがあります。 今回はその使い方を紹介します。 環境 angular 2.4.8 rxjs 5.2.0 async pipeのメリット 主なメリットは以下の２つです。 template側に役割を任せられるのでコードがスッキリする コンポーネントが破棄される時に自動でunsubscribeするのでメモリリークを防げる フロントではメモリ管理が大切なので、特に後者は嬉しいメリットですね。 基本的な使い方 @Component({ selector: 'async-pipe', template: '<div>Time: {{ date | async }}</div>' }) export class AsyncPipeCompone
RxJSで始めるRx(Reactive Extensions)入門1 - Qiita
RxJS4についての記事だったんですが、古くなってしまったので、RxJS5で始めるRx入門 - Qiitaという記事に書き直しました。今後はそちらをご覧ください。 最近RxJSやRxJavaやり始めたばかりの入門者です。間違ってる事書いてたりしてたら是非とも突っ込みを入れてください。あと、RxJSとは何かがわかりにくかったりイメージがつかみにくければ、お気軽にコメントください。 今北産業 非同期処理やイベント処理を簡単に書ける エラー及び終了をうまくハンドリングできる 関数型のコレクションライブラリみたいなもの RxJSの在処 https://github.com/Reactive-Extensions/RxJS https://raw.githubusercontent.com/Reactive-Extensions/RxJS/master/dist/rx.all.js Rxとは何？ R
【翻訳】あなたが求めていたリアクティブプログラミング入門 - ninjinkun's diary
original: The introduction to Reactive Programming you've been missing (by @andrestaltz) (translated by @ninjinkun, reviewed by @ma0e) あなたはリアクティブプログラミングと呼ばれる新しい方法が気になっている。 勉強するのは大変で、良い教材がないのでさらに難しい。私が勉強を始めたときは、まずチュートリアルを探した。見つけたのは一握りの実践的なガイドだけ、しかもそれらは表面をなぞっているだけで、リアクティブプログラミングのアーキテクチャ全体像を構築しようとしてはいなかった。ある関数を理解するのに、ライブラリのドキュメントは役に立たないことがある。 これを見て欲しい。 Rx.Observable.prototype.flatMapLatest(selector,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RxJS & Firebase 101 - Firecasts
Angular pitfall: Multiple HTTP requests with RxJS and observable$ | async
Notion – The all-in-one workspace for your notes, tasks, wikis, and databases.
Angular5＋Firebaseでチャットアプリを作る② Firebase連携編 - まんくつ
Angular —Simple Infinite scroller directive with RxJS Observables