コーディング中のクラス名で迷いたくない!よく見るコンポーネントの名前17選

コーディング中のクラス名で迷いたくない!よく見るコンポーネントの名前17選

セイト

セイト

list/item

list-item
複数のコンポーネントが並べられたデザインを実現する際、全体を覆うタグにlist、コンポーネント1つ1つを囲うタグにitemと命名します。

wrapper/inner

デザインの都合上、タグを囲ったり中にもう1つタグを挟まないといけないシーンが出てきたらこれ。
イメージでは説明しづらいので、タグで解説します。↓

<header class="header">
	<div class="header-inner"> ... </div>
</header>
<div class="button-wrapper">
	<button class="button">button</button>
</div>

目に見える部分ではありませんが、コーディング時、デザインを実現する上で必要になるケースがあります。
ちなみに、container/contentという名前も似たような役割で用いられます。

holder

holder
いくつかのコンポーネントをまとめておくブロック。

group

group
こちらも複数のコンポーネントをまとめておくブロック。
個人的には、groupは「似たようなコンポーネントをまとめておくブロック」で、holderは「特徴が異なるコンポーネントをまとめておくブロック」と使い分けています。

まとめ

いかがだったでしょうか。
ここで紹介しているのはあくまで実装例ですので、開発者にとってわかりやすい名前がつけられればそれに越したことはありません。
しかし、この記事がクラス名を考える際の参考になれば幸いです。
それでは、よきコーディングライフを!

 

【関連リンク】

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

セイト
セイト Ex-President & VPoE at LIG Philippines. / 堀口 セイト

現在はミネルバ大学院に在籍しつつ、SNS総フォロワー数11万人を誇るエンジニアコンサルタントとして活躍中。 初代ポケモンで最初に選ぶならゼニガメ。でも本当に好きなのはフシギダネ。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL