開発コストを削減「BiTT開発」って?
開発コストを削減「BiTT開発」って?
2015.06.18

コーディング中のクラス名で迷いたくない!よく見るコンポーネントの名前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は「特徴が異なるコンポーネントをまとめておくブロック」と使い分けています。

まとめ

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

 

【関連リンク】

  • 1
  • 2