[Flutter] fromJson・toJsonやjsonDecode・jsonEncodeがごちゃごちゃしたので整理してみた

Flutter

Posted at 2023-10-19

こんにちは。いせりゅーです😋

最近、新しいトピックに取り組む際の挑戦や躓きを経験しています。そんな中、業務でのフィードバックを通じて、JSONのエンコード・デコードの理解について新たな気づきを得ました。それを皆さんと共有したいと思います!!

問題の背景

この辺りについては理解したつもりだったが、深く考えてみると言葉がごちゃごちゃしてしまった
encode/decodeの意味がわからなかった

認識のミスがありましたら、コメントいただけると幸いです🙇

理解する上で参考になるコード

user.dart

class User {
  final String email;
  final String password;
  final String userName;
  
  User(
    this.email,
    this.password,
    this.userName,
  );

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

  Map<String, dynamic> toJson() => {
        'email': email,
        'password': password,
        'user_name': userName,
      };
}

表にしてみた

自分なりに理解したものを表にしてみました。詳しい詳細などは下に記載しています。

FromJson	toJson
jsonから〇〇	〇〇からjson
JsonDecode	JsonEncode
JSON形式を与えられたvalueに返す	与えられたvalueをJSON形式にした文字列を返す

それぞれの説明

fromJson（JsonDecode）

英語の意味: 「jsonから〇〇」
具体的な変換: Json -> User
JsonDecode
- エンコードの逆
- JSON形式を与えられたvalueに変換する
使用例
- APIからのデータ取得
- ローカルのJSONファイルからのデータ取得

コードで理解してみる

今回は、APIから取得したJSONデータを、アプリ内のモデルに変換するコードを例として記載しました。必要以上のコメントがありますが、僕自身のためにご愛嬌いただけると幸いです🙇

preference.dart

import 'dart:convert';
import 'package:http/http.dart' as http;
import '../user.dart';

Future<User> fetchUserData() async {
  // httpパッケージのgetメソッドを使用して、指定されたURLからデータを取得する
  final response = await http.get('https://api.example.com/user');
  // response.statusCodeが２００（HTTPリクエストの結果が成功した場合）
  if (response.statusCode == 200) {
    // HTTPレスポンスのボディ部分をJSON形式からDartのオブジェクト(User)に変換
    // Json -> User
    return User.fromJson(jsonDecode(response.body));
  } else {
    throw Exception('Failed to load user data');
  }
}

toJson(JsonEncode)

英語の意味: 英語の意味にすると「〇〇からjsonに変換」
具体的な変換:User -> Json
JsonEncode
- 与えられたvalueをJSON形式にした文字列を返します
使用例
- APIへのデータ送信
- ローカルストレージへのデータ保存

コード例

今回は、ローカルストレージへのデータ保存のコードを例として記載しました。必要以上のコメントがありますが、僕自身のためにご愛嬌いただけると幸いです🙇

preference.dart

import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';
import '../user.dart';

Future<void> saveSettings(User user) async {
  final prefs = await SharedPreferences.getInstance();
  //User -> Json
  //Userのデータからjsonに変換している
  final String jsonSettings = jsonEncode(user.toJson());
  prefs.setString('user', jsonSettings);
}

感想

DecodeやEncodeって生活では使わないので、いまいちピンときませんでした。
英語で意味を開いてみてもどちらがを理解していないとわからないのではないかなと思いました。
そのため、個人的には、 fromJson（）→jsonDecodeとtoJson→jsonEncodeと繋げて覚えることにしました。それでもなかなか定着するのは時間がかかりそうです。とにかくたくさん使って頭にいれる！
理解していたつもりですが、改めて整理してみると理解できていなかったんだなと実感することができました。
他の方はどう覚えているのでしょうか・・？？（１＋１＝２的な感じで理解できるのは当たり前なのでしょうか・・？？どうなんだろう🤔）

最後に

初めてのトピックや新しい技術に挑戦することは難しく、時には混乱や躓きを感じることがあります。しかし、その過程で得た知識や経験を共有することで、一緒に成長していけることを信じています👍

皆さんがJSONのエンコード・デコードについての理解を深めるお手伝いができれば幸いです。もし、より良い方法や視点があれば、ぜひ共有してください🙌