/english-learning-frontend

Primary LanguageTypeScript

学習サイト

導入ライブラリー

  • eslint (構文チェック)
  • prettier (コードの整形)
  • Next.js (React フレームワーク)
  • jest (テストツール)
  • storybook (UI コンポーネントのテストや管理)
  • TypeScript(型導入)
  • husky (Git 操作自動制約)
  • hygen (コンポーネントの自動生成)
  • lint-staged (コミット時に lint,型チェック実行)
  • react-icons (アイコン)
  • React Hook Form (フォームバリデーションライブラリ)
  • zod (スキーマ定義およびバリデーションライブラリ)
  • SWR (データ取得の React Hooks)
  • Recoil (状態管理)
  • nodemailer(メール送信)

npm script

# 開発モード起動
npm run dev
# ビルド
npm run build
# 本番モード起動
npm run start
# コードチェック
npm run lint
# テスト
npm test
# StoryBook起動
npm run storybook
# StoryBookビルド
npm run build-storybook
# コンポーネント生成
npm run fc:new
# コード整形
npm run format
# コードを修正
npm run lint:fix
# 型チェック
npm run type-check

コミットメッセージ

Conventional Commits の規則にしたがってコミットメッセージを記述してください。

ディレクトリ構成

app/components/

各コンポーネントを配置

  • pages - レイアウトを行うディレクトリ
  • features - API 通信や状態がある、ロジックがある、再利用性があるコンポーネント
  • parts - 状態を持たない、再利用性があるコンポーネント

types

型定義ファイルを配置

utils

グローバルで使える便利な関数を配置

ディレクトリ構造はこの GitHub レポジトリを参考