コーディングファクトリートピックス

コーディングガイドラインを大幅にバージョンアップしました

コーディングガイドラインを大幅にバージョンアップしました

ここ数年で開発環境が大きく変わったことを受け、コーディングガイドラインも大幅に改定しました。

きっかけは「コーディングテンプレート」の改修

CFのコーダーは、制作物の均質化と制作の初動にかかる工数をできるかぎり圧縮するために、共通のコーディングテンプレートを使用しています。これまでのコーディングテンプレートの構成は、ベースとなるCSSとHTML、簡単なモジュールが実装されたJSがセットになった、とてもシンプルなものでした。

しかし、ここ数年でWebを取り巻く開発環境が大きく変化。Sass、gulp、ejsなど、以前は特定の案件でしか使用していなかったツールが一般的に定着してきたため、コーダーは毎回これらの開発環境の初期設定を各々で行っていました。
それならば「設定ファイルを含めた、新しいテンプレートをつくろう」ということになり、先ずはコーディングテンプレートの改修プロジェクトが発足しました。

テンプレートはガイドラインに則ったルールで記述されていますが、テンプレートを改修するにあたって、昨今の制作スタイルにガイドラインがあっていないということがわかりました。そこで、ガイドラインもテンプレートも時流にあったかたちで、セットで刷新することになりました。

これまでのガイドラインからの主な変更点

主な変更点は、次の3つです。

  1. 1. 古い記述の削除
  2. 2. 制作・検証環境に柔軟性を持たせた
  3. 3. CF独自のルールを廃止し、周りのルールにあわせた

1. 古い記述の削除

既に古くなってしまった技術や、一般的に浸透してきたので、あえて書く必要がないことを削除しました。(例:レガシーなブラウザに対応するためのハック、プログレッシブ・エンハンスメントなど)

2. 制作・検証環境に柔軟性を持たせた

これまではガイドラインをある程度きっちり決めておいて、それに従って制作をすることで、コーダーが迷わず、安全に作業をすすめることができていました。しかし最近では、案件の内容が多岐にわたっており、お客様と相談しながら仕様を詰めていくことが増えてきました。
そのような場合、逆にガイドラインが障壁になってしまうケースも出てきたため、ガイドラインでの決めごとは必要最小限にとどめ、柔軟性を持たせることにしました。尚、今回新たにテンプレートに追加した制作環境(Sass、gulp、ejs)も、必須ではなく推奨としています。

3. CF独自のルールを廃止し、周りのルールにあわせた

大幅にバージョンアップしたガイドラインの写真

主にCSSの記述ルール、ディレクトリルールを大きく変更しました。

これまでのコーディングガイドラインのCSS設計ルールは、CFのコーダーが話し合いを重ね、独自に考案したものでした。しかし、最近ではBEMやFLOCCSといったCSS設計が一般的となり、お客様からのご依頼も年々増え続けていることから、このタイミングでCFの独自ルールを廃止し、BEMとFLOCCSを新たなCSS設計ルールとして、ガイドラインに採用することしました。詳細については後述します。

ディレクトリルールは、これまで各階層別に格納していたCSSやJS、画像のような資材を「assets」フォルダにまとめました。個別(階層別)に格納してしまうと、あまり意味もなく縛りが発生してしまうためです。どの画像がどこで使われるのか、制作中にすべてを把握するのは困難で、リリースしてからも、運用していく中で新たに画像の使い回しが発生するかもしれません。そのため、資材を一箇所にまとめた方がサイト全体で使い回しやすくなります。
また、Webフォントやアイコンフォントが増え、サイトで使用する画像自体が減ってきているため、一箇所にまとめても支障がない(数が多くて困ることはない)のも、変更理由のひとつです。
そのほか、gulpで開発する場合にも、コンパイルの出力先をまとめられることで管理しやすくなるというメリットがあります。

なぜFLOCSS、BEMにしたのか

お客様からの要望が多かったほか、コーダーからもFLOCSSとBEMがやりやすいという意見がありました。
サイトの構造や機能が複雑化してきた昨今では、レイアウトの実現方法も多様化してきました。そんな中で、これまでのCFのCSS設計ルールで制作すると、「入れ子の粒度が人によって異なる」「人にあわせるのが大変」という問題が発生していました。

FLOCSSは、日本で開発されたこともあり国内のウェブサイトとの親和性が高く、用途と粒度があらかじめ定義されているため、大きな差異が発生することなく社内外で認識をあわせやすい。
BEMは、シングルクラスなのでスタイルの干渉や無駄な打消しをすることがないので、作業を引き継ぐときにも解析しやすい。結果、安全かつ効率的に制作ができるということがわかりました。やや冗長なクラス名が特徴的ですが、基本的にSassを使用しているのであまり気になりません。

これからのガイドラインの運用について

今回は時代の流れに合わせ、大きく舵を切ることになりましたが、このようなガイドライン、テンプレートは、実際に使用しながら、問題点をこまめに検討し、調整していくことが重要です。また、更新しやすいガイドラインの整備(Web化など)についてもあわせて進めていきたいと思います。

お問い合わせはこちらからどうぞ

  • 大規模サイト制作のご案内 大規模サイトプロジェクトのポイントやサービス内容をご紹介
  • コーディングメソドロジー
  • コーディングファクトリートピックス
  • 受注活動サポートサービス
  • コーディングファクトリーニュース
  • IllustratorでのWebデザイン
  • 求人案内
  • 株式会社モノサス
  • お問い合わせ

    コーディング相談ダイヤル

    お問い合わせ

  • ご相談、お問い合わせフォーム

    ご相談、お問い合わせフォーム