名づけルール・・・BEMについても少々
ファイル名やフォルダ名、class名、id名、変数名、関数名・・・など、コーディングするときに、自分で名前を付けなければならない場面が多々あります。
基本的にはわかりやすい名前であるのがよいですが、長すぎても扱いづらいし、深く考えている時間もないし・・・ということで、画像ファイルならimg1.jpgなど、安易に名前+連番という形式にしてしまいがちです(それがダメだということではないです)。
さらに1ページに対して複数の人が更新をかけていたりすると、英語表記とローマ字表記が混在していたり、なんだかカオス状態になるわけです。
そこで名づけルールについて少し触れます。
名づけルールがなんとなくでも決まっていないと、あとでファイルを整理したり、何かしらの変更作業をする際に、作業が煩雑になったりして、管理上こまることがあります(ただし、何らかの理由でわざと名前を推測できないようなランダムなテキストの羅列による名前を利用する企業もあります)。
もちろん、個人のwebページであればあなたの、自社のwebページであれば自社の、クライアント企業のwebページであれば所属している制作会社とそのクライアント独自の名づけルールが存在するでしょうから、それを優先してください。
ここでは独自の名づけルールを考える前に、前提となる注意点や一般的な命名規則について説明します。
とはいえ、これまで特に問題が起こっていないなのであれば、既存の名前を変える必要はないし、今後もあんまり意識しなくてよいです。
他社に移籍したりして誰かに指摘されても、あわてたりムカついたりしなくてもよくなる程度に目を通してください。
ファイル名・フォルダ名の名づけルール
基本、WindowsとかOSの皆さんに怒られないように名前を付ければいいのですが、web制作をする上で気を付けたい名づけルールがいくつかあります。
ベタなところでいうと
半角英数字(全角は使わない)
-(ハイフン)、_(アンダースコア)以外の記号は使わない(※1)
あまり長いファイル名を付けない(※2)
予約語は使わない(※3)・・・参考:Windowsでファイル名に使用できない名前
大文字・小文字を混在させるときは、意識して使う(※4)
拡張子に注意する(※4)
という感じですかね・・・
1 OSに依存するところですが、web制作の場合はいろんなOSが絡んでくるので、ローカル(自分が使用しているパソコン単体)で記号が使えても、サーバにアップするファイルやフォルダ(ディレクトリ)には用いないでください。とくに空白文字は注意です。
また、記号を使う際は先頭に使わない方が無難です。たとえばRuby on Rails(Webアプリケーションフレームワークのひとつ)を使っている場合、_(アンダースコア)が先頭にあるファイルは特殊な目的で使用されるファイルです。意味が分かっていない場合は、記号を先頭にするのはやめましょう。
2 OSに依存するところですが、web制作の場合は新旧いろんなOSが絡んでくるので、おそらく最小文字数制限の"Mac OS 標準 (HFS)"フォーマットボリューム半角31文字を目安にするとよいかなと思います。
(正確に言うとDOSとか8文字だったりしますが、そこまで短いと不便だと思うので・・・)
3 これもOSによって違いますが、ファイルシステム側で使用することが決まっている名前ってのがあって、実際ローカル上でファイルを保存するときに、すんなり予約語の名前でファイルができてしまうこともあるのですが、何かとトラブルの元なので、予約語は避けましょう。
windows上では大丈夫でもほかのOSではアウトのものもあるので、注意が必要です。
4 名づけの問題というか、大文字小文字を混在させたファイル(フォルダ)名のものを指定するときは、そのファイル(フォルダ)名を全部大文字にしたり、全部小文字にしたりしないように注意してねということです(OSによっては大文字小文字を区別しなかったりしますが、サーバによくつかわれるUNIX系のOSは区別します)。
拡張子も使用の際にhtmlファイルで保存したのに拡張子をhtmにしちゃったりしないようにねという、至極web制作上では常識的な話です。
実は、これら以外にも名づけで気を付けたいことがあります。
(できれば)数字から始めない
(できれば)数字だけのファイル名にしない
実際、これでトラブルになることは(web制作では)滅多にないです。
ただ、サーバによくつかわれるUNIX系のOSでは数字のみもしくは数字から始まるファイル名の指定の時とかいろいろあるので、あんまり使ってほしくないなー的な感じだったりします(プログラマ歴長い人だと、生理的に受け付けないってゆー人もいます)。
なんとなく、こういうこともあるんだなー程度に覚えておいてください。
ファイル(フォルダ)名が数値から始まっていたり、数字のみであったとしても、数字ではなく文字列として認識されるようなので、神経質になる必要はないです。
うっすら記憶にとどめておいて、誰かに何か言われたら「あーそーゆーことかなー」とか思っていただければよいかと。
ただし、javaではファイル名が数値から始まるファイル名はNGのようです(ファイル名としてはアリなのだけれど場合によってはうまくないようです)。
HTMLのコーダーがjavaファイルを扱うことはあまりないと思いますが、一応、念のため。
class名やid名、変数名、関数名等の名づけルール
だいたいファイル名の名づけルールと同じです。
ファイル名は半角英数字(全角は使わない)
-(ハイフン)、_(アンダースコア)以外の記号は使わない
あまり長い名前を付けない(※1)
予約語は使わない(※2)
大文字・小文字を混在させるときは、意識して使う(※3)
数字のみもしくは数字から始まる名前にしない
-(ハイフン)、_(アンダースコア)で始まる名前にしない(※4)
id名は同一webページ内で同じ名前が複数存在しないようにする(※5)
1 理論上、classやidの名前の文字数に制限はないのですが、あまり長いと1文字間違って認識しないとか、開発担当にうんざりされたりとか、いろいろ面倒です。
とくにjsなどで使う変数名は長すぎると取扱いがめんどうになるので、一般に英字一字とか短い方が好まれます。
2 ここでいう予約語は、webページに組み込まれるphpやperl、javascript等の予約語です。よくわからなくても、使った時に開発担当から注意されると思うので、その時におぼえるようにしましょう(ついでに、ほかに使ってほしくない文字列はないか確認しておくとよいと思います)。
普段のコーディングでそんなに意識しなくても良いですが、開発さんに指摘されたら、速やかに適当な名前に変更してあげてください。
3 htmlやcss、jsなどでは大文字小文字を区別するので、注意が必要です。
とくに複数の単語を組み合わせて名前とするとき、キャメルケース だと間違いが発生しやすいです。ちなみにや単語をアンダースコア(等)で接続する形式をスネークケースといいますが、こちらはたいてい英字は小文字のみが使われるようです。好みや諸事情で名づけルールが混在していることもあると思うので注意してください。
4 cssのバージョンにもよるみたいです。
5 共通メニューやタイトルなどwebページを複数のパーツに分けている場合(CMSなど)、それらのパーツは複数のファイルに分かれています。そうすると共通メニューのファイルで使っているid名とメイン部分のファイルで使っているid名が重複するといった事故も発生しやすいので、注意してください。
ファイル(フォルダ)名での名づけルールではなんとなくで良いとした数字のみもしくは数字から始まる名前 ですが、class(id)名では絶対に使わない でください。
数字のみもしくは数字から始まる名前で始まるclass名は認識されないです(OS、ブラウザ、各バージョンにもよるかも)。
htmlコーダーと開発担当(webページにphpやらperlやらを組み込む人たち)が同じ部署にいないなど、密にコミュニケーションが取れない状態(しかもそれらの開発コードがhtmlコーダーには見えない状況)だと、開発担当者が入れたい(入れていた)id名やらclass名やらとhtmlコーダーが使うid名やらclass名やらが重複して、webページがうまく動作しなくなってしまったりすることがあります(重複しても問題ないこともあります)。
そういうことが発生しないように名づけルールを作っておけば、ある程度回避ができます。
それでも、こういった問題はまれに発生するので、なにか問題が発生したら、原因の候補として心にとどめておくとよいかもしれません。
BEM
cssの名づけについて、知っておいた方がお得かもしれない考え方「BEM」にもちょっとふれますね。
正直、勉強不足で私も良くわかっていないのですが、Bug Eyed Monster・・・ではなくてBlock、Element、Modifierの略語だそうです。
「Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法」(引用元:BEMによるフロントエンドの設計 - CodeGrid )だそうです。
BEMについては賛否あって、まぁ好みの問題ともいえるのですが、考え方として知っておいて損はないと思います。
なお、以前触れたsassにも若干絡んでくるお話でもあります。
要するに、通常、中規模以上のwebサイトではコーディングだけでも(同時ではないにしても)複数人絡んできますし、さらにプログラマなども絡んでくる状況で、なんだかわけわからない名前のclassや汎用性がないclass、入れ子になってて機能を打ち消さないといけないclassなどなどがあるのは非効率なので、なくしましょうね・・・ということです。
ただ、BEMにしても、考え方をwebサイト(制作)に関わる人間全員に理解してもらわないといけないでしょうし、そういった余裕がないのが現実なので、賛否が出るのもうなずけるなぁという感じでしょうか。
興味のある人は以下のリンクを参考にしてみてください。
独自の名づけルールを作る
上記のような、基礎となる名づけルールを踏まえて、状況・環境に合った独自のルールを作ってみてください。
たとえば、以下のようなことを決めます。
各種名前はわかりやすい英単語をつかう(日本語をローマ字にしたものはNG)
すべて小文字
連番を使う際は0を使わない(001、002・・・などではなく、1、2、...100、...といったようにする)
複数の単語を組み合わせるときは_(アンダースコア)で接続する(-ハイフンは使わない)
ただし、jsの場合はキャメルケース可
right→r、left→lなど、特定の単語は省略可(できれば省略可能な単語の一覧を作る)
などといった具合にルールを作っていきます。
作るwebページが特定の企業のものであれば、会社紹介で使う画像ファイルには先頭にcorpをつけること・・・などのようなルールがあったりします。
しかし、ある程度ルールが決まっていても、とっさになんと命名しようかと悩みますよね。
たとえば何のためのclassなのかわかりやすい名前にはしたいけれど、長ったらしい名前にしてしまうのも不便だし、かといって省略しすぎてしまうと、他の人に伝わりにくい・・・
そもそもボキャブラリーが少ない・・・
といった問題。
そこで悩みすぎて命名に時間をかけすぎてしまうのもアホらしけど、あんまりいい加減な名前を付けるのも・・・
といったときは以下を参考にしてみてください。
個人的にはエディタやブラウザの検索機能とか使えば、簡単に把握できるから、あんまりルールに縛られなくても良いのではないかなーと思ったりもしますが、そういうツールを使い慣れた人ばかりではないし、好みの問題は意外と根深かったりするので、適当にルールにしばられてあげるのもやさしさなのではないかなーとも思ったりもします。
複数人で制作する際にある程度名づけルールを統一しておくと、中途採用で入ってきた人とかが更新する際にも状況が把握しやすくなったり、管理が容易になるメリットもあります。
ただし、あまり細かいルールを設けると、おぼえるのがたいへんなので、ほどほどにしましょう。
戻る
Top