サイトコーディングでid名、class名を決定する際の注意点とよく使う名前一覧

コーディング初心者の樋口です。これまで「コーディングってアレでしょ、divとかのやつでしょ。」程度の知識しかなかった私ですが、実際にコーディングを行うようになり多くのことにつまづく毎日です。

今回はその中でも、個人的に悩まされたid、classの名前の付け方について、命名の仕方やその注意点をまとめてみました。

id名、class名を決定する際の基本ルールと落とし穴

まず原則としてこの「id」や「class」は自由に命名することが出来ますが、メンテナンス性の観点から、サイトにおける位置や内容に基づいた英単語を使って命名するのが一般的です。

[例]
サイト上部の要素　→　#header、#head、#headlineなど
全体を囲う要素　　→　#wrap、#layoutなど

ただこの命名規則に基づいて名前を決めていたにも関わらず、私はid名やclass名の命名に多くの時間を費やしました。その理由はズバリ「引き出しの少なさ」、そして「英語力」の乏しさです。

例えばあるクラス名を決める時、「その要素の意味を考える」→「検索して確認」→「言葉を翻訳」というフローで命名を行っていました。

ただ当然ながらこの方法だと、新しい要素が増える度に数分間コーディングが止まってしまいます。数分とはいえ積もり積もれば大きなロスになってしまうので、この「悩む時間」が少しでも減るように予め対策をとっておきましょう！

id名、class名としてよく使う英単語

まずid名、class名の決定で悩まない秘訣は、予めいくつかの要素名を覚えておくことは重要です。

サイトの基本となる要素と少しの頻出単語さえチェックしておけば、それだけでコーディングがサクサクと進むように変わります。

サイトの構成に使う単語

全体を囲う
#wrap、#wrapper、#layout、#outline

サイト上部
#head、#header、#headline、

ナビメニュー
#nav、#navi、#gnav、#globalnavi、#menu

メインコンテンツ
#main、#maincontent、#content、#column、#entry

サイドバー
#sideber、#sidemenu

サイト下部
#foot、#footer

コピーライト
#copy、#copyright

ここまでを１つづつ押さえておけば、全体のレイアウトを組む際に悩むことがなくなります。次に更に細かい要素や、内包された要素に付ける名前としてメジャーな単語は以下の通りです。（カッコ内は和訳）

名前としてよく使う単語

◆囲い、入れ物、範囲の名前として使える単語
box（箱）、container（箱）、area（エリア）、
section（区分）、field（分野）、inner（内側）、in（中の～）

◆要素の中で使えそうな単語
logo（ロゴ）、category（カテゴリー）、title（タイトル）、
item（アイテム）、summary（要約）、text（本文）、list（リスト）、link（リンク）、
more（もっと、更に）、date（日付）、comment（コメント）、history（履歴）、
next（次へ）、prev（前へ）、intoroduction（導入）、attention（注意）、ad（広告）など

これらの単語を全てを覚える必要はありませんが、よく使うものだけでも意味と合わせて押さえておけば、id名、class名の決定に悩むことは劇的に少なくなります。

id名、class名を決定する際のコツと注意点

次にid名、class名を決定する際のコツとしては、使用するid名やclass名を予め統一しておくことが重要です。

例えばサイトの上部にある要素に名前をつける場合、一般的には「#header」、「#head」、「#headline」のようにいくつかの書き方がありますが、「 サイト上部の要素　＝　#header 」という自分ルールを予め決めておくと、実際にコーディングする時に迷うことなく命名出来ます。

※この時、会社などで命名規則が決まっている場合は必ずその内容に沿って名前を付けるようにしてください。

また、id名、class名を決定する際、その単語を単数系と複数系のどちらで書くかを予め決めておきましょう。単数系と複数系が混在しているソースだと記述ミスも起きやすくなるので、どちらかを封印するぐらいの気で徹底して統一しましょう。

[例]
content (単数)
contents (複数)

最後に

最後に、悩む時間をなくす意識を持ちましょう。悩む時間はコーディングを行う中で必ず出てきます。その時、自分の持っている知識で考えることも大事なことではありますが、id名やclass名を決めることに関しては早めに見切りをつけて調べるべきです。

例えば僕がコーディングを始めたばかりの頃、「この言葉は英語で言うと何だっけ？」とよく悩んでいました。でもその内９割は結局のところ検索して調べていたので、今思えばもったない時間の使い方をしていたなと思います。

今はその経験を活かし、「クラス名がパッと思いつかない時はスグに調べる！」という癖を付けて、少しでも早く作業が出来るように意識してコーディングに臨んでいます。

もちろん調べた後はスグに自分ルールに追加します。これだけで同じ条件で悩むことがなくなるので、id名やclass名で悩む機会自体がみるみる減っていきますよ！