はじめに

※あくまで参考程度にとどめてください。会社独自のルールで変数をつけている場合があるのでその場合はそちらに従うようにしてください。

サンプルコードはjava Script, htmlで書いてます。

命名規則の種類

javascriptやPHPにおいて関数や変数、HTMLなどでもclass名など、命名規則を用いる場面は多々あります。この際に命名規則がなく、バラバラになっていると可読性が悪くなることで改修コストが増えたり、バグの原因になる可能性も出てきます。

そういったことを防ぐためによく使われるのが以下の命名規則になります。主に単語間の記法が異なるのり、それぞれ呼び方も覚えておいてください。

単語の先頭を大文字にする命名規則です。全ての単語の先頭を大文字にするのがアッパーキャメルケースもしくはパスカルケースと呼ばれています。

先頭の単語だけ小文字にするのがローワーキャメルケースと呼ばれます。

両方とも主にPHPやJSなどの関数でよく使われています。

const CamelCase = "CamelCase　これはアッパーキャメルケース";
const camelCase = "camelCase　これはローワーキャメルケース";

単語の間をアンダーバーで繋ぐ命名規則です。
主にDBなどで使用されることが多く、HTMLのclassとかにも使われています。

<h1 class="snake_case">snake_case</h1>

単語の間をハイフンで繋ぐ命名規則です。
HTMLのclassや、ファイル名などでよく見かけます。

<h1 class="kebab-case">kebab-case</h1>

命名規則によってパフォーマンスが上がるなどといったことはそんなにありませんが、可読性をアップしたり、ルールを統一することで複数人での開発をスムーズにすることが目的でこれをすることによって関数名を見るだけで何となくやってることがわかったりします。

ちなみにグーグルのがいどらいんでは単語の間をハイフンで繋ぐケバブケースが推奨されているようです。HTMLのclass名においてはWordPressなどのフレームワークでもケバブケースが採用されているのが確認できます。

また、プログラミングの関数などではキャメルケースが多く、フレームワークなどでよく見かけます。DBのテーブル名などにはアンダーバーを使ったスネークケースが使われていることが多いです。

なので、以下のように使い分けるといいかと思います。

キャメルケース　→　プログラミングでの関数や変数
スネークケース　→　DBなどで扱う値
ケバブケース　→　HTMLのclass名

もちろん、最初に記述した通り、会社やチームごとに決められている命名規則が違ったりするので必ずしも、正解というのはあませんので、開発チーム内の命名規則を見極める必要があります。

適切な変数名は使用される状況によって変わります。

例えばユーザーIDを処理するときに、プログラムないで扱うIDが他になければ

const id  = req.body.id;

で十分ですが、他にもIDがある場合は、

const userId = req.body.user_id

としないと、どのIDなのかわからなくなります。

変数よりは入力する回数がかなり少なくなり、エディタで補完してくれるので多少長くても大丈夫です、なるべくわかりやすく簡潔に関数名をつけましょう。

//アカウント作成
const createAccount = () => {
 // 処理
}

//アカウント更新
const updateAccount = () => {
 // 処理
}

//アカウント削除
const deleteAccount = () => {
 // 処理
}