読者です 読者をやめる 読者になる 読者になる

Webサイト専門プログラマの言いたい放題

元システムエンジニアがサイト制作とプログラミングについて好き放題しゃべります。

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

サイト制作実務の話 雑記

f:id:wp-lesson:20151012183726j:plain
とある大手サイトから手を引いた
デザイナーが手掛けていたページに、
地雷が仕掛けられていました。
 
夫婦で昼からずっと、修復をしましたが、
あまりの酷さに溜息が。
 
「どこの誰だよ、こんなの書いたのは」
「これって初心者同然じゃないか?」
「何でここにCSS入れるのかね?」

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