「Svelte」でコンポーネントの表示・更新時に処理を実行できるライフサイクル関数の利用

Webページ用UIフレームワーク「Svelte」の活用 第4回

　本連載では、Webページ用UIフレームワーク「Svelte」の活用方法を順を追って説明しています。前回はデータ内容をWebページに反映するリアクティブ機能とバインディング機能を説明しました。今回はコンポーネントの表示や更新のタイミングで処理を実行できるライフサイクル関数の利用法を説明します。

はじめに

　SvelteはWebページのUIを構築するためのフレームワークです。コンパイルによりプレーンなJavaScriptを生成し、実行時にSvelte固有の実装を利用しないことで、実行ファイルのサイズを小さくできる特徴があります。

　本連載ではSvelteの活用方法を、順を追って説明していきます。前回はデータの変更をWebページに反映させるために利用できるリアクティブ機能とバインディング機能を説明しました。今回はSvelteコンポーネントのライフサイクル関数を取り上げます。

　Svelteのコンポーネントには、作成されるときを開始、破棄されるときを終了とするライフサイクルがあり、ライフサイクルのさまざまなタイミングで処理を実行できる関数（ライフサイクル関数）が定義されています。今回はこのライフサイクル関数について、サンプルとともに利用法を説明します。

対象読者

• Webページのファイルサイズをより小さくしたい方
• Svelteで実装していくイメージを把握したい方
• 画面が更新されるタイミングで処理を実行する必要がある方

必要な環境

　サンプルコードは、以下の環境で動作を確認しています。

• Windows 11
• Svelte 4.2.19
• SvelteKit 2.7.0
• Node.js v20.18.0 64bit版
• Microsoft Edge 129.0.2792.89

　サンプルコードを実行するには、サンプルのフォルダーで「npm install」コマンドを実行してライブラリをダウンロード後、「npm run dev」コマンドを実行して、「http://localhost:5173/」をWebブラウザーで表示します。

コンポーネントの表示・非表示時に実行されるonMount関数

　onMountは、コンポーネントが画面に表示される（マウントされる）ときと、画面から削除された（アンマウントされた）時の処理を実装できるライフサイクル関数です。

　onMount関数の利用方法を、図1のサンプルで説明します。サンプルを実行すると、現在時刻を更新表示するコンポーネントが表示されます。また、チェックボックスでコンポーネントの表示・非表示を切り替えでき、コンポーネント表示時のみ、コンソールにも現在時刻がログ出力されます。

図1：onMount関数のサンプル（p001-onMount）

　図1を表示するWebページ全体のコンポーネントはリスト1の通りです。

　（1）で現在時刻を表示するClockコンポーネントをインポートします。（2）のisShowClock変数は、（3）でチェックボックスの<input>要素に記述されたbind:checked属性により、チェックボックスのチェック状態と連動するようになります。（4）の{#if}～{/if}記述により、チェックボックスがチェックされてisShowClock変数がtrueの場合のみ、Clockコンポーネントが表示されるようになります。

［リスト1］図1を表示するWebページ全体のコンポーネント（p001-onMount/src/routes/+page.svelte）

<script lang="ts">
  // Clockコンポーネントをインポート ...（1）
  import Clock from './Clock.svelte';
  // Clockコンポーネントを表示するかどうか ...（2）
  let isShowClock = true;
</script>

<!-- isShowClockに対応するチェックボックス ...（3）-->
<label>
  <input type="checkbox" bind:checked={isShowClock} />
  時計を表示
</label>

<!-- isShowClockがtrueの場合、Clockコンポーネントを表示 ...（4）-->
{#if isShowClock}
  <Clock />
{/if}

　現在時刻を表示するClockコンポーネントは、リスト2の通り実装します。

［リスト2］図1で現在時刻を表示するClockコンポーネント（p001-onMount/src/routes/Clock.svelte）

<script lang="ts">
  import { onMount } from 'svelte';
  // 現在時刻を格納する変数
  let date = new Date();
  // コンポーネントがマウント・アンマウントされるときの処理 ...（1）
  onMount(() => {
    // マウント時の処理：定期実行を開始 ...（1a）
    const intervalId = setInterval(() => {
      date = new Date();
      console.log(date);
    }, 1000);
    return () => {
      // アンマウント時の処理：定期実行を停止 ...（1b）
      clearTimeout(intervalId);
    };
  });
</script>

<!-- 現在時刻を表示 ...（2）-->
<div>{date}</div>

　onMount関数は（1）で利用しています。関数内にはマウント時の処理を記述します。ここでは（1a）でsetInterval関数を利用して、1秒ごとに現在日時を取得してdate変数に格納し、コンソールにログ出力するよう記述しています。date変数は、（2）の記述により画面に表示されます。

　一方、アンマウント時の処理は、onMount関数で戻り値に設定する関数内に記述します。ここでは（1b）でclearTimeout関数を利用して、（1a）で設定した定期実行を停止するよう記述しています。

　ここで、onMount関数のreturn記述を削除してサンプルを実行すると、コンポーネントがアンマウントされた後も定期実行が停止せず、コンソールに現在時刻がログ出力され続けてしまいます（図2）。

図2：コンポーネントのアンマウント時も処理が続く様子（p001-onMount）

　このような事態を防ぐために、マウント時の初期化処理とアンマウント時のクリーンアップ処理の両方をonMount関数で実装することが重要となります。