🔥

基本的な命名規則とReactNativeでの命名規則

2024/11/15に公開

命名規則に関して

命名規則は複数人で共同開発をする上で、とても重要な概念である。このルールを開発メンバー全員が覚えることで、コードの一貫性が保たれ、可読性を上げられるだけでなく、今後のメンテナンスも楽になる場合があるため、是非覚えてほしい。

命名規則とは

命名規則(めいめいきそく、: naming conventions)とは、プログラミングを行う際にソースコード上の識別子: identifier)の名称となる文字列を決定するためのルールを定めたもの。ネーミング規則ネーミング規約、あるいは命名規約とも呼ぶ。

https://ja.wikipedia.org/wiki/命名規則_(プログラミング) 
wikipedia 命名規則 (プログラミング) より

とあるが、簡単に言えば、ファイル名、変数名、関数名等の命名方法についてルールのことである。
命名規則は、会社ごとに社内規則として定められている事が多いが、基本的な考え方はおそらく全プログラマーに共通しているため、知っていて損はない。
また、基本的に言語やフレームワークによっても命名規則は異なるという点に注意して欲しい。

基本的な命名規則の種類

  • camelCase(キャメルケース)
    キャメルケースとは、camelCaseのように、1単語目の頭文字は小文字で、後に来る単語の頭文字を大文字にするという規則である

  • PascalCase(パスカルケース)
    パスカルケースとは、PascalCaseのように、それぞれの単語の頭文字を大文字にするという規則である

  • snake_case(スネークケース)
    スネークケースとは、snake_caseのように、全て小文字で、単語と単語の間にアンダースコアを挟むという規則である

  • kebab-case(ケバブケース)
    ケバブケースとは、kebab-caseのように、全て小文字で、単語と単語の間にハイフンを挟むという規則である

  • UPPER_CASE(アッパーケース)
    アッパーケースとは、UPPER_CASEのように、全て大文字で、単語と単語の間にアンダースコアを挟むという規則である

ReactNativeではどこで何が相応しいのか

基本的に以下のような規則に従うのが望ましい。

ファイル名

  • tsxファイルの場合
    パスカルケース
  • tsファイルの場合
    キャメルケース

関数名

キャメルケース

クラス名

パスカルケース

コンポーネント名

パスカルケース

type、interface等のカスタム型系

パスカルケース

変数名

キャメルケース

その他のものの使い道

  • スネークケース
    自分の経験則上、主にPythonでよく使用される。Pythonでは、変数名や関数名、ファイル名は全てスネークケースの規則に従う。
  • ケバブケース
    あまり使う機会はないが、よく使われるのはCSS関連のコードである。具体的には、CSSのクラス名だったり、ReactNativeのスタイルでjustifyContent: “flex-start”と指定する時等に使われる。また、gitのブランチ名はケバブケースが使用されることが多かったり、Vueのコンポーネントのプロパティ名はケバブケース推奨(らしい)
<SampleComponent
    :is-show="isShow"
/>
  • アッパーケース
    主に、定数や環境変数で使用される。具体的には、関数内で定数を扱いたい時や、envファイル内にAPIキー等を記述するときに使用される。

Discussion