Zenn
💙

【Flutter】`json_serializable`の使い方

に公開
Flutter
Dart
JSON
tech

FlutterでAPIとやりとりする際に避けて通れないのが JSONのパース。
今回はその手間を減らしてくれるライブラリ json_serializable の使い方を解説します！

なにができるの？

json_serializable は、DartのクラスとJSONの変換（シリアライズ / デシリアライズ）を 自動生成してくれるライブラリ

モデルクラスの作成

例えば、こんなJSONデータをFlutterで扱いたいとします：

{
  "name": "Alice",
  "age": 25
}

この場合、Dartでは次のようなクラスを書きます：

import 'package:json_annotation/json_annotation.dart';

part 'user.g.dart'; // ← 自動生成ファイルを指定

@JsonSerializable()
class User {
  final String name;
  final int age;

  User({required this.name, required this.age});

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}

ポイント

  • @JsonSerializable()
    このアノテーションを付けることで、Dartがこのクラスに対して fromJson / toJson メソッドの自動生成を行います。

  • part 'user.g.dart';
    自動生成されるファイルへのリンクです。このファイルは手動で作る必要はなく、build_runner コマンドで生成されます。ファイル名（user.g.dart）は、クラスを定義したファイル名（例：user.dart）に対応させてください。

  • factory User.fromJson(Map<String, dynamic> json)
    JSONをクラスのインスタンスに変換するファクトリコンストラクタ。_$UserFromJson(json) は自動で作られます。

  • Map<String, dynamic> toJson()
    クラスのインスタンスをJSONに変換するメソッド。_$UserToJson(this) も自動生成されます。

コードの自動生成

次に、.g.dart ファイルを自動で生成するために以下のコマンドを実行

flutter pub run build_runner build

使い方の例

たとえば、APIから取得したJSONをFlutterのクラスに変換したい場合は：

final json = {"name": "Tanaka", "age": 25};
final user = User.fromJson(json);

print(user.name); // Tanaka

逆に、FlutterのクラスからJSONを生成したいときは：

final user = User(name: "Tanaka", age: 25);
final json = user.toJson();

print(json); // {name: Tanaka, age: 25}

このように、toJson() を使えば、Dartのオブジェクトをそのままサーバーに送信できる形式（JSON）に変換できます。
APIにPOSTする場合や、ローカルストレージ・ファイルへの保存など、さまざまな場面で非常に便利です。

気をつけること

  • part 'user.g.dart'; を書き忘れると、コード生成時にエラーになります。
  • flutter pub run build_runner build（または watch）を実行しないと、.g.dart が生成されず、fromJson や toJson が使えません。
  • JSONのキーとDartの変数名が一致しないと正しくマッピングされないため、その場合は @JsonKey を使って手動で指定します。
@JsonKey(name: 'user_name')
final String name;

Discussion