Skip to content

Latest commit

 

History

History
54 lines (39 loc) · 1.89 KB

README.md

File metadata and controls

54 lines (39 loc) · 1.89 KB
Raw

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

要件

【課題】 都道府県別の総人口推移グラフを表示する 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 クラスに置き換えています。