今回はこういった疑問について解説していきます。TypeScriptを使ってSPAを作る私は普段AIのサービス開発会社でフロントエンドエンジニアとして働いています。TypeScriptを使って開発してますが、今回はReactの勉強も兼ねてReact+TypeScriptで都道府県のAPI情報を取ってきながら簡単なSPAを実装をしてみようと思いました。しがないフロントエンドエンジニアでありコードを保証するものではないためその点をご了承の上見ていただけますと幸いです。※各ライブラリなどのインストールは実装中に都度紹介します。グラフ」の実装手順とソースコードでは早速実装していきます。手順は下記の通りに行なっていきます。環境構築はじめにリポジトリを作成します。マイページからリポジトリのページに移動します。右上の「New」から新規作成します。任意の名前をつけます。作成されたらURLが表示されるのでコピーします。VSCodeに移動しターミナルを起動します。URLでリポジトリを取り込みます。ディレクトリ移動します。typescriptコマンドを入力して、開発環境を作成します。プロジェクトフォルダに移動します。ライブラリのインストール各ライブラリを取得していきます。sassソースコード今回作成したコードは下記になります。47都道府県分mapでループ処理する.populationDataを使用する。API」のAPI使用を把握します。←ここに繋げてURLを指定したら欲しい情報が取れそうです。試しに都道府県一覧情報を取ってきましょう。APIを使用するためにはAPIキーを取得する必要があります。こちらで利用登録することでキーを取得できます。これをaxiosのgetで呼び出す時にHeadersに指定する必要があります。キーが登録できたら例に倣って「https://opendata.resas-portal.go.jp/api/v1/prefectures」を叩いてみます。App.tsxの33~45行目に注目します。headersには取得したAPIキーを入れます。この状態で39行目を以下に書き換えます。ローカル環境を立ち上げた後、検証ツールを開いてconsole.log()を確認します。上記のようなデータが確認できたら正しくデータ取得ができてます。このときconsole.log(res)を取得したデータ構造に対応した指定にしたら、欲しい情報だけ取り出せます。consol.log(res.data)→data内のmessageとresult情報を取得consol.log(res.data.result)→47都道府県の情報のみ取得consol.log(res.data.result[0])→resultの1つ目のデータにある北海道の情報を取得resというのが引数で、指定したURLまでの情報を指します。ここからさらに情報を絞る場合は、「.」に続けて階層を深く指定していきます。これで都道府県の情報を取得してあらかじめ用意していたprefecturesというuseStateにデータを格納できました。次に取得した都道府県一覧を画面に表示させます。114~125行目に注目します。))}</div>先ほど取得したprefectureをmapで順に表示させています。mapを使用するときは必ずkeyでid指定を中でする必要があります。key={prefecrure.prefCode}がその役割を果たしています。prefectureにはprefCodeとprefNameの2つのプロパティが入っているのでそれぞれkeyとlabelで使用します。これで都道府県一覧を画面に表示できました。inputのラジオボタンは後ほど使うので一旦今はスルーして大丈夫です。次にグラフ表示をさせていきます。今回はHighchartsというライブラリを使用します。こちらのデモを参考に作成していきます。OPTIONSに使用できるデータ構造があります。これを参考にVSCodeのApp.tsxの80~106行目に注目します。47都道府県分mapでループ処理する.populationDataを使用する。],};xAxisとyAxisでX軸・Y軸それぞれの名前を指定しています。series内に実際に描画するデータを入れます。グラフ表示させるために直でデータを入力してみます。"line",},上記は北海道の人口推移を5年ごとに表したデータです。この形式のデータ格納ができたらグラフ表示を確認できたかと思います。offをグラフと連動させていきます。input要素にon,offの状態を検知させる処理を追加67~79行目に注目します。※本当はチェックボックスが選ばれてるデータを全てグラフ表示させるつもりで実装しましたが現状だとチェックボックスに対応するグラフ表示は1つだけの実装になってるのをご了承願います。}};チェックボックスがあるときは用意していた配列にそれに対応するprefCodeが格納されます。チェックボックスがないときはそのprefCodeが配列から削除されます。用意した配列のprefCodeに対応する都道府県のデータをseriesのdata内に格納することでグラフ表示をさせています。最後にスタイル調整をして終わります。最初は日本語で実装手順を説明できる必要があると思います。それがわからないと実装することができないため手間がかかるかもですが、日本語で実装手順を細かく説明したチェックリストを用意するのをおすすめします。実装途中でわからなくなったら、休憩を適宜挟んで再度取り組むと意外と前に進むことが多いなと感じました。今後はグラフを複数表示できるようにやってみたいと思います。スキル不足のため引き続き学習して適宜アウトプットすることで過去の自分に向けてわかりやすく説明できるようにしてみます。(その方が自分のためにもなるし、今学習した方のためになるかと思ったため。