初めてのVue.jsとTypeScript

Vue.js + TypeScriptとは？

✅ Vue.js: Webアプリを作るためのJavaScriptフレームワーク
✅ TypeScript: JavaScriptに「型」をつけたもの（エラーが減る＆開発しやすくなる）

Vue.jsとTypeScriptを組み合わせるメリット
・型チェックでエラーを防げる
・コードの補完が効く（開発が楽になる）
・チーム開発でもバグが減る

Vue3 + TypeScript + APIでよく使う定番関数・機能まとめ

関数・処理	役割
ref()	変数をリアクティブにする（単一の値向け）
reactive()	オブジェクト・配列をリアクティブにする
computed()	値を自動計算してくれる（APIから取得したデータを加工して表示するのにcomputed()が便利）
watch()	変数の変更を監視して処理を実行（入力値が変わるたびにAPIを叩く時に使う）
onMounted()	コンポーネントが表示された時に実行
onUnmounted()	コンポーネントが削除された時に実行
onUpdated()	コンポーネントのデータが更新された時に実行
props	親 ⇒ 子にデータを渡す
emit	子 ⇒ 親にイベントを送る
defineProps()	setup()内でpropsを使うための関数
defineEmits()	setup()内でemitを使うための関数
useStore()	Piniaを使って状態を管理
fetch() / axios.get()	APIからデータを取得
axios.post()	APIにデータを送信
Pinia	アプリ全体の状態管理（VueではPiniaを使うとAPIから取得したデータをグローバル管理できる）

✅ ref()でHTML要素を取得
✅ onMounted()でコンポーネントが表示されたときにエディターを初期化

✅ axios.get()でAPIからデータを取得
✅ onMounted()でコンポーネントが表示されたら実行

onMounted(): コンポーネントが表示時に実行
onUnmounted(): コンポーネントが削除された時に実行
onUpdated(): コンポーネントのデータが更新された時に実行

✅ APIを叩くときにonMounted()をよく使う

📌 async / await を使う理由
・APIのデータ取得や非同期処理を簡単に書ける
・コードが読みやすくなる

✅ 非同期処理とは？
すぐに結果が出ない処理を、待たずに実行できるようにする仕組み（例: API通信、DB操作）

❌ awaitなし（悪い）
⇒ APIのデータが取れる前にconsole.logが実行されてしまう

✅ async / await を使う（正しい）
⇒ awaitをつけると、データ取得が終わるまで待ってくれる
関数に async をつけないと await は使えない

📌 onMounted()でAPIを取得
⇒ onMounted(): コンポーネントが表示されたらAPIを叩く

通常、APIを１つずつ待つと時間がかかることがある。
Promise.all()を使うと複数のAPIを同時に実行できる。
⇒ 待ち時間を短縮

ボタンをクリックした時にAPIを実行することもよくある。
VueでAPIを使うなら async / await は絶対に必須！
📌 awaitをボタンクリックイベントで使う

awaitをつけることで、APIのデータ取得が終わるまで待てる！

✅ ボタンをクリックするとhandleClick()が実行される
✅ 送信中はボタンをdisabledにして2回押せないようにする

データの変更を監視して、非同期で処理を実行したいときにwatch()を使う
入力値が変わるたびにAPIを実行できる
📌 watch()でデータが変わったらAPIを取得

APIから取得したデータを加工して表示するのにcomputed()が便利
✅ データを計算・加工するときはcomputed()を使う

VueではPinia（ピニア）を使うとAPIから取得したデータをグローバル管理できる
✅ Piniaを使うと、複数のコンポーネントでAPIデータを共有できる

Vue + TypeScript + APIでは「エラーを防ぐ」「処理を共通化する」のが大事！

TO BE CONTINUED