各種コンポーネントとUIモック作成

h-yoshikawa44 commented 2 years ago

作業内容

各種コンポーネント作成
- [x] ヘッダー
- [x] チェックボックス
- [x] 都道府県チェックボックスブロック
- [x] グラフ
API を元に型定義作成
- [x] 都道府県
- [x] 総人口
作成したコンポーネントで UI モック作成

h-yoshikawa44 commented 2 years ago

Next.js 12.0.5 でのエラー

_document.tsx を作成したところ、next/document からインポートしている Document の中身が () => any になってしまう現象がおきていた。このため、エラーになってしまう。

スクリーンショット-1-

既知の問題のようですでに Issue があがっていた。

Next.js - eslint-config-next@12.0.5 gives "Type '() => any' is not a constructor function type" error in _Document.tsx

12.0.4にダウングレードする手もあるが、とりあえずインポート元を変更して回避策をとることにした。

// Next.js 12.0.5 でのエラー回避で next/document からでなくこのインポート
import Document, {
  Html,
  Head,
  Main,
  NextScript,
} from 'next/dist/pages/_document';

class MyDocument extends Document {
  render() {
    return (
      <Html lang="ja">
        <Head>
          <link rel="icon" href="/favicon.ico" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

h-yoshikawa44 commented 2 years ago

ディレクトリ構成とコンポーネント

過去やったことあるディレクトリ構成としては、以下のものがある

Atomic Design （+ container と presentinal にわける）
大まかなくくりごとにわける

後者については、例えば Card コンポーネントというくくりの中に、CardImage や CardBody などがあって、外部から呼び出す分には Card コンポーネントとしてのみ呼び出すようにするみたいなイメージ。（外部から直接 CardImage や CardBody を呼び出したりしない）

おおよそ上記2つの構成のどちらかでやってきたが、少し前にこちらの記事を見て、少し取り入れてみようかなと思った。

SPA Componentの推しディレクトリ構成について語る

いいなと思った点はこんな感じ

新しくコンポーネントを作るときに迷いにくそう
コンポーネントファイルと、そのテストや StoryBook のファイルなども同じところにするのでわかりやすそう（全体でファイルが増えてきても複雑になりにくそう）
元々ある pages にコンポーネント定義の責務を持たせないので、柔軟性があがりそう

h-yoshikawa44 commented 2 years ago

グラフライブラリ

候補

Recharts：17.4k
Highcharts：10.4k
- highcharts-react ：792
react-chartjs-2：4.6k

Recharts はこの中だとスター数が一番多く、過去に業務で使ったこともある。扱い方もそこまで難しくなかった印象。 ...が、グラフに入れるデータ形式と API から取得したデータ形式とを比較すると、加工が一手間いりそう。

Recharts のデータ形式

const data = [
  {
    "name": "Page A",
    "uv": 4000,
    "pv": 2400,
    "amt": 2400
  },
  {
    "name": "Page B",
    "uv": 3000,
    "pv": 1398,
    "amt": 2210
  },
  {
    "name": "Page C",
    "uv": 2000,
    "pv": 9800,
    "amt": 2290
  },
]

RESAS API の人口構成 API から取得するデータ形式（data の総人口部分のみ抜粋）

"data": [{
  "label": "総人口",
  "data": [{
      "year": 1980,
      "value": 12817
  }, {
      "year": 1985,
      "value": 12707
  }, {
      "year": 1990,
      "value": 12571
  }, {
      "year": 1995,
      "value": 12602
  }, {
      "year": 2000,
      "value": 12199
  }, {
      "year": 2005,
      "value": 11518
  }, {
      "year": 2010,
      "value": 10888
  }, {
      "year": 2015,
      "value": 10133
  }, {
      "year": 2020,
      "value": 9275
  }, {
      "year": 2025,
      "value": 8431
  }, {
      "year": 2030,
      "value": 7610
  }, {
      "year": 2035,
      "value": 6816
  }, {
      "year": 2040,
      "value": 6048
  }, {
      "year": 2045,
      "value": 5324
  }]
}

RESAS API の人口構成 API は1都道府県ずつのリクエストになるので、どのみち取得済み情報とマージが必要にはなるのだが、Recharts のデータ形式にあわせようとすると、ちょっと大変な気がする...。

Highcharts と react-chartjs-2 は以下のような感じなので、いくらかやりやすいかも。

Highcharts

 series: [{
    name: 'Installation',
    data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
  }, {
    name: 'Manufacturing',
    data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
  }, {
    name: 'Sales & Distribution',
    data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
  }, {
    name: 'Project Development',
    data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
  }, {
    name: 'Other',
    data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
  }],

react-chartjs-2

data={{
    labels: ['Jun', 'Jul', 'Aug'],
    datasets: [
      {
        id: 1,
        label: 'Dataset 1',
        data: [5, 6, 7],
      },
      {
        id: 2,
        label: 'Dataset 2',
        data: [3, 2, 1],
      },
    ],
  }}

Highchart は多機能な分、扱いが少し難しい印象ではあるが、スター数的にも Highchart を使ってみようかと思う。公式サンプルを元にカスタマイズしてみよう。

Higncharts - Line chart

h-yoshikawa44 / resas-graph-app