コーディングWEB制作に関わって4年位経ちましたが、最近自分のコーディングルールがバラバラで無駄が多いなと思ってきたので自分用にコーディング規約をまとめてみました。作って見た規約はこちら。宣伝コーディング規約を作った理由オレオレフレームワークやWordPressのテーマを作るのが好きなのですが、時々コーディングの癖が変わっていたりして流用しづらかったり、普段気をつけているところが抜けていたりする事が合って、均一なクオリティーでコーディングできていないと思ったので自分のルールを整理しました。堅苦しいようにも思えますが自分のコーディングの原点というか帰る場所があるというのはなんというか安心するものです。あと最近コーディングについて話す機会が何度かあったので、ちゃんと考えてますよって言うのを視覚化しておきたかったというもあります。WEBサイト制作にはまじめに向き合ってます。コーディング規約の必要性コーディング規約とは特定のコードの書き方のルールや約束事を定めたもののことを指します。ルールを定め記述方法を統一することで、コードが読みやすくなり、バグの抑制、開発効率アップ、メンテナンス性の向上などの手助けにもなります。私はWEB屋なのでHTMLとCSS中心に行いました。本当はPHPやJSについても書きたかったのですが、自分の中での正義が決まっていなかったのでその辺は保留にしました。コーディング規約は下記の構成で作りました。WEBサイト仕様についてWEBサイトのフォーマットを作成しました。こちらでは公開していないですが、サイト初期制作のテンプレートもこれに規約に合わせて修正してgitで管理しています。後からブラウザ対応の事言われるとしょんぼりするので私がサクサクコーディングできる内容でまとめました。全部のブラウザ対応はお互い得しない事が多いのでデバッグこれまでバリデータ使うことなかったのですが、今後の自分のスキルアップのためにもちゃんとしたほうが良いなと思って取り入れました。HTML構造がどこまでSEOに効果があるのかわかりませんが、私はちゃんと胸を張って私のサイトはHTML構造ちゃんとしてます!って納品したいです。私が行うサイトは小~中規模が置いのでそれで使いやすい構成で作りました。重要視しているのはassetで、オレオレソースやCSSフレームワークを使ってもメンテナンスしやすい設計にしています。あとの構成は好みかな。考えるのに一番苦労しました。言語化できてるか怪しいですが、自分でもこのルールで運用してみて検証したいところです。HTMLについて自分の中の当たり前の事を整理した感じです。CSSについてこちらも自分の当たり前を整理した感ですが、セレクタの設計をこだわりました。LESSなどCSSプリプロセッサを使いつつ、CSSフレームワークを使ってもメンテナンスしやすい設計にしたかったのでIDをセレクタに基本使わないようにしてます。この考え方は異論があるのは承知ですが、開発スピード・流用性を考えるとIDを使わないほうが使いやすいと判断しました。気をつけたこと規約をつくるとなるとガッツり縛るみたいなイメージですが、そこは抑えて自分の必要なことだけ書き表しました。言うとコーディングしていて自分が「嫌だな」経験したところをルール化した感じです。経験から不要なところも規約に入れてしまうと守らなかったり、放置したりしそうだったので守れる・守りたいコーディング規約として作りました。私ひとりでしか使わない規約なのでメンテナンスし放題なので、ちょくちょく更新して活用できるようにしていきたいと思います。WEBサイトも同じですが、作っただけで終わりじゃなくて運用していって初めて成果を出すことができると思っています。やってみた結果コーディングが気持よくなりました。名称とか悩む時間がへって効率も上がっています。ソースの流用もしやすくなったので、今後はもっとスピード上げれると思います。この業界長くやっていこうと思っているなら、こういったルールは合ったほうが絶対良いな実感を持ってます。今回コーディング規約を作ったノウハウなどをお伝えする勉強会を4/12(日)に開催予定です。ルールこの記事を書いた人conti大阪で東京の事業会社でフルリモートワークで働いているWebデザイナーです。副業とか好きで週末フリーランスしてます。コードを書くのが得意なのでプログラマーに愛されるデザイナーってよく言われます。プロフィール記事一覧Twitter古い投稿LESSを始める勉強会を主催しました。運用ノウハウ開発cntlog。