2007年4月13日

• 
• 
• 
• 
• 

正しく、早く、美しいコーディングを実現するために踏むべき5つのステップ

今コーディング・コンテストエントリー受付中という事もありますが、
最近社内外を問わず、コーディングを教える機会も増えてきたのでメモの意味も含めて再度エントリーに残しておこうと思いました。

当たり前と言えば当たり前なので今回もビギナー向けなんですが、初心・・・忘れてませんか？

では詳細は以下から↓

STEP1 テキストを全て抜き出し、タグ付けをする。

まず初めの工程はいわゆるマークアップという工程です。
デザインからテキストを抜き出すんですが、大事なことは一旦すべてテキストを入れてしまうという事です。

たまに、HTMLをかいてるそばからCSSを書いてしまう人がいるんですが、
それはかえって非効率的ですよ。工程はひとつひとつ踏まないとね。

あと、こないだセミナーで初めて知ったんですが、OfficeのWordには見出しや段落のスタイルを設定することができ、
それをDreamweaverのデザインビューに貼り付けるとタグ付けされた状態でペーストされます。
これを利用するとマークアップの工程が格段に楽になりますね。

STEP2 div要素でグルーピングし、id/classを設定する。

次がいわゆる設計という工程です。
この工程でもっとも大事な事はデザインを見てグルーピングするのではなく、
文章の流れや意味集合を見てグルーピングするということ。

極端に言うとこの工程ではデザインを見ない方がよいです。

ユーザーインターフェイスやインフォメーションアーキテクトの原則から、
デザインは通常視覚的にグルーピングされているものなのですが、
世の中常に正しい事ばかりとは限りませんもんね。

divでグルーピングし終わったらidとclassをつけましょう。

idとclassの話をすると最近怒られるのであんまり詳しくは書きませんが、
現場では基本的にidでかまいません。
例えばPHPなどで出力するエラーメッセージ用にerrorクラスとか繰り返しでてくるボタンとかはclassの方がいいかもしれませんね。

この辺は「仕様仕様！」と叫ぶよりもシステム担当とのコンセンサスも重要な項目です。
できれば設計段階でサイト全体のid/classの計画、命名規則などをシステムを触る人と一緒に打ち合わせするべきですね。

STEP3 CSSを書く。

いよいよ皆さんが大好きなCSSをかくわけですが、
この工程で特に注意するということは意外とないんです。

ひとつ注意するとすれば、
グルーピングされた要素(divを設定した箇所など)同士は相互で依存関係を持たないようにするのが望ましいです。

具体的には、特定の要素を削除したり、上下を入れ替えたりしてもレイアウトが崩れないこと、
マージンの相殺問題もありますのでジェンガみたいにどこかを抜いたら崩れる組み方はやめましょう。

STEP4 組みあがったHTMLを検証する。

検証についても特になにもないんですが、
もちろん個人レベルでは工程毎に随時バリデートは行うべきなんですが、一人で自己解決してしまうと永年勘違いをしてしまう可能性がありますよね。

検証方法はソフトウェアのテストと一緒で先に検証方法を記した資料を作成して、
それをもとに検証を行った方がよいに違いありません。
資料としてクライアントに提出できますしね。

あと検証は期間を区切って(できれば複数人で)念入りにテストした方がさらに良いですね。
あとからの修正ほどソースを汚すものはありませんから。

エンジニアやデベロッパーの間ではテストにかけた時間が長い程開発期間は長いといわれています。

おすすめの検証フローは

• ソースコードを目視確認(随時)
• Dreamweaverのバリデート機能(随時)
• W3CやHTML-lintなどのバリデータを通す（100点を取ることが目的ではなく、どこに問題があるかを明確にするため）
• ターゲットブラウザで目視確認(期間を定め集中的に)

STEP5 書きあがったCSSを再度編集する。

開発でもリファクタリングという作業はしばしば行われます。

やはりCSSも「human first, machine second」。

なるべく同じclassやidを使いまわしコードは短く、コメントはたっぷり。
CSSにも「いつ(version情報など)、だれが(エディター情報)、なんの（どの部分のなんのためのコードなのか）」といったメタ情報は少なくとも残しておきましょう。

上の工程を踏んで毎回コーディングをこなすときっと正しく、早く、美しいコーディングができるようになると思います。
あと作業には目標時間を設定してチャレンジ精神を沸き立たせながらやりましょう、仕事もエンジョイしなきゃですね！。

• 個別ページ｜
• コメント(2)｜
• トラックバック(0)