【Flutter】Freezedの基本と応用を徹底解説！！

こんにちは。新人プログラマーの岩本です。

今回はFlutterのFreezedパッケージについて、学んだことを解説します。

このパッケージは業務でもよく使われる基本的なパッケージなので、知っておいて損はないです。

ぜひ最後までご覧ください。

Freezedとは

Freezedパッケージとは、Imuutableなクラスを自動生成してくれるものです。開発者はRiverpodの生みの親でもあるRemi Rousselet氏です。

freezed | Dart package

Code generation for immutable classes that has a simple syntax/API without compromising on the features.

pub.dev

開発で必要となる基本的なメソッドも自動生成してくれます。

またjson_serializableパッケージと併用することで、JSONの変換メソッド（fromJson, toJson）も自動生成してくれます。

Freezedを使用するメリット

Freezedを使用するメリットは主に2つあります。

安全性の向上

Freezedで生成されるクラスは、イミュータブルなクラスです。

値が変更できないので、副作用によるバグを減らし、コードの信頼性を高めることができます。

値を変更したい場合はcopyWithメソッドを使い、新しいインスタンスを生成します。

ボイラープレートコードの削減

copyWithや==演算子などのメソッドを自動生成してくれるので、開発の手間を大きく削減できます。

自動生成なのでタイプミスなど人為的なミスをなくせるのも大きな利点です。

Freezedの基本的な使い方

必要なパッケージのインストール

まずは必要なパッケージをインストールします。

flutter pub add freezed_annotation

flutter pub add --dev freezed build_runner

クラスの記述

次に自動生成したいクラスを記述します。

今回はnameとageをフィールドにもつUserクラスを作成します。

import 'package:freezed_annotation/freezed_annotation.dart';

part 'user.freezed.dart';

@freezed
class User with _$User {
  factory User({
    required String name,
    required int age,
  }) = _User;
}

現時点ではエラーが出てると思いますが、無視でOKです。

コードのポイントをいくつか解説します。

まずクラスの前に @freezed をつけます。これでクラスがfreezedによって自動生成されることを示します。

次にwith で _$User を継承します。_$Userはこの後自動生成されるクラスで、copyWithやtoStringメソッドが記述されています。

最後にfactoryコンストラクタを定義し、この中に必要なプロパティを記述します。

コードを自動生成する

最後に以下のコマンドを実行してください。

flutter pub run build_runner build --delete-conflicting-outputs

実行すると、user.freezed.dartが生成され、エラーが解消されていると思います。

また以下のコマンドを実行すると、クラスを変更したときに自動で更新されるようになります。

fvm flutter pub run build_runner watch --delete-conflicting-outputs

これでFreezedの基本的な使い方はマスターできたと思います。

JSONシリアライズメソッドの生成

Freezedは、json_serializableと併用することで、fromJsonとtoJsonメソッドも自動生成できます。

必要なパッケージのインストール

まずは必要なパッケージをインストールします。

Freezedを使うのに必要なパッケージ（前述の通り）はインストールされているものとします。

flutter pub add json_annotation

flutter pub add --dev json_serializable

fromJsonのfactoryメソッドを追加

次に先ほど作成したUserクラスに、fromJsonのfactoryメソッドを追加します。

part 'user.freezed.dart';
part 'user.g.dart'; // ⭐️追加

@freezed
class User with _$User {
  factory User({
    required String name,
    required int age,
  }) = _User;

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json); // ⭐️追加
}

コードを自動生成する

最後に以下のコマンドを実行してください。

flutter pub run build_runner build --delete-conflicting-outputs

すると、user.g.dartが生成され、fromJsonとtoJsonメソッドが使えるようになります。

VSCodeのスニペット設定

同僚に教えてもらったVSCodeのスニペットが、とても便利だったので紹介します。

まずVSCodeの左下の歯車ボタンをクリックして、「UserSnippets」を選択してください。

すると入力欄が出てくるので、「dart」と入力してください。

dart.jsonが開くと思うので、以下の記述を追加して保存します。

"Freezed class with import": {
		"prefix": "freezed",
		"description": "Create a Freezed class with import",
		"body": [
			"import 'package:freezed_annotation/freezed_annotation.dart';",
			"",
			"part '${TM_FILENAME_BASE}.freezed.dart';",
			"part '${TM_FILENAME_BASE}.g.dart';",
			"",
			"@freezed",
			"class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g} with _$${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g} {",
			"\\tconst factory ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}({",
			"\\t\\t// 必要フィールドを定義",
			"\\t\\trequired String title,",
			"\\t}) = _${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g};",
			"",
			"\\tfactory ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}.fromJson(Map<String, dynamic> json) =>",
			"\\t\\t_$${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/g}FromJson(json);",
			"}"
		]
	}

正しく設定できてると、「freezed」と入力するだけで雛形が出力されます。便利ですね。

まとめ

今回はFlutterのFreezedパッケージについて解説しました。

前述した通りFreezedは様々な業務で使われるほど、基本的なパッケージです。

Flutterを勉強する上で避けて通れないものだと思います。

ぜひご自身の手で色々と試してみてください。

ここまでのご閲覧ありがとうございました！

参考にした記事

• https://flutter.salon/plugin/freezed/