🙆

【Flutter】Riverpodコード生成特有のコードの『???』を解消する最初の記事

2025/07/09に公開

 はじめに

皆さん、こんにちは。
今回はRiverpodのコード生成を利用したプログラミングの雰囲気や注意事項などの全体感を紹介しております。
細かな書き方ではなく見慣れない記述など、Riverpod初学者の「？？？」を解消できることを目標にしています。
なんとなくRiverpodに触り始めて「？？？」となっている方の助けになればと思います。

 コード生成とは

 概要Riverpod2.0から利用可能な記述方法
コード生成はアノテーションの付与とコマンドにて実行

 Riverpod2.0から利用可能な記述方法Riverpod 2.0からプロバイダーの「コード生成」が使えるようになりました。これは、プロバイダーの作成をぐっと楽にしてくれます。
これまでは、決まった形のコードを手で書いていました。コード生成を使えば、アノテーションを付けたクラスや関数を元に、プロバイダーのコードを自動生成することができます。
Riverpod自体の特徴はこちらの記事で紹介しております。
https://zenn.dev/peter_norio/articles/048d5ab7111b39#riverpodの特徴

 コード生成はアノテーションの付与とコマンドにて実行@riverpodアノテーションを記述したコードを作成し、コード生成のコマンドをターミナルで実行することでコード生成が行われます。
手順はこちらの記事で紹介しております。
https://zenn.dev/peter_norio/articles/048d5ab7111b39#利用ステップと書き方のシンプルな例

 生成されたモノの命名ルールと特殊な記述

 概要生成されたモノの命名ルール
生成されたプロバイダー名は「[関数名orクラス名]Provider」
生成されたファイル名は「[元のファイル名]Provider.g.dart」

特殊な記述
part構文で取り込む
自動生成される_$クラス名を継承してクラスを作成する

stete 変数で状態を管理・更新する


 生成されたモノの命名ルールコード生成で作られるファイルとプロバイダの名前にはルールがあります。
自動生成されるプロバイダ名は、元の関数名やクラス名をキャメルケースにし、末尾にProviderを付けた名前になります。例えばCounterNotifierというクラスからはcounterNotifierProviderというプロバイダが作られます。このプロバイダをウィジェットで利用して画面表示などに活用します。
生成されるファイル名は、元のファイル名に.g.dartを追加したものになります。例えばcounter_notifier.dartというファイルでコード生成を行うと、counter_notifier.g.dartというファイルが自動で作成されます。このファイルはpart構文で読み込んで使用します。

 特殊な記述自動生成を活用したコードは次のような記述になります。この中の見慣れない記述について見ていきます。
例
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';

// part構文でファイルを取り込む
part 'class_counter.g.dart';

// _$クラス名を継承してクラスを作成する
@riverpod
class CounterNotifier extends _$CounterNotifier {
  @override
  int build() {
    return 0;
  }

  void increment() {
    // state変数で状態を管理・更新する
    state = state + 1;
  }
}
まず、part 'ファイル名.g.dart';という記述は、自動生成されるファイル（.g.dartで終わるファイル）を、今書いているファイルの一部として取り込むための宣言です。これにより、自動生成されたファイル内の要素を参照することができます。
次に、class CounterNotifier extends _$CounterNotifierのように、_$から始まるクラスをextends（継承）します。この_$CounterNotifierは、partで指定したファイルの中に自動で作られるクラスで、状態管理に必要な機能が全て詰まっています。
state = state + 1;のように使うstate変数は、継承した_$クラス名から与えられる、状態を保持するための特別な変数です。このstateに新しい値を代入するだけで、Riverpodが変更を自動で検知し、関連するUIを更新してくれます。状態の読み取りと更新を、このstate変数を通じて行います。
!state = 値;とすることでref.watchをしてるウィジェット側に即座に変更が伝わります。

 快適に開発をするための合言葉

 概要赤波線に悩まない！
buildコマンドを実行しないと赤並線のまま

buildはwatchで放置！
watchモードでbuildすると変更を検知して自動で再build

スニペットで爆速コーディング！
Riverpod Snipetを使うとボイラープレートを自動入力


 赤波線に悩まない！生成を利用したコードは記述中に赤波線がいくつか出てきます。それは主にpart文や生成されるはずのプロバイダ名（[関数名orクラス名]Provider）の部分です。
これは参照先である.g.dartファイルがまだ物理的に存在しないために起こる参照エラーです。
buildコマンドを実行し、コード生成を完了させることで必要なファイル群が作成されます。これで赤波線は自然に解消されます。

 buildはwatchで放置！コードを修正するたび、手動でbuildコマンドを実行するのは手間がかかります。そこで便利なwatchモードです。
これを一度実行すると、build_runnerが起動したままの状態になり、プロジェクト内のファイルの変更を常に監視し始めます。コード生成を自動的に再実行し、.g.dartファイルを常に最新の状態に更新してくれるのです。
watchモードはこちらの記事でも紹介しております。
https://zenn.dev/peter_norio/articles/048d5ab7111b39#利用ステップと書き方のシンプルな例

 スニペットで爆速コーディング！開発をさらに高速化するのが、VSCodeなどのエディタに導入できる「Riverpod Snippets」という拡張機能です。
これは、コードの定型文（ボイラープレート）を、キーワード入力で記述するための機能です。これにより、毎回同じコードを手で書く手間が省けます。
スニペットについてはこちらの記事でも紹介しております。
https://zenn.dev/peter_norio/articles/048d5ab7111b39#riverpodの利用をサポートするツール

 おわりに

Riverpodのコード生成にはクセのあるルールや見慣れない記述が散見されます。これがまた１つのハードルになってしまうので、Riverpod自体の良さに辿り着く前に挫折しないよう頭の片隅に留めていると良いかと思い記事にいたしました。
参考になれば幸いです。