コーディング規約

フロントエンドデザインパターン

• コンテナ ・ プレゼンテーションパターン (hooks)を利用する
• 下記のようなメリットがある

プレゼンテーションコンポーネントはアプリケーションロジックを変更しないため、デザイナーのようにコードベースの知識がない人でも、簡単にプレゼンテーションコンポーネントの外観を変更することができます。

• ロジックはカスタムhooksにまとめ、UIはcomponentsディレクトリに入れる

命名規則

ディレクトリ、ファイル名

• componentsはパスカルケース（HogeHuga）
• hooksは、useHogeHuga
• pagesは、小文字

変数名

• 基本的にキャメルケース(hogeHuga)
• type propsは〇〇Props(パスカルケース)

type HogeProps = {
  hoge: string
}

TypeScriptのルール

• importは、@/~~ としてimportする。(相対パスでimportしない)

スタイルの書き方

• marginは、margin-bottomではなく、margin-topを使う
• chakraUIでサイズPropsを用意している場合はそちらを使う 　　 - sm, mdなど
• 書き方は{}で囲いシングルクォーテーションで統一
  • alignItems={'center’}
• 数値はremで指定(アクセシビリティを意識)
  • mt={'2.4rem'}
• componentsは、役割ごとにディレクトリを切って、ディレクトリ毎に、index.tsにまとめる。呼び出し側はindex.tsを読み込む形

コメント

保留にしている内容、別のブランチで対応予定の内容は、TODOとしてコメントアウトする

// TODO: hogehoge