Web制作、Web開発の歩き方

JavaScriptのきほんを学ぼう

■第25話:JavaScriptの命名規則

(最終更新日:2023.08.31)

JavaScriptの猫
この記事は4分で読めます!
(絵が小さい場合はスマホを横に)

「見やすいコードを書きたい」

プログラミングにおいて、命名規則はコードの可読性とメンテナンス性を向上させるための重要な要素の一つだ。 特に、大きなプロジェクトやチームでの開発では、一貫性のある命名規則で書くことを求められる。 今回はそんなJavaScriptの命名規則について説明する。


1.JavaScript自体の重要性

JavaScriptはウェブ開発の中心的な言語として広く用いられている。 ウェブページのインタラクティブな要素の制御、サーバーサイドの開発(Node.jsを用いた場合)、 さらにはモバイルアプリケーション開発にも使われるなど、多岐にわたる用途がある。

2023年1月のソフトウェア開発者分析企業(RedMonk)のランキング(GithubとStack Overflowでの言及数)だと、 JavaScriptが人気言語の第一位になっており、これからも広く長く使われることは間違いないだろう。 そんな人気言語の命名規則は、覚えておいて損は無いはずだ。

JavaScriptの重要性

2.JavaScriptの命名規則

JavaScriptの命名規則に関しては、Pythonのように公式的に書かれてはないが、 「Google JavaScript Style Guide」や「MDN Web Docs」、ESLintツールでのデフォルトの整形が参考になるだろう。 大体の部分は共通しているので、典型的な書き方を述べていく。

  1. 変数の命名:
    • 命名規則: lowerCamelCase(ローワーキャメルケース)を使用する
    • 例: userName, wordList
  2. 関数の命名:
    • 命名規則: lowerCamelCase(ローワーキャメルケース)を使用する
    • 例: printHelloWorld(), calculateTotal()
  3. クラスとコンストラクタの命名:
    • 命名規則: PascalCase(パスカルケース)を使用する
    • 例: MyClass, UrlParser
  4. 定数の命名:
    • 命名規則: 大文字のスネークケースで書く
    • 例: MAX_VALUE, PI
  5. イベントハンドラとリスナーの命名:
    • 命名規則: on[EventName] の形式や handle[EventName] の形式、ローワーキャメルケースで書く
    • 例: onClick, handleSubmit
  6. プライベート変数とメソッドの命名:
    • 命名規則: 名前の先頭にアンダースコアを使用して、ローワーキャメルケースで書く
    • 例: _privateVar, _privateMethod()

JavaScriptの命名規則で特徴的なのは、定数の大文字のスネークケースだろう。 あと、クラスとコンストラクタがパスカルケース、それ以外はローワーキャメルケースと覚えておこう。 あと、ReactやSvelteのコンポーネント名はパスカルケース(PascalCase)を用いる。Vueはコンポーネント名をケバブケース(kebab-case)で書くので注意しよう。


3.まとめ

一貫性のある命名は、コードの可読性を高め、チームメンバー間でのコミュニケーションを円滑にし、エラーを減少させる助けとなる。 つまり、コードの品質を向上させ、開発効率を上げるために命名規則は不可欠である。

今回説明した命名規則は、初心者から経験豊富な開発者まで、全てのJavaScriptプログラマにとっての共通の言語になる。 Web系のプログラマにとって、JavaScriptは必須の言語なので、ぜひ早めに身に着けよう。


▼参考図書、サイト

The RedMonk Programming Language Rankings: January 2023 RedMonk
Google JavaScript Style Guide Google