nextTick() DOM 更新の完了を待つ
最終更新：2026-10-22
nextTick() DOM 更新の完了を待つ
nextTick() は、次の DOM 更新が完了した後に解決される Promise を返します。状態を変更した直後に最新の DOM を読みたいときに使います。
| グループ | グローバル API |
|---|---|
| 種類 | API |
| スコープ | グローバル |
| Vue バージョン | 3.0+ |
| SSR 対応 | 対応 |
📝 構文
await nextTick()
console.log(el.value.textContent) // すでに最新⚙️ 引数
| callback? | 任意のコールバック（新しいコードでは await を推奨） |
|---|
戻り値：Promise（DOM 更新後に解決）
▶ 例
以下のコードを編集して結果を確認しましょう：
出力：
Clicking confirms the DOM already shows the new value.💡 ポイント
ℹ️ 補足 Vue の DOM 更新は非同期のバッチ処理です。データを変更した直後に DOM を読むと古い値が返ります——これが nextTick が存在する理由です。
💡 ヒント 同じイベント内の複数のデータ変更は 1 回の更新にまとめられます。nextTick を 1 回待つだけで済みます。
⚠️ 注意 watchPostEffect で表現できる継続的な同期を、nextTick の積み重ねで実現しないでください。
🏷️ 関連グローバル API
💡 関連ケース
関連ケースは近日公開予定。
📚 関連チュートリアル
❓ よくある質問
Q データを変えたのに DOM を読むと古い値なのはなぜですか？
A 更新はマイクロタスクとしてバッチ処理されるためです。nextTick を 1 回待てば新しい DOM が見られます。
Q setTimeout との違いは？
A nextTick はマイクロタスクのタイミングで、より早く確実に動きます。setTimeout はマクロタスクで、タイミングを制御できません。
Q Composition API でも同じヘルパーを使いますか？
A はい。nextTick はグローバルに使え、スタイルを区別しません。
