home

blog

contact

portfolio

<p><a href="https://population-app.netlify.app"><img src="https://raw.githubusercontent.com/toshikisugiyama/aboutme/master/src/public/images/uploads/qr_population_app.svg" alt="QR code" width="100" height="100" style="margin: 0 auto" ></a></p>
<p><a href="https://github.com/toshikisugiyama/population-app"><img src="https://raw.githubusercontent.com/toshikisugiyama/aboutme/master/src/public/images/snsIcons/github.svg" alt="github" width="30" height="30" ></a></p>
<hr>
<h2>説明</h2>
<p>各都道府県の人口推移データを取得し、グラフで示すSPAです。</p>
<h2>環境</h2>
<ul>
<li>node v12.16.1</li>
<li>create-react-app v3.4.1</li>
<li>react v16.13.1</li>
<li>typescript v3.7.2</li>
</ul>
<h2>要件</h2>
<ul>
<li><a href="https://opendata.resas-portal.go.jp">RESAS(地域経済分析システム)</a> APIの「都道府県一覧」から取得する</li>
<li>APIレスポンスから都道府県一覧のチェックボックスを動的に生成する</li>
<li>都道府県にチェックを入れると、RESAS APIから選択された都道府県の「人口構成」を取得する</li>
<li>人口構成APIレスポンスから、X軸:年、Y軸:人口数の折れ線グラフを動的に生成して表示する</li>
<li>都道府県一覧および総人口情報はRESAS APIのデータを用いる</li>
<li>グラフは<a href="https://www.highcharts.com">Highcharts</a> <del>や<a href="http://recharts.org/en-US">Rechart.js</a>などのサードパーティ製のグラフライブラリ</del> を用いて描画する</li>
<li>グラフライブラリは任意のものを用いる</li>
<li>Google Chrome最新版で正しく動く</li>
<li>「全て選択」、「クリア」ボタンも実装した</li>
</ul>
<h2>イメージ</h2>
<p><img src="https://i.gyazo.com/5ae70aa20527fbdcfba478f41907b712.png" alt="スクリーンショット" title="スクリーンショット">  </p>


Portfolio

ポートフォリオ

都道府県別の総人口推移グラフを表示するSPA

説明

環境

要件

イメージ