Fetch JSON:あなたのアプリを激的に拡張するプラグイン その2【ノーコード・ツール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)がどこにあるか「住所」を指定したわけです。
全体像は、こうです。4つのパートに分かれています。これをドリルダウンしますよ!
JQの構造
まずは、JQの構造から確認しましょう。
最初のピリオドは、何ものでしょう?プロパティ(”word” : "cat",など)にアクセスしますよ~という印です。深く考えず、「ピリオドで始めるんだな~」とお考え下さい。
次の角かっこは、何でしょう?これは、「データの配列の中の何番目の値か」を指定するものです!で、
「0番目ってイミフ…。😭」
ああ、それですね。「0」が一番目がにあたります。これは規則ですのでどうにもなりません。1番目は「0」、2番目は「1」、、以下同様です。
最上位のアレイ(配列)
JSONフォーマットのデータは、「入れ子」になっています。箱の中に、箱がある、その中に箱がある、、、。マトリョーシカ!みたいなもんです!?
そして、角かっこ[ ]を使ってアレイ(配列)という形で整理されています。
配列の各値は、「オブジェクト」という形で保存されています。波カッコ{}の中身がオブジェクトです。何個ありますか?5つですね!
欲しいデータは何番目のオブジェクトにありますか?1番目ですね。だから?
.[0]
となるわけですな!
どのプロパティかを選択
さらに掘り下げます!上で指定したオブジェクトの中身をよく見ましょう!うーん、プロパティが5つありますねえ。Definitionを持っているプロパティは、meaningsでした。
meaningsの配列の中はどうなっているのかしらん!?ということで開いてみます。うーん、オブジェクト{}が2つありますね。どっちにDefinitionが入ってますか!?一つ目ですね!
ならばこうなります!
.meanings[0]
よくわからん?なら箇条書きにしましょう!
1)まずはピリオドで始める(お約束です)
2)欲しいプロパティを記述(meaningsです)
3)配列の何番目に入っているかを指定(1番目、即ち[0]です)
ここまで、分かったぞ!(まだ分からない💦!?すみません。でも続けます)
後は繰り返しです
あとは繰り返しでございます。meaningsプロパティの配列には、2つのオブジェクト{}があり、一つ目のオブジェクトの中にdefinitionsがあります。
そして、下図のとおり、Definitionsの配列は、3つのオブジェクトで構成されています。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クエリーを使おう。
はい、本日は以上となります。ここまで読み切った方、いますかね😅。。。皆さん、大変おつかれさまです。ここまで読んでくれてうれしいです!
では、ビーダゼーン!
※私のやる気アップとブログの品質向上につながりますので、記事が気に入られた方は、「ポチっ」と好きボタンを押してくださったり、フォローいただけますと幸いです🙇。
この記事が気に入ったらサポートをしてみませんか?