LOG IN

【ほぼ自分用】Webフロントエンドのコーディング規約まとめ

by oceant

みなさん、コーディングをするにあたりルールを守って書いてますか?
仕様としてきちんとルールが定められている場合は従っていても、そうでない場合は統一できていないケースってけっこうあるんじゃないかと思っています。プロジェクト単位では統一できていても、他のプロジェクトと比較すると書き方が違っていたりとか。

自分はその傾向が顕著に現れていて、あるプロジェクトでは全てlowerCamelCaseで書いているのに、他のプロジェクトでは変数だけハイフンで区切ったりしていたりと、けっこうバラバラになってしまっています。
もちろん書いた時期によってトレンドも多少あるとは思いますし、どれが正解か、というのも難しいと思います。

ただ、そんなカオスな状況が良いはずはなく。

そこで今回、Webのフロントエンド開発で使う技術(HTML / CSS / JavaScript)について、自分なりのコーディング規約を簡単にまとめました。記事としてまとめることで、自分の中でしっかりと身につけることが目的です。

もちろん俺俺コーディング規約を作っても問題はあるので、基本的にはGoogle Style Guidesをベースに抜粋しています。

共通

ファイル名

ファイル名は全て小文字。単語の区切りはハイフンで繋げる。lowerCamelCaseやアンダースコアは使わない。

file-name-rule.jpg

インデント

インデントは半角スペース2つ。

<ul>
  <li>Fantastic</li>
  <li>Great</li>
</ul>

HTML / CSS

大文字・小文字

特別な文字や固有名詞以外は全て小文字で記載する。タグ名、要素名、値など。

<img src="google.png" alt="Google">

color: #e5e5e5;

ToDo

やるべきタスクが残っている場合はTODO:で記載する。

<!-- TODO: altを記載する -->
<img src="google.png" alt="">

クォーテーションマーク

HTMLでのクォーテーションマークはダブルクォーテーション「"」を使う。

<img src="google.png" alt="Google">

タグの省略

Google Style Guidesは省略できる(HTML5として問題がない)ものは省略してしまおう、という方針のようですが、個人的にそこは違和感があるのでちゃんと記載する方針で。なお、imgタグやbrタグの後スラッシュは記載しない方が正しい模様。

<ul>
<li>Close</li>
<li>Element</li>
</ul>

type属性の省略

CSSやJavaScriptへの指定の場合、stylesheetやscriptの指定ではtype属性を付けない。

<link rel="stylesheet" href="https://www.google.com/css/maia.css">
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>

ID、Class名

全て小文字。単語の区切りはハイフンで繋ぐ。他人が見て分からなくなるような変な省略はしないが、長過ぎる名前も避ける。

#nav
.ads-sample

CSSプロパティの記載順

アルファベット順に並べる。ただしベンダープレフィックスは無視する。

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

メディアクエリ

メディアクエリは要素毎に記載する。ブレイクポイントは変数(配列)で管理し、記述はmixin化しておく(Sassの利用が前提)。記載方法はSassの変数とmixinで変更に強いメディアクエリをつくるの方法が良い感じ。

$breakpoints: (
'sm': 'screen and (min-width: 400px)',
'md': 'screen and (min-width: 768px)',
'lg': 'screen and (min-width: 1000px)',
'xl': 'screen and (min-width: 1200px)',
) !default;

@mixin mq($breakpoint: md) {
@media #{map-get($breakpoints, $breakpoint)} {
@content;
}
}

.foo {
color: blue;
@include mq() { // 引数を省略(初期値はmdの768px)
color: yellow;
}
@include mq(lg) { // 引数を個別に指定
color: red;
}
}

JavaScript

Class名、定数配列名

Class名と定数の配列名はUpperCamelCaseで記載する。

class MyClass {};

定数

定数は全て大文字で書き、単語はアンダースコアで繋ぐ。

const CONSTANT_NUMBER = 5;

Package名、Method名、変数名

これらはlowerCamelCaseで記載する。雑に言えば、定数とクラス名以外lowerCamelCaseで書くということ。

JSDoc

クラスやメソッド、プロパティにはJSDocを記載する。ちょっと面倒。JSDocはMarkdown形式で記載。

/**
* Place more complex annotations (like "implements" and "template")
* on their own lines. Multiple simple tags (like "export" and "final")
* may be combined in one line.
* @export @final
* @implements {Iterable<TYPE>}
* @template TYPE
*/
class MyClass {
/**
* @param {!ObjType} obj Some object.
* @param {number=} num An optional number.
*/
constructor(obj, num = 42) {
/** @private @const {!Array<!ObjType|number>} */
this.data_ = [obj, num];
}
}

JSLint

クォーテーションやセミコロン、スペースの付け方はJSLintで強制的に統一させる。

まとめ

基本的なところばかりですが、ブレやすく、影響範囲が大きくなるところをピックアップした感じですね。まずはこういった簡単なところからしっかり取り組んでいきたいです。


oceant
OTHER SNAPS