Vue.jsのライフサイクルを理解する（Composition API版）

# はじめに
こんにちは！KIYO Learningで[スタディング](https://studying.jp/)の開発をしている @gawa32 です！
私はスタディングの開発で初めて本格的にVue.jsを触るようになりました。
そこでVue.jsではコンポーネントのライフサイクルを正しく理解することが重要だと感じました。
この記事では、Vue 3のComposition API を使ってライフサイクルの概要から、各ライフサイクルフックの詳細についてまとめます。

# 1. Vue.jsのライフサイクルとは？
Vueコンポーネントは、以下のような段階を経て動作します。

1. 作成前（beforeCreate）
2. 作成後（created）
3. マウント前（beforeMount）
4. マウント後（mounted）
5. 更新前（beforeUpdate）
6. 更新後（updated）
7. アンマウント前（beforeUnmount）
8. アンマウント後（unmounted）

Composition APIでは、これらに対応するライフサイクルフックとして onMounted や onUpdated などを利用します。

# 2. 各ライフサイクルフックの詳細（Composition API）
## 2.1 onBeforeMount

コンポーネントがDOMにマウントされる直前に実行

```javascript
onBeforeMount(() => {
  console.log('onBeforeMount: DOMが描画される前');
});
```

主な用途:
* DOMがまだ描画されていないため、DOM操作は不可
* データの準備が終わったかどうかのログを出力

## 2.2 onMounted

コンポーネントがDOMにマウントされた後に実行

```javascript
onMounted(() => {
  console.log('onMounted: DOMにアクセス可能');
});
``` 
主な用途:
* APIリクエストを発行し、データを取得する
* DOMの操作（スクロール位置の設定など）
* イベントリスナーの追加

## 2.3 onBeforeUpdate

データが変更され、DOMが再描画される直前に実行

``` javascript
onBeforeUpdate(() => {
  console.log('onBeforeUpdate: データ更新前');
});
``` 
主な用途:
* 変更前のデータの状態を記録
* 更新前のデータと新しいデータを比較
* 特定の条件下で更新処理をスキップしたい場合のログ取得

## 2.4 onUpdated

データが変更され、DOMが更新された後に実行

``` javascript
onUpdated(() => {
  console.log('onUpdated: データ更新後');
});
```
主な用途:
* 更新後のDOMの状態を確認
* フォーカスやスクロール位置をリセット
* データの変更をトリガーに追加の処理を実行

## 2.5 onBeforeUnmount

コンポーネントが破棄される直前に実行

``` javascript
onBeforeUnmount(() => {
  console.log('onBeforeUnmount: コンポーネント削除前');
});
``` 
主な用途:
* イベントリスナーの削除
* タイマーのクリア
* データ保存や最終ログの記録

## 2.6 onUnmounted

コンポーネントが完全に破棄された後に実行

``` javascript
onUnmounted(() => {
  console.log('onUnmounted: コンポーネント削除後');
});
``` 
主な用途:
* コンポーネントが完全に破棄されたことを確認
* メモリリークを防ぐ処理

# 3. 全体のサンプルコードとコンソールの出力例
以下は、各ライフサイクルフックの挙動を確認するためのサンプルコードです。

```vue
<template>
  <div>
    <h2>Vueライフサイクルのデモ</h2>
    <p>{{ message }}</p>
    <button @click="updateMessage">メッセージ更新</button>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onErrorCaptured } from 'vue';

const message = ref('Hello, Vue!');

const updateMessage = () => {
  message.value = 'Updated Vue!';
};

onBeforeMount(() => {
  console.log('onBeforeMount: DOMが描画される前');
});

onMounted(() => {
  console.log('onMounted: DOM描画完了');
});

onBeforeUpdate(() => {
  console.log('onBeforeUpdate: データ更新前');
});

onUpdated(() => {
  console.log('onUpdated: データ更新後');
});

onBeforeUnmount(() => {
  console.log('onBeforeUnmount: コンポーネント削除前');
});

onUnmounted(() => {
  console.log('onUnmounted: コンポーネント削除後');
});

</script>
```
## コンソールの出力例

### コンポーネントのマウント時
```
onBeforeMount: DOMが描画される前
onMounted: DOM描画完了
```

### メッセージ更新ボタンをクリック
```
onBeforeUpdate: データ更新前
onUpdated: データ更新後
```
### コンポーネントが破棄される時（ページ遷移など）
```
onBeforeUnmount: コンポーネント削除前
onUnmounted: コンポーネント削除後
```

# まとめ

Vue.jsのライフサイクルは、コンポーネントの動作を理解し、適切に処理を行うために非常に重要です。
* onMounted でAPIデータを取得
* onUpdated でデータの変化を監視
* onBeforeUnmount でリソースの後処理

など、各フェーズに応じた処理を適切に実装することで、よりスムーズな開発が可能になると思います。

## KIYOラーニング株式会社について
当社のビジョンは『世界一「学びやすく、分かりやすく、続けやすい」学習手段を提供する』ことです。革新的な教育サービスを作り成長させていく事で、オンライン教育分野でナンバーワンの存在となり、世界に展開していくことを目指しています。

https://kiyo-learning.com/

### プロダクト

* [スタディング](https://studying.jp/)：「学びやすく・わかりやすく・続けやすい」オンライン資格対策講座
* [スタディングキャリア](https://career.studying.jp/)：資格取得者の仕事探しやキャリア形成を支援する転職サービス
* [AirCourse](https://aircourse.com/)：受け放題の動画研修がついたeラーニングシステム（LMS）

### KIYOラーニング株式会社では一緒に働く仲間を募集しています

https://www.wantedly.com/companies/kiyo-learning/projects

https://herp.careers/v1/kiyolearning