Web制作におけるコーディングガイドライン作成について、気になっているWeb制作担当者も多いのではないでしょうか。
コーディングガイドラインを作成しなくてもコーディングが可能なことから、これまでコーディングガイドラインを作成せずにWeb制作を行ってきたかもしれません。
しかし長期的なサイト運営の観点から見ると、コーディングガイドラインを作成しないままではコードを「追加するだけ」のサイトとなってしまい、修正や更新の際に理解が難しいファイル構造となってしまいます。
複数のWeb制作担当者がいる場合には、それぞれがページを担当することなどから認識のズレが生まれやすく、結果的に大きなタイムロスとなってしまいかねません。
効率の良いWeb制作を行うために、コーディングガイドライン作成の必要性と追加する項目について知っておきましょう。
Web制作におけるコーディングガイドライン作成の必要性とは？
Web制作におけるコーディングガイドラインの役割は、コーディングを行う際の「記述ルール」を決めることにあり、複数人で作業する場合の混乱を防ぐ効果があります。
つまり、コーディングガイドライン作成の目的は、開発シーンにありがちな「開発データの属人化」や「担当者による制作クオリティのばらつき」を防ぐことにあるといえます。
コーディングガイドライン作成のメリット
あるWeb制作会社では、「自身でコーディングしたファイルでさえ時間が経つと構造が分からなくなった」という経験から、コーディングガイドラインの作成に踏み切りました。
Web制作において少し面倒に感じてしまうコーディングガイドラインの作成は、どのWeb制作担当者が見ても分かるコーディングを実現するために重要な役割を担っています。
誰が見てもすぐに分かるコーディングは構造の理解に時間をかける必要がなく、また追加したページも一定のルールに沿って作成されるため、万が一問題が発生しても対処しやすくなります。
つまり、コーディングガイドライン作成の最大のメリットは「Web制作の効率化が期待できること」にあるのです。
効率の良いWeb制作では、いかにタイムロスを改善するか（無駄なチェックや修正工数の削減）がカギを握るため、コーディングガイドラインの作成は大きなメリットとなり得ます。
日々新たなWeb制作を行う中で、過去に制作したページの構造は忘れてしまいがちです。コーディングガイドラインはそうした記憶を思い出させるメモといえるでしょう。
コーディングガイドラインに入れておきたい項目
コーディングガイドラインをメモ代わりにするという視点に立つと、コーディングガイドラインに入れておく項目が次々と浮かんできます。
あるWeb制作会社ではコーディングガイドラインの基本ルールとして、文字コードを「utf-8」、改行コードを「CR+LF」と決め、属性値はダブルクォーテーションで囲うことなどを明記しています。
そのほか機種依存文字の記述方法にも言及するなど、コーディングの細かな指示が必要となるのがコーディングガイドラインの特徴です。
Web制作の目的によって多少の違いが出るコーディングガイドラインですが、項目に追加される代表的なルールを紹介していきます。
フォルダー階層の構造を決める
コーディングガイドラインの代表的なルールの1つに「フォルダー階層の構造を決める」というものがあります。
これは各ファイルがどのフォルダーに入っているかを分かりやすくするために用いられるもので、それぞれのフォルダー階層の構造を決めておけば、ファイルがどこにあるのかが一目瞭然となります。
また次の命名規則とつながる部分ではありますが、階層構造となっているフォルダーそれぞれの名前を「1つ」に決めておく必要もあるでしょう。なぜなら、Web制作担当者によって英単語表記を省略してしまうことがあるからです。
例えば画像ファイルの「image」は「img」に統一するなどのルールを予め決めておき、必要に応じてフォルダー階層の構造を画像としてコーディングガイドラインに記載しておくといいでしょう。
そのほか様々なサイトに使用する共通ファイルがある場合には「common」や「share」といったフォルダーに格納し、ほかのデータと混同しないようにしておくことも重要です。
命名規則を作る
フォルダー名を1つに決めておく必要があるのと同様に、各ファイルの命名規則も決めておく必要があります。
フォルダー階層の構造によって命名規則は変わってしまうため、見分けが付きやすいように工夫して記述していきます。
例えば画像ファイルの場合、画像が使用される「場所」と「用途」を記載することもあれば、画像「img」に画像種別の「logo」などを合体させて「logo_img」と記述する方法もあります。
命名規則の目的は、各ファイルが「どこに使用（収納）されているか」をはっきりさせることにあるため、それが分かる記述方法にしましょう。
コーディング言語の記述ルール決める
コーディング言語の記述ルールでは、先述のような文字コードと改行コードの指定、インデントの記述をどうするのかといった内容を書きこんでいきます。
こちらの項目でも細かな記述ルールがコーディングガイドラインの質を決めていくため、使用タグ内に含める内容はどれまでなのかを記載しておくといいでしょう。
対応ブラウザを決める
ある程度の記述ルールを記載した後には、対象となる基本対応ブラウザを記述しておきます。
「ターゲットブラウザ」と呼ばれることもありますが、windowsの「Firefox」や「Chrome」といったブラウザを書き入れましょう。
コーディングガイドラインで予め指定しておくことにより、各ページを担当するWeb制作担当者ごとの表示ブラウザ認識のズレを回避することができます。
コーディングチェックをしたい時には？
コーディングガイドラインを作成し、実際の制作を行った上で行いたいのがコーディングチェックツールの利用です。
HTMLやCSSの構文ミスをチェックするツールの代表的なものとして、「Markup Validation Service」と「Dirty Markup」があります。
後者の方はHTMLやCSSといったタイプ別のソースをコピーペーストすることでチェックが可能のため、経験の浅いWeb制作担当者でも使いやすいチェックツールといえるでしょう。
コーディングガイドラインの作成を検討しよう
コーディングガイドラインを作成することの必要性と追加するべき項目について紹介していきました。
制作するWebサイトのクオリティを一定に保つ役割があるコーディングガイドラインの作成について、一度検討してみるといいでしょう。
（画像はPixabayより）
