slide

1. 2022年12月17日 寺嶋 誠
Riverpodを使った状態管理
1

2. 目次
自己紹介
Riverpodとは
ソースコード例
併用ライブラリ・パッケージ
*パッケージの「Provider」と、Riverpodで使用する「Provider」という言葉が重複するため
パッケージの方は「旧Provider」としています。
2
参考文献・サイト
https://qiita.com/datake914/items/f91acf30a640447c57c8
https://zenn.dev/riscait/books/
fl
utter-riverpod-practical-introduction

3. 自己紹介
名前 寺嶋 誠（てらしま まこと）
エンジニア歴 ２年７ヶ月
使用言語 Flutter, Swift, Vue, Go
職歴
2010年4月 西日本旅客鉄道株式会社 入社
2020年1月 同社 退職
2020年2月 テックエキスパート入校
2020年4月 テックエキスパート卒業
2020年5月 エンジニアに転職
3

4. Riverpodとは
Dart, Flutterで使用できる「状態管理ライブラリ」
旧Providerパッケージの上位互換
旧Provider + State Notifierの課題を解決
Riverpodを使うメリット
・Widgetの再構築時に状態を失うことなく、状態を安全に作成・監視・破棄できる
・グローバル変数として定義するため、複数の場所から、簡単に状態へアクセス可能になる
・状態の変化によって影響を受けるWidgetのみが再構築（Rebuild）される
など
4

5. ソースコード例（Provider）
・6行目
このProviderで管理する情報を指定。
（Member）
・23行目
Viewから受け取った情報をcopyWithでセット
する。（freezedを併用しています）
セットするだけで変更通知が行われる。
* 旧Providerの notifyListeners( ) の役割
・27行目
state管理している情報はstate.<変数名>で
呼び出す。
・33行目
外部からmemberProviderを参照できるよう、
グローバル変数化。
5

6. ソースコード例（View）
・7行目, 11行目
Providerを利用するためのrefを取得するため、
ConsumerWidgetを継承する。
・17行目
refを通じてProviderを利用する。
watchで監視している。
*listenでも監視できるが、値の変化はwatchで
追う。
・29行目
ref.readで、その時点でのProviderを呼び出す。
readは単純にProviderを呼び出すだけなので、
ユーザー操作で呼び出すことが望ましい。
*監視はできないため、watchとの扱い方に違い
が生まれる。
6

7. *Providerの呼び出し方
7
ref.watch ref.listen ref.read
値の変化を監視する 値の変化は監視しない
監視した値が変化するたびに、値に依存する
ウィジェットやProviderの更新が行われる
監視した値が変化するたびに呼び出される
任意の関数を登録することができる。
（画面遷移、ダイアログの表示など、
変化に応じて処理を実行したいときに有効）
ref.readメソッドを使った時点における
Providerを取得することができる。
取得できるだけで、値の変化は監視できない。
↓
使用地点でのステート取得になるため、
ユーザーが何か操作をしたとき
（ボタンをタップするなど）に呼び出すことが
望ましい。
※実装時は可能な限り ref.watch を使う。
↓
よりリアクティブかつ宣言的になり、
コードの保守性を高めることができる
（公式リファレンスより）
※リアクティブではないため、可能な限り使用を避ける。
↓
watchやlistenの使用で問題が生じる場合の回避策
（公式リファレンスより）

8. 併用ライブラリ・パッケージ
freezed（https://pub.dev/packages/freezed）
flutter̲hooks（https://pub.dev/packages/flutter̲hooks）
8

9. 併用ライブラリ・パッケージ
freezed
flutter̲hooks
導入した理由
・Immutableなクラスが作れる
・copyWith, ==, toStringなどのよく使うメソッドが自動生成できる
・軽微な追記でfromJson, toJsonが自動作成され、クラスとJSONの相互変換が簡単に行える
→ APIから取得してきたJSONファイルなどのマッピングもラクになる
Riverpodと相性がいい
9

10. 併用ライブラリ・パッケージ
freezed
flutter̲hooks
導入した理由
・Widget内のみで状態管理したい場合に便利
・状態が変更された際の検知も簡単に行える
使用hooks
・useEffect
・useState
・useMemoized
・useValueChanged
など
10

11. 併用ライブラリ・パッケージ
・26, 27行目
useStateで初期値をセットする。
・29行目
useEffectを使うと、その中に存在する処理はビルド時 or 第
二引数の値が変化した場合に実行される。
・30行目
useStateで定義した値は、<変数名>.valueで呼び出すことが
できる。代入するだけで上書きも可能。
・36行目
第二引数に監視する値を入れておくことで、変更があった際に
もuseEffect内の処理を走らせることができる。
使用例
11