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
Wataru KASAHARA
October 17, 2020
Programming
0
910
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.8k
Deep dive into component / classi-angular-night-number-3
kasaharu
0
2.4k
Angular Way をまっすぐ歩くために / classi-angular-night-number-2
kasaharu
1
2.2k
リプレイスプロジェクトで考えるフロントエンド開発 / Classi Angular Night #1
kasaharu
3
2.6k
React 初心者が初級者になるまで / react-sakana
kasaharu
0
40
Other Decks in Programming
See All in Programming
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
iOSでSVG画像を扱う
kishikawakatsumi
0
170
NIKKEI Tech Talk#38
cipepser
0
240
CSC305 Lecture 08
javiergs
PRO
0
280
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
160
CSC305 Lecture 10
javiergs
PRO
0
260
ALL CODE BASE ARE BELONG TO STUDY
uzulla
28
6.7k
コード生成なしでモック処理を実現!ovechkin-dm/mockioで学ぶメタプログラミング
qualiarts
0
270
SODA - FACT BOOK(JP)
sodainc
1
8.8k
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6.8k
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
340
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Designing Experiences People Love
moore
142
24k
Practical Orchestrator
shlominoach
190
11k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Statistics for Hackers
jakevdp
799
220k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
A Modern Web Designer's Workflow
chriscoyier
697
190k
Transcript
と について 笠原 渉
笠原 渉 株式会社 フロントエンドエンジニア 日本ユーザー会
アジェンダ とは何なのか? どうやって使うのか? とは何なのか? どうやって使うのか?
とは でリアクティブアプリケーションを構築するための ライブラリ に がリリース で複数のパッケージを管理してる で な状態管理を実現するため のパッケージがメインだった 今年も新しいパッケージが追加されたのでそれらを
紹介
で追加 と異なりコンポーネントの状態管理に特化したライブラリ コンポーネントのライフサイクルに紐付けられていてコンポーネントが破棄されると 状態が される
のメリットとトレードオフ メリット はコンポーネントツリー内の特定のノードに紐付いているためそ のノードが破棄されると自動的にクリーンアップされる 状態は各 で完結しているため、同じコンポーネントでも独立した インスタンスを持つことが可能 トレードオフ と比較して コンポーネントとの結合度は高いのでスケーラビリティが低い
一部 は使えない
と どちらを使うか? どちらかが優れている、というものではない アプリケーションの性質に合う方を使う 場合によっては両方使うこともある 決定するための指標 アプリケーションの規模 状態の寿命 アプリケーション自体の寿命
使い方 簡単なカウンターアプリを想定
使い方 簡単なカウンターアプリを想定 型の を管理するため の型を定義
使い方 簡単なカウンターアプリを想定 型の を管理するため の型を定義 型の を継承した を用意 で状態の初期化
使い方 状態は というセレクタを使うこ とで簡単に読み取りができる の引数に任意の を 指定することで状態を自由に し て返すことが可能
使い方 使う際に へ の登録はコンポーネントで行う コンポーネントのノードごとに のインスタンスがシングルト ンになる ※ のインスタンスがコン ポーネントのインスタンスごとにシングルト
ンになるのは依存性注入の方法によるも の で調べてみよう
使い方 使う際に へ の登録はコンポーネントで行う コンポーネントのノードごとに のインスタンスがシングルト ンになる 状態の読み取り方は他のサービス同 様
使い方 状態は以下のどちらかを使うことで更新ができる
使い方 は現在の状態を引数にとる を渡す
使い方 は引数に または の パターンを取ることができ る として を受け 取ったとき内部で が呼び出
され、状態が更新される
使い方 の中身を見てみる
で追加 なアプリケーションを実現するためのライブラリ 提供される機能は つ This package is still experimental and
may change during development.
の代替 でも でもどちらで も動作する
特徴 の代替 でも でもどちらでも動作する との比較 は重い動的なインタラクティブな だと の変更検知にパフォー マンス低下の懸念がある は
がなくても動くためこの問題が解決できる
使い方 のように書くだけで同じように使える で を無効にしても は変わらず動作する
な値を にバインドするためのディレクティブ を使わない右のように書 く な値をバインドする場合は が必要 しかし は な場合描画がされ ない
右の場合は 後に が 更新されるまで が描画されない
な値を にバインドするためのディレクティブ を使うと右のようになる は な場合でも描画され る 右の場合は 後に が 更新される前でも
は描画される
デモ
まとめ とは との違い 使い方 まだ な機能 と の つが提供されている のどちらでも動作する
参考リンク 公式ドキュメント サンプル