コーディングに慣れない人のコーディング
2008-10-31 Fri[Web制作 > コーディング]
ブログを書くモチベーションというのは、波間を漂うラッコのように浮き沈みが激しいものである…と誰が言ったか。（言ってない）
今月の14日から珍しいことに、「毎日考」の名に違わず毎日更新が続いているのですが、心配しないでも明日あたりは更新できないので大丈夫です。何が。
これ架空の話ですよ、架空のね。例えば私の部署へ、コーディングに不慣れな派遣さんが他の部署からお手伝いに加わったとします。レベル的には、学校なり講座なりでは習ったけれど、会社でフルCSSのサイトに触れるのは初めて。「装飾や指定はCSSで記述してください」と言うとちょっと不安げな顔をするという…。感じ？
で、そういう人の書くソースが一般的にどんな感じになるかという話。ここらの経緯はもっと具体的に書きたいんだけど、今の部署の人ってけっこうマメにWebの情報のチェックをしているもので。素性が知れちゃうと「もしかしてこれあの人のこと？」などと言われかねない…（架空でしょ？）
あ、でも見つけちゃったら、ハイ私です。いつもお世話になってます。気づかないふりしていてくだちゃい＞＜愚痴ですぅ
例えばひとつのページの中に、「小タイトルと文章と画像」というカタマリを作るとしますわな。普通に組めばこんな感じになると思う。
<div id="infoWrap">
<h3>小タイトル</h3>
<p>文章文章文章</p>
<p class="map"><img src="/xxx/img/yyy.gif" alt="地図" width="ppp" height="ppp" /></p>
<p>文章文章文章</p>
</div>
わかりやすくインデント付けてますが、今の会社だと付けない派です。それはさておき、これをその方に組んでもらうとこうなる。
<div class="infoWrap">
<div class="midashi">小タイトル</div>
<div class="text">文章文章文章</div>
<div class="center"><img src="/xxx/img/yyy.gif" alt="地図" width="ppp" height="ppp" /></div><br /><br />
<div class="text2">文章文章文章</div>
</div>
冗談抜きでこうなってました。これは今の人だけではなく、前に違う職場で同じようなレベルの新人さんが来たときにも見られた傾向です。スタイルを付ければブラウザでは変わりなく表示されるので、ぱっと見はわからないけれど、いざソースを見ると「うひゃっ」であります。
会社的なコーディングルールならまだしも、なぜh1とかh2などのタイトルを振るのか、なぜ構造的に組まなくてはいけないのか。え、改行コードとか知らないですと？(汗) そんなところから話し始めるので時間を余計に取られてしまって。
自分としては、特に派遣としては「派遣先は学校じゃねぇ！」と思っておりますが、そのうち戦力になってくれるのなら、結果的に自分がラクになれるという…ジレンマを感じずにいられないのであります。
しかし、今のWebの学校って何を教えてくれるんだろうねえ。定義タグ（dlとかdtとか）すら知らないと言われました。知っている知らないは個人的な勉強の差も大きいと思いますが。
スタイルシートを使ったコーディングに慣れているかいないかの圧倒的な違いは、やっぱりclassの付け方かなあ。とにかく要素要素にclassを指定して、それごとにスタイルシートを書くので指定がやたら長くなる。包含しているボックスにidを振っておけば、いちいち違うclass名を付けないでも（もしくはclass自体無くても）指定しやすくなるとかならないとか。こればかりは慣れですねぇ。
スタイルシートの書き方もこれまたアレな感じで。別にエディタ手打ちでもオーサリングツールでも良いんですよ、書ければ。別に要素の順番までルール付けしてるわけではないし。ただこう、なんというのかなあ。
例えば、とあるボックスを指定したとしますよ。
body#honyara .hogehoge {
margin: 15px 0 18px;
border: 1px solid #ccc;
}
上と下に15ピクセルと18ピクセル、回りを1ピクセルの枠線で囲んだシンプルなボックスね。普通なら二行です。
でも、オーサリングツールまかせで組んだその人のソースは
body#honyara .hogehoge {
margin-top: 15px;
margin-right: 0px;
border-top-style: solid;
border-top-color: #ccc;
border-width: 1px;
margin-left: 0px;
border-color: #ccc;
border-style: solid;
margin-bottom: 18px;
}
borderの指定は、今再現できないほど衝撃的にバラけて。marginも順番までバラけている上に、style指定がかぶっているのは、後から指定したから追加されちゃったのかな。上のソースだと、borderなら一行で済むスタイルが、DreamWeaverが吐いたソースだと6行くらいに増量していたんです。実際はtext-alignだのpaddingだのも相まって、なかなかに壮絶でした。
いや、別に同じことなんですよ、見る人にとっては。
だからこれはコーダーの領分。コーダー間での管理しやすさとか、統一感とか、そういうことです。
しかしこういうこともあるから、できればスタイルシートはテキストエディタでいじって欲しかったんだよね、勉強にもなるし。結局、お願いしていたその仕事は自分に戻ってきたというオチ。さすがに、ちょっと時間がかか、り、以下略。
とりあえず、構造をわかりやすく知ってもらうために、FirefoxのFirebug拡張もオススメしておきました。
ああもうこれだから新人はしょうがねーな、ということを書きたかったんではないんです。あのね、万が一もし本人がこれ読んじゃったら、頼むから凹むだけにならないでね(笑)。自分だって当初は、そらもう構造的でも効率的でもないソースを量産していた量産型サルサだったんですよ。
今だってえらそうなことは言えないし、人のソースから技術を盗むこともある。新しい職場で新しいやり方に触れるたびに、目から鱗が落ちることもある。日々勉強の毎日なんですよ。
いろいろ職場を経てきたけど、今のサイトは確かに入り組んで複雑だものな。もうね、ざっくざくとソースを見て触れて書いて、慣れてもらうしかない。がんばっていただきたいというお話でした。
<< やべー、はてなハイクが楽しいにょー。 | main | 宇都宮餃子祭り2008に行ってきたんだからー！ >>
同じカテゴリの新着記事
- CSSエディタのCSSEditを愛用してます。 (2009-04-21)
- コーディングに慣れない人のコーディング (2008-10-31)
- 久しぶりのIE確認でCSS的衝撃的事実発覚 (2008-07-22)
- インデントの話ふたたび (2008-02-24)
- 派遣コーダーのユーウツ・2 (2008-02-23)
- ブログの一言コメントを楽に更新する (2007-12-06)
- コーダーの制作ルールをちょっと考える (2007-09-05)
- 絶対パス、ときどき相対パス (2007-08-14)
- 愛用のGrep検索/置換ソフト (2007-08-08)
- ブログパーツが表示されない理由（わけ） (2007-07-12)
