概要

表題の通りReact with TypeScript・Plain CSSを使用したweb開発における命名規則を端的にまとめていきます。

何故まとめるのか

「コードが読みやすくなる」からです。
他人に対してだけ読みやすくするだけでなく、未来の自分にむけて読みやすくしておくことも重要です。
雑に書いていると過去に自分が書いたコードを読む際に、苦しめられることになります。

React Component

表記方法：ディレクトリ名、ファイル名、コンポーネント名に
アッパーキャメルケース（パスカルケース）を使用する

HelloWordlComponentHelloWordComponent.tsxHelloWordComponent.css

functionHelloWorldComponent(props){return<h1>Hello, {props.name}</h1>;}

React Component以外のファイル名

表記方法:スネークケース

snake_case.ts
snake_case.js

Typescript

変数

表記方法：ローワーキャメルケース
品詞：基本的に名詞

consthelloWorld:string='hello world'

補足

場合によってはPrefixを入れる.
Booleanの場合はisなど。
オブジェクト、配列

定数

表記方法：コンスタントケース
品詞：基本的に名詞

constHELLO＿WORLD:string='hello world'

関数

表記方法：ローワーキャメルケース
品詞：動詞＋目的語

functiongetFooData(){}

クラス名

表記方法：アッパーキャメルケース
品詞：名詞

classFoo{private_foo:stringconstructor(foo){this._foo=foo}onUpdateFoo(){}}

クラスのメソッド

表記方法:ローワーキャメルケース
品詞：動詞＋名詞

type

表記方法：アッパーキャメルケース
品詞：名詞

typeFooBar={foo:string}

メンバーはローワーキャメルケース

interface

表記方法：アッパーキャメルケース
品詞：名詞

interfaceFooBar{foo:string}

enum

表記方法：アッパーキャメルケース
品詞：名詞

enumFooBar{foo}

Plain css

BEMを推奨します。
BEMとはページを構成する要素をBlock,Element,Modifierという三つの分類に当てはめ、CSSクラスを命名する規則です。
ここではBEMの詳細には触れず、端的に例示のみ行います。

一般的なBEMはblock__element--modifierのように
blockとelementの間はアンダースコア二つ、elementとmodifierの間はハイフン二つで区切ります。

<divclass="article-list"><divclass="article-list__article-title">タイトル
    <spanclass="article-list__article-subtitle">サブタイトル</span></div></div>

引用
https://qiita.com/Takuan_Oishii/items/0f0d2c5dc33a9b2d9cb1

表記方法

リファレンス

https://google.github.io/styleguide/jsguide.html#naming-rules-common-to-all-identifiers
https://basarat.gitbook.io/typescript/styleguide#type
http://getbem.com/introduction/
https://qiita.com/Takuan_Oishii/items/0f0d2c5dc33a9b2d9cb1