DOM要素参照のbind:this
命令型の操作に使用するDOMノードへの参照を取得します。
「DOM要素参照のbind:this」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
DOM 参照の取得
bind:this を使って DOM 要素への参照を取得します。React の useRef と似ています。
宣言とバインド
変数を宣言してから、バインドします。
<script>
let inputEl;
</script>
<input bind:this={inputEl} />マウント後に利用可能
コンポーネントがマウントされるまで、参照は null です。安全にアクセスするには onMount を使用します。
<script>
import { onMount } from "svelte";
let inputEl;
onMount(() => inputEl.focus());
</script>命令的なメソッド
focus() や scrollIntoView() などの DOM メソッドを呼び出したり、メディアを再生したりできます。
function play() { audioEl.play(); }レイアウトの読み取り
サイズの測定には getBoundingClientRect() を使用します。直前に変更を加えた場合は tick() でラップします。
コンポーネント参照
bind:this は Svelte コンポーネントにも使用できます。変数にはコンポーネントのインスタンスが保持されます。
<MyComp bind:this={comp} />コンポーネントメソッドの呼び出し
コンポーネントから export function でエクスポートしたメソッドは、参照を通じて呼び出せます。
複数の要素
リストでは参照を配列に集めることもできますが、代わりに actions の使用を検討してください。
避けるべき場合
可能な限り、命令的な refs よりも宣言的なバインディングとリアクティブな状態を優先してください。
クリーンアップ
要素がアンマウントされると、参照は null になります。古い参照を使わないようにしてください。
Actions との組み合わせ
繰り返し使う DOM パターンは、bind:this を使う代わりに Svelte action にカプセル化します。
クイックチェック
バインドされた要素はいつ使用できますか。
まとめ
bind:this は DOM またはコンポーネントへの参照を公開します。マウント後、onMount から命令的な操作に利用できます。
よくある質問
「DOM要素参照のbind:this」レッスンは無料ですか？
はい。「DOM要素参照のbind:this」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「DOM要素参照のbind:this」で何を学びますか？
命令型の操作に使用するDOMノードへの参照を取得します。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「DOM要素参照のbind:this」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。