今回は綺麗なソースコードとはどういうものなのかについてお話しします。

はじめに

htmlコーディングをする際には、ただ単に入力をしていくだけでなく、綺麗に書くことも意識する必要があります。
その中で、記述を綺麗に統一する為のルールを定める必要があります。例えば、

• タグ改行位置の統一
• タグ属性の記述順の統一

等が挙げられます。
例として、下記の二つのソースを見比べてみて下さい。
前者がルールを特に定めなかった場合、後者が上記のルールを定めた場合です。

コーディングルール未設定時

Source Code

What's a Beautiful Code?

1.Clean
2.Easy read
3.Maintainability

コーディングルール(属性順、タグ改行位置)設定時

Source Code
What's a Beautiful Code?

1.Clean
2.Easy read
3.Maintainability

前者と後者、ルールを定めるだけで同じソースでも記述に差が出てきます。
それでは、綺麗にすると主にどのようなメリットがあるのでしょうか？

何故綺麗にする必要があるのか

整備性の向上

万が一修正が必要になった際に、修正、追記箇所の判別がしやすくなります。
特に複数人での対応が行われる際に効果的です。

運用性の向上

更新作業等が発生した際、作業経験の有無に関わらずどんな作業者でも、 どの箇所を修正したら良いかが分かりやすくなる等、作業効率向上に繋がります。

可読性の向上

ソースが閲覧された際に綺麗なソースになっていると、細かい所にまで気を配っている等、好印象を持ってもらうことが出来ます。

上記のようにソースを綺麗にするだけで様々なメリットが生まれ、結果的に、ページのクオリティ向上に繋げる事が出来ます。

綺麗にする方法

改行の入れ方を統一する

タグのどこで改行を入れるかを決めておきます。テキストが長い場合は段落で改行を入れる等、
入れ方をしっかり決めておくことで、綺麗さと可読性を上げる事が出来ます。

短いテキスト。テキストテキストテキストテキスト

長いテキスト。テキストテキストテキストテキストテキストテキストテキストテキストテキスト。
二行目、段落で改行。テキストテキストテキストテキストテキストテキストテキストテキスト。

閉じタグにコメントアウトを入れる

コンテンツの大枠になるdiv要素等、主要なタグの閉じタグにコメントアウトを入れておきます。
タグの終わりが分かりやすくなりますが、あまりに多く入れすぎると逆効果になってしまうので注意が必要です。

閉じタグの前か後ろに挿入しますが、ここでも前後どちらに入れるか事前に決めておきましょう。

属性の入力順を決める

class、id等、タグ属性の入力順を統一します。
漠然と統一するのではなく、ルールを定めて統一を行います。
重要度が高い順で書かれることが多いようですが、再利用頻度が高いclass属性を一番先頭に書く、というルールもあるようです。

下記は、重要度が高い順に統一した物です。

• 必須属性(src、href)
• タグ独自の属性(alt)
• id名
• class名

キャッチ文キャッチ文キャッチ文キャッチ文キャッチ文

リンク

注意点

まずはルールの設定から

コメントアウトは閉じタグの前と後ろどちらにつけるか...等、
事前にルールが統一されていないと上記の対応も意味が無くなってしまいます。
特に複数人で作業を行う際は、最初の段階でルールを決めておきましょう。

ソースコードが綺麗か否かで、作業の質に大きな差が出てきます。
今まで綺麗なソースの書き方をあまり気にしていなかった方は、今回を機に書き方を見直してみてはいかがでしょうか。