Pinia

データをまとめて管理するライブラリ

Vitest

ユニットテストを行うためのライブラリ

Cypress

アプリケーション全体をテストするライブラリ

こういったテストのことをE2Eテストと呼ぶ
通信の端から端までを示すEnd to Endのことをかっこつけて言ってるだけ
ユーザがアプリをちゃんと使える？（ユーザがリクエストを送って、そのリクエストがサーバに届いて、ちゃんと帰ってくる？期待通りの動作してる？）
ってことをかっこつけて言ってるだけ。

ESLint

静的コード解析
懸かれているソースコードが正しい書き方なのかチェックしてくれるツール
こういったツールのことをLinterと呼ぶ

npm run lint
とすることでコードが正しい書き方かチェックしてくれる
実際の現場ではレビューに出す前に必要なことかも

Vite

ヴィートと読む。バイトじゃない。
Vue3の実行環境のことをこう呼ぶ。
フランス語で早いって意味で、何より早いかというと以前のvueの実行環境より早いらしい。
前はVue CLIとwebpackというツールを使って実行ファイルを生成していたらしいが、それが時間かかってた。
だから３ではECMAScriptというのを使ってパパっと実行環境を作れるようにしたから早くなった。

コンポーネント

画面上にあるひとつの何かを表現しようとするまとまり。
例えば商品一覧だったら、その商品を表示する行を表したソースコードのまとまり。
それは
html・・・文字構造
css・・・文字や背景の装飾、位置の調整
js(javascriptの略)・・・上記に動きを付ける（ボタンが押された時どうするかとか、どこかの表示を変えるとか、とにかく画面上で何か起きる時はこいつの出番）
の三つで構成されていることが多い

これは普通それぞれ別ファイルに書く
htmlファイルに文字を書いて、その中でｃｓｓファイルとjsファイルを読み込む
だが、vueならこれらを一つのファイルに書くことができるらしい

記法関連

typescriptを指定し、setupで記述を簡略化できるようにする
<script setup lang="ts">

マスタッシュ構文

{{変数名}}
scriptブロックで定義した変数をtempleteタグの中に表示させる。

ここで変数名を表示させるにはref関数に値を渡して、その戻りを変数定数に入れる必要がある
const name = ref("ダンダダン");

そしてref関数を使うには事前にファイルの上の方でそのrefを使う能力を借りる必要がある
import {ref} from 'vue'

つまり、このref関数はどっかのjsファイルの中で「外部からも使える関数でっせ」と記述されていることになる。
その「外部からも使えまっせ」を示すのが
export function ref()｛ref関数の中身}
というキーワード

つまり自分で外部に使える関数を定義したいときもこれは使えるぞ。

exportされたものをimportする。この流れ。感覚。

リアクティブシステム

js変数の中身が変わると、表示が自動で変わるシステム。
いや、普通変わるでしょ、と思うかもしれないが、普通は変わらない。
ただｊｓファイル上の値が変わっただけ。
変数の中身を変えて、その変数をhtml上に出力する、という手間が必要だ
だがその手間を省いてくれるらしい。

const Power = ref (変化する可能性がある値)

何かのイベントを起こす関数
　Power.value　＝　変化した後の値

<templete>
 <p>{{ Power }} </p>

こんな感じでrefに入れた値のvalueプロパティに値を挿入することで画面上の値を変化させてくれる
確かに楽かも。

vueのコーディング規約

こちらのスタイルガイドを参照。
https://ja.vuejs.org/style-guide/

computed

めっちゃ意味わからなかった部分。
refの意味とは…？みたいにごっちゃごちゃになった。
要は、何か計算する時に、その計算に必要な値が定期的に変化することがある時はcomputed関数でやるらしい
ちょっと良く分からないので一旦深追いはせずに先へ進む。
とにかく、リアクティブな値を計算するときはcomputed関数

ちなみにcomputedで表示する値を算出プロパティと呼ぶらしい

中に指定する無名関数やらアロー関数やらは、特定の計算した値を返してほしいんだけど、そのためにいちいち関数を作るのもめんどいな…みたいな時に使うもの
関数を用意せずして、return文を書けちゃう

reactive関数

まとめてref出来る
reactiveをimportする必要あり

const data = reactive ({
    変数名：値、
    変数名：値、
})

data.変数名 ＝　代入したい値 ///変数名.valueがいらなくなる