補間：{expression}
JavaScriptの式をSvelteのHTMLテンプレートに直接埋め込みます。
「補間：{expression}」はCoddyKit上の無料Sveltejs Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはSveltejs Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Sveltejs Academyコースには全4レッスンが含まれています。
波かっこ構文
波かっこで囲むと、マークアップ内に任意のJavaScript式を埋め込めます。
<p>Hello {name}!</p>数学と文字列
式には変数名以外も記述できます。計算、文字列の連結、メソッド呼び出しなどが可能です。
<p>{count + 1} items, formatted: {name.toUpperCase()}</p>属性の展開
HTML属性の中でも同じ構文を使用します。
<img src={imageUrl} alt={altText} />属性の短縮記法
属性と変数の名前が同じ場合は、短縮形式を使用できます。
<img {src} {alt} />真偽値属性
disabledのような真偽値属性には、truthyな値を渡します。{flag}をそのまま使用できます。
<button disabled={isLoading}>Save</button>属性のスプレッド
{...obj}構文を使うと、属性のオブジェクトを要素にスプレッドできます。
<input {...inputProps} />テキストとHTML
デフォルトでは、安全のために補間時のHTMLがエスケープされます。{@html ...}は、信頼できるコンテンツにのみ使用してください。
<div>{@html trustedHtml}</div>条件式
単純な分岐には、波かっこの中で三項演算子を使用できます。
<p>Status: {isOnline ? "online" : "offline"}</p>nullとundefined
式の評価結果がnullまたはundefinedの場合、Svelteは何も描画しません。
関数呼び出し
波かっこの中で関数を呼び出せますが、処理は軽量に保ってください。リアクティブな更新のたびに再実行されます。
<p>Total: {formatCurrency(amount)}</p>コメント
通常のHTMLコメントを使用します。コメントはレンダリング結果には表示されません。
<!-- This is a comment -->クイックチェック
テキストを安全に埋め込むにはどうすればよいですか。
おさらい
単一の波かっこで、テキストや属性内の任意の式を展開できます。記述を簡潔にするため、短縮記法やスプレッドも使用できます。
よくある質問
「補間：{expression}」レッスンは無料ですか？
はい。「補間：{expression}」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Sveltejs Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Sveltejs Academyコースには全4レッスンが含まれています。
「補間：{expression}」で何を学びますか？
JavaScriptの式をSvelteのHTMLテンプレートに直接埋め込みます。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Sveltejs Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのSveltejs Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。
「補間：{expression}」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このSveltejs Academyレッスンでコードを書いて実行できますか？
はい。すべてのSveltejs Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- script、template、styleの構造
- letによるリアクティブ変数
- 補間：{expression}
- 計算値：$:リアクティブ宣言