複数人での作業が必要な場合や、案件ごとの作業品質のバラツキを防ぐために欠かせないのがコーディング規約です。
ソフトウェアの制作では企業や案件ごとにルールが定められることが多いですが、HTMLやCSSといったwebの言語では徹底されていない現場も多いです。
一人web担当者やフリーランスなどでも、グループワークが必要になるケースはありますので、重要性や作り方などについて理解しておきましょう。
コーディング規約とはどんなもの？
まずコーディング規約とはどんなものかについて簡単に説明します。
コーディング規約はスタイルガイドと呼ばれることもあり、HTMLやCSSを使う際のマークアップのルールや、プログラミング言語の書き方をまとめたものを指します。
コーディング規約が無ければ、複数人で作業をした場合にその書き方が違ってしまい、そのために可読性が著しく低下し、メンテナンスが難しくなってしまいます。
また、コードの見た目もよくありませんので納品物としてもかっこよくありません。
コーディング規約を制作に携わるメンバーがしっかり理解し遵守することによって、多くの人が作業をしてもまるで一人の人が作業したかのような完成度になるのです。
また、コーディング規約がしっかり守られていることによって、作業品質が安定しますし、組織やチームにおけるノウハウの共有も進むようになります。
コーディング規約では、可読性を高めることと共に、バグの原因となる誤解や混同を招くような書き方をしないことなどが意識されます。
また共通ルールがあることで作業上のコミュニケーションスピードも高まります。
そのため、新しいチームや職場で制作に携わる場合には必ずコーディング規約を確認することが大切です。
コーディング規約は、内部だけで共有されるのではなく、外部に対しても紹介されていることがあります。
以下URLはgoogleが公開しているスタイルガイドで、良いコードや悪いコードの例が紹介されています。
https://google.github.io/styleguide/htmlcssguide.html
HTML、CSSのコーディング規約で定めておきたいこと
HTMLやCSSのコーディングで定めておくと良いことについて紹介します。
【無料あり】エンジニアが解説！プログラミングスクールおすすめ５選ディレクトリ構成
HTMLやCSSのファイルを格納するディレクトリをどのように構成するのかを定めておきます。
ファイルの検索性や参照先の記述に関わる部分です。
また、各ディレクトリの命名ルールを定めておきます。
画像ファイルの格納ディレクトリは「img」「images」「image」なのかなど詳細に定めます。
共通ファイルの置き場所や扱い
共通ファイルとは、ベースになるテンプレートのファイルやCSSのデザインファイルなどです。
「template.HTML」や「common.CSS」などわかりやすい名前をつけ、「common」などの名称のディレクトリに保管します。
ファイルの命名ルール
ファイルの命名規則はクライアントや現場、案件によってさまざまです。
しかし、しっかり命名規則を作っておかないと「access.HTML」と「otoiawase.HTML」のように命名規則のブレが生じます。
表記のルール
コードの表記についてもルールが必要です。
特にHTMLの部分や、CSSファイルはその記述方法の違いが生じやすい部分です。
metaタグの表記の順番や記法を定めたり、CSSファイルでは各要素をまとめるのか、できるだけ個別で記述するようにするのかなどを決定しておきます。
スコープの範囲を決める際、拡張性などを意識して、なるべくidは使わずにclassを使うのがトレンドになっています。
インデントもタブを使うのか、半角スペースを3つずつ入れるなど方法はさまざまです。
コメントの記入もどのレベルで行うのかなどを決定しておくようにしましょう。
命名規則
変数名やclass名、id名などをどのように設定するかについてのルールも大切です。
命名規則だけではなく、どういう表記の場合に大文字を使うのかなども細かく指定します。
対応させるブラウザ、バージョン
さまざまなデバイスでwebページを見ることになる現代では、どのブラウザのどのバージョンまでカバーしてチェックするかを予め決めておくことが大切です。
特にレスポンシブデザインを作成する際は、この部分がどこまでかで制作の難易度が大きく変わります。
コーディング規約のメリット
コーディング規約があることのメリットを最後に簡単にまとめます。
コードの統一性の確保
コードの記述方法に統一性が生まれ、可読性やメンテナンス性が向上します。
また、品質の保持にもつながります。
バグやエラーを未然に防止する
問題になりやすい記述方法を避けることでエラーが減り、効率的な開発が可能になります。
コミュニケーション速度の向上
共通ルールをもとにしてメンバーどうしが会話できるため、コミュニケーションがスムーズになります。
経験値の共有
コーディング規約は、効率の良いコーディングを経験者たちが考えて作るものであり、コーディング規約の中にはさまざまなノウハウが詰まっています。
そのため、初級から中級のコーダーが見たときに非常に勉強になります。
HTML、CSSのコーディング規約まとめ
HTMLやCSSのコーディング規約は、コードの品質を安定させ制作を効率的にするなどさまざまなメリットがあります。
コーディング規約は経験のある人が作るのが望ましいですが、公開されているものを利用すれば誰でも作ることが可能です。
自身の作業用に、またチームの品質向上のために作成してみてはいかがでしょうか。