View more

Blog

制作効率化!コーディングガイドラインを策定しました

制作効率化!コーディングガイドラインを策定しました
株式会社デパートのWeb制作におけるコーディングガイドラインを見つめ直し制作業務の効率化も踏まえオンラインドキュメントとして策定しました。 ガイドラインを策定した経緯や目的、ガイドラインの内容について紹介いたします。
制作効率化!コーディングガイドラインを策定しました

DEPART コーディングガイドライン

ガイドライン策定の背景

これまで弊社では、コーディングに関するガイドラインはプロジェクトごとに策定しており、全社共通の(各プロジェクトの基準となる)ガイドラインフォーマットがありませんでした。

そのため、本来は共通化できるようなルールであってもプロジェクトごとに異なるルールに合わせて対応をする場合もあり、品質維持や作業効率、また教育においても潜在的なコストが発生していました。

これまでは個人の技術/ナレッジで品質を保っていた部分や、慣れ親しんだメンバー間で培われた共通認識などでうまく効率化できていた部分もありましたが、徐々にエンジニアの人数が増えてきたこともあり、複数人での開発においても生産性と品質を落とさないよう、あらためて全社共通の指標となるガイドラインを策定する必要がありました。

ガイドラインの目的

当ガイドラインは、弊社が制作する成果物において「安定した品質の確保」と「開発/運用効率の向上」を目的としています。

 

安定した品質の確保

Webサイトのコーディングに関わるメンバーはそれぞれ異なる技術レベルやナレッジ、思想を持っているため、明文化されたルールがなければ一貫性のあるWebサイトを構築することも、Webサイトの品質を維持したまま運用することも難しくなります。
ガイドラインとしてルールが定義されていれば、ガイドラインに準拠してコーディングすることで、一定の品質を確保することができます。

また、ガイドラインは「ベストプラクティスや、よりベターな手法を集めたナレッジ集」という側面もあるため、ガイドラインを読むことで新しく得られるナレッジもあると考えています。
ガイドラインが個人のナレッジ習得にも役立ち、それが組織全体の品質の向上へもつながります。

開発/運用効率の向上

ガイドラインを共有するメンバー全員が同じルールを指標としてコーディングするため、自分以外のメンバーが書いたコードでも読みやすく理解しやすくなります。
また、途中からプロジェクトに参加したメンバーがいた場合も、連携コストを少なくすることができ、スムーズに同じルールでコーディングを始めることができます。
「長く一緒に仕事をしてお互いによく知る仲だから、認識を合わせて効率よく進められる」といった属人的な効率化も、ガイドラインという仕組みによる効率化へ改善することができます。

ガイドラインの構成

当ガイドラインは、大きく分けて「ガイドライン」と「命名規則」2つのドキュメントで構成しています。

 

ガイドライン

成果物の品質維持と効率化を目的としたWebサイト制作に必要なルールを定義しています。
現状は下記のようにカテゴライズしてルールを整理しています。

 

全般

HTML

CSS

JavaScript

アクセシビリティ

SEO

 

ルールの準拠レベルは項目ごとに「必須」と「推奨」を設定しており、それぞれ下記の意図で区別しています。

  • 必須項目は、Webサイトの品質基準を満たすために必ず遵守すべきルール
  • 推奨項目は、Webサイトの品質や運用効率を向上するために推奨されるルール

当ガイドラインは各プロジェクトで共通の(基準となる)ガイドラインのため、なるべく汎用的な定義となるよう準拠レベルを設けることで対応レベルの幅を持たせるようにしました。

 

命名規則

CSSやJavaScriptにおける命名ルールを定義しています。また、命名でよく使われる単語についてもまとめています。
命名はエンジニアリングのなかでも特に難しいと言われている作業ですが、このドキュメントを参照することで、迷うことを減らし効率よく命名することができると考えています。

今後の運用

ガイドラインは作って終わりではなく、利用者の閲覧環境の変化や業界トレンド/制作技術の変化に応じて、常にアップデートしていく必要があります。

今回リリースしたバージョンでは、一部業界トレンドを踏まえた項目もありますが、まだ検討できていない内容や追加予定の項目もありますし、現状定義している内容においても実際にガイドラインを運用していく中で更新の必要が出てくる箇所もあるかと思います。

今後も状況を見ながら、ガイドラインを適宜アップデートしていきます。