Roule (未完成)

■ Rule

1） メソッド命名ルール（キャメルケース）

1-1） データ処理系メソッド

frontend：　axios
backend：　DBに処理を行う

fetch〇〇  : 取得
store〇〇  : 保存
update〇〇 : 更新
delete〇〇 : 削除（単数、複数のルール分けは現状ない）

1-2） データに関係ない処理系メソッド

create〇〇	  : ～を（空の状態から）生成する
generate〇〇 :	～を（変換して）生成する
make〇〇	    : ～を構築する（部品を作る）
build〇〇	   : ～を構築する（部品を組み立てる）
get〇〇      : 取得する          　         （例）getInputType
set〇〇　　　　　　　　　　　　: 値をセットする

// フロントしか使わないと思う（多分）
filter〇〇    : フィルターをかける             （例）filterPrefectureList
isDisplay〇〇 : 表示可否の有無をbooleanで返す （例）isDisplayBtn

２） 変数命名ルール（キャメルケース / 動詞 + 〇〇）

■ Boolean型
is〇〇　       （例）isDisplay 
has〇〇　      （例）hasEditAuth
toggle〇〇   　（例）toggleSlider

■ Integer型
〇〇Type     （例）inputType
〇〇Id       （例）keyId           

■ String型
〇〇error     （例）inputError

■ Array型
〇〇List     （例）productList         　　　　　　　　　　　　　　　　　　　　　（型）Array [{},{},{}...]
〇〇Lists    （例）productLists        　　　　　　　　　　　　　　　　　　　　　（型）Array [[{},{},{}...], [{},{},{}...], [{},{},{}...]]
〇〇s        （例）userIds,userNames,〇〇errors   （型）Array [1,2,3,4] ['太郎','次郎','三郎'] ['文章〜','文章〜','文章〜']

■ Object型　（※検討中）
item         funcItemWidgets > items の中の一つ
product      productList 中の一つのオブジェクト　（ ProductList = [[{},{},{}...], [{},{},{}...], [{},{},{}...]] ）

　---- その他 ----
 ■ errorの変数タイプがいくつかあるので分けています。
validError: 文字列 / validErrors: 配列    validation.ts のエラー
inputError: 文字列 / inputErrors: 配列　　　　　　　　非同期の入力チェックのエラー

■ Rule（Frontend）

１）　Class

1-1） wizで作成したクラスには頭に「ex-」と記述する

※bootstrapやライブラリのクラスと区別するため

 <div class="ex-header-area d-flex flex-colum">
 </div> 

1-2）　社内共通の定数、共通CSSを使用する

ファイルの場所：app.scss/ _valiable.scss

※以下、社内で共通設定されているもの例

■ 定数（_valiable.scss）
・色
・文字サイズ
・画面幅 ...etc

■ 共通css（app.scss）
・フォーム関連
・文字サイズ ...etc

1-3） boostrapのクラス使用を推奨

padding: ps- / pe- / pt- / pb- / etc...
margin : ms- / me- / mt- / mb- / etc...

position-absolute
position-relative

width(%) : w-100
height(%): h-100

d-flex
justify-content- start / end / center / between /　etc...
align-items- start / end / center / etc...

flex-column
fw-bold

2）　イベント発火命名ルール（キャメルケース）

イベントの発火はこのルール
axiosの処理する際はメソッドにイベントの中から飛ばす

on〇〇    : onclick, change, inputなどイベントが発火して起こった処理　（例）onClick,onChange,onInput...
load〇〇  : loadした時のイベント発火

3）　コンポーネント命名ルール

コンポーネントグループがわかるように、頭を統一する
※ inputType.js参考にできると思います。

例）
Input〇〇
Button〇〇
Modal〇〇