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

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

コンポーネントの状態が画面に反映するのを待つtick関数

　tickは、コンポーネントの状態が画面に反映するのを待つ関数です。他のライフサイクル関数とは異なり、任意のタイミングで呼び出せます。tick関数は、コンポーネントの状態が画面に反映されたタイミングでresolveするPromiseを返却するので、非同期関数内でawaitを付与して実行すると、画面反映を待つことができます。

　tick関数の利用例を、p004-tickサンプルで説明します（実行して表示されるWebページの内容は図4と同一です）。このサンプルでは、追加ボタンをクリックしたときに実行されるaddToList関数の処理内容が、p003-afterUpdateサンプル（リスト7）から、リスト10の通り変更されています。awaitを付与してtick関数を記述するため、addToList関数が非同期関数になっていることに注意してください。

［リスト10］tick関数の利用例（p004-tick/src/routes/+page.svelte）

const addToList = async () => {
  // 入力された文字列をphoneListに追加 ...（1）
  phoneList = [...phoneList, inputPhone];
  // テキストボックスの文字列を初期化 ...（2）
  inputPhone = '';
  // コンポーネントの状態が画面に反映されるのを待つ ...（3）
  await tick();
  // リスト部と入力部の高さを求める ...（4）
  const listArea = document.getElementById('listArea') as HTMLDivElement;
  const inputArea = document.getElementById('inputArea') as HTMLDivElement;
  const listAreaHeight = listArea.offsetHeight;
  const inputAreaHeight = inputArea.offsetHeight;
  // スクロール位置を設定
  window.scrollTo(0, listAreaHeight + inputAreaHeight - window.innerHeight);
};

　（1）と（2）は、リスト7と同一です。これらの処理によってコンポーネントの状態が変更されますが、この時点では状態の変更（phoneList配列への追加やinputPhone変数の初期化）はまだ画面に反映されていません。

　（3）でtick関数を実行して、変更されたコンポーネントの状態が画面に反映されるのを待ちます。そのため、（4）の時点ではphoneList配列に追加した文字列が画面に表示された状態で、高さの計算やスクロール位置の設定ができます。

まとめ

　本記事では、Svelteのコンポーネントが作成・破棄されるライフサイクルに合わせて処理を実行できるライフサイクル関数の利用法を説明しました。onMount関数ではコンポーネントの初期化とクリーンアップ処理が実装できます。beforeUpdate、afterUpdate、tick関数は、コンポーネントの画面が更新される前後のタイミングで処理を行いたいときに利用できます。

　次回は、複数のコンポーネント間で状態を共有し、ページ全体で一貫した状態管理が行える、Svelteのストア機能について説明します。

参考資料

• Svelte
• SvelteKit