非エンジニア、Flutterはじめました

はじめに

この記事は、FLutterを学ばんとする非エンジニアの、非エンジニアによる、非エンジニアのための覚書きです。ときどき事実と異なることを書いていたり、特定の条件下でしか通用しないテクニックが含まれる可能性があります。非エンジニアだからこその目線を活かしてわかりやすく書けたらと思っていますが、その代わり正確性は保証できません。ごめんね。

Flutterはじめました

とあるきっかけでエンジニアの人たちと深く関わることになり、また自分自身も開発スキルを身につける必要が生じたことから、AndroidとiOS、web appなどを同時に開発できるFlutterというツールを学ぶことになりました。ちゃんとした入門書やweb記事は既にあちこちにあるので、ここにはちょっと違う角度から「できないやつ」目線の説明だったり、モチベ維持に役立つ情報を雑多に書いていけたらと思います。

突然ですが、JSONデータについて

JSONデータには、こんな感じのkeyとvalueが永久に（ではないが）羅列されています。

"おにぎり":"昆布",
"地下鉄":"大濠公園",
"天気":"晴れのち雨",
"お仕事":"おやすみ",
"飲み物":"ほうじ茶",
"眠気":30

正確に言うとこれだけではないですが一旦ここでは省いて、真ん中の部分の構造についてのみ説明します。

ここで、例えば、

"おにぎり":"昆布",

というデータがあるとします。

この"おにぎり"はkeyと呼ばれ、"昆布"というvalueを整理する役割を果たしています。そのためJSONでは、"おにぎり"にあたるようなkeyを検索することによって、valueの値をとってくることができます。例えばdartであればこんな風に。

void main(){
print(data['おにぎり']);
]

Map<String,dynamic>data = {

"おにぎり":"昆布",
"地下鉄":"大濠公園",
"天気":"晴れのち雨",
"お仕事":"おやすみ",
"飲み物":"ほうじ茶",
"眠気":30

};

これをdartpadで実行してみましょう。すると、「昆布」と表示してくれます。

さあ、ここで、上のコードを見ながら気になった方がいるかもしれません。

Listの取り出し方

今上で挙げたような単純なJSONだけでなく、世の中にはもう少し複雑な構造を持ったJSONも存在します。例えば、こんな感じ。

Map<string,dynamic>data = {
"おにぎり":"昆布",
"地下鉄":[
{
"駅":"大濠公園",
"車両":303,
"距離":"7km",
},
]
}

ちょっと見づらいかもしれないですが、先ほどのコードとは違い、[]が含まれています。これは、一つのkeyの中に、もう一つkeyがあって、その中にvalueが格納されている...みたいな階層構造になっています。

この構造をList構造と呼ぶのですが、List構造から[]の中にあるvalueを取り出すときには、さっきと同じ方法では取り出せません。ざんねん。

そこで、以下のような感じで取り出します。