【神ツール】JSONデータをそのままぶち込むだけでTypeScriptの型を美しく返してくれる"JSON to TypeScript"

なんだこれ？ただの神ツールか？

バリバリ現役エンジニアの方はご存じかもしれませんが、TypeScript初心者には是非知ってもらいたい神ツール。

その名も 「JSON to TypeScript」

何が凄いのかを説明する

以前、記事にした初学者向けのReactアプリを開発しながら学べる社内研修用のアプリで、ポケモンAPIを使用した神経衰弱ゲームアプリを開発しました。

その時に、まあ画像がどこにあるかわからない。
とりあえず、POSTMANでapi叩いて中に入るとこんな感じ。

ポケモンAPI
https://pokeapi.co/api/v2/pokemon?limit=30

{
    "count": 1302,
    "next": "https://pokeapi.co/api/v2/pokemon?offset=30&limit=30",
    "previous": null,
    "results": [
        {
            "name": "bulbasaur",
            "url": "https://pokeapi.co/api/v2/pokemon/1/"
        },
        {
            "name": "ivysaur",
            "url": "https://pokeapi.co/api/v2/pokemon/2/"
        },
        {
            "name": "venusaur",
            "url": "https://pokeapi.co/api/v2/pokemon/3/"
        },
        {
            "name": "charmander",
            "url": "https://pokeapi.co/api/v2/pokemon/4/"
        },
        {
            "name": "charmeleon",
            "url": "https://pokeapi.co/api/v2/pokemon/5/"
        },
        
        以下、省略......
       
    ]
}

とりあえず最初のポケモンのURLを確認するとコレ

一応調べてみるとOfficialArtwork.front_defaultという箇所が画像に該当するらしい。

そこで、神ツールJSON to TypeScriptの登場です。

上記の大量の文字列をそのままコピペして貼り付けます。すると....

あとはキーワードを検索して該当箇所を探すと発見できるので、ここから上の階層を辿ってコードに記載すれば取得できるという感じ

実際に使用したコード

const pokemonPromises = results.map(async (pokemon: any) => {
  const res = await axios.get(pokemon.url);
  return {
    name: pokemon.name,
    image: res.data.sprites.other['official-artwork'].front_default || '画像がありません'
  };
});

まとめ

ツールの紹介なので短い記事になりましたが、型を使用しないにしても目的のdataが探しやすいし、もちろん型を使いたい時には最高のツールになるので、是非、初学者にこそ使用して欲しい神ツールの紹介でした。