Fetch JSON：あなたのアプリを激的に拡張するプラグイン その２【ノーコード・ツールGlide】

今回2回目の記事は、JSON形式のデータから特定のプロパティ、すわなち、欲しいデータを指定する方法について、詳しく解説します。

頭くらくらになっても、どうにかくらいついてください（あ、私に嚙みつかないでください😅）。できるだけ、できるだけ、丁寧に説明します。すべては、みなさまのアプリをパワーアップするためです😄。

なお、前回記事は、こちらです。

いやもう動画で見たいんだ、という方はこちらです。

続けます。お目当ての辞書データは、APIを通じてJSON形式で提供されます。それをFormatterで分かりやすく表示しました。ここまではOKですね。

しかし、そのデータのうち、アプリで必要なものは限られています。今回欲しいものは、Definitionのデータです。単語の意味に関する説明箇所ですね。下図の赤枠です。

さあ、これをどう指定するのか？これが今回のハイライトでございます！

では、行きますよ😆！

まずはお試し！Fetch JSON

まずは、Fetch JSONプラグインが、このAPIを通じてデータを取得できるか、チェックしましょう！😲Glideプラグインのページに移動します。

仮に、catという単語の定義が欲しい、とします。そのために、
https://api.dictionaryapi.dev/api/v2/entries/en/catをURL欄に貼り付けます。おお！結果欄に、きちんとJSONデータが返ってきているようですね😆！

でも、私が欲しいのは、JSON形式のデータの「全部」ではないんです。「Definition（定義）」のデータだけが欲しいんです。その絞り込みをどうやるんでしょう…。あ！「JQ Query」という欄がありますね。ここで絞り込みを行うに違いありません！

JQ Queryって何ぞ？

Queryですから、「問い合わせ」という意味ですね。「このデータください！」と問い合わせます。

はい、クエリーを入力しますよ。具体的にはつぎのとおり入力します。

.[0].meanings[0].definitions[0].definition

JSON形式のデータの中でも、Definitionの値がだけが返ってきたのが分かります。やったね～🎉。

「ちょっと、待て。あんた、今、何を打ったの？😭」

そうですよね。なんか呪文ぽいですよね。かくなる上は、、、頑張って説明します！

上のクエリーは、欲しい情報（definition）がどこにあるか「住所」を指定したわけです。

全体像は、こうです。４つのパートに分かれています。これをドリルダウンしますよ！

JQの構造

まずは、JQの構造から確認しましょう。

最初のピリオドは、何ものでしょう？プロパティ（”word” : "cat",など）にアクセスしますよ～という印です。深く考えず、「ピリオドで始めるんだな～」とお考え下さい。

次の角かっこは、何でしょう？これは、「データの配列の中の何番目の値か」を指定するものです！で、

「0番目ってイミフ…。😭」

ああ、それですね。「０」が一番目がにあたります。これは規則ですのでどうにもなりません。１番目は「０」、2番目は「１」、、以下同様です。

最上位のアレイ（配列）

JSONフォーマットのデータは、「入れ子」になっています。箱の中に、箱がある、その中に箱がある、、、。マトリョーシカ！みたいなもんです！？

そして、角かっこ[ ]を使ってアレイ（配列）という形で整理されています。

配列の各値は、「オブジェクト」という形で保存されています。波カッコ｛｝の中身がオブジェクトです。何個ありますか？５つですね！

欲しいデータは何番目のオブジェクトにありますか？１番目ですね。だから？

.[0]

となるわけですな！

どのプロパティかを選択

さらに掘り下げます！上で指定したオブジェクトの中身をよく見ましょう！うーん、プロパティが５つありますねえ。Definitionを持っているプロパティは、meaningsでした。

meaningsの配列の中はどうなっているのかしらん！？ということで開いてみます。うーん、オブジェクト｛｝が２つありますね。どっちにDefinitionが入ってますか！？一つ目ですね！

ならばこうなります！

.meanings[0]

よくわからん？なら箇条書きにしましょう！
１）まずはピリオドで始める（お約束です）
２）欲しいプロパティを記述（meaningsです）
３）配列の何番目に入っているかを指定（1番目、即ち[0]です）

ここまで、分かったぞ！（まだ分からない💦！？すみません。でも続けます）

後は繰り返しです

あとは繰り返しでございます。meaningsプロパティの配列には、２つのオブジェクト｛｝があり、一つ目のオブジェクトの中にdefinitionsがあります。

そして、下図のとおり、Definitionsの配列は、３つのオブジェクトで構成されています。Definitionは一番目のオブジェクトに入っています。

しからば、こうなるわけです！

.definitions[0]

最後は配列の番号はいらないです

長らくお待たせしました…。やっと、最後にたどり着きました！あとは、、、オブジェクトの中の欲しいプロパティを選択するだけです。

すなわち、definitionです。definitionのデータ型は、「文字列」です。他方、上記のmeaningsやdefinitionsのデータ型は、「配列」でした。ということで、「配列の中の何番目？」を指定する必要はないです。

ということで、こうなります。

.definition

最終的に、全部つなぎ合わせてこうりなります！

.[0].meanings[0].definitions[0].definition

おめでとうございます！JQが打てました～🎉🎉🎉🎉🎉🎉

まとめ

ここまでの話をまとめましょう。

●1回目の記事
・アプリに、英語辞書を検索できる機能を実装する！
・APIを通じて、英語辞書プログラムにアクセスする。
・そのために「Fetch JSON」というプラグインを使う。
・APIにアクセスするURLを取得しよう。
・JSON形式のデータは読みずらいから、Formatterを使って参照しよう。

●2回目の記事
・テストページで、プラグインが動くか確かめよう。
・提供されるJSON形式のデータのうち、欲しいデータだけを指定しよう
・そのために、JQクエリーを使おう。

はい、本日は以上となります。ここまで読み切った方、いますかね😅。。。皆さん、大変おつかれさまです。ここまで読んでくれてうれしいです！

では、ビーダゼーン！

※私のやる気アップとブログの品質向上につながりますので、記事が気に入られた方は、「ポチっ」と好きボタンを押してくださったり、フォローいただけますと幸いです🙇。