lincwell / frontend-coding-guideline

Linc'well Frontend Coding Rules
1 stars 0 forks source link

定数宣言でUPPER_CASEの記述例を定めたい #10

Open negabaro opened 2 years ago

negabaro commented 2 years ago

https://github.com/lincwell/femapp/pull/499#discussion_r871267224 から議論した内容で

UPPER_CASEを使っていい例とNGの例を定めたいです。

自分が考えてるルールは以下のとおりです。

UPPER_CASE OKの例

const ESLINT = require('gulp-eslint');
const DEFAULT_NUMBER = 5;

UPPER_CASEのNG例

export GET_NUMBER = xx() => {}; # 関数の戻り値
export DEFAULT_NUMBER = 5; # exportはしない

理由

1. UPPER_CASEにすると目立つので可読性があがる

2. MDNで推奨してる

ご意見ください!

to-na commented 2 years ago

Airbnb のスタイルガイドでは、export される定数のみが、UPPER_SNAKE_CASE で 書いてもよい ということになっています。 https://github.com/airbnb/javascript/#naming--uppercase https://qiita.com/rana_kualu/items/e912d94cebd5c7ef73af 必ずしもこれを踏襲する必要はありませんが、自然な convention だと思います。 一方で、これは React を考慮していない可能性があり、export していなくても、コンポーネントの外で定義されている場合は UPPER_SNAKE_CASE にしても良いと考えます。

// Bad
const LOCAL_CONSTANT = 'foo';
// Good
const localConstant = 'foo';
// Good
export const API_KEY = 'foo';
// NOT Bad
export const apiKey = 'foo';
// Bad
const FOO = require('foo-library');
// Good
const foo = require('foo-library'); // 実際は import { foo1 } from 'foo-library' などが望ましい

// Bad
const FooComponent = () => {
  const BAR = 1;
  ..
}
// Good
const FooComponent = () => {
  const bar = 1;
}
// Good
const BAZ = 1;
const FooComponent = () => {
  // Some Code using BAZ
}
negabaro commented 2 years ago

ご確認ありがとうございます。私もいいと思います。 問題なければクローズお願いします。