基本原則
短く、意味が分かり、同じ概念には同じ名前を使う。
名前だけを見て役割が想像できることを優先する。
1. JavaScript
変数・関数は camelCase。
pageId
personId
entryList
activeTab
openPage()
saveEntry()
findPerson()
loadData()
操作関数
動詞＋対象。
openPage()
closeBook()
saveDiary()
deleteEntry()
addPerson()
findPerson()
linkPerson()
イベント
on ＋ 対象＋動作。
onTabClick()
onPageOpen()
onFormSubmit()
onBack()
真偽値
is / has / can を付ける。
isOpen
isMobile
hasImage
canEdit
2. 定数
UPPER_SNAKE_CASE
APP_VERSION
SCHEMA_VERSION
DEFAULT_THEME
MAX_IMAGES
3. CSSクラス
kebab-case
.note-page
.page-title
.person-link
.life-timeline
.book-cover
状態は、
.is-active
.is-open
.is-hidden
.is-mobile
.is-locked
所有状態などは、
.has-image
.has-link
.has-note
を使用する。
4. HTML ID
JavaScriptから一意に参照する必要があるものだけ使用する。
#app
#book
#login
#modal
レイアウト目的ではIDを使わずCSSクラスを使う。
5. データ項目
camelCase で統一する。
{
id,
title,
createdAt,
updatedAt,
personIds,
imageIds,
isFavorite
}
複数形は配列に限定する。
personId // 1件
personIds // 複数
6. ファイル・フォルダ
小文字＋ハイフン。
life-timeline.js
person-link.js
book-cover.css
data-store.js
機能フォルダも同じ。
note/
schedule/
diary/
contacts/
assets/
album/
life-timeline/
7. 共通概念は一つの名称だけ使う
禁止例：
person
people
member
user-person
contact-person
同じ意味で混在させない。
例えば人物なら内部名称を、
person
personId
personIds
に統一する。
画面表示上は「人物」「住所録」など別名称でもよい。
8. バージョン名をコード名に入れない
禁止：
.rn28-page
.v14-title
.note-v2
.new-layout3
バージョンアップしても意味が変わらない名前を使う。
9. 見た目の数値を名前に入れない
禁止：
.width520
.mt8
.left3
.box40
推奨：
.page-inner
.book-gap
.tab-list
10. 一時修正を名前に残さない
禁止：
.fix-mobile
.fix2
.temp
.patch
.new-new
.final2
修正後は本来の構造へ統合する。
11. 意味不明な短縮は禁止
禁止：
p1
xx
tmp2
cfgx
dtm
abc
ただし一般的で意味が明確なものは使用可能。
id
db
ui
url
api
css
html
12. 名前の長さ
短縮すること自体を目的にしない。
savePerson()
は良い。
savePersonInformationToDatabase()
は長すぎる。
sp()
は短すぎる。
意味が失われない最短名を採用する。
禁止原則
以下を新規コードに作らない。
box1
box2
data1
new2
fix3
mobileFix
rn28
v15
tmp
aaa
test2
最終原則
短くするために意味を捨てない。
同じものを違う名前で呼ばない。
名前にバージョン・座標・一時修正の歴史を残さない。
名前を読めばコードの役割が分かる状態を維持する。
| 
