【Flutter/Dart】Mapクラスの基本的な使い方/基礎から実践

FlutterをやっているとMapクラスを使用することになると思いますが、いまいち理解できそうになかったのでまとめました。

基礎から実践までサンプルがあります。動かない場合はコメントください。

動かすにはDartpadを使用してください。

1 Mapクラスとは
- 1.1 List・Set・Mapの違い
2 基本の使い方
3 データ通信に必要なメソッド-toJSON
- 3.1 使い方
- 3.2 サンプル
4 実践

Mapクラスとは

公式サイト

https://api.flutter.dev/flutter/dart-core/Map-class.html

Mapを使えば、value(データ)にkey(valueが格納される場所の名前)を紐付けて格納し、紐づけられたvalueを1つの固まり(コレクション)として操作できます。また収納したvalueを後で置き換えたり、追加したり、削除したりと自由にvalueを操作できます。
上のイラストは、３つのvalueがそれぞれkeyで紐づけられているMapをイメージしたものです。リンゴのイラスト（value）は、「リンゴ」のkeyで紐づけられています。よってMapから格納されたリンゴのイラストを取得するには「リンゴ」のkeyを使って取得します。
https://flutternyumon.com/how-to-use-map/

公式ページはこちらです。

List・Set・Mapの違い

List・Set・Mapの違いは下記の表のようになっています。

違い/型	List	Set	Map
宣言	[]	{}	{}
要素	重複要素を持てる	重複要素を持てない	重複要素を持てない
順序	順序付きコレクション	デフォルトは順序付き	デフォルトは順序付き

基本の使い方

空のMapを定義

//基本的なMap
var Map名 = Map<キーの型, 値の型>();

//例型を宣言したMap
var fruit = <String, String>();

Mapに値を入れる

//基本的な宣言
var Map名 = {
  キー1: 値1,
  キー2: 値2,
  キー3: 値3,
};

//変数に入れる
var ages = {
  'Alex': 18,
  'Ben': 15,
  'Charlie': 25,
};

サンプル

基本的にMapクラスを使うときには、以下のようにvalue:keyとして変数に格納して保存します。

出力する際は、オブジェクトにアクセスしforchなどで全てを取り出し、printで出力することができます。（forでも同じように出力させることができます。）

配列の中の値をとる

このようにすればピンポイントで配列の値をとることができます。

void main(){
  var ages = {
  'Alex': 18,
  'Ben': 15,
  'Charlie': 25,
};
print(ages['Alex']);
  }

配列の中の値を書き換える

このようなすればピンポイントで配列の中の値を書き換えることができます。

void main(){
  var ages = {
  'Alex': 18,
  'Ben': 15,
  'Charlie': 25,
};

ages['Alex'] = 30;
print(ages['Alex']); 
  }

Mapのプロパティ

ちなみに、Mapを使うときにキーのみ、値のみを格納することはできません。

空の値を格納したい場合はNullを指定してください。

isEnpty

このプロパティをつかえは変数の中に値が格納されているかどうかを確かめることができます。

void main(){
  Map<String, int> ages = {
  'Alex': 18,
  'Ben': 15,
  'Charlie': 25,
};
print(ages.isEmpty); 
  }

length

このプロパティを使えば変数に格納されている値の数を確かめることができます。

void main(){
  Map<String, int> ages = {
  'Alex': 18,
  'Ben': 15,
  'Charly': 25,
};
print(ages.length);
  }

Mapのメソッド

form

公式サイト

https://api.flutter.dev/flutter/dart-core/Map/Map.from.html

void main(){
  final planets = <num, String>{1: 'Mercury', 2: 'Venus', 3: 'Earth', 4: 'Mars'};
final mapFrom = Map<int, String>.from(planets);
print(mapFrom);
  }

addAll

基本マップに別のマップをくっつけます。出力時には両方の値が格納されています。

void main(){
  var ages = {
  'Alex': 18,
  'Ben': 15,
  'Charly': 25,
};

var Dakota = {'Dakota':24};

ages.addAll(Dakota);
print(ages);}

データ通信に必要なメソッド-toJSON

通信をする際には、データをjson形式にしてやり取りする必要があります。

そこで使うのが、エンコード処理toJSONメソッドです。

公式サイト

https://api.flutter.dev/flutter/services/TextEditingValue/toJSON.html

使い方

型 toJson() => {名前つき引数:データ};

サンプル

Map<String, dynamic> toJSON() {
  return <String, dynamic>{
    'text': text,
    'selectionBase': selection.baseOffset,
    'selectionExtent': selection.extentOffset,
    'selectionAffinity': selection.affinity.toString(),
    'selectionIsDirectional': selection.isDirectional,
    'composingBase': composing.start,
    'composingExtent': composing.end,
  };
}
void main(){
print(Map);
}