atabata site

JSON and serialization

どのser手法がいいだろうか

  • 以下のどっちがいいでしょうか
    • 手動
    • コード生成を用いた自動
  • アプリが大きくて変更がしばしば入るなら自動の方が良さげ

手動を小さなProjectで使う

  • jsonDecoderを使ってMap<String, dynamic>にマッピングする
  • 要素数とか増えると面倒だしバグも増える

自動を大きなProjectで使う

  • json_serializableやbuild_valueを使って変換するボイラープレートを生成する

GSON/Jackson/Moshiみたいなのはないの？

  • ないよ
  • reflectionを使わないといけないけどflutterではoffになっている

data:convertを用いた手動ser

  • 基本的なJSON serはシンプル
  • 以下のjsonがあるとする
{
  "name": "John Smith",
  "email": "john@example.com"
}

inlineでserする

  • jsonDecodeでできる
Map<String, dynamic> user = jsonDecode(jsonString);

print('Howdy, ${user['name']}!');
print('We sent the verification link to ${user['email']}.');
  • ただしdynamicになってしまっているのでタイプセーフではない

model classないでserする

  • User class内に以下の感じの実装をする
class User {
  final String name;
  final String email;

  User(this.name, this.email);

  User.fromJson(Map<String, dynamic> json)
      : name = json['name'],
        email = json['email'];

  Map<String, dynamic> toJson() => {
        'name': name,
        'email': email,
      };
}
  • 型安全で属性名も自動保管してくれている
  • 間違っていたときはコンパイルエラーが出る
  • 以下の感じで使える
Map<String, dynamic> userMap = jsonDecode(jsonString);
var user = User.fromJson(userMap);

print('Howdy, ${user.name}!');
print('We sent the verification link to ${user.email}.');

コード生成ライブラリを用いた自動ser

  • json_serializableを用いる

modelクラス作成

  • pubspec.yamlに追記したら以下の感じでjson_serializableに即したmodelを記載する
import 'package:json_annotation/json_annotation.dart';

/// This allows the `User` class to access private members in
/// the generated file. The value for this is *.g.dart, where
/// the star denotes the source file name.
part 'user.g.dart';

/// An annotation for the code generator to know that this class needs the
/// JSON serialization logic to be generated.
@JsonSerializable()
class User {
  User(this.name, this.email);

  String name;
  String email;

  /// A necessary factory constructor for creating a new User instance
  /// from a map. Pass the map to the generated `_$UserFromJson()` constructor.
  /// The constructor is named after the source class, in this case, User.
  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);

  /// `toJson` is the convention for a class to declare support for serialization
  /// to JSON. The implementation simply calls the private, generated
  /// helper method `_$UserToJson`.
  Map<String, dynamic> toJson() => _$UserToJson(this);
}
  • これでnameとemailをエンコード・デコードするコードを自動生成できる
  • また以下のようにマッピングの変更も可能
/// Tell json_serializable that "registration_date_millis" should be
/// mapped to this property.
@JsonKey(name: 'registration_date_millis')
final int registrationDateMillis;
  • 上記は@JsonSerializable(fieldRename: FieldRename.snake)で代用可能
  • 以下の感じでサーバのデータを無視したりデフォルト入れたりできる
/// Tell json_serializable to use "defaultValue" if the JSON doesn't
/// contain this key or if the value is `null`.
@JsonKey(defaultValue: false)
final bool isAdult;

/// When `true` tell json_serializable that JSON must contain the key, 
/// If the key doesn't exist, an exception is thrown.
@JsonKey(required: true)
final String id;

/// When `true` tell json_serializable that generated code should 
/// ignore this field completely. 
@JsonKey(ignore: true)
final String verificationCode;

コード生成

  • 以下のようにやる
## 一回だけ生成
flutter pub run build_runner build --delete-conflicting-outputs

## 継続的に生成
flutter pub run build_runner watch --delete-conflicting-outputs

modelの利用

  • 上記で作成したModelは以下のように使える
// str -> obj
Map<String, dynamic> userMap = jsonDecode(jsonString);
var user = User.fromJson(userMap);

// obj -> str
String json = jsonEncode(user);

ネストされたクラスでは

  • 以下の感じ
// Address
import 'package:json_annotation/json_annotation.dart';
part 'address.g.dart';

@JsonSerializable()
class Address {
  String street;
  String city;

  Address(this.street, this.city);

  factory Address.fromJson(Map<String, dynamic> json) =>
      _$AddressFromJson(json);
  Map<String, dynamic> toJson() => _$AddressToJson(this);
}
  • 上記のAddressクラスはUserクラス内にある
import 'package:json_annotation/json_annotation.dart';

import 'address.dart';

part 'user.g.dart';

@JsonSerializable()
class User {
  User(this.name, this.address);

  String name;
  Address address;

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
  Map<String, dynamic> toJson() => _$UserToJson(this);
}
  • これでネストは表現できているが、このままだとtoJsonで以下のような出力になってしまう
{name: John, address: Instance of 'address'}
  • そこでexplicitToJson: trueをつけるとちゃんとネストされたクラスも以下のように見える
{name: John, address: {street: My st., city: New York}}