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

h-yoshikawa44 · 2021-12-04T06:20:13Z

作業内容

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

h-yoshikawa44 · 2021-12-04T06:33:27Z

Next.js 12.0.5 でのエラー

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

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

Next.js - [email protected] 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;

従来の next/document インポートでは、Document の中身が () => any になってしまう。そのため、回避策としてインポート元を変更。

h-yoshikawa44 · 2021-12-05T03:47:09Z

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

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

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

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

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

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

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

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

h-yoshikawa44 · 2021-12-05T05:54:45Z

グラフライブラリ

候補

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 added the enhancement New feature or request label Dec 4, 2021

h-yoshikawa44 self-assigned this Dec 4, 2021

h-yoshikawa44 added a commit that referenced this issue Dec 4, 2021

feat: Headerコンポーネント作成(#4)

f618deb

h-yoshikawa44 added a commit that referenced this issue Dec 4, 2021

feat: チェックボックスコンポーネント作成(#4)

7b383b1

h-yoshikawa44 added a commit that referenced this issue Dec 5, 2021

feat: 都道府県データの型定義、都道府県フィールドセットコンポーネント作成(#4)

885d2fe

h-yoshikawa44 added a commit that referenced this issue Dec 5, 2021

fix: エクスポートをdafaultエクスポートに修正(#4)

d40e991

h-yoshikawa44 added a commit that referenced this issue Dec 5, 2021

feat: 人口データ型定義、人口遷移グラフコンポーネント作成(#4)

3fde412

h-yoshikawa44 added a commit that referenced this issue Dec 5, 2021

feat: 作成したコンポーネントでUIモックを作成(#4)

2ea5bbe

h-yoshikawa44 mentioned this issue Dec 5, 2021

各種コンポーネント、UIモック作成 #5

Merged

h-yoshikawa44 closed this as completed in #5 Dec 5, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

h-yoshikawa44 commented Dec 4, 2021 •

edited

Loading

h-yoshikawa44 commented Dec 4, 2021

h-yoshikawa44 commented Dec 5, 2021 •

edited

Loading

h-yoshikawa44 commented Dec 5, 2021 •

edited

Loading

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

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

Comments

h-yoshikawa44 commented Dec 4, 2021 • edited Loading

作業内容

h-yoshikawa44 commented Dec 4, 2021

Next.js 12.0.5 でのエラー

h-yoshikawa44 commented Dec 5, 2021 • edited Loading

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

h-yoshikawa44 commented Dec 5, 2021 • edited Loading

グラフライブラリ

h-yoshikawa44 commented Dec 4, 2021 •

edited

Loading

h-yoshikawa44 commented Dec 5, 2021 •

edited

Loading

h-yoshikawa44 commented Dec 5, 2021 •

edited

Loading