0Pricing
Sveltejs Academy · レッスン

beforeUpdateとafterUpdate

更新サイクルにフックし、リアクティブな変更の前後でDOMを確認または変更します。

「beforeUpdateとafterUpdate」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。

実行されるタイミング

beforeUpdateはリアクティブな更新がDOMに反映される前に実行され、afterUpdateはその直後に実行されます。

使用例

変更前にDOMのサイズを読み取り、変更後にスクロール位置を調整するために使用します。

チャットの自動スクロール

よくある用途は、ユーザーがすでに最下部にいる場合に限り、チャットを最下部まで自動スクロールすることです。

let div, autoscroll;
beforeUpdate(() => {
  autoscroll = div && (div.scrollTop + div.offsetHeight >= div.scrollHeight - 20);
});
afterUpdate(() => {
  if (autoscroll) div.scrollTo(0, div.scrollHeight);
});

頻繁に実行される処理

これらのコールバックは更新のたびに実行されます。処理は高速に保ってください。

サーバーでの動作

SSR中には実行されません。ブラウザー専用の処理として扱ってください。

慎重に組み合わせる

beforeUpdateで保存した状態をafterUpdateで適用すると、計測してから適用するパターンを実現できます。

ほとんどのロジックには使用しない

ほとんどのロジックはリアクティブ文やアクションに記述します。これらはDOMの計測に限って使用してください。

実行順序

更新ごとの順序は、リアクティブ文 -> beforeUpdate -> DOMの更新 -> afterUpdateです。

初回マウント

どちらも後続の更新だけでなく、初回マウント時にも実行されます。初回実行を考慮してください。

bind:thisと組み合わせる

計測するにはDOM要素への参照が必要です。bind:thisを使用してください。

tickという代替手段

変更後に一度だけ計測する場合は、await tick()のほうが読みやすいことがあります。

クイックチェック

afterUpdateはいつ実行されますか。

まとめ

beforeUpdateは変更前の状態を取得し、afterUpdateは更新直後のDOMを読み取ったり変更したりします。

よくある質問

「beforeUpdateとafterUpdate」レッスンは無料ですか？

はい。「beforeUpdateとafterUpdate」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。

「beforeUpdateとafterUpdate」で何を学びますか？

更新サイクルにフックし、リアクティブな変更の前後でDOMを確認または変更します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Sveltejs Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「beforeUpdateとafterUpdate」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSveltejs Academyレッスンでコードを書いて実行できますか？

はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. onMount：レンダリング後の処理
  2. onDestroy：クリーンアップ
  3. beforeUpdateとafterUpdate
  4. tick()：DOM更新を待機する
← Sveltejs Academyに戻る