TypeScriptでJSONをfetchして出力する

Last updated at 2024-06-25Posted at 2024-05-30

シリーズのトップは↓こちら

前回の記事は↓こちら

たまたま再びプライベートで人にTypeScriptを叩き込む機会がありまして、せっかくなので再びこの場をお借りしていっしょに復習します。

前回の復習（再掲）

↑これらはよく使うので慣れると便利です♪

const response=await fetch("ここにURL");してconst json:any=await response.json();する
- ネットからJSONを取ってくる
- 最初は覚えるだけでもいいかも
  - HTTPの理解
  - これだけで~~ご飯３杯いける~~相当話ができる
console.dir(json,{depth:null});
- オブジェクトの中身を見る
- console.logとは違う
オブジェクトの中身は.で使う
- json.last_priceみたいに

↑特に.はもうすごく使いますのでまず間違いなく覚えるほうがいいと思います♪

awaitのしどころが一番外側の場合、tsxが怒る場合がありますので、"type":"module",をpackage.jsonにくわえてこんな感じにします。

package.json

{
    "type":"module",
    "devDependencies":{
        "tsx":"^4.10.0"
    }
}

今回はTypeScriptを叩き込んだみんなの大好きな暗号資産であるSymbolの日本円建てでの価格をZaif APIから取得します。

src/index.ts

const response=await fetch("https://api.zaif.jp/api/1/last_price/xym_jpy");
const json:any=await response.json();
console.dir(json,{depth:null});

忘れずに保存して

>か$か%か#って書いてあるところに入力してエンター

npx tsx src/index.ts

これを実行すると、

{ last_price: 3.33 }

概ねこのような画面になるのではないでしょうか。
この3.33と言うのは必ず3.33が出るのではなく、実行する度にその時の最新の終値が出るので、この数値はよく変わると思います。

これがJSONをNode.js側で理解したものの内容です。ほしいものはこれ自体ではなく3.33なのでこれを取り出します。

src/index.ts(抜粋)

console.dir(json,{depth:null});

先程の最後の行↑を↓こう書き換えてみます。

src/index.ts(抜粋)

console.dir(json.last_price,{depth:null});

ここが今日のポイントです。jsonがjson.last_priceに変わっています。これはjsonの中のlast_priceを使うときにする書き方です。

それでは忘れずに保存して、

>か$か%か#って書いてあるところに入力してエンター

npx tsx src/index.ts

これを実行すると、

3.33

具体的な数値は変わるかもしれませんが、例えばこのような表示になるのではないでしょうか。

今回の目標はここまでです🎉

const response=await fetch("ここにURL");してconst json=await response.json();する
- ネットからJSONを取ってくる
- 最初は覚えるだけでもいいかも
  - HTTPの理解
  - これだけで~~ご飯３杯いける~~相当話ができる
console.dir(json,{depth:null});
- オブジェクトの中身を見る
- console.logとは違う
オブジェクトの中身は.で使う
- json.last_priceみたいに

↑特に.はもうすごく使いますのでまず間違いなく覚えるほうがいいと思います♪