onMount：レンダリング後の処理
コンポーネントがDOMに追加された後にコードを実行します。
「onMount：レンダリング後の処理」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
onMount の目的
onMount は、コンポーネントが DOM に追加された後に実行されます。非同期処理の開始や参照へのアクセスに適しています。
インポートする
スクリプトの先頭で svelte からインポートします。
<script>
import { onMount } from "svelte";
</script>基本的な使い方
マウント時に 1 回実行する関数を渡します。
onMount(() => {
console.log("mounted");
});非同期処理
内部で async/await を使用したり、promise を返したりできます。
onMount(async () => {
data = await fetch("/api").then(r => r.json());
});要素へのアクセス
bind:this と組み合わせると、マウント直後に DOM を操作できます。
onMount(() => inputEl.focus());クリーンアップ関数
onMount から関数を返すと、コンポーネントのアンマウント時にクリーンアップできます。
onMount(() => {
const id = setInterval(tick, 1000);
return () => clearInterval(id);
});サーバーとブラウザー
onMount は SSR 中には実行されません。canvas や WebGL のセットアップなど、ブラウザー専用のコードに使用します。
複数の onMount
1 つのコンポーネントで onMount を複数回呼び出せます。宣言した順序で実行されます。
サブスクリプション
ここで外部ソースを購読し、返すクリーンアップ関数内で購読を解除します。
重い処理を避ける
重要でない処理は後回しにするか、requestIdleCallback を使って初回描画をブロックしないようにします。
beforeUpdate との違い
onMount は正確に 1 回実行されますが、beforeUpdate はリアクティブな更新の前に毎回実行されます。
クイックチェック
onMount で開始したインターバルをどのようにクリーンアップしますか。
まとめ
onMount はマウント後に 1 回実行されます。クリーンアップを処理する関数を返し、サーバー上では実行されません。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 41
- レッスン
- 163
よくある質問
「onMount：レンダリング後の処理」レッスンは無料ですか？
はい。「onMount：レンダリング後の処理」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「onMount：レンダリング後の処理」で何を学びますか？
コンポーネントがDOMに追加された後にコードを実行します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「onMount：レンダリング後の処理」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- onMount：レンダリング後の処理
- onDestroy：クリーンアップ
- beforeUpdateとafterUpdate
- tick()：DOM更新を待機する