Zenn
🎉

【コンポーネント命名規則】#変数名 #オブジェクト指向 #ベストプラクティス

2024/04/25に公開
1件
JavaScript
React
命名規則
デザインパターン
コンポーネント設計
tech

強いプレフィックスを持つというルール

#JavaScript #Go #TypeScript #Ruby #PHP #Java #Python #変数名 #オブジェクト指向

要件

Q. あなたが参画したプロジェクトディレクトリには次のようなコンポーネントらがあった。

※Drawerとは: 「引き出し」という意味で、スライドされてでてくる表示/非表示型UIのこと。画面幅分の高さや幅をもつのが特徴。

/components/
- ...
- DialogToCreateAccount
- DrawerEditList // リストを編集するUI
- DrawerEditUserPrimary // ユーザー情報の主的部分の編集
- DrawerEditUserSecodanry // ユーザー情報の副的部分の編集
- DrawerSidebar // サイドバー
- DrawerUsersSearch // ユーザーらを検索するためのUI
- DrawerUsersRelational // 類似ユーザーを出すためのUI
- FieldBirthday
- ...
- PullerDrawer // "つまみ" を備えた汎用的Drawer
- ...

問題点

  • 名前が統一されていない
  • (a~Z順に並んでいるので)ガタガタで見つけにくい（大抵のGUI/CUIではa~Z順）

解決

プレフィックス(接頭辞)を揃える

/components/
- ...
- DialogToCreateAccount
- DrawerToEditList // リストを編集するUI
- DrawerToEditUserPrimary // ユーザー情報の主的部分の編集
- DrawerToEditUserSecodanry // ユーザー情報の副的部分の編集
- DrawerToSearchUsers // ユーザーらを検索するためのUI
- DrawerForSidebar // サイドバー
- DrawerOfUsersAssociated // 連想される(紐づけられた)ユーザーら
- DrawerWithPuller // "つまみ" を備えた汎用的Drawer
- FieldBirthday
- ...

考え方のコツ

英語

  • Guy you met // あなたが会った男
  • Girl running in the park // 公園を走っている女[動名詞]
  • Building he built // 彼が建てた建物[過去分詞]
  • Element to be deleted // 削除される要素[受動態]
  • Drawer to edit User // Userを編集するためのDrawer

(おしい)

最後まで見ないといけない。英語としても破綻している（"リストが編集するDrawer"など）。

- DrawerListEdit // リストを編集するUI
- DrawerSidebar // サイドバー
- DrawerUserPrimaryEdit // ユーザー情報の主的部分の編集
- DrawerUserSecodanryEdit // ユーザー情報の副的部分の編集
- DrawerUsersSearch // ユーザーらを検索するためのUI
- DrawerWithPuller // "つまみ" を備えた汎用的Drawer

withXxxxx系の汎用UIが埋もれる

プレフィックスを統一すると誰も迷わなくなる

、くらい視認性が上がる。

- List
- ListUsers
- ListUsersFollowed
- ListUsersBlocked
- ListUsersSearching
- ListFavorites
- ListFavoritesOfCommunity
- Image
- ImageClickable
- ImageLoading
- Dialog
- DialogYesOrNo
- DialogWithSelectOfCountry
- DialogWithSelectOfRegion
- Drawer
- DrawerForGlobalMenu
- DrawerToEditProfile
- Overlay
- OverlayToSignin
- OverlayToLogin

統一は何よりも大事

略すと人によってバラバラになるので、基本的に略さないことをおすすめします。
自身で書く時も「あれ？どっちだっけ？」と悩まず書けるのは爽快です。

関数名
x: delUser
o: deleteUser
x: remove
o: delete
変数名(フォローしているusers)
x: follows
o: usersFollowing // 本来動名詞もしくは形容詞にするべきである
x: uid
o: id

まとめ

統一第一。

Discussion

llc_starhacksllc_starhacks
react.js
// パターンA:
import useUser from 'xxxxxx';

const { user, getUsers, updateUser, addFollowing, removeFollowing } = useUser(user_id);

///////////////フォローする処理を描いて下さい/////////


- addFollowing().xxxx(to_user_id)
- addFollowing(to_user_id)



// パターンB:
import useUser from 'xxxxxx';
import useFollowings from 'xxxxxx';

const { user, getUsers, updateUser } = useUser(user_id);
const { addFollowing, removeFollowing } = useFollowings();


///////////////フォローする処理を描いて下さい/////////

x: addFollowing(user_id).xxxx(to_user_id)






// パターンC:
import useUser from 'xxxxxx';

const { user, getUsers, updateUser } = useUser(user_id);

///////////////フォローする処理を描いて下さい/////////

user.addFollowing(to_user_id)


user.createList(name)
// user.addUser(user_id).toList(list_id)


xがxを[xに] いつ どこで  [いれる]
xがxにいれる user add in the list
xがxをいれる user add B

user.addFollowing(user_id)
user.setList(user_id, list_id)
user.removeList()

user.setUserToFollowing()
user.removeUserFromList()