Closed3
命名規則を本気で考える【随時更新】
ENGINEER HIKARU命名規則とは？
Q&A
Q. なぜ命名規則は必要か
A. デザインと開発を効率化するため
Q. 命名規則で考慮すべきことは何か
A. 「接頭辞」「接尾辞」「識別子」「大文字・小文字」「単語の区切り」「単語名」
参考・リンク
ENGINEER HIKARU命名規則
識別子の種類
- ファイル
- パッケージ
- クラス
- メソッド
- 変数
- 定数
命名規則の種類
| 英語名 | 日本語名 | 例 |
|---|---|---|
| Kebab case | ケバブケース | rounded-md |
| Lower camel case | ローワーキャメルケース | isLoading |
| Upper camel case (Pascal case) | アッパーキャメルケース (パスカルケース) | HomePage.tsx |
| Lower snake case | ローワースネークケース | home_screen.dart |
| Upper snake case | アッパースネークケース | DB_PORT |
接頭辞の例
| 接頭辞 | 意味 | 例 |
|---|---|---|
| is | 〜かどうか | isLoading |
単語名の例
| 英語名 | 日本語名(意味) | 例 |
|---|---|---|
| create | 追加、作成 | createTodo |
| read | 取得、読み込み | readTodo |
| update | 更新 | updateTodo |
| delete | 削除 | deleteTodo |
命名規則のその他ルール
- 禁止→「日本語」「最初の文字に数字」「予約語」「スペース」
- 区別→「大文字と小文字」
ENGINEER HIKARU言語ごとの命名規則
HTML
| 識別子 | 命名規則 | 例 |
|---|---|---|
| ファイル | ケバブケース | privacy-policy.html |
CSS
| 識別子 | 命名規則 | 例 |
|---|---|---|
| ファイル | ケバブケース | l-header.css |
| セレクタ | ケバブケース | w-full |
JavaScript(Vanilla)
| 識別子 | 命名規則 | 例 |
|---|---|---|
| ファイル | ケバブケース | create-user.js |
| クラス | アッパーキャメルケース | UserInfo |
| メソッド | ローワーキャメルケース | fetchUser |
| 変数,定数 | ローワーキャメルケース | isLoading |
JavaScript(React)
| 識別子 | 命名規則 | 例 |
|---|---|---|
| ファイル | アッパーキャメルケース | TodoItem.jsx |
| クラス,コンポーネント | アッパーキャメルケース | CardHeader |
| メソッド | ローワーキャメルケース | fetchUser |
| 変数,定数 | ローワーキャメルケース | isLoading |
このスクラップは2023/05/29にクローズされました