プログラムにコメントをつけることで1ヶ月後のあなたが救われる

最近、人のブログのデザインを直したりしてるshunです。

結構おもろいです（笑）

ただ、直しても直してもしばらくするとデザイン崩れてるんですよね。

「あれ？なんかデザイン崩れてね？」

「この部分何してるんだ？」

「なんかごちゃごちゃになってるし」

色々大変なことになっているわけです。

その時はやりたいことがあって、デザインをいじったりしても、後になると何をやっていたか全然覚えていない。

結果、どんどんおかしなことになっていく。

同じような経験された方もいるんじゃないかな。

そこのあなたももしかしてそうなんじゃないですか？

そんなあなたを救う方法、ありますよ。

それは

コメントをつけろ！

ということですね。

詳しく話していきましょう。

コメントは1ヶ月後の自分を救う

たまにデザインをコピペでいじる人くらいの人は、コメントって何？って思うかもしれませんので、まずはコメントとは何かから。

コメントとは、実際のプログラムの動きとは関係ない、言ってしまえばメモ書きのような部分です。

たとえば、HTMLのコメントはこんな感じ。

<!-- HTMLのコメントだよ。 -->
<!--
複数行も
書けるよ。
-->

ちなみにCSSではこうです。

/* CSSのコメントだよ。 */
/*
複数行も
書けるよ。
*/

この部分は、実際のページ上には出てこない部分になります。

さて、皆さんはこのコメント書いていますか？

僕の感覚でいくと、書いていない人が多いんじゃないかな。

「だってページに表示されないじゃん？書かなくてよくない？」

そう思うんですよね？

けど逆に考えてください。

「ページに表示されないからこそ、なんでも書いておける」

これがコメントの強いところ。

つまりはコメントにその部分が何をしているのかを書いておくことで、後から誰が見てもプログラムが読める状態にしておくんです。

誰も読まないだろ、そんなの。

そう思ったそこのあなた。

そう、あなたですよ。

あなたが、そのコメントを読むんです。

今のあなたは、コメントがなくても何をしているのかわかるかもしれない。

けど、1ヶ月後は？

半年後は？

1年後は？

覚えていないよ、そんなもん。

そんなあなたを救うのがコメントなんです。

コメントのつけ方

さて、コメントが1ヶ月後のあなたを救う話をしましたが、じゃあどういうコメントつければいいの？って話ですよね。

まあ、僕個人としては自分がわかればなんでもいいと思っている派なんですが（笑）

そうも言ってられませんので、考えていきたいと思います。

まず、コメントでレイアウトが分かるようにしておくことが重要ですね。

たとえばCSSを書いていたとしましょう。

はてなの人なら「デザインCSS」の部分に書くことが多いですよね。

けど、ヘッダーも、記事中も、サイドバーも、フッターも全部その中に書くからごちゃごちゃになりやすいんですよね。

ですから、パーツ毎に分割して書いておくべきなんですよ。

たとえば、このようにしておけばわかりやすいんじゃないかな。

/* ヘッダー */

/* ヘッダー終わり */

/* 記事中 */

/* 記事中終わり */

/* サイドバー */

/* サイドバー終わり */

/* フッター */

/* フッター終わり */

で、実際にCSSを書いていきます。
今回は適当に埋めちゃいますね（笑）

/* ヘッダー */

#blog-title{
    color:#666;
}

/* ヘッダー終わり */

/* 記事中 */

.entry-title{
    color: #2a2a2a;
}

/* 記事中終わり */

/* サイドバー */

.follow-btn{
    width: 100%;
}

/* サイドバー終わり */

/* フッター */

.footer-menu {
    color:#666;
}

/* フッター終わり */

こんな感じにしとけば一発でどれがどの部分のことなのかわかりますよね？

ですがたとえば、ヘッダーの中でも色々な要素をいじりたいってなりますよね。

そうした時は、ある程度ルールを決めて書いておくとわかりやすいかも。

たとえば、こんな感じかな。

/* ヘッダー */

/* ヘッダー・ブログタイトル */
#blog-title{
    color:#666;
}

/* ヘッダー・グローバルメニュー */
#global{
    width:100%;
}

/* ヘッダー終わり */

わかりやすいように、ヘッダーの部分だけ残してみました。

ここでは、「ヘッダー・要素」というようなルールで書いてみました。

こうすることで、この部分はヘッダーの中の要素なんだなとわかります。

さらにそれぞれが何をしている要素なのかもわかります。

このようにしていけば、迷うことがなくなりますよね。

あと、特殊なことをやっているような部分にはコメントをつけた方がいいかも。

そういうところは、何をやっているのか後で見てもわからないですからね。

まとめ

今日はプログラミングにおけるコメントがどれだけ重要か話したかった。

多分わかってもらえたんじゃないかな？

面倒だなって思う人も、コメントをつけるための数秒が、1ヶ月後のあなたの数時間を取り戻すことになるわけですから、ちゃんとつけた方がいいですよ！

以上！