コーディングガイドラインの必要性
私もはじめはガイドラインの必要性を感じずにいました。しかし、コーディングを続けていくうちにじょじょに必要性を感じてくるようになりました。
なぜなら、コーディングガイドラインを定めないままコーディングした結果、自分で作ったものですらどういう構造になっているか分からなくなったからです。そのため、更新に手間取ってしまいました。
一人のときですらこの有様ですから、二人以上で作業を行うことを考えるとコーディングガイドラインの必要性は明らかでした。
その後、何度もコーディングガイドラインを改善してきました。
項目1 データを編集した人が誰か分かるようにする
HTMLファイル・CSSファイルともに、作成者と更新者の名前と日付をセットにした署名を入れるようにしましょう。
そのデータを編集した人が誰で・いつ編集したのかをわかるようにすることで、ミスが起きたときに責任の所在が明らかになります。また、更新する上でわからないことがでてきても素早い対応が可能です。
項目2 文字コードを統一する
文字コードを統一しなければ文字化けしてしまいます！
Webサイト内で統一することはもちろんのこと、会社で使用する文字コードを統一しておいた方がいいでしょう。
事前に統一してしまえば、例えばAサイトで使用したメールフォームをBサイトにも使用するといったときに、設定を変更する必要がないため作業が簡単になります。
項目3 基本対応ブラウザを決める
あまり起こらないとことかもしれませんが、基本対応ブラウザが決まっていない場合、コーダーAさんはIE6にだけ対応するコーディングを、コーダーBさんはFirefoxにだけ対応させたコーディングをするという事態を招くかも知れません。
現在では、IE6/7・Firefox・Safari辺りがどのWeb制作会社でも基本的に対応しているブラウザでしょうか…？
基本対応ブラウザを決めることで、会社として「このブラウザに対応してます」ということが謳えますし、上記で述べた事態を防ぐこともできます。
項目4 HTMLの構造が分かるソースフォーマットに統一する
単純にソースフォーマットを統一するだけでは、「単に統一されていて綺麗」なだけです。
若干手間がかかりますが、改行とインデントをうまく使い視覚的にHTMLの構造が分かるソースフォーマットを作成しましょう。
例えば私は以下のようなソースフォーマットでコーディングをしています。
01 | <div id="container"> |
02 | <div id="header"> |
03 |
04 | </div> |
05 |
06 | <div id="main"> |
07 | <p>サンプルテキスト</p> |
08 |
09 | <div class="box"> |
10 | <img src="" alt="" /> |
11 | <p> |
12 | サンプルテキストサンプルテキストサンプルテキストサンプルテキスト<br /> |
13 | サンプルテキストサンプルテキスト |
14 | </p> |
15 | </div> |
16 | </div> |
17 |
18 | <div id="fooer"> |
19 |
20 | </div> |
21 | </div> |
このようにフォーマットを統一することで、他人が書いたソースでも「このタグの終了タグはここで、子要素にはこのタグが入ってるんだな」とすぐに分かります。また、終了タグの入れ忘れや余分に入れてしまうというようなミスの防止にも有効です。
項目5 画像ファイルの命名規則を作る
ファイル名をみただけで、どこに使われているのか分かるような命名規則を作りましょう
例えばこうです。
side_navi01_out.gif
場所＋用途＋番号＋マウスオーバー or アウト
side navi 01 out
このルールを設定して命名することで、誰が見ても「この画像はあそこに使われてるんだな」ということが一発でわかり、画像の修正や新規追加する必要が発生しても、戸惑わず作業を進めるこおができます。
項目6 スタイルの命名規則を作る
考え方としては項目2と同様で、誰が見てもそのスタイルがどこに使われているのか分かる命名規則を作りましょう。
例えばサイトのコンテンツとしてニュースがあったとします。その場合 #news といった、そのスタイルを適用する先のコンテンツが分かるものにすることで、HTMLとスタイルの関係性がわかりやすいものになります。
HTMLとスタイルの関係性を分かりやすくすることで、更新の際に必要な修正箇所を見つけやすいですし、ミスも減らせます。
項目7 外部ファイルの管理ルールを作る
外部ファイル化というのはとても便利な方法です。しかし、管理ルールが整っていないとHTMLファイルとの関連性がわからなくなってしまい、逆に不便になってしまいます。管理ルール自体も理解しやすいものを目指しましょう。
例として私のやり方をまとめました。
一元管理（小規模サイト用にオススメ）
画像ファイル
ルートディレクトリに “img” フォルダを作成し、その中にHTMLファイルと同じ構造でフォルダを作成して管理します。
例）
/about/index.html
というファイルから読み込む画像ファイルは
/img/about/index/
に保存します。
CSSファイル
基本的に画像ファイルと同じです。ルートディレクトリに “css” フォルダを作成し、その中にCSSファイルを入れて管理します。
例）
/about/index.html
というファイルから読み込むCSSファイルは
/css/about/index.css
という構造で保存します。
共通ファイル
画像ファイル、CSSファイル共に全ページから読み込む共通ファイルが存在すると思いますが、それらは “common” や “template” といったフォルダを作成して管理します。
例） CSSの共通ファイルの場合
/css/common/0-import.css
/css/common/1-default.css
/css/common/2-layout.css
/css/common/3-styles.css
例） 画像の共通ファイルの場合
/img/template/
このように外部ファイルを保存するフォルダをHTMLファイルと同じ構造にすることで、関連性がわかりやすくなり管理がしやすいサイトを作ることができます。
まとめ
「作成者だけではなく、第三者が見ても理解しやすいコーディング」になるコーディングガイドラインを作成しましょう。
ただ、いくら完璧なコーディングガイドラインを作ったとしてもそれを守らなくては意味がありません。
徹底的にガイドラインを守ることが一番重要なことかもしれません。
