初めての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から取得したデータをグローバル管理できる） |
エディターの初期化(initEditor())
✅ ref()でHTML要素を取得
✅ onMounted()でコンポーネントが表示されたときにエディターを初期化
APIからデータを取得（GET）
✅ axios.get()でAPIからデータを取得
✅ onMounted()でコンポーネントが表示されたら実行
Vueのライフサイクルでよく使う関数
onMounted(): コンポーネントが表示時に実行
onUnmounted(): コンポーネントが削除された時に実行
onUpdated(): コンポーネントのデータが更新された時に実行
✅ APIを叩くときにonMounted()をよく使う
Vue.js + TypeScriptにおける async / await の基本と使い方
1.async / await とは？
📌 async / await を使う理由
・APIのデータ取得や非同期処理を簡単に書ける
・コードが読みやすくなる
✅ 非同期処理とは？
すぐに結果が出ない処理を、待たずに実行できるようにする仕組み（例: API通信、DB操作）
2.async / await の基本
❌ awaitなし（悪い）
⇒ APIのデータが取れる前にconsole.logが実行されてしまう
✅ async / await を使う（正しい）
⇒ awaitをつけると、データ取得が終わるまで待ってくれる
関数に async をつけないと await は使えない
3.Vueコンポーネントで async / await を使う
📌 onMounted()でAPIを取得
⇒ onMounted(): コンポーネントが表示されたらAPIを叩く
4.await を Promise.all()で並列処理
通常、APIを１つずつ待つと時間がかかることがある。
Promise.all()を使うと複数のAPIを同時に実行できる。
⇒ 待ち時間を短縮
5.async / await を使うイベント処理
ボタンをクリックした時にAPIを実行することもよくある。
VueでAPIを使うなら async / await は絶対に必須！
📌 awaitをボタンクリックイベントで使う
awaitをつけることで、APIのデータ取得が終わるまで待てる！
✅ ボタンをクリックするとhandleClick()が実行される
✅ 送信中はボタンをdisabledにして2回押せないようにする
6. async / await / watch()を組み合わせる
データの変更を監視して、非同期で処理を実行したいときにwatch()を使う
入力値が変わるたびにAPIを実行できる
📌 watch()でデータが変わったらAPIを取得
7. computed()でデータを加工
APIから取得したデータを加工して表示するのにcomputed()が便利
✅ データを計算・加工するときはcomputed()を使う
8. Piniaでグローバルなデータ管理
VueではPinia（ピニア）を使うとAPIから取得したデータをグローバル管理できる
✅ Piniaを使うと、複数のコンポーネントでAPIデータを共有できる
Vue + TypeScript + APIでは「エラーを防ぐ」「処理を共通化する」のが大事！
TO BE CONTINUED