M5Stackを使用する際、クラウドサービスや他の機器との通信は頻繁に行われます。
データ交換を行う際、JSONの使用が一般的です。
本記事では、UIFlow2でJSONを効果的に使用する方法について詳しく解説します。
JSONを理解するためには、リスト、マップと関連付けて理解する必要があります。
リスト、マップについてこちらの解説も参考にしていただければと思います。
JSONについて
JSONとは？
JSON（JavaScript Object Notation）は、データ交換フォーマットの一つです。
軽量で読み書きが容易なため、Web上でのデータ転送に広く使用されています。
JSONは、テキストベースで、人間にも機械にも理解しやすい構造です。
JSONの基本構造
JSONは以下の二つの構造でデータを表現します。
名前/値のペアのコレクション
UIFlowではマップ（辞書）に相当します。
{}で囲まれ、キー: 値のペアがコンマで区切られています。
'{"name": "Yoshida", "age": 25, "city": "Tokyo"}'値の順序付けられたリスト（配列）
UIFlowではリスト（list）に相当します。
[]で囲まれ、値がコンマで区切られています。
'["Python", "JavaScript", "SQL"]'UIFlowでJSONの使い方
マップをJSONに変換する
マップをJSONに変換するには、 
を使います。
実際の使い方の例を以下に示します。
この例の場合、
変数 mapは {'name': 'Yoshida', 'age': 25, 'city': 'Tokyo'}変数 json_textは '{"name": "Yoshida", "age": 25, "city": "Tokyo"}'一見ほとんど同じ様に見えますが、UIFlow内部では異なるデータ型として認識していることに注意が必要です。
それぞれのデータ型は
変数 mapは dict型
変数 json_textは str型。
つまり、JSON変換後は文字列として認識されていることに注意しましょう。
JSONをマップに変換する
JSONをマップに変換するためには、 
を使います。
実際の使い方の例を以下に示します。
変数 json_textにJSON文字列を代入。
変数 mapには json_textの内容を辞書型に変換して代入されます。
それぞれの変数の中身を確認すると下記のようになります。
変数 json_textは '{"name": "Yoshida", "age": 25, "city": "Tokyo"}'
変数 mapは {'name': 'Yoshida', 'age': 25, 'city': 'Tokyo'}各変数の中身は似ていますが、データ型が異なることを理解しておきましょう。
例えば、キー"name"の値を取り出すために下記のコードを実行するとエラーになります。
正しいコードは以下になります。
キー"name"の値にアクセスするためには、マップ（辞書型）に変更した変数 mapを作成して使用する必要があります。
JSONを受け取ってデータ取得する事例
では、実際にJSONを受け取ってデータを取得する事例を見てみましょう。
受け取るJSONを下記とします。
{"fruits": ["apple", "banana", "cherry"], "numbers": [1, 2, 3, 4, 5]}キー"fruits"の２つ目の要素を取り出す場合について下記に示します。
この例では、data には banana が格納されます。
まとめ
JSONとUIFLowのマップ（辞書）は、データをキーと値のペアで表現する点で似ています。
しかし、その使用目的、構文、データ型のサポートにおいて違いがあります。
UIFlowのjsonブロックを使うことで、これら二つのデータ構造間で簡単に変換が可能です。
この理解により、UIFlowプログラミングのさらなる理解につながります。