Slackコミュニティに

無料で参加する

Flutterラボの

プレミアム会員になる

【Flutter】MapとMapEntryの違いとは?

2021.10.31

MapとMapEntry、どちらもkeyとvalueを指定して使うものですが、スクールでFlutterを教えているとどのような違いがあるのか知らない方が多いように感じるので簡単に解説していきたいと思います。

結論

ひとことで説明すると
keyとvalueのセットを複数格納できるか否か
となります。

以下で詳しく説明しますが、そもそもMapを知らないという方は、Mapについて解説した記事も公開しているのでそちらをご参照ください。

データの格納方法の違い

以下のような情報があることを例に考えてみましょう。

  • Flutter(言語:Dart)

  • Rails(言語:Ruby)

  • React(言語:JavaScript)

Mapでこの情報を格納しようとすると

Map<String, String> frameworksMap = {
  'Flutter' : 'Dart',
  'Rails' : 'Ruby',
  'React': 'JavaScript'
};

MapEntryで格納しようとすると

List<MapEntry> frameworksList = [
  MapEntry('Flutter', 'Dart'),
  MapEntry('Rails', 'Ruby'),
  MapEntry('React', 'JavaScript'),
];

このように、keyとvalueを複数格納できるMapではそのまま格納しますが、ひとつしか格納できないMapEntryではListを併用して考えることになります。

実際によく使う場面

ケース①:この情報を表示したいとき

Map

Column(
  children: frameworksMap.keys.map((e) => Text('$eの開発言語は${frameworksMap[e]}')).toList(),
)

MapEntry

Column(
  children: frameworksList.map((e) => Text('${e.key}の開発言語は${e.value}')).toList(),
)

この場合、Mapでは一度keyの一覧を取得して、さらにvalueを検索するようなコードになってしまうため煩雑なコードになってしまいます。
それに比べて、MapEntryでは情報を.keyや.valueだけで取得できてわかりやすいコードになっているので、このケースはMapEntryを選択するのが良さそうです。

ケース②:この情報から特定の情報を取り出すとき

Map

frameworksMap['Flutter'] // Dart

MapEntry

frameworksList[0].value // Dart

このようにDartというvalueの情報を取り出す場合、MapEntryではリストのインデックスを指定して、.valueで取得することになります。
それに比べて、Mapではkeyを指定するだけで取得できるので、Mapのほうが扱いやすいことが多いと思います。

ケース③:新しい情報を追加するとき

Map

frameworksMap['Firestore'] = 'TypeScript';
frameworksMap['Firestore'] = 'JavaScript'; // keyが重複しているので上書き更新される

MapEntry

frameworksList.add(MapEntry('Firestore', 'TypeScript'));
frameworksList.add(MapEntry('Firestore', 'JavaScript')); //keyが重複したまま追加される

この場合、Mapはkeyが重複しないようになっているので、同じkeyがあれば上書きされます。MapEntryではListで複数情報を扱っているのでkeyを重複したまま追加されることになります。
どちらが良い悪いということではなく、どういった情報を格納しておきたいかでどちらを使うべきかが変わってきます。

まとめ

Mapは格納されているデータの順序を考えて扱うことを前提としていないので、リスト表示したり並べ替えたりするのには向いていませんが、検索して取得するような場面に適しています。
逆に、MapEntryはそのまま複数情報を格納できず、Listと併せて使うことになりますが、keyとvalueが同列の情報として扱えるので単に2個セットの情報を格納したいときに適していると言えます。

※会員向けに毎週更新される動画をみてFlutterが学習できる『Flutterラボ』と、その中でマンツーマン指導のオンラインスクールを運営しています。

Flutterラボ|動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/