Skip to content

scdnj/population-graph-front-test

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

フロントエンドコーディング試験

要件

【課題】 都道府県別の総人口推移グラフを表示する SPA(Single Page Application)を構築せよ

開発方法

cp .env.template .env.local

RESAS API KEYを取得して.env.localのVITE_APP_API_KEYに入力

pnpm install
pnpm dev

本番環境ではvercelのmiddlewareからAPIを叩いています。

確認しているポイント

https://yumemi.notion.site/yumemi/0e9ef27b55704d7882aab55cc86c999d

開発時に入れたいものチェックリスト

  • vue
  • nuxt(nuxt の方が望ましいと言われていることに今更気づいた)
  • eslint
  • prettier
  • eslint-config-prettier
  • husky + lint-staged
  • jest
  • storybook
  • hygen
  • tailwindcss
  • コンポーネントの jest でのテスト
  • playwright
  • CI
  • storybook の i11y 関連プラグイン(あったと思う。あった方がいいと思うけど今じゃない気がする)
  • VRT(グラフあるしあった方が良いかも?TDD でやったことはないし見た目も fix ではないので後でいいかも)

注意書き

Storybook ファイルで型エラーが出る

vscode+Volar での開発をする場合、テストファイルと Storybook ファイルで vue ファイルの型が適切に解釈されないことがあります。 その場合は vscode に builtin されている typescript 言語機能プラグイン(vscode.typescript-language-features)を切ってください。

参考: https://vuejs.org/guide/typescript/overview.html#volar-takeover-mode

Storybook で API を叩きたい

コンポーネントテストで API を直接叩くのはあまり良くないので api のサービスクラスを作って、jest ならそれを mock、Storybook は環境変数(import.meta.env.STORYBOOK)を読んで mock クラスに置き換えています。

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published