0Pricing
Sveltejs Academy · レッスン

{#if} {#else if} {#else}

JavaScriptの式に基づいてマークアップを条件付きでレンダリングします。

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

条件ブロック

Svelte の条件分岐は Handlebars に似ています。{#if}、{:else if}、{:else} を使い、{/if} で閉じます。

基本例

boolean 式に応じて、いずれか一方の分岐を表示します。

{#if loggedIn}
  <p>Welcome back!</p>
{:else}
  <p>Please sign in.</p>
{/if}

複数の分岐

複数の条件には、{:else if} をつないで使用します。

{#if score > 90}
  <p>A</p>
{:else if score > 75}
  <p>B</p>
{:else}
  <p>C</p>
{/if}

式は JavaScript

条件には、JavaScript で有効な任意の式を指定できます。

{#if items.length > 0 && !isLoading}

閉じタグ

必ず {/if} で閉じてください。閉じ忘れはコンパイルエラーになります。

ネストした if

条件分岐は、他の Svelte ブロックや HTML の内部に自由にネストできます。

{#if user}
  {#if user.admin}
    <Admin />
  {/if}
{/if}

switch はない

Svelte には組み込みの switch ブロックはありません。{:else if} を連ねるか、変数を計算してください。

each との組み合わせ

リストを条件ブロックで囲み、項目がある場合だけレンダリングできます。

{#if items.length}
  {#each items as item}<li>{item}</li>{/each}
{/if}

内部のリアクティブ性

条件はリアクティブです。依存する値が変わるたびに、Svelte が再評価して分岐を切り替えます。

if でのアニメーション

if ブロック内の要素に transition: ディレクティブを追加して、表示と非表示をアニメーションさせられます。

空の分岐

else のない if ブロックも作成できます。else は省略可能です。

確認問題

Svelte の if ブロックはどのように閉じますか？

復習

条件付きレンダリングには {#if}／{:else if}／{:else}／{/if} を使用します。式には通常の JavaScript を記述します。

よくある質問

「{#if} {#else if} {#else}」レッスンは無料ですか？

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

「{#if} {#else if} {#else}」で何を学びますか？

JavaScriptの式に基づいてマークアップを条件付きでレンダリングします。 ブラウザで直接実行するハンズオンコードでSveltejs Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「{#if} {#else if} {#else}」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. {#if} {#else if} {#else}
  2. インデックスとキーを使った{#each}
  3. 再レンダリングを強制する{#key}
  4. ネストした{#each}とキー付き更新
← Sveltejs Academyに戻る