[TS] 命名規則のまとめ

はじめに

TypeScriptを利用する上での命名規則について、
私的に利用している取り決めを簡単にまとめました。

コード内

マジックナンバーを定義する際の定数名

設定ファイル内にマジックナンバーを定義する際の定数については
「アッパースネークケース」を利用する。

	const MAGIC_NUMBER: string = "マジックナンバー"

ローカル変数としての定数名

メソッド内などでローカル変数として定義し
再代入を行わない変数として使う定数の命名には
「ローワーキャメルケース」を利用する。

    const fixedValue: string = "固定値";

変数名

変数の命名には「ローワーキャメルケース」を利用する。

	let variableValue: string = "初期値"

	value = "新しい値"

プロパティ名

プロパティ名には「ローワーキャメルケース」を利用する。

	const userInfo = {
		userName: "Taro",
		userAge: 20,
	};

interface名

interface名には「アッパーキャメルケース」を利用する。

	interface UserInfo {
    	id: number;
		userName: string;
		userAge: number;
	}

型エイリアスの名称

型エイリアスの名称には「アッパーキャメルケース」を利用する。

	type UserInfo = {
		id: number;
		userName: string;
		userAge: number;
	};

関数名

関数名には「ローワーキャメルケース」を利用する。

	const getUseInfo = (): string => {
		return `名前はTaroで、年齢は20歳です。`;
	}

クラス名

クラス名には「アッパーキャメルケース」を利用する。

	class UserInfo {
		constructor(public userName: string, public userAge: number) {}
	
        getUserInfo (): string {
            return `名前は${this.userName}で、年齢は${this.userAge}歳です。`;
        }
	}

関数コンポーネント名

関数コンポーネント名には「アッパーキャメルケース」を利用する

	export const UserForm = () => {
		///
	}

コード外

ファイル名

ファイル名は「ローワーキャメルケース」を利用する

	getUserInfo.ts

ディレクトリ名

ディレクトリ名は「ケバブケース」を利用する。
「ローワーキャメルケース」を利用しないのは、ファイル名と区別するため。

	user-form

コンポーネントファイル名

コンポーネントファイル名は「アッパーキャメルケース」を利用する

	UserForm.tsx

参考

• 変数宣言: letとconst
  • https://typescriptbook.jp/reference/values-types-variables/let-and-const
• スタイルガイド（コーディング規約）
  • https://typescript-jp.gitbook.io/deep-dive/styleguide
• TypeScriptコーディング規約のきほん
  • https://maasaablog.com/blog/jdyz5d9vk/
• React / TypeScript の設計前に、改めて命名規則について把握する
  • https://qiita.com/shuhosaka/items/4a11158b3e9060d3b612