【あなたのコードは見られている】

とある大手サイトから手を引いた
デザイナーが手掛けていたページに、
地雷が仕掛けられていました。
　
夫婦で昼からずっと、修復をしましたが、
あまりの酷さに溜息が。
　
「どこの誰だよ、こんなの書いたのは」
「これって初心者同然じゃないか？」
「何でここにCSS入れるのかね？」
　
たぶん本人はHTMLとCSSの書き方を知っています。
いえ、書き方“しか”知らないようです。
　
作法を知らないから、自分が去ったあと
お客様に迷惑がかかってしまうような
制作をしたことに気付けないのでしょう。
　
まさに　無知の罪　です。
　
　
しかしまぁ、今日の仕事の成果なので
原因と本来あるべき対処をまとめます。
　
　
━━━━━━━━━
■状況
━━━━━━━━━
IE9でまともに閲覧できない。
　
━━━━━━━━━
■原因
━━━━━━━━━
１．非推奨タグの乱用
→非推奨というより、デザイン要素を
　HTMLに持ち込むことがセオリー違反。
　
２．他人のCSSのコピーをあちこちに複写
→記述場所が邪魔をして、正しい場所に書いた
　CSSが反映できない
　
３．インデントが汚い
→HTMLもCSSも全体を俯瞰できておらず
　構造化されていない。
　
４．行き当たりばったりの命名。
→他人が書いたCSSとid,classが重複し、
　影響を避けるためプロパティを２重定義。
　
５．コメントに不真面目さが現れている。
→「ふぉんと」とか。
　
６．HTMLの途中にCSS定義が混在。
→他の人が見て気付けない場所に書いている。
　
━━━━━━━━━
■本来の対処法
━━━━━━━━━
１．非推奨タグの乱用
→面倒でも、局所的にスタイル設定するなら
　classを作ってHTMLとCSSの役割分担を徹底。
　
２．他人のCSSのコピーをあちこちに複写
→「他人のソースだから私は知らない」という
　自分勝手な思想を捨て、きちんと全体を分析
　して流用すべきCSSは流用し、整理できるCSS
　は自分で整理すること。
　
３．インデントが汚い
→整理整頓できていないコードはバグの温床。
　納品前にコード整形すること。
　
４．行き当たりばったりの命名。
→CSSのclass,idの命名はサイトの設計である。
　設計ミスはコーディングミスにつながる。
　最初にサイトを作る人は、後から引き継ぐ
　人達がミスせずにメンテナンスできるよう
　見通しよく美しいコードを書くべき。
　
５．コメントに不真面目さが現れている。
→HTMLやCSSのコメント記法は「ソースを開く」
　で誰にでも見える。遊び半分なコメントは
　自らの品位を落とすとと心得るべき。
　（ちょっと知識のあるお客様なら見れます）
　
６．HTMLの途中にCSS定義が混在。
→CSSは一箇所にまとめないと、他人が判読
　できずにミスを誘発する。忙しくても、
　プロとして仕事するのなら設計に立ち返り
　しかるべき場所に定義を追加するべき。
　
━━━━━━━━━
■まとめ
━━━━━━━━━
保守性を考慮したコーディングは、
誰でもできるものではありません。
ある程度の実践は必要です。
　
見た目がデザイン通りだったらOKという
「お客様が納得する精度」
で出来たと思いこむのは危険だということ。
　
コードは人の手を渡ります。
　
・自分の手を離れても恥ずかしくないか？
・自分の設計方針を他人がコードから
　読み取れるように構成できているか？
・表示できればOKと勘違いしていないか？
・文法間違いが無いのは当たり前として、
　作法に則っているか？
・自分の作法の合理性を人に説明できるか？
　
こういったことを意識して書ける人は
「○○さんのコードは綺麗だ」
と言われます。
　
人は外見では判断できませんが、
言動や態度からある程度の人柄は想像
されてしまいますよね。
　
コードも一緒。
コードを見れば、
　
「この人は几帳面だな」
「テキトーな人だな」
「真面目だけど詰めが甘い」
「我流すぎて読む人のことを考えてない」
　
など、伝わってしまうんですよね。
気を付けないと。