都道府県別の人口を折れ線グラフで表示するプログラムです。
RESAS APIから取得したデータを用いています。

サイトサンプル

https://masa-dev.github.io/population-graph/
(※(注記)Google Chrome 推奨)

• 都道府県のチェックボックスを入力することでグラフにデータを表示することが出来ます。
• チェックボックスとデータは連動しており、動的にグラフが変化します。

RESASのAPIキーは、セキュリティの観点からAPIキーを記述したファイルを.gitignoreで管理対象から外しています。

APIキーは以下の形式で保存しています。

• 保存場所:./apiKey.js

• 形式:

module.exports = {
 resas: {
 name: "X-API-KEY",
 value: "XXXXXXXXXX", // ここにAPIキーを指定する
 },
};

開発コマンドはpackage.jsonに記述されています。

開発サーバーの起動

npm run serve

ビルドファイルの作成

npm run build

GitHub Pages にデプロイ

npm run deploy

テストの実行

npm run test:unit

ESLint と Prettier の実行

npm run lint

• Vue CLI
  • Vue.js (バージョン3以降)
  • Vuex
  • Jest
  • ESLint + Prettier
  • SCSS
• Chart.js
  • chartjs-plugin-colorschemes

• 機能を作成する際に、ブランチを切るなどしてチーム開発を意識した
• 分岐を1つずつテストすることで、カバレッジ100%を目指した
• 開発の初期に具体的なイメージを作成するために、大まかな設計を考えて作成に取り組んだ
• 公式ドキュメントを読み、出来るだけ仕様を理解したこと