README.md

prefecture-app

チェックした都道府県の人工構成比をグラフで表示することができる簡単なWebアプリです。

使用技術

• React
  • version18.2を使用。
• Next.js
  • version13を使用。experimentalは未使用。
• TypeScript
  • コードの安全性を高めたり、可読性を上げたりする目的で使用。
• ESLint
  • 有識者の方が作られたルールに則ることができるので、一定の品質が担保されると考えて使用。
  • りあクト！ TypeScriptで始めるつらくないReact開発 第4版【② React基礎編】 を参考に作成。
• Prettier
  • ESLintでカバーできないフォーマットの部分統一を担当するために使用。
  • 上記同様、りあクト！ TypeScriptで始めるつらくないReact開発 第4版【② React基礎編】 を参考に作成。
• StyleLint
  • ESLintのCSS版です。
  • 上記同様、りあクト！ TypeScriptで始めるつらくないReact開発 第4版【② React基礎編】 を参考に作成。
• ky
  • fetchを使いやすくしてくれているライブラリです。
  • axiosはXMLHttpRequestを使用しているため、基本的に今後も不採用。
• Tanstack Query
  • SWRも選択肢にありましたが、前者の方が多機能で、その機能を使いたかったため、今回は不採用。
• react-chartjs-2
  • 他にも様々な選択肢がありましたが、渡すデータを比較的楽に作成できそうだったため、こちらを採用。
• GitMoji
  • Commitメッセージの意図を分かりやすくできます。
• simple-git-hooks
  • Commitする前にコマンドを流したりできます。

開発

開発を行う場合

yarn dev // localhost:3000 で立ち上がります

本番の動作確認を行う場合

yarn build
yarn start // localhost:3000 で立ち上がります。