Zenn
👋

React関連の命名規則を教えます

に公開
React
命名規則
tech

命名の基本構成

コンポーネント名は、以下の6つの要素を組み合わせて表現します：

  1. UI部品：表示・入力などの基本UI
  2. モディファイヤ：状態・スタイル・バリエーション
  3. 機能：操作、振る舞い（ProviderやHandlerなど）
  4. エンティティ：意味上の対象（User, Productなど）
  5. エンティティの詳細：エンティティ内の下位要素（Profile, Nameなど）

命名のルール

UI部品+モディファイヤ+機能+エンティティ+詳細 です。

イメージとしては 抽象→具体 で具体になるほど後につきます。

ルールの意図は２つ

  • 私がコンポーネントを探すときに 抽象→具体 の順でイメージするからです。(「ボタンで、Primaryで、ユーザーで」みたいに）
  • フォルダにきれいに並ぶから

以下サンプル

UI部品 モディファイヤ 機能 エンティティ 詳細 例
Button Primary Submit User Profile ButtonPrimarySubmitUserProfile
TextField Error Validator Product Name TextFieldErrorValidatorProductName
Avatar Rounded ― User ― AvatarRoundedUser
Modal Confirm Delete Order ― ModalConfirmDeleteOrder
Checkbox ― ― Terms ― CheckboxTerms
Tooltip Light ― Notification ― TooltipLightNotification

ルーティング・ページの命名

resource based routingをベースに考えました。

/{resource}/{id?}/{action?}

同様にページのコンポーネントも次のようになります。

{Resource}{Action}

以下サンプル

具体例 意味 コンポーネント名
/users 一覧 UserList
/users/:id 詳細 UserDetail
/users/new 新規作成 UserNew
/users/:id/edit 編集 UserEdit
/users/:id/delete 削除確認や実行画面 UserDelete
/orders/:id/confirm 確認 OrderConfirm
/invoices/:id/download ダウンロード InvoiceDownload
/messages/:id/reply 返信 MessageReply
/account/settings 設定 AccountSetting

GraphQLのOperationの命名

なんの話かというと以下の「GetDogByBreed」の命名にルールを作ります。

query GetDogByBreed($breed: String!) {
}

前提

  • Queryはページ単位で1つだけ
  • Fragmentは関数・コンポーネント単位(Fragmentについてはこちらの記事を参照）

命名のルール

  • Query：{PageName}Query

    各ページに対して1つだけ定義

  • Component Fragment：{PageName?}{ComponentName}Fragment

    コンポーネントごとに定義。ページ名は必要に応じて付与

  • Function Fragment：{FunctionName}Fragment

    フックや関数単位で必要なデータを定義

  • Mutation：{MutationName}Mutation

    フックや関数単位で必要なデータを定義

意図は「名前の衝突を避けるため」です。

以下サンプル

ページ名（PageName） コンポーネント/関数名 命名例
UserList ― UserListQuery
ProjectDetail ― ProjectDetailQuery
UserList Content （コンポーネント） UserListContentFragment
― UserProfile （コンポーネント） UserProfileFragment
― useUserStatus （hooks） UseUserStatusFragment
― formatUser （関数） FormatUserFragment
createUser (関数&Mutation) CreateUserMutation

Discussion