変数名や関数名の命名規則や作法について JavaScript・jQuery

おいっす～！JavaScriptとjQueryを勉強中のタクです！

プログラミングの知識がない時代にアニメやゲーム作品のキャラを人気順に並び替える『キャラソート』にハマっている時がありました。

そこで初めて作るwebページはJavaScriptを使ってのキャラソートにしました！しかしソートアルゴリズムやJSでやりたい事を具現化する事に苦戦中…

今回はプログラムを作っている時に指摘された『変数名・関数名の命名規則』にスポットをあててお話しようと思います。

はじめに

書き方や動かし方さえわかってしまえば誰にでも思うように動かすことが出来るプログラミング。

しかし多くのプログラミング言語にはプログラミングを記述する時の作法や、変数名に命名規則などがあるので例を交えて解説していきます！

記述時の作法

最初にお話ししましたが、書き方さえわかってしまえば誰にでも作れてしまうプログラミング。自分だけのルールでソースコードを記述してしまうと、読める人が少ないコードになり、問題が発生した時に対処できる人がいない状況に陥ってしまいます。

もちろん他者がデバックをすることは可能と言えば可能でしょうが、解読しにくいコードと解読しやすいコードをデバックする場合、後者を選ぶ人が大半だと思われます。

そこで多くの言語では他の人でも確認しやすいように、見た目を意識することが作法として伝えられています。
・字下げ（インデント）
・桁位置合わせ
・命名規則、理論
詳しく話すとまだまだありますが、上記を意識する事が重要とされます。

「変数名」「関数名」の命名規則

基本的には変数名や関数名の付け方にはパターンが存在します。
パターンさえ覚えてしまえば、Webサイト等の翻訳機能を使って日本語を英語に翻訳すれば良いという事になります。

ただ翻訳した結果をパターンに当てはめてそのまま使用する時に抑えておきたい事があります。それは出来るだけ「シンプルに記述する」ということです。

わかりやすさを意識して変数名や関数名が長くなってしまうと、結果的に長すぎて読みづらくなってしまったり、タイプミスなどを引き起こす原因になってしまうので注意しましょう。

変数名の基本

変数の中に何が入っているのかを考える事が重要です。
その中で多く使用されるのが「名詞」になります。
例えば顧客の名前を管理するシステムを作り、変数に格納していく場合は以下のような変数名になります。

/*会員名*/
let userName = ['Taro']

/*会員たち*/
let userNames = ['Taro', 'Hanaco']

ここで抑えておきたいポイントとして、単数形と複数形で表記が変わるところです。
複数の会員を「配列」や「連想配列」で変数に代入する時は、複数形にします。

ようするに変数名を一目で認識できるよう、情報の種類と数がわかるようにしましょう。

関数名の基本

関数は設定している働きを表すため「～を～する」という表現に多く使われます。
「目的語」+「動詞」の定義で関数名を作るという事です。
ただし日本語の文法では「目的語」ー＞「動詞」となりますが、英語の文法の場合は順番が入れ替わるので「動詞」ー＞「目的語」となります。

/*会員名を変数に代入*/
let userName = userName(1)

/*会員名を取得する処理*/
function userName(id){
  /*処理*/
}

/*複数の会員名を変数に代入*/
userNames = userNames(1, 2)

/*複数の会員名を取得する*/
function userNames(ids){
  /*処理*/
}

関数も変数も同じく、 複数の会員を「配列」や「連想配列」で値が返る場合は、複数形の関数名にするよう意識しましょう。

変数名や関数名の命名規則

変数名や関数名には「命名規則」があります。
命名規則にはいくつかの種類があり、使用するプログラミング言語で推奨されている規則が異なります。

その中でいくつかご紹介いたします。

キャメルケース（ローワーキャメルケース）

複合語をひと綴りとして、複合語の先頭を小文字で書き始め、次に使用する単語の頭文字を「大文字」にする命名規則になります。

使用する主な言語：Java、JavaScript

/*キャメルケース例*/
userName = "Taro"

パスカルケース （アッパーキャメルケース）

複合語をひと綴りとして、複合語の先頭を「大文字」で書き始め、次に使用する単語の頭文字を「大文字」にする命名規則になります。

使用する主な言語：Java, JavaScript

/*パスカルケース例*/
UserName = 'Taro'

スネークケース

単語と単語の間を「 _ （ アンダースコア ）」で繋ぐ命名規則になります。

使用する主な言語：Python, PHP, Ruby

/*スネークケース例*/
user_name = 'Taro'

チェインケース（ケバブケース）

単語と単語の間を「 – （ハイフン）」で繋ぐ命名規則になります。

変数名や関数名の命名規則ではなく、HTMLやCSSなどのマークアップ言語で使用されclass名などで使用されます。

使用する主な言語：HTML, CSS

/*チェインケース例*/
user-name = 'Taro'

またプロジェクトでの指示、会社での規則など開発を行う環境によって変化する場合があります。

特に指定がなければ、基本的にはプログラミング言語で推奨されている命名規則に従いましょう。

終わりに

冒頭でもお話ししましたが、誰でも自由に作れてしまうプログラミング。
開発やデバックを複数人で行う環境で命名規則はかなり重要になってきます。

筆者本人は英語が大の苦手なので、検索エンジンで『〇〇（単語）　翻訳』などを使い、文法に気を付けながら命名するようにしています。

色々お話ししましたが、簡単に言ってしまえば「みんながわかるようにすれば良い」というのが極論なので、他の人が見てもどんな処理で使われるのか一目でわかるように意識すれば良いと考えております。

命名規則を意識していなかった人や、これから何かしらの言語を勉強する方は
『△△（言語名）　命名規則』などで検索する事をオススメします！