« (X)HTML, XML のコメント記述位置 | トップページ | 配色管理用の CSS をモジュール化する »

2007-01-26

コード共有のためのネーミングルール

最近、CSS の使いまわしなどを視野に入れ、一部で class名や id名の共有というテーマへの関心が徐々に高まりつつあるような印象です。microformats なんかも、その流れのひとつといえるでしょう。

名前の共有はコードの共有のための(複数人で同一コードを編集・転用する)重要なファクターのひとつですし、非常にいい傾向だとは思うんですけど、実際につけられている名前を見てみると、シブい顔をせざるを得ない事例が結構あるようです。

コード共有のためには避けたい命名事例

構造ではなく見栄えで命名しているもの

論理的な名前にすべきところを、見栄えベースの名前をつけてしまっているケース。table ベースのコーディングから、Web標準志向コーディングへの移行過程で、おそらく誰もが一度は通る|通った道だと思います(もちろん、僕自身も)。でも、こういうのは、(X)HTML, CSS 共に valid なコードであったとしても、「構造と見栄えの分離」とは言い難いでしょう。心当たりのある方は、見栄えに依存した文書構造になっていないか、是非コードをもう一度、見直してみませんか?

  • right (content-right, rightcontent, rightside)
  • left (content-left, leftcontent, leftside)
  • col2 (leftcol, rightcol)
  • center
  • sidebar
  • navbar
  • layout
  • frame-margin
  • (個人的な本音としてはこれに wrapper も加えたい..)
短縮表記されているもの

ものによっては、何を意味しているのか全く不明なものも。さしずめ「俺タグ」ならぬ「俺クラス」「俺 id」。"nav" などは一見、普及している表記のように思われがちですが、特に日本人は、purprin さんのプレゼンにもあるように、人によって "navi" と略す事例が相当数あって(なんだか「マック」「マクド」論争みたい.. (^ ^;) )、こういう細かい表記の違いが混乱を生むことがあります。(ただし、HTML 5 の nav 要素への将来的な対応を狙って nav という class を立てている場合などは、もちろん事情が異なります。XHTML 2.0 の nl 要素も同様。)私的なブログとか、自己完結で済まされるケースなら構わないと思いますが、公的なサイトや、他者とコードを共有する場合には短縮表記は極力避けたいところです。

  • nav (navi, topNav)
  • gnav (gnavi, g-navi, globalnav, globalnavi, global-navi)
  • stinfo-navi
  • bmarks
  • sec1
  • nl
  • mframe
英語以外の言語表記が混じってるもの

セマンティクスが文化依存(言語依存)になってしまい、意味が通じる人の範囲を狭めてしまうことがあります。コードを共有する対象や、サービスを提供するターゲット次第では、必ずしも英語名でなければならないわけではありませんが、特に日本語に関しては、漢字→仮名→ローマ字に変換する過程で言葉の持つセマンティクスが落ちてしまうので、個人的には避けるべきだと思っています。たとえば "gengo" というローマ字表記単体では、「言語(language)」なんだか、「原語(original word)」なんだか分かりません。人によっては、ひょっとしたら「元号(era name)」を意味しているかもしれませんし、結局は文脈から判断するしかありませんから。

  • coloana_unu (coloana_doi) → ルーマニア語
  • pankuzu → 日本語ローマ字

命名規約を設けるのが重要!

コードを共有する上で重要なのは、コーディング規約(coding standards)や命名規約(naming standards)を設けることです。(要するに W3C や ECMA などの規格に定められていないローカルルール。昨年末に出た『ちゃんと CSS するためのスタイルガイド入門』の pp.041-049 に「スタイルガイド」の事例が紹介されています。ここで紹介されている「スタイルガイド」は、セマンティクスよりも見栄え...ブランディングのウェートが高いですが、これらもコーディング規約の一種です。)

誰が見ても意味がわかる名前に

HTML の要素・属性名は、テキストエディタで誰でも手軽にマークアップできるよう、短縮された表記になっています。これは global standard として揺るぎない共通の書式がすでに通行しているので、短縮表記のままでも問題ありませんが、個々人が自由に命名できる class名や id名については、なるべく略記せずに、誰が見てもわかる名前をつけた方が良いでしょう。これは JavaScript の変数や関数の名前も同様です。

中には短い名前の方が良いとする人もいますが、より多くの人に対する明快さと、将来に渡って一意性を保ちやすくするためには、あまり字数の多寡にとらわれず、適切な名前を選んだ方が良いと思います。

名前は論理的に

(X)HTML は、制作前に文書構造をしっかりモデリングしておきたいところです。本当は XMLUMLのクラス図あたりでモデリングしておいて、その結果を基にスキーマを作成しておくと良いんですが(XML エディタがあれば、文法チェック+自動補完機能付きでスキーマを活かせますし)、そこまでしなくても、一人で設計するなら Post-it 付箋紙 + 紙で、スタッフミーティングなら やや大きめの Post-it + ホワイトボードで、基本構造をモデリングすると良いかも。(モデリングの時点では HTML に囚われず、名前は日本語でも全然OK!)もちろん、内部構造を考えるときは、サイトの外観のことは一切考えないで。こんな感じで..。

<ページ>
<奥付>
<サイトタイトル/>
<ページタイトル/>
<著者/>
<著作権表示/>
</奥付>
<ナビゲーション/>
<本編>
<章>
<題名/>
<節>
<題名/>
<小節>
<題名/>
<段落>...</段落>
</小節>
</節>
</章>
</本編>
</ページ>
記法を統一・区別する

JavaScript の変数・関数名や、(X)HTML の class や id の値は、大文字・小文字を区別することになっています。(CSS は適用する言語に依存。)コーダーによって、名前の書式が違ったためにデバッグに余計な時間を取られないように、あらかじめ記法を統一しておくと良いでしょう。ただし、JavaScript の変数名・関数名・オブジェクト名ではハイフン区切りは使わないこと。また (X)HTML の class, id の値にはアンダースコアを使わないこと。(→ なぜ?

camel 記法namingStandard
pascal 記法NamingStandard
ハイフン区切りnaming-standard
アンダースコア区切りnaming_standard
メタ文字や予約語は使わない

これは説明不要ですね。もちろん、エラーを防ぐためです。

業界慣習があれば、それに従う

たとえば、JavaScript のループカウンターは、for (i=0; i<4; i++) のように慣習として i, j, k などを使いますが、このような場合は、むしろ慣習にしたがった方が混乱を回避できます。コード編集者に初心者が入る可能性がある場合は、こうした業界慣習も明示的に命名規則に盛り込んでおきたいところです。(ほかにもグローバル変数名には頭に小文字の "g" をつけるとか。)

動作と情報を名詞(句)、動詞(句)で区別

JavaScript の関数名は動詞もしくは動詞句とし、変数名・オブジェクト名は名詞もしくは名詞句で命名します。こうすることで、より我々が日常 話している自然言語に近づけますし、名前を見ただけで動作・命令(関数)なのか、情報(変数)なのかも、すぐに識別できるようになります。JavaScript のメソッド名が動詞(句)に(e.x. getElementById)、プロパティ名が名詞(句)になっている(e.x. length)ので、参考にすると良いでしょう。

(X)HTML の class, id は、原則として名詞・名詞句が良いでしょう。(これは例外がありそう..。)

ほかの文化圏のリソースを参考にする

[2007-01-29]追記: なぜ class や id にアンダースコアを使わない方が良いのか

class, id にアンダースコアを避けるべきと書いたのは、CSS 2 の訂正表で変更されるまで、アンダースコアの使用が認められていなかったためです。つまり、現在の CSS 2 以降ではその使用が認められているわけですが、id や class 中にアンダースコアを入れると、古い規格に基づいて実装されている Netscape 4, 4.5, 4.6 とバージョン6 の初期ビルドでは、スタイルが適用されません。該当するブラウザのユーザーをターゲットにしている場合は、特に注意してください。もちろん、こうした事情を踏まえ、レガシーブラウザに対する回避策などを講じた上でということであれば、class や id にアンダースコアを使用しても差し支えありませんが、このエントリーのテーマである「コード共有のため」という観点からいえば、やはり混乱の原因にもなりうるので、正直、オススメはできません。

[2001-07-30] The underscore should be allowed in identifiers. Change "In CSS2, identifiers [...] can contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-)" to:

In CSS2, identifiers [...] contain only the characters [A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen (-) and the underscore (_)

Errata in REC-CSS2-19980512より引用:

|

« (X)HTML, XML のコメント記述位置 | トップページ | 配色管理用の CSS をモジュール化する »

[Web]XHTML」カテゴリの記事

コメント

まったくもってねこさんの仰る通りで、追記を入れなかったのは、僕の手抜き以外の何ものでもありません。すみません、ご指摘、ありがとうございました。早速、追記を加えました。

ところで、ねこさんのおっしゃる「原理主義」って、どういう状態のことをいうんでしょう?たとえば、現実世界での実装よりも、規格や理念、理想の墨守を優先させるのを「原理主義」というのだとすれば、アンダースコアの件は、むしろ実装寄りの配慮だと思いますけど..。また、このエントリーにしても、再三「コードを共有するため」という、ネーミングルールの目的を強調しているはずです。少なくとも"あらゆるページで"、このエントリーのように"しなければならない"というような趣旨で書いてるつもりはありません。

投稿: ゆう@管理人 | 2007-01-29 08:26

香ばしいですね。

ネーミングルールと仰るのであれば、コメントにある引用のような背景から利用しないと追記するべきでは?
また、使用しないと言い切るのであればどのブラウザが対応していないのか調べて「該当するブラウザをターゲットにしている場合は。。。」とするべきだと思います。

でなければただの原理主義バカ

投稿: ねこ | 2007-01-29 02:23

コメント、ありがとうございます。お返事が遅くなってしまって申し訳ありません。

# 最近、コメントスパムやトラバスパムがすごいので、両方とも一時的に反映設定を許可制に変更しています。

class, id にアンダースコアを避けるべきと書いたのは、CSS 2 の正誤注記で変更されるまで、アンダースコアの使用が認められていなかったためです。もちろん、現在はその使用が認められているわけですが、id や class 中にアンダースコアを入れると、古い規格に基づいて実装されている Netscape 4+ など、一部のレガシーブラウザでスタイルが適用されません

Errata in REC-CSS2-19980512より引用:

[2001-07-30] The underscore should be
allowed in identifiers. Change "In CSS2, identifiers [...] can contain
only the characters [A-Za-z0-9] and ISO 10646 characters 161 and
higher, plus the hyphen (-)" to:

In CSS2, identifiers [...] contain only the characters
[A-Za-z0-9] and ISO 10646 characters 161 and higher, plus the hyphen
(-) and the underscore (_)

上記の事情を踏まえ、レガシーブラウザに対する回避策などを講じた上でというのであれば、class や id にアンダースコアを使用しても確かに問題はありません。ただ、もしこれとは別の理由で youhei さんがアンダースコアを使っても良いと思われるような理由があるようでしたら、是非、今後の参考までにお聞かせくださいませ。

投稿: ゆう@管理人 | 2007-01-28 21:44

classやidの値にアンダースコア使っても良いと思います。

投稿: youhei | 2007-01-27 18:39

コメントを書く



(ウェブ上には掲載しません)




トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/15394/5080898

この記事へのトラックバック一覧です: コード共有のためのネーミングルール:

» 変数名の命名規則 [zone-log]
コーディング時の変数名や関数名の命名規則について。 [続きを読む]

受信: 2007-01-27 19:53

» links for 2007-02-18 [オラオラ]
MySQLPHPGrid MySQLデータベースの内容をAjaxで変更できるPHPライブラリ:お??! (tags: MySQL ajax php) DJTRで日本語を綺麗な画像に変換 (テックdeGo) PHPのGD機能を使い、HEADタグの文字をサーバーサイドで処理する:バージョン調べたらGDが2.0.28、FreeTypeが2.1.9という事で、使用可能みた...... [続きを読む]

受信: 2007-02-19 06:22

» 変数名の命名規則 [zonelog]
変数名の命名規則 [続きを読む]

受信: 2008-02-07 22:56

« (X)HTML, XML のコメント記述位置 | トップページ | 配色管理用の CSS をモジュール化する »