基本的な命名規則とReactNativeでの命名規則
命名規則に関して
命名規則は複数人で共同開発をする上で、とても重要な概念である。このルールを開発メンバー全員が覚えることで、コードの一貫性が保たれ、可読性を上げられるだけでなく、今後のメンテナンスも楽になる場合があるため、是非覚えてほしい。
命名規則とは
命名規則(めいめいきそく、英: 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