SvelteでonMountを使用する方法

方法1: 単純なonMountコールバックの使用

<script>
  import { onMount } from 'svelte';
  onMount(() => {
    // コンポーネントがマウントされたときに実行されるコードをここに書く
    console.log('コンポーネントがマウントされました');
  });
</script>

方法2: async/awaitと組み合わせる

<script>
  import { onMount } from 'svelte';
  onMount(async () => {
    // 非同期の処理を行う場合、async/awaitを使用できます
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  });
</script>

方法3: onMount内でクリーンアップ関数を返す

<script>
  import { onMount } from 'svelte';
  onMount(() => {
    // マウント時の処理
    return () => {
      // アンマウント時の処理を定義するクリーンアップ関数を返す
      console.log('コンポーネントがアンマウントされました');
    };
  });
</script>

方法4: onMountを複数のコンポーネントで使用する

<script>
  import { onMount } from 'svelte';
  // 複数のコンポーネントでonMountを使用する場合、関数を再利用できます
  function handleMount() {
    console.log('コンポーネントがマウントされました');
  }
  onMount(handleMount);
</script>

これらの例は、SvelteでonMountを使用するための基本的な方法を示しています。onMountを活用することで、コンポーネントの初期化や非同期のデータ取得など、マウント時に行いたい処理を簡単に実装できます。