コーディングルール、というかちょっとでも参考にしてもらえたら良いなと思うこと（ラノベ風）

コーディングするときちょっと気にしてみてほしいことなど(´・ω・｀)

通常コーディングする際、ファイル名や画像名、クラス名など考えたり、案件毎自分なりにルールを作って進めていくと思います。

この時コーディングする人1人で簡潔出来るものなら問題ありませんが、例えば他の人に手伝って貰ったり他の人と連携して作業を進めるという時に、「最初に書いた本人しか分からない」「ファイル名やクラス名がわかりずらい」という問題に出くわすかもしれません。

これを少しでも軽減できたらという細やかな願いからこの記事を書くことにしました。（拍手）

ディレクトリ名: HTMLコーディングとして主なファイルセットは「画像」「Javascript」「CSS」となると思います。

この時ディレクトリ名は「img」「js」「css」とするか、
略形でない場合は、「images」「scripts」「stylesheets」としましょう（とした方が良いと思う）。

or
「images」「js」など省略系と混同されているとなんかちょっと気持ち悪いので…
完全に主観ですが(´・ω・｀)

ファイル名: 簡潔にパッと見で意味が通じるような命名を心がける。

HTMLなら…
「about.html」「privacy.html」など、

2つの単語を使う場合は
「company-history.html」「company-access.html」といった感じでハイフン繋ぎが無難。

画像なら…
「top_header.jpg」「side_banner_name.jpg」や、
「top-header.jpg」「side-banner-namejpg」などハイフン繋ぎでもいいと思います。

CSSファイルなら…
「styel.css」や、「styel-about.css」といった感じ。

JSファイルなら…
「app.js」や、2つの単語を使う場合はハイフン区切りで「main-slider.js」
またはピリオド区切りで「main.slider.js」といった感じ。

ここが一番、他の人と連携して作業するときに意識したいところ（だと思う）

ID・Class名は「小文字」の「ハイフン繋ぎ」で統一しましょう。

<header style="font-family: inherit;" id=“header”>hoge</header>

<div style="font-family: inherit;" class=“news-list”>hoge</div>

といった感じ。

キャメルケースという書き方（「newsList」など単語の繋ぎ始めを大文字にする）もありますが、今のサイトのコードを見てると大体「小文字＆ハイフン」なので、ここだけは統一しましょう。

「newsList-item」とかキャメルケースとハイフン繋ぎを一緒にするのはちょっと…もうマジ無理…リスカしょ←

コーディングを進める際、自分が意識しているところを書きたいと思います。

まずClass名

そのページのメイン見出し部分にあたるタグなら

<h1 class="page-main-title">title</h1>

他のページでも使えそうなスタイルの場合（アイコンが矢印のリスト）

				<ul class="icon-arrow-list">
				<li>hoge</li>
				<li>fuga</li>
				<li>hage</li>
			</ul>

単一のページでその部分にしか使わないような場合は、

<div class="top-info-list"></div>

など、場所も含めてもOK

Javascriptなど書く場合

//関数名はキャメルケース

					function getData(){
					//何かの処理
					}

//変数名の先頭に「$」

var $sliderChild = $(‘.main-slider’).children();

//通常の変数名

var slideTime = 500;

つらつらと書きましたが、コーディングするときにこの中で何か1つでも参考になるものがあればと思います。

ただ的確な名前つけようとして時間がすぎるというのもあれなので、迷ったらノリとセンスで！←

何かの本で読んだのですが、「複数でプロジェクトを進める時は途中で入った人の方が、今あるルールに合わせて作業するのがプロ」だそうです。

なので最低限「なにこれっ」って思われないようなコードを書くよう注意してみんなでハッピーになりましょう！以上！（なにこれ）

Simplog