Coding standards

このページでは tebkukuro プロジェクトにおけるコーディング規約をまとめています。 規約は必要に応じて随時追加していきます。

Frontend

ディレクトリ構成

• pages ディレクトリには page ファイルのみ格納
• container、actionなど、page 以外のものは必ず別に directory を作成して配置 (e.g. containers/ )
• Jest のテストは各ディレクトリの直下へ配置 (e.g. MyComponent/__test__ )
  • page のテストは誤ってルーティングされることを防ぐため、 pageTests ディレクトリに格納

JavaScript

• bind(this)について

関数・メソッドにおいて、this の bind が必要となった場合は、アロー関数式を利用して bind の使用を避ける(アロー関数で bind が不要な理由はこちらの記事を参照)。 bind の使用を避けることで、ボイラープレートとFlow による型チェックの対象を減らせるメリットがある。 例えば、React コンポーネントにおける以下のコードは、

constructor(props){
  super(props)
  this.onSubmitHandler = this.onSubmitHandler.bind(this)
}

onSubmitHandler(e){
  this.onSubmit()
}

下記のように記述すること。

constructor(props){
  super(props)
}

onSubmitHandler = (e) => {
  this.onSubmit()
}

型チェック

Flowによる静的型チェックを行う。React・Reduxの各要素について厳密に型を定義するには、flow-typedなどを導入する必要があるが、現在のフェーズではプリミティブ型などによる簡単なチェックを行うのみとしている。

型チェックに用いる定義の例：

• ID： number
• 関数：　Function
• 文字列の配列： ?string[]
• コンポーネントのプロパティ(Props)・State： { id: number, name: string }

構文チェック

ESLintを用いた構文チェックを行う。原則としてESLintのルールに従ってコーディングするが、必要な場合は例外を認める。

現時点で例外を認めているルールは以下の通り（カッコ内は例外的に適用した内容）：

• semi： セミコロンの使用を許可
• class-method-use-this： this を使用しないクラスのメソッドを許可
• react/react-in-jsx-scope： React をインポートしていない jsx ファイルを許可
• no-unused-expressions： allowShortCircuit を有効化して、短絡評価を許可
• jsx-a11y/anchor-is-valid： href属性のないリンク要素<a>を許可（Nextjsの<Link>要素で使用）

一時的な例外の許可について

一時的に例外を許可する必要がある場合は、以下のように必要な範囲のみ許可する：

// eslint-disable-next-line [some unnecessary rules]
    // some code here...

/* eslint-disable [some unnecessary rules] */
    /*
       some code in multiple lines...
    */
/* eslint-enable */

Backend