コーディング設計の技法
FASTMETHOD- コーディングルール
制作会社のお客様や、Webシステムをお持ちのお客様であれば、社内のコーディング規約を定義していることもあるかと存じます。また大規模なプロジェクトであれば、プロジェクト専用のルールを決める場合もございます。
コーディングルールではネーミング規則やファイル／フォルダ構成、文字コードやファイルタイプを指定する記述がほとんどですが、弊社ではパーツ設計とCSS設計を含めることをお勧めしております。
コーディングルールはその後の運用コストに大きく影響する重要な制作指針となります。また多数のコーダが同時並行で進める大規模プロジェクトにおいては、コーディング品質そのものを左右するといっても過言ではありません - パーツ化とユニーク化
一つのWebサイトを作成する過程では、デザインのトーン＆マナーを保ち、UXを向上するためにパーツのパターン化が行われるのが当然です。
HTMLコーディングにおいても、パターン化されたパーツを元に、レイアウトに従って組み立てていくことで、コードの独立性やメンテナンス性の向上を図ることができます。
弊社ではコーディング着手前にパーツ確認を行い、コーディング途中に起きる変更にも柔軟に対応できるよう、パーツ定義書を作成しています（※）。
また定義されたパーツをどういったファイルで管理するか、共通ファイルの定義や読み込み方法、変数の定義を柔軟に行うことで、運用しやすいサイト制作を行っております。
※プロジェクトによっては作成しない場合もあります。詳細はお問合せください。 - CSS設計
- 1,【良いCSS＝効率的な構築】
良いCSSとは何であるか、見やすさやコードの短さ等、様々な考え方がありますが、弊社は構築時のわかりやすさが最も重要と考えています。
将来の運用を見越してクラス定義を行うことはできますが、実際運用で発生する変更がはっきりしていない場合は、むやみに想定をせず、現状の要件を元に実装をいたします。シンプルに実装を開始するからこそ、プロジェクトの進行中に発生する変更や、次フェーズへの備えも容易にできるというのが、弊社の考え方です。 - 2,【既存CSSのコード解析】
HTMLコーディングを行う上では、既存のコーディングを流用したり、CMSが動的に出力するヘッダーやフッター等の共通要素を取り込んで実装する場合があります。 CSSでは要素適応の優先順位があるために、追加するCSSによって既存サイトが崩れたり、予期しないページでバグを引き起こす可能性があります。
弊社では既存コーディングを流用する場合は、主にCSSについて、徹底的にコード解析を行います。 命名規則や構造の把握はもちろん、過去の更新の変遷を見ながら、他に影響を与えない、今後のメンテナンス性も低下させないCSSコーディングをいたします。 - 3,【命名規則と構造化】
良いCSSを構築するためにも、HTML同様CSSにも設計作業が必要です。特に命名規則と構造化の単位を決めることは重要です。
命名規則とは、クラス名やID名等を用いて要素選択を行うCSSセレクタの書式を決めることを意味します。
CSSにはセレクタの書式によって、要素適応の優先順位が決まるため、なるだけ一つの書式（クラスのみ利用する、状態クラスには接頭辞を付ける 等）のみを利用するよう定義するべきと考えています。 実際にはコーディングルールによって定義が異なるために、各プロジェクトに応じて実装を行います
構造化とは、装飾をどの単位で一つのCSS要素として定義するか、装飾のグルーピングを行うことを意味します。 その名称にもなっているカスケーディング（親子間構造）によって装飾定義が可能なために、命名規則同様になるだけ単純且つ明確な定義を行うべきです。 世の中にはいくつかの構造化（および命名規則）のルールがあり、SMACSS、BEM、OOCSSは有名なルールです。 弊社では主にSMACSSベースの構造化を行いますが、異なる構造化指針を採用される場合は、事前にご相談ください。 - 4,【フレームワークの採用】
BootstrapやFoundation、Material-UI等のCSSフレームワークは、プロジェクトによっては利用することで効率化を図ることができます。 弊社では標準的にフレームワークは利用しませんが、プロジェクトの詳細を伺った段階で、導入をご提案する場合もあります。 CSSフレームワークの活用を行いたい場合は、事前にご相談ください。
- 特殊要件への対応テスト・検証方法
- 1,【JISアクセシビリティ対応】
主に国・地方公共団体が提供するWebサービスや、上場企業のWebサービスでは、ウェブアクセシビリティへ対応するためにJIS基準「JIS X 8341-3」への対応を求められる場合があります。
一方で同規格は対象範囲や達成等級によって実施すべき施策が異なるため、具体的にどういった実装を行うべきか、判断に迷うことも多い規格ではないかと思われます。
弊社ではご指定の対象、等級、また独自ルール等に応じた実装対応が可能であります。導入を検討されている場合は是非ご相談ください。 - 2,
【特殊ブラウザ対応】
主に組み込み系デバイスで用いられるサブセット版のブラウザソフトウェアは、全てのHTML/CSS要素をサポートしていない場合もございます。 弊社では特殊仕様のブラウザ表示にも対応したHTMLコーディング実績が多数ございます。 組み込み系デバイス向けのコーディング制作、特殊仕様への対応が必要な場合は、事前にご相談ください。
