【React + TypeScript】非同期通信での型の取り方を世界一シンプルに伝える

# React-TypeScriptでの非同期通信の型の取り方を世界一シンプルに伝える

タイトルにもあるように、短く、簡潔にReact-TypeScript環境での非同期通信の型の設定方法をお伝えする。

今回対象とするAPIはQuiitaのものを使用させていただく。

 - Quiita API <br />
 https://qiita.com/api/v2/items


まずは.jsonファイルを作成しよう。
APIで取得するデータの配列の1番目だけをコピーしてきて、jsonファイルを作成する。

```json
[
    {
        "rendered_body": "\n<h1>\n<span id=\"はじめに\" class=\"fragment\"></span><a href=\"#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB\"><i class=\"fa fa-link\"></i></a>はじめに</h1>\n\n<p>前回Unity ML-Agentsを使ってから新たにメジャーバージョンが出たのでとりあえず実行環境を整えていきます。</p>\n\n<p>参考: <a href=\"https://github.com/Unity-Technologies/ml-agents/blob/release_6/docs/Installation.md\" rel=\"nofollow noopener\" target=\"_blank\">Unity Ml-Agents Installation</a></p>\n\n<p>困ったことがあったら公式を見ること。英語は読むこと。</p>\n\n<h2>\n<span id=\"実行環境\" class=\"fragment\"></span><a href=\"#%E5%AE%9F%E8%A1%8C%E7%92%B0%E5%A2%83\"><i class=\"fa fa-link\"></i></a>実行環境</h2>\n\n<table>\n<thead>\n<tr>\n<th style=\"text-align: center\"></th>\n<th style=\"text-align: center\">バージョン</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align: center\">Windows 10</td>\n<td style=\"text-align: center\">1909</td>\n</tr>\n<tr>\n<td style=\"text-align: center\">Unity</td>\n<td style=\"text-align: center\">2018.4.26f1</td>\n</tr>\n<tr>\n<td style=\"text-align: center\">Python</td>\n<td style=\"text-align: center\">3.6.6</td>\n</tr>\n<tr>\n<td style=\"text-align: center\">ML-Agents</td>\n<td style=\"text-align: center\">Release 6</td>\n</tr>\n</tbody>\n</table>\n\n<p>ML-Agentsは現時点でUnstableでない最新のRelease 6を使用します。</p>\n\n<p>またRelease 6は、Unityの2018.4もしくはそれ以降、Pythonは3.6.1もしくはそれ以降を使用しなければならない点に注意してください。</p>\n\n<h1>\n<span id=\"まずは仮想環境作成\" class=\"fragment\"></span><a href=\"#%E3%81%BE%E3%81%9A%E3%81%AF%E4%BB%AE%E6%83%B3%E7%92%B0%E5%A2%83%E4%BD%9C%E6%88%90\"><i class=\"fa fa-link\"></i></a>まずは仮想環境作成</h1>\n\n<p>Anacondaで仮想環境を作成して元の環境と分けられるようにしておく。</p>\n\n<div class=\"code-frame\" data-lang=\"text\"><div class=\"highlight\"><pre>conda create -n ml-agnets\n</pre></div></div>\n\n<p>pythonのバージョンを指定したい場合は(バージョン3.6とすると)、</p>\n\n<div class=\"code-frame\" data-lang=\"text\"><div class=\"highlight\"><pre>conda create -n ml-agents pyhton=3.6\n</pre></div></div>\n\n<p>仮想環境を作成後はactivateします。</p>\n\n<div class=\"code-frame\" data-lang=\"text\"><div class=\"highlight\"><pre>conda activate ml-agents\n</pre></div></div>\n\n<p>これで仮想環境作成は終了。</p>\n\n<h2>\n<span id=\"ml-agents-release-6のセットアップ\" class=\"fragment\"></span><a href=\"#ml-agents-release-6%E3%81%AE%E3%82%BB%E3%83%83%E3%83%88%E3%82%A2%E3%83%83%E3%83%97\"><i class=\"fa fa-link\"></i></a>ML-Agents Release 6のセットアップ</h2>\n\n<p>UnityとPythonのインストールは済んでいるものとします。</p>\n\n<p>まずはGithubからToolkit Repositoryをcloneします。</p>\n\n<div class=\"code-frame\" data-lang=\"text\"><div class=\"highlight\"><pre>git clone --branch release_6 https://github.com/Unity-Technologies/ml-agents.git\n</pre></div></div>\n\n<p><code>--branch release_6</code>はrelease 6を指定するタグで、これを除くとmasterブランチのリポジトリをcloneすることになります。masterブランチは最新ですが、unstableなバージョンです。</p>\n\n<h2>\n<span id=\"comunityml-agentsパッケージをunityにインストール\" class=\"fragment\"></span><a href=\"#comunityml-agents%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%92unity%E3%81%AB%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB\"><i class=\"fa fa-link\"></i></a><code>com.unity.ml-agents</code>パッケージをUnityにインストール</h2>\n\n<p>先ほどクローンしてきたレポジトリ内にcom.unity.ml-agentsがフォルダがあるのでそれをUnityにインストールする。</p>\n\n<ol>\n<li>Unityを開き、<code>Window -&gt; Package Manager</code>を開く</li>\n<li>Package Managerウィンドウの <code>+</code>ボタンをクリックする</li>\n<li>\n<code>Add package from disk...</code>を選ぶ</li>\n<li>\n<code>com.unity.ml-agents</code>フォルダを開く</li>\n<li>\n<code>package.json</code>ファイルを選択する</li>\n</ol>\n\n<h2>\n<span id=\"pythonのmlagentsパッケージをインストールする\" class=\"fragment\"></span><a href=\"#python%E3%81%AEmlagents%E3%83%91%E3%83%83%E3%82%B1%E3%83%BC%E3%82%B8%E3%82%92%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB%E3%81%99%E3%82%8B\"><i class=\"fa fa-link\"></i></a>Pythonの<code>mlagents</code>パッケージをインストールする</h2>\n\n<div class=\"code-frame\" data-lang=\"text\"><div class=\"highlight\"><pre>pip3 install mlagents\n</pre></div></div>\n\n<h2>\n<span id=\"getting-started-ガイドを試す\" class=\"fragment\"></span><a href=\"#getting-started-%E3%82%AC%E3%82%A4%E3%83%89%E3%82%92%E8%A9%A6%E3%81%99\"><i class=\"fa fa-link\"></i></a>Getting Started ガイドを試す</h2>\n\n<p>参考: <a href=\"https://github.com/Unity-Technologies/ml-agents/blob/release_6/docs/Getting-Started.md\" rel=\"nofollow noopener\" target=\"_blank\">Getting Started Guide</a></p>\n\n<p>このガイドにEnvironmentを理解する項目があるのですが、自分で環境作成をするならしっかりと読んだ方がいいです。</p>\n\n<p>今回はお試しなのでまずは3DBallのpre-trained modelを使います。他にもいろんなサンプルがあるのでいろいろ試してみましょう。</p>\n\n<h2>\n<span id=\"pre-trained-modelを試す\" class=\"fragment\"></span><a href=\"#pre-trained-model%E3%82%92%E8%A9%A6%E3%81%99\"><i class=\"fa fa-link\"></i></a>pre-trained modelを試す</h2>\n\n<ol>\n<li>\n<code>Project/Assets/ML-Agents/Examples/3DBall/Scenes</code> から <code>3DBall</code>を開く</li>\n<li>\n<p>Projectウィンドウから<code>Assets/ML-Agents/Examples/3DBall/Prefabs</code>を開き、3DBallを展開してAgent prefabをクリックする</p>\n\n<p>Note: 3DBallのプラットフォームは3DBall prefabを使用し作られている。よって12個のプラットフォームを全てアップデートする代わりに、3DBall prefabをアップデートすることによって変更できる。</p>\n</li>\n<li><p>Projectウィンドウから、<code>Assets/ML-Agents/Examples/3DBall/TFModels</code>の3DBallをInspectorウィンドウのAgentのBehavior ParametersのModelにドラッグする。(既に設定されているが、それぞれの学習結果をNNModelとして保存しModelに設定することで学習結果を確認できる。)</p></li>\n<li><p>Sceneの各3DBallのAgentのBehavior ParameterのModelが3DBall(NNModel)になっていることを確認する。</p></li>\n<li><p>このModelで使用するInference DeviceをCPUにセットする(GPUを使用する場合はGPU)</p></li>\n<li><p>Unity EditorのPlayボタンを押して3DBallが実行されていることを確認する</p></li>\n</ol>\n\n<h2>\n<span id=\"強化学習で新しいモデルを学習させる\" class=\"fragment\"></span><a href=\"#%E5%BC%B7%E5%8C%96%E5%AD%A6%E7%BF%92%E3%81%A7%E6%96%B0%E3%81%97%E3%81%84%E3%83%A2%E3%83%87%E3%83%AB%E3%82%92%E5%AD%A6%E7%BF%92%E3%81%95%E3%81%9B%E3%82%8B\"><i class=\"fa fa-link\"></i></a>強化学習で新しいモデルを学習させる</h2>\n\n<ol>\n<li>terminal windowを開く</li>\n<li>Cloneした<code>ml-agents</code>レポジトリに移動する</li>\n<li>\n<p>以下のコマンドを実行する</p>\n\n<div class=\"code-frame\" data-lang=\"text\"><div class=\"highlight\"><pre>mlagents-learn config/ppo/3DBall.yaml --run-id=first3DBallRun\n</pre></div></div>\n</li>\n<li><p>\"Start training by pressing the Play button in the Unity Editor\"というメッセージが出たら、UnityのPlayボタンを押して学習を始める</p></li>\n<li><p>学習結果が<code>ml-agents/results</code>に格納されるので、first3DBallRunをProjectウィンドウにドラッグしコピーする</p></li>\n<li><p>Projectウィンドウから<code>first3DBallRun/run_logs</code>の3DBallを3DBall prefabのBehavior ParameterのModelにドラッグする</p></li>\n<li><p>UnityのPlayボタンを押して学習結果を確認する</p></li>\n</ol>\n\n<h2>\n<span id=\"トレーニングの進行を確認する\" class=\"fragment\"></span><a href=\"#%E3%83%88%E3%83%AC%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0%E3%81%AE%E9%80%B2%E8%A1%8C%E3%82%92%E7%A2%BA%E8%AA%8D%E3%81%99%E3%82%8B\"><i class=\"fa fa-link\"></i></a>トレーニングの進行を確認する</h2>\n\n<p>先ほど学習した結果をtensorboardで確認する</p>\n\n<div class=\"code-frame\" data-lang=\"text\"><div class=\"highlight\"><pre>tensorboard --logdir results\n</pre></div></div>\n\n<p>上のコマンドを実行すると、自身のブラウザの<code>http://localhost:6006</code>で確認できる</p>\n\n<hr>\n\n<p>以上でインストールからテストまでは終了です。<br>\n間違いや不足点などございましたらおしらせ下さい。</p>\n\n<p>また、自身で何をしたか確認する等の目的で書いたものなのでわかりづらい点などがあるかと思います。基本的には自身で公式のドキュメントを読んで実行するのがいいと思います。</p>\n",
        "body": "#はじめに\n\n前回Unity ML-Agentsを使ってから新たにメジャーバージョンが出たのでとりあえず実行環境を整えていきます。\n\n参考: [Unity Ml-Agents Installation](https://github.com/Unity-Technologies/ml-agents/blob/release_6/docs/Installation.md)\n\n困ったことがあったら公式を見ること。英語は読むこと。\n\n実行環境\n---\n||バージョン|\n|:---:|:---:|\n|Windows 10|1909|\n|Unity|2018.4.26f1|\n|Python|3.6.6|\n|ML-Agents|Release 6|\n\nML-Agentsは現時点でUnstableでない最新のRelease 6を使用します。\n\nまたRelease 6は、Unityの2018.4もしくはそれ以降、Pythonは3.6.1もしくはそれ以降を使用しなければならない点に注意してください。\n\n#まずは仮想環境作成\n\nAnacondaで仮想環境を作成して元の環境と分けられるようにしておく。\n\n```\nconda create -n ml-agnets\n```\n\npythonのバージョンを指定したい場合は(バージョン3.6とすると)、\n\n```\nconda create -n ml-agents pyhton=3.6\n```\n\n仮想環境を作成後はactivateします。\n\n```\nconda activate ml-agents\n```\n\nこれで仮想環境作成は終了。\n\n\nML-Agents Release 6のセットアップ\n---\n\nUnityとPythonのインストールは済んでいるものとします。\n\nまずはGithubからToolkit Repositoryをcloneします。\n\n```\ngit clone --branch release_6 https://github.com/Unity-Technologies/ml-agents.git\n```\n\n`--branch release_6`はrelease 6を指定するタグで、これを除くとmasterブランチのリポジトリをcloneすることになります。masterブランチは最新ですが、unstableなバージョンです。\n\n`com.unity.ml-agents`パッケージをUnityにインストール\n---\n\n先ほどクローンしてきたレポジトリ内にcom.unity.ml-agentsがフォルダがあるのでそれをUnityにインストールする。\n\n1. Unityを開き、`Window -> Package Manager`を開く\n2. Package Managerウィンドウの `+`ボタンをクリックする\n3. `Add package from disk...`を選ぶ\n4. `com.unity.ml-agents`フォルダを開く\n5. `package.json`ファイルを選択する\n\nPythonの`mlagents`パッケージをインストールする\n---\n\n```\npip3 install mlagents\n```\n\nGetting Started ガイドを試す\n---\n\n参考: [Getting Started Guide](https://github.com/Unity-Technologies/ml-agents/blob/release_6/docs/Getting-Started.md)\n\nこのガイドにEnvironmentを理解する項目があるのですが、自分で環境作成をするならしっかりと読んだ方がいいです。\n\n今回はお試しなのでまずは3DBallのpre-trained modelを使います。他にもいろんなサンプルがあるのでいろいろ試してみましょう。\n\n\npre-trained modelを試す\n---\n1. `Project/Assets/ML-Agents/Examples/3DBall/Scenes` から `3DBall`を開く\n2. Projectウィンドウから`Assets/ML-Agents/Examples/3DBall/Prefabs`を開き、3DBallを展開してAgent prefabをクリックする\n\n    Note: 3DBallのプラットフォームは3DBall prefabを使用し作られている。よって12個のプラットフォームを全てアップデートする代わりに、3DBall prefabをアップデートすることによって変更できる。\n\n3. Projectウィンドウから、`Assets/ML-Agents/Examples/3DBall/TFModels`の3DBallをInspectorウィンドウのAgentのBehavior ParametersのModelにドラッグする。(既に設定されているが、それぞれの学習結果をNNModelとして保存しModelに設定することで学習結果を確認できる。)\n4. Sceneの各3DBallのAgentのBehavior ParameterのModelが3DBall(NNModel)になっていることを確認する。\n5. このModelで使用するInference DeviceをCPUにセットする(GPUを使用する場合はGPU)\n6. Unity EditorのPlayボタンを押して3DBallが実行されていることを確認する\n\n強化学習で新しいモデルを学習させる\n---\n\n1. terminal windowを開く\n2. Cloneした`ml-agents`レポジトリに移動する\n3. 以下のコマンドを実行する\n\n    ```\nmlagents-learn config/ppo/3DBall.yaml --run-id=first3DBallRun\n    ```\n\n4. \"Start training by pressing the Play button in the Unity Editor\"というメッセージが出たら、UnityのPlayボタンを押して学習を始める\n5. 学習結果が`ml-agents/results`に格納されるので、first3DBallRunをProjectウィンドウにドラッグしコピーする\n6. Projectウィンドウから`first3DBallRun/run_logs`の3DBallを3DBall prefabのBehavior ParameterのModelにドラッグする\n7. UnityのPlayボタンを押して学習結果を確認する\n\nトレーニングの進行を確認する\n---\n先ほど学習した結果をtensorboardで確認する\n\n```\ntensorboard --logdir results\n```\n\n上のコマンドを実行すると、自身のブラウザの`http://localhost:6006`で確認できる\n\n---\n以上でインストールからテストまでは終了です。\n間違いや不足点などございましたらおしらせ下さい。\n\nまた、自身で何をしたか確認する等の目的で書いたものなのでわかりづらい点などがあるかと思います。基本的には自身で公式のドキュメントを読んで実行するのがいいと思います。\n",
        "coediting": false,
        "comments_count": 0,
        "created_at": "2020-09-02T15:21:50+09:00",
        "group": null,
        "id": "0894d407d35eeaa87240",
        "likes_count": 0,
        "private": false,
        "reactions_count": 0,
        "tags": [
            {
                "name": "ML-Agents",
                "versions": []
            }
        ],
        "title": "Win10でUnity ML-Agents release_6 Install から 環境テストまで。",
        "updated_at": "2020-09-02T15:21:50+09:00",
        "url": "https://qiita.com/wakaranpoyo/items/0894d407d35eeaa87240",
        "user": {
            "description": "人生初見なので勘弁してください",
            "facebook_id": "",
            "followees_count": 1,
            "followers_count": 1,
            "github_login_name": null,
            "id": "wakaranpoyo",
            "items_count": 3,
            "linkedin_id": "",
            "location": "",
            "name": "Nanimo wakaranPoyo",
            "organization": "",
            "permanent_id": 590310,
            "profile_image_url": "https://s3-ap-northeast-1.amazonaws.com/qiita-image-store/0/590310/4a5600d9b5f8bb200a6fedf13d67cfbcdf54b1ea/x_large.png?1584003682",
            "team_only": false,
            "twitter_screen_name": "wakaranpoyo",
            "website_url": ""
        },
        "page_views_count": null
    }
]
``` 

次に.jsonファイルをimportし、以下のように型を取る。

```ts
import getData from './getData.json'
type DataType = typeof getData
```

これでDataType型の作成完了だ。

あらやだ。
便利な世の中になったものね。