Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
NgRx component と component-store について / mini-ng...
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Wataru KASAHARA
October 17, 2020
Programming
0
940
NgRx component と component-store について / mini-ng-japan-2020
Wataru KASAHARA
October 17, 2020
Tweet
Share
More Decks by Wataru KASAHARA
See All by Wataru KASAHARA
Classi リプレイスプロジェクト フロントエンドアーキテクチャ変遷 / Classi Angular Night #4
kasaharu
3
1.9k
Deep dive into component / classi-angular-night-number-3
kasaharu
0
2.4k
Angular Way をまっすぐ歩くために / classi-angular-night-number-2
kasaharu
1
2.3k
リプレイスプロジェクトで考えるフロントエンド開発 / Classi Angular Night #1
kasaharu
3
2.7k
React 初心者が初級者になるまで / react-sakana
kasaharu
0
48
Other Decks in Programming
See All in Programming
CSC307 Lecture 03
javiergs
PRO
1
490
疑似コードによるプロンプト記述、どのくらい正確に実行される?
kokuyouwind
0
390
Rust 製のコードエディタ “Zed” を使ってみた
nearme_tech
PRO
0
200
Raku Raku Notion 20260128
hareyakayuruyaka
0
340
CSC307 Lecture 08
javiergs
PRO
0
670
Data-Centric Kaggle
isax1015
2
780
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
190
CSC307 Lecture 01
javiergs
PRO
0
690
Patterns of Patterns
denyspoltorak
0
1.4k
AgentCoreとHuman in the Loop
har1101
5
240
dchart: charts from deck markup
ajstarks
3
1k
AIで開発はどれくらい加速したのか?AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
daisuketakeda
1
2.5k
Featured
See All Featured
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
sarafernandez
0
120
Crafting Experiences
bethany
1
49
Agile that works and the tools we love
rasmusluckow
331
21k
How to Grow Your eCommerce with AI & Automation
katarinadahlin
PRO
1
110
Google's AI Overviews - The New Search
badams
0
910
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
150
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
cargoodrich
3
100
From π to Pie charts
rasagy
0
120
Amusing Abliteration
ianozsvald
0
100
Imperfection Machines: The Place of Print at Facebook
scottboms
269
14k
Ruling the World: When Life Gets Gamed
codingconduct
0
140
Raft: Consensus for Rubyists
vanstee
141
7.3k
Transcript
と について 笠原 渉
笠原 渉 株式会社 フロントエンドエンジニア 日本ユーザー会
アジェンダ とは何なのか? どうやって使うのか? とは何なのか? どうやって使うのか?
とは でリアクティブアプリケーションを構築するための ライブラリ に がリリース で複数のパッケージを管理してる で な状態管理を実現するため のパッケージがメインだった 今年も新しいパッケージが追加されたのでそれらを
紹介
で追加 と異なりコンポーネントの状態管理に特化したライブラリ コンポーネントのライフサイクルに紐付けられていてコンポーネントが破棄されると 状態が される
のメリットとトレードオフ メリット はコンポーネントツリー内の特定のノードに紐付いているためそ のノードが破棄されると自動的にクリーンアップされる 状態は各 で完結しているため、同じコンポーネントでも独立した インスタンスを持つことが可能 トレードオフ と比較して コンポーネントとの結合度は高いのでスケーラビリティが低い
一部 は使えない
と どちらを使うか? どちらかが優れている、というものではない アプリケーションの性質に合う方を使う 場合によっては両方使うこともある 決定するための指標 アプリケーションの規模 状態の寿命 アプリケーション自体の寿命
使い方 簡単なカウンターアプリを想定
使い方 簡単なカウンターアプリを想定 型の を管理するため の型を定義
使い方 簡単なカウンターアプリを想定 型の を管理するため の型を定義 型の を継承した を用意 で状態の初期化
使い方 状態は というセレクタを使うこ とで簡単に読み取りができる の引数に任意の を 指定することで状態を自由に し て返すことが可能
使い方 使う際に へ の登録はコンポーネントで行う コンポーネントのノードごとに のインスタンスがシングルト ンになる ※ のインスタンスがコン ポーネントのインスタンスごとにシングルト
ンになるのは依存性注入の方法によるも の で調べてみよう
使い方 使う際に へ の登録はコンポーネントで行う コンポーネントのノードごとに のインスタンスがシングルト ンになる 状態の読み取り方は他のサービス同 様
使い方 状態は以下のどちらかを使うことで更新ができる
使い方 は現在の状態を引数にとる を渡す
使い方 は引数に または の パターンを取ることができ る として を受け 取ったとき内部で が呼び出
され、状態が更新される
使い方 の中身を見てみる
で追加 なアプリケーションを実現するためのライブラリ 提供される機能は つ This package is still experimental and
may change during development.
の代替 でも でもどちらで も動作する
特徴 の代替 でも でもどちらでも動作する との比較 は重い動的なインタラクティブな だと の変更検知にパフォー マンス低下の懸念がある は
がなくても動くためこの問題が解決できる
使い方 のように書くだけで同じように使える で を無効にしても は変わらず動作する
な値を にバインドするためのディレクティブ を使わない右のように書 く な値をバインドする場合は が必要 しかし は な場合描画がされ ない
右の場合は 後に が 更新されるまで が描画されない
な値を にバインドするためのディレクティブ を使うと右のようになる は な場合でも描画され る 右の場合は 後に が 更新される前でも
は描画される
デモ
まとめ とは との違い 使い方 まだ な機能 と の つが提供されている のどちらでも動作する
参考リンク 公式ドキュメント サンプル