もりけん塾でjsonデータを取得して操作するという課題に取り組んでいます。
今まではmyjsonを使っていたのですが、
同じ塾生の@mai2022webさんにJSON GENERATORについて教えていただき、
結構使いやすかったのでこちらに乗り換えました。
使いやすかった点は
- 何度もデータを編集できる
- 503や404といったstatusのパラメータを付与して、
擬似的にエラーを起こすことができるURLを発行できる
で、使ってみた備忘録です。
目次
JSON GENERATORの使用方法
JSON GENERATORを使用するにはアカウントを作成する必要があります。
アカウントは、メールで登録、GitHub、Googleアカウントの連携から選ぶことができ、
私はGitHubとの連携を選びました。
アカウントを作成し、ログインするとjsonデータの作成画面に入ることができます。
jsonデータを作成する
左側に表示されているデータを一旦削除し、
作成するjsonデータを入力します。
サンプル見ているとわざわざ自分でjsonデータを作成しなくても、
データ作成の関数を作れば自動でランダムに出力されそうですが、
今回はそこは割愛し、生のデータを入力しました。
データを入力後上の「Generate Data」をクリックします。
そうすると右側にjsonデータが出力されます。
作成されたデータは左のツールバーに表示されます。
何のデータか分かりやすいように「Rename」からデータに名前をつけます。
今回は課題のニュースのデータだったため「news-data」とつけました。
データが作成できたら、「Get Data」をクリックし、DataのURLを取得します。
取得したらURLを課題に貼り付けておしまいと思いきや、
エラーが出てデータを取得することができませんでした。
{“error”:”Invalid or missing auth token.”}
認証のアクセストークンがないというエラーが出ていました。
公式サイトのdocsを見てみるとアクセストークンの作成から設定方法が載っていたので、
公式の通りアクセストークンを作成し設定しました。
Access Tokenの作成
JSON GENERATORで作成したjsonにアクセルするためには、
Access Tokenが必要なため、Access Tokenを作成します。
Access Tokenはいくつか作れるみたいなので、Access Tokenの名前を設定します。
名前を入力し、「Generate token」をクリックして作成します。
Access Tokenが作成されるので、
これをコピーし先ほど作成したData URLの末尾に追加します。
Data URL + /?access_token=作成したtoken
これで無事データを取得することができました。
実際に使ってみて便利だった点
JSON GENERATORを実際に使ってみて便利だったところは
- データが保存されるので、何度もデータを書き換えることができる
- 503、404といったstatusのパラメータをつけられるため、
エラーハンドリングのチェックができる
です。
データの書き換え
今までmyjsonを使っていたのですが、
データ構造が間違っていたり、スペルミスをしていた場合、何度もjsonデータを作って、
URLをコピーして書き換えるということをしていました。
※ 私が使い方をわかっていないだけかもしれませんが・・・・
JSON GENERATORはデータが保存されているため、
何度書き換えてもData URLは変更になりません。
地味にここが凄く便利でした。
Statusエラーのパラメータをつけられる
エラーハンドリングのチェックをする際、
間違ったURLに変更したり、エラーをthrowするコードを書いたりしていましたが、
JSON GENERATORはstatusコードやレスポンスに対しての遅延時間も設定できました。
Additional optionsのStatusの部分にエラーコードの数字を入力します。
そうするとData URLの末尾にエラー時のパラメータが付与さえています。
status=xxxの部分をコピーし、
アクセストークンまで入ったURLに&でパラーメータをくっつけます。
Data URL + /?access_token=作成したtoken&status=xxx
これでアクセルすると設定したstatusエラーで返ってきます。
試しにstatusエラー500を設定してみました。
エラーだった時はconsoleに出力するようにしています。
console.error(`${response.status}:${response.statusText}`);
500:とエラーが出力されたのを確認できました。
StatusTextはどうやら出力されないようです。
今回は初めてJSON GENERATORを触ってみましたが、
簡単に何度も編集ができてとても便利なツールでした。
もりけん塾
現在もりけん塾に参加し、JavaScriptの課題に取り組んでいます！
素敵な先生と塾生に囲まれて切磋琢磨な日々を送っています。
今回のJSON GENERATORも塾生の方に教えていただきました！
森田先生のBLOG：無骨日記
Twetter：@terrace_tech
