学んだこと⑤
今日も仕事で学んだことをつらつら書いていきます。
現在、Nuxt3, Vue3, TypeScriptsで開発をしております。
・当然のことだが、API入れたり出したりは、リアクティブではない。
そのため、フロント側でリアクティブに反映させないといけない。
・相対パス ../ は、一つ上の階層にあるもの。
・クラス名をimportする際は{}いらない。型定義の場合のinterfaceなどはいる。
・パラメーターとリクエストボディの違い
パラメータには、パスパラメーターとクエリパラメーター（特定のリソースを操作して取得する際に必要な情報）がある。URIで送る。
パスパラメーター：前?
クエリパラメーター：?後ろ
リクエストボディは、（追加、更新する際の内容）JSONで送るもの。
・プルリクは短いスパンであげるほうが良い。
コンフリクトが起きにくくなる。ただ、画面が見れなくなるなどのエラーはよくないので、そこは改修してから上げる。
・正規表現
/は、エスケープが必要 .もいる。それがついていたら、\でエスケープする。
・styleの条件分岐
:style="[animal.existFlg ? {color: '#FFF'} : {color: '#444'}]”
・HTMLの中の{{ }} の中はJavaScriptが動いている。
・インデックスの抜き出し
配列.findIndex((e) ⇒ {
return 条件式
}
条件式が一つの場合は省略できる。
array.findIndex( ( 引数 ) => ( 条件式 ) )
・配列要素の削除
shift()：「先頭」にある値だけが削除され、後ろの要素は先頭に詰められる。返り値として、削除された値がくる。
var items = 配列データ;
items.shift();
pop()：要素の末尾だけが削除される。
var items = 配列データ;
items.pop();
splice()
//1番目から2個の要素を削除した値を「result」に代入
var result = items.splice( 1, 2 ); // 配列番号を記載
console.log( result );// ["メロン", "イチゴ"]
・型定義はあくまでも型定義、初期値を設定してなければ、pushして配列を追加しなければ、プロパティなしと言われる。
・v-ifとv-showの違い
v-if
：初期表示のコストが低い代わりに、SPA上で表示切り替えを行うためのコストが高い。
v-show
：要素が常にDOMに保持される。要素の表示と非表示の書き換えによって表現されている。
・<template>タグの使い所
- 条件付きレンダリングで複数要素を対象とする場合（v-if）
- リストレンダリングで複数要素を対象とする場合
- 名前付きスロット（v-slot）
<template #header>
- 単一ファイルコンポーネント
なかなか進まないところ。。。
