jsファイル/ディレクトリ命名規則

2018-01-15 #javascript 

前提

js界隈として標準になるような規則はない。 だからここに書くのは個人的に気に入っているものになる。

記法

規則 形式
パスカルケース PascalCase
キャメルケース camelCase
スネークケース snake_case
ケバブケース kebab-case

命名規則

airbnbのJavaScriptスタイルガイドから流用できる部分は流用する。 そうでない部分は自分の好み(プロジェクトやフレームワークのスタイル)で決める。

default exportとファイル名を一致させる

これはairbnbのスタイルガイドから流用した。
A base filename should exactly match the name of its default export.

exportする対象によって規則が変わる。

functionの場合 → キャメルケース
class, object, constructor関数, singletonを返す関数 → パスカルケース

// myFunction.js
export default () => { ... }

// MyClass.js
export default class {}

// MyObject.js
export default {}

この規則はESLintならeslint-plugin-filenamesで設定可能。

default exportとディレクトリ名を一致させる

ディレクトリ単位でモジュールを作る場合に適用される。 モジュールをexport defaultするファイル名はindex.jsとし、ディレクトリにモジュールの名前をつける。

myFunction/
 ├ partial.js
 └ index.js
// index.js
export default () => {
    // ...
}

date-fnsの各functionはこの形式で書かれている。各functionのディレクトリにテストが含まれているのがGoっぽくていい。

https://github.com/date-fns/date-fns/tree/master/src

それ以外のファイル、ディレクトリ

これは自分の好みやプロジェクトのスタイルで決めればいい。 airbnbのエンジニアもこう言っていることだし。

airbnbではRailsを使っているからディレクトリはスネークケース、ファイルはパスカル、キャメルケースで命名している。もしRailsじゃなかったらディレクトリもパスカル、キャメルケースを使うと思う。

https://github.com/airbnb/javascript/issues/817#issuecomment-207815644