概要
表題の通りReact with TypeScript・Plain CSSを使用したweb開発における命名規則を端的にまとめていきます。
何故まとめるのか
「コードが読みやすくなる」からです。
他人に対してだけ読みやすくするだけでなく、未来の自分にむけて読みやすくしておくことも重要です。
雑に書いていると過去に自分が書いたコードを読む際に、苦しめられることになります。
React Component
表記方法：ディレクトリ名、ファイル名、コンポーネント名に
アッパーキャメルケース（パスカルケース）を使用する
HelloWordlComponent
HelloWordComponent.tsx
HelloWordComponent.css
function HelloWorldComponent(props) {
return <h1>Hello, {props.name}</h1>;
}
React Component以外のファイル名
表記方法:スネークケース
snake_case.ts
snake_case.js
Typescript
変数
表記方法：ローワーキャメルケース
品詞：基本的に名詞
const helloWorld:string = 'hello world'
補足
場合によってはPrefixを入れる.
Booleanの場合はisなど。
オブジェクト、配列
定数
表記方法：コンスタントケース
品詞：基本的に名詞
const HELLO＿WORLD:string = 'hello world'
関数
表記方法：ローワーキャメルケース
品詞：動詞＋目的語
function getFooData(){
}
クラス名
表記方法：アッパーキャメルケース
品詞：名詞
class Foo {
private _foo:string
constructor(foo){
this._foo = foo
}
onUpdateFoo(){
}
}
クラスのメソッド
表記方法:ローワーキャメルケース
品詞：動詞＋名詞
type
表記方法：アッパーキャメルケース
品詞：名詞
type FooBar = {
foo:string
}
メンバーはローワーキャメルケース
interface
表記方法：アッパーキャメルケース
品詞：名詞
interface FooBar {
foo:string
}
enum
表記方法：アッパーキャメルケース
品詞：名詞
enum FooBar {
foo
}
Plain css
BEMを推奨します。
BEMとはページを構成する要素をBlock,Element,Modifierという三つの分類に当てはめ、CSSクラスを命名する規則です。
ここではBEMの詳細には触れず、端的に例示のみ行います。
一般的なBEMはblock__element--modifierのように
blockとelementの間はアンダースコア二つ、elementとmodifierの間はハイフン二つで区切ります。
<div class="article-list">
<div class="article-list__article-title">
タイトル
<span class="article-list__article-subtitle">サブタイトル</span>
</div>
</div>
引用
https://qiita.com/Takuan_Oishii/items/0f0d2c5dc33a9b2d9cb1
表記方法
| 表記名 | 例 |
|---|---|
| キャメルケース、ローワーキャメルケース | camelCase |
| パスカルケース、アッパーキャメルケース | PascalCase,UpperCamelCase |
| スネークケース | snake_case |
| ケバブケース,チェーンケース | kebab-case,chain-case |
| コンスタントケース,アッパースネークケース,アッパーケース | CONSTANT_CASE |
リファレンス
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