コーディングの規則ちゃんと守れてる?【プログラミング初心者向け】

初心者

こんにちは、なっちる先生(@nacchi_jagariko)です。

大学中退後、完全未経験でエンジニアに就職し、現在フリーランスとして働いています。

プログラミングをはじめたて方、コーディングの仕方習ったことありますか?

※コーディングとは主にHTML/CSS/JavaScriptでプログラミングを記述することを意味します。

というのもなっちる先生自身、就職して初めて、コーディングに規則があるということを知りました。

オンライン学習の独学では、なかなか教わらないことが多いと思います。

ということで、今回は、プログラミングのコーディング規則について説明していきます。

この記事は以下のような人向きです。

コーディングに規則あるの!?現場で使う規則、教えて!

スポンサーリンク

 コーディング規則とは

コーディングにおいて、きちんと規則があります。

ただ作品として完成したもの、ただ動けばいいもの、を作ればいいというわけではないんですねぇ〜。

逆に、規則がなかったときのことを考えてみてください。

「コードがぐちゃぐちゃで見づらい」

「メンテナンスがしづらい」

などなど、問題点が発生してしまうのが目に見えていますね。

あとあとのことを考えとかないとね

ということで、コーディングには規則がきちんとあります。

しかし、規則と言っても、会社によって内容もまちまちです。

また、コーディング規則が、ゆるい現場やガチガチの現場など様々です。

ということで、以下では、

  • だいたい共通した規則
  • 会社によってまちまちな規則

という2本立てで、コーディング規則について、5現場を経験した経験を生かして話していきます〜。

今回はHTML、CSS上での話をします〜

 だいたい共通した規則

まず、どの会社でも、だいたい共通した規則について説明します〜。

コード内での空白の話を主にしていきます。

少し細かいところもあるので、わかりやすく、コード内のスペースを「・」で表しています。

HTML上にて

HTML内では、コードを見て、階層構造がわかるように「インデント」を用います。

具体的に言うと、1つ階層が下がると「インデント」します。

インデントとは字下げのことを意味します。

そして、

  • インデントは空白2つで表す
  • 空白には「半角スペース」または「tab」を使う(現場によって違う)

ということが前提です。

ちなみに、なっちる先生はスペース派です!

正しい記述方法はこちらです。

GOOD!

悪い例も出しておきます。

BAD!

ゆるい現場では意外と以下のようなコードも見ますが、推奨しません。

見てわかるように、見づらいですし、メンテナンス性悪しです。

BAD!

1つ階層が下がるとインデントすると言うのは、1つ上の階層からインデントするということです。

以下はできてないですね。

css上にて

cssでは少し細かいルールになります。

文章で説明するのは難しいですが、ルールとしては以下の通りです。

  1. セレクタの後に「半角スペース」
  2. 「{」の後に改行して、「インデント」(インデントについてはHTMLを参考)
  3. プロパティ+「:」の後に「半角スペース」

細かいっ!

百聞は一見に如かずと言うことで、良い例と悪い例を紹介します。

GOOD!

BAD!

セレクタの後に「半角スペース」が入っていませんね。

BAD!

プロパティの後に「半角スペース」が入っていませんね。

BAD!

以下のようなぐしゃっとした書き方をしている現場も見かけたりします。

見づらいですし、メンテナンス性低いので推奨しません。

 会社によってまちまちな規則

以下では、会社によってまちまちのコーディング規則について、項目ごとに説明していきます。

命名方法

クラス名

HTML内で、CSSやJavaScriptのために、クラス名をつけますが、クラス名にも命名規則があります。

クラス名には、主に以下の3つの命名方法があります。

型名
キャメル型 textBox
ハイフン型 text-box
アンスコ型 text_box

ここらへんは、実際にコード内で使われている型を見て見たりして、臨機応変に対応してください〜。

とりあえず、ここでは深入りしません。

こういう型がありますよと言う紹介でした。

個人的にはアンスコ型が好きです〜

命名規則について気になる方は、以下で論争されているので参考にしてみてください〜。

htmlのid属性とclass属性の命名はハイフンかcamelかsnakeか

ファイル名

ファイル名にも現場によって、命名規則がきちんとしているところがあります。

ファイルの場所も「/common/css/top内に入れてね」というように、規則もありますのでそこは現場で確認してください〜。

CSSでのスタイル指定

!importantを使わない

cssでのスタイル指定で「!important」を禁止にするという現場が経験上大半です。

どうしてもスタイル指定を変えたいときには、クラス名を増やしたりなどして、優先的に採用されるスタイル指定をして対処してください。

こちらの記事で、「優先されるセレクタ指定」について言及しているので参考にしてみてください〜。

CSSでのクラス名の書き方!これで完璧!【プログラミング】
こんにちは、なっちる先生(@nacchi_jagariko)です。 大学中退後、プログラミング完全未経験から就職し、絶賛リモートワーク中のものです。 今回は、プログラミング初心者のもっちるさんが、いざ実際に作ろうとして直...

要素でセレクタ指定しない

要素でセレクタ指定しないこと、としている現場もあります。

具体例を出します。

以下のようなpタグがあるとします。

このpタグにスタイル指定をするときに、「セレクタをpではなく、クラス名で指定してください」と言うことです。

要素で指定してしまうと、スタイル指定の適用範囲が広がってしまいますからね。

例のh3で言うと、他のh3にもスタイルが反映されてしまうね

特に現場で言われていなくても、要素でスタイル指定するのは極力やめておきましょう。

HTML内でスタイル指定しない

HTML内でスタイル指定を禁止している現場もあります。

以下のようなコードのことですね。

常識的に、HTML内であまりスタイル指定をすることはありませんが、きちんと規則化している現場もあります。

 まとめ

以上、コーディング規則についての説明でしたが、はっきりとしない説明になってしまって申し訳ないです。

コーディング規則は現場や案件によって違うので、その都度その都度、バリエーションに対応できるようにしましょう。

と言っても、今回紹介したことを理解しておけば、そう困ることはないです。

グーグルが出しているコーディング規則もありますので、そちらを守れば基本的に間違い無いので、興味のある方は参考にしてみてください→Google HTML/CSS Style Guide

それでは、なっちる先生の授業を終わります。

素敵なプログラミングライフを!

タイトルとURLをコピーしました