品質の高いコーディングとは

Webサイトのコーディングは、デザインを再現するだけの作業だと思っている方もいるかも知れません。

確かに、コーディングの第一歩として、デザインを再現する技術・知識は絶対に必要ですが、ただデザインを再現する以外にも様々な事を考慮してコーディングする必要があります。

細かく上げたらきりがないですが、例えば、、、

・デザインを再現する

・主要ブラウザで表示崩れが起きないようにする

・文法違反にならないよう仕様に準拠する

・メンテナンス性を考慮したCSS設計を行う

・インデントを揃える等、記述に一貫性を持たせる

・適切な文書構造のマークアップを行う

・パフォーマンスが落ちないようにする

・JavaScriptやPHP等は脆弱性が無いコードを書く

・アクセシビリティに配慮したコーディング

辺りが有ります。

それぞれ、具体的に見ていきましょう。

デザインを再現する

固定レイアウトではなくリキッドレイアウトのレスポンシブ対応が一般的な現在、ピクセルパーフェクトと呼ばれる1pxのズレも許さないようなコーディングは求められるケースもほぼ有りませんし、そもそも現実的では有りませんが、デザイン再現はコーディングにおける最も基本的な部分です。

主要ブラウザで表示崩れが起きないようにする

これもデザイン再現と同じような部分ですが、Chromeでは崩れないのにFirefoxでは崩れてしまっては、最低限の品質も保てなくなってしまうので、主要ブラウザで崩れないようにするのも基本的な対応です。

文法違反にならないよう仕様に準拠する

Validationでエラーにならないようにするだけであれば全部divで組んでも良いのですが、例えば h2の中にdivを入れてしまう等の文法違反が無いようにコーディングします。

この辺りから、コーディングする人のスキルに寄ってはValidationでチェックするとエラーだらけ。と言う事も有りますので、コーディングの品質に大きく関わってくる部分です。

メンテナンス性を考慮したCSS設計を行う

CSS設計はコーディングする人のスキルレベルもそうですが、設計思想等でもかなり変わってくる部分です。

一概にどう設計すれば良いとは言えないので難しい部分ですが、少なくともclass名の命名規則に一貫性が有り、他人が見た場合でも予測しやすい設計である必要が有ります。

また、相応の理由がない限りは各ページ毎にCSSを用意する等も有り得ないので、CSSの分割方法でも良し悪しの判断が出来る部分です。

インデントを揃える等、記述に一貫性を持たせる

どんなに急ぎの案件でも、HTMLのインデントをちゃんと揃え、半角スペースとタブを混在させない等、記述に一貫性が有るようにします。

（HTMLは敢えて一切インデントをしないケースも有りますが）

CSSも同様で、セレクタの後に半角スペースを入れる入れない、プロパティのコロンの後に半角スペースを入れる入れない等が統一されていないと、雑な印象を与えてしまいますし、何より可読性が悪くなるので、品質に大きく影響する部分です。

適切な文書構造のマークアップを行う

見出しにはh1～h6要素を使う、段落ならp要素使うなどは、殆どのコーダーが対応しますが、header main footer aside section article nav 辺りの使い方は、HTML Living Standard への理解度によってかなり品質が異なってくる部分です。

brを何重にも使って余白を取っていたり、空のdivやspanが乱立していると、品質が低いと言われても仕方ない部分ですので、納品後のソースコードをチェックしてみるのも良いと思います。

パフォーマンスが落ちないようにする

重いサイトになってしまうと離脱率も増えてしまうので、画像の圧縮やCSSの圧縮などはもちろん、WordPress等のCMSを利用している場合、不要なプラグインが入っていないか等も重要です。

また、JavaScriptもパフォーマンスに大きく影響しますので、ライブラリやプラグインで不要なものを読み込んでいないか、無駄に処理が重くなる記述をしていないか等の確認も必要です。

JavaScriptやPHP等は脆弱性が無いコードを書く

セキュリティに関する知識も有していないと、脆弱性だらけのソースコードで納品してしまうと言う可能性も有り得ます。

ココナラの案件で考えると、自分で0から書くケースより、ライブラリやプラグインを使うことが多いとは思いますが、その場合、使用するプラグインは信頼性が有るのかどうかが判断出来ないと危険です。

アクセシビリティに配慮したコーディング

実はここが本題だったりするのですが、Webアクセシビリティ（WCAG2.1、

JIS X 8341-3:2016）まで配慮したコーディングをして納品しているケースは、おそらく殆ど有りません。

必要性を感じない、知識が足りない、費用と工数が見合わない…理由は様々だと思いますが、コーディングの品質を左右する最も重要な部分です。

実際問題、JIS X 8341-3:2016 適合レベルAAに準拠するには、アクセシビリティの専門的な知識が必要ですし、ちゃんと対応するとどうしても工数が増えてしまう部分もあります。

また、第三者によるチェック等も行うと軽く数十万は掛かってきたりするので、予算的に現実的では無い部分も有ります。

しかし、工数が特に増えない範囲でも出来ることは色々有ります。

例えば、スマホで閲覧した際のメニューボタン。

多くのサイトで横三本線のハンバーガーメニューが採用されていますが、

<div class="sp-menu">

  <span></span>

  <span></span>

  <span></span>

</div>

と言った感じのマークアップを見かけます。

当然、健常者であれば見た目上はそこにメニューボタンが有るので分かりますが、機械からしたら意味をなさないdivとspanが有るだけです。

これでは、スクリーンリーダーや検索エンジン等のクローラーに対しても何も伝わりません。また、クリックやタップでは反応しても、キーボード操作ではフォーカスしない可能性も有ります。

特に、キーボード操作に関して言えば、マウスを使えない（使いたくない）ユーザーからすると操作上致命的な問題になります。

ここで具体的な例を出してしまうと、ココナラのサイトもキーボード操作にちゃんと対応していません（2022年8月5日11時現在）。

具体的には、サービス詳細ページの「よくある質問」部分がアコーディオンになっていますが、タブキーでリンクを移動してもフォーカスしないため、キーボードでは回答を見れません。

また、ヘッダーの「出品する」ボタンもフォーカスリングが消えているので、どこにフォーカスしているのか分からなかったりしますし、この緑のテキストも、コントラスト比が不足していますので色弱の方が見たら見えないかも知れません。

他にも上げればキリが無さそうですが、キーボード操作など健常者にすら影響が有る部分の対応がおざなりになっているケースは多いです。

そうなると、そんなつもりがなくとも障害者の方に対しての配慮を一切していないことになってしまいます。

（こんな事書いてココナラに消されたらどうしよう…）

更に追い打ちを掛ける訳ではないですが、これまで国や自治体のみが義務化されていたWebサイトのアクセシビリティ対応が、2021年6月の障害者差別解消法の改正により、民間事業者でも義務化されました。これは、公布から3年以内に対応が求められています。

罰則も、20万円以下の過料が課せられていたりと、民間事業者でも義務化されることで、無視できる問題では無くなってきています。

義務化されたから対応しなきゃ！と言うのはもちろん有ると思いますが、アクセシビリティ対応は、機械に対して適切な情報を伝えることが重要ですので、SEOと言う部分でもクローラーに適切な情報を伝えられるため、対応することのメリットは多いです。

おわりに

と言う事で、コーディングの品質は色んな要素が絡み合って決まってきますので、価格だけで判断せず、品質も見てもらえると嬉しいです。

ここで書いた内容は当然、弊社が提供しているサービスでは行っています。

品質も重視したい方は、お気軽にご相談ください。