私はコーディングを開始する前に必ず「コーディングルール策定」・「環境構築&策定」・「スタイルガイド作成」・「CSS設計」などの基盤になるものを作ります。
その中でもHTMLをコーディングするときのコーディングルールについて書いていきます。
コーディングルールとは
HTMLを書くときに何を考えて書きますか？
以下のようなことを考えて書いていると思います。
他にも「構造」・「論理」などあげたらきりがありません。
- 「構造」・「論理」ついては他のページで書いています。
兎に角いろいろなことを考えながらコーディングしていくと思います。
しかし「複数の人で作業したらコードが読みにくカオスになってしまった」、「何ヶ月かたったあとに書いたコードを見たら何が何だかわからない」等。
こんな経験みなさんもあるとおもいます。
ですがこんなときにルールがありまとめられていたらとっても楽だとおもいませんか？
コーディングの作法をまとめたものがコーディングルールです。
このコーディングルールがあるだけでコードの見通しが良くなり良いコードに近づけます。
良いコードに近ずくことで、メンテナンスがしやすくなり作業効率もUPします。
コーディングルールは必要不可欠なのです。
コーディングルールの策定方法
では実際にどのようなことを決めて作っていくのでしょうか？
以下のようなことを決めていきます。
- コメントの記述方法
- インデント幅
- インデントのしかた
- スペースの空け方
- 改行の位置
- レイアウト目的の
<br>や の使用禁止 - 閉じタグの処理について
- 基盤となるマークアップの方法 etc…
このようなことはHTMLだけではなくCSS・Javascript・gitなどでも行います。
基本的に決めることはほぼほぼ同じだとおもいます（一部例外もありますが）。
コーディングルールの制作
基本となるルールが決まったら次はコーディングルールの制作です。
「もう決めたんだから良いじゃんこいつ何いってんの？」と思うかもしれません。
策定と制作は別物です。
決めただけでは誰にも伝わりません。
それでは意味がありません、ルールを決めたらドキュメントを作ります。
ドキュメントの制作方法はなんでも良いと思います。
普通にテキストドキュメントで書いても良いですし、Wikiなどを利用して制作するのも良いと思います。
ここで需要なのは以下の４つだと私は考えます。
この４つを盛り込んで制作していくとなると制作するツールがとても重要になる思います。
制作ツール
制作する側からしたら簡単に作れて上記の４つが盛り込むことができたらとても嬉しいですよね。
そこで私は、実際にも「スタイルガイド」を使用し制作しております。
なぜなら簡単で上記の４つを盛り込むことができドキュメントを１つにまとめることができるためです。
「スタイルガイド」の制作方法についてですが手法やツールはたくさんあるので好みのものを使用すると良いと思います。
私のスタイルガイドサンプルを「gihub」で公開しています。
demoはこちら
ここでは私の使っているツールを紹介したいと思います。
以下のツールを使用し制作しています。
基本的にはこの３つを使用して制作しています。
NodeJsの使用するヴァージョンは基本的に偶数が安定版なのでそれを使用しますNodeJsはインストーラを使用すると後々ヴァージョンを変更するのが面倒なのでnodebrewやnvmやnodistを使用して管理するといいです。hologramをwindowsで使用する際にはrubyとruby development kitが必要です。
導入に少し技術が必要かもしれませんが最初だけです。
導入ができれば案件（プロジェクト）ごとで少しの設定使用できます。
導入法はここではあえて書きません。
勉強になるので１から調べて導入してみましょう。
どうしてもわからなかったら連絡いただければ教えます。（できる限り答えますw）
- 環境によってはプロキシでうまくインストールできなかったりするので。
これらを使用し制作することにより誰でもわかりやすいものが出来上がります。
まとめ
いろいろ決めたり作ったりするので、時間がかかりますが一度作ってみると重要性がわかると思います。
コーディングルールを作るとコードの見通しが良くなり良いコードに近づくので世に言うイケてるサイトになります。
このようにルールをいくつも定めることにより読みやすく、良質なマークアップとなり生産性やメンテナンス性が向上するので是非一度やってみてください。