【ITニュース解説】Conditionals in Svelte — {#if}, {:else}, and Nesting Explained

Webアプリケーションを開発する際、ユーザーの状態や操作に応じて画面の表示内容を動的に変更する機能は不可欠である。例えば、ユーザーがログインしているか否かで表示するメッセージを切り替えたり、サーバーからデータを取得している最中に「ローディング中」という表示を出したりする必要がある。このように、特定の条件に基づいてUI（ユーザーインターフェース）の一部を表示または非表示にする技術を「条件付きレンダリング」と呼ぶ。

JavaScriptフレームワークであるSvelteでは、この条件付きレンダリングを直感的かつ簡潔に実装するための仕組みが用意されている。最も基本的な構文が {#if} ブロックである。これは、指定した条件式が真（true）と評価された場合にのみ、ブロックで囲まれたHTML要素を画面に描画する。例えば、ユーザーのログイン状態を管理する loggedIn という真偽値の変数を用意し、{#if loggedIn} と記述すれば、loggedIn が true のときだけ、そのブロック内の「おかえりなさい！」といった歓迎メッセージが表示される。この loggedIn 変数の値がボタン操作などによって false に切り替わると、Svelteは自動的にこの変更を検知し、表示されていた歓迎メッセージを画面から取り除く。このように、変数の状態と画面の表示が自動的に連動するのがSvelteの大きな特徴である。

しかし、{#if} ブロックだけでは、条件が偽（false）の場合に何も表示されないという問題がある。ログインしていないユーザーに対しては「ログインしてください」と促すなど、条件に合致しない場合の代替表示も定義したいケースが一般的である。そのために {:else} ブロックが用意されている。{#if} ブロックに続けて {:else} を記述することで、{#if} の条件が false の場合に {:else} ブロック内のコンテンツが表示されるようになる。これにより、UIが空白の状態になることを防ぎ、常に何らかの情報をユーザーに提供することが可能になる。

アプリケーションの状態は、常に「真か偽か」の二択で表現できるとは限らない。例えば、データの状態が「ローディング中」「取得成功」「取得失敗」の三つ以上に分かれる場合など、より多くの分岐が必要になる。このような複数の条件を扱うためには {:else if} を用いることができる。{#if status === 'loading'} のように最初の条件を記述し、続けて {:else if status === 'loggedIn'} のように二番目の条件を記述する。そして、どの条件にも当てはまらない場合の処理を最後の {:else} ブロックに記述する。この一連のブロックによって、変数が持つ複数の状態に応じて、きめ細かく表示内容を制御することが可能となる。

さらに複雑な条件分岐を実現するために、{#if} ブロックの内部に別の {#if} ブロックを配置する「ネスト（入れ子）」構造も利用できる。これは、ある条件が満たされた上で、さらに別の条件を判定したい場合に有効である。例えば、「ユーザーがログインしている」という外側の条件を満たした上で、さらに「そのユーザーが管理者権限を持っているか」という内側の条件を判定する、といった使い方ができる。これにより、「管理者向けの特別なメニュー」「一般ユーザー向けの通常メニュー」「未ログイン者向けの案内」といった、より詳細な表示分けが可能になる。ただし、ネスト構造が深くなりすぎるとコードの可読性が著しく低下するため、設計を工夫して過度なネストは避けるべきである。

Svelteで条件分岐を扱う上で、いくつかの注意点がある。一つ目は、JavaScriptにおける「truthy」と「falsy」という概念の理解である。条件式では、true という値だけでなく、0 以外の数値や空でない文字列なども「真」とみなされる（truthy）。逆に、false のほか、数値の 0、空文字列 ''、null、undefined などは「偽」として扱われる（falsy）。そのため、例えば {#if count} という条件式は、変数 count の値が 0 の場合は偽と判定され、ブロック内の要素は表示されないことを理解しておく必要がある。

二つ目は、Svelteの強力な特徴である「リアクティビティ」である。Svelte 5では $state という仕組みを使って変数を宣言すると、その変数の値が変更された際に、その変数を参照しているUI部分が自動で更新される。開発者はUIを再描画するための特別な命令を書く必要がなく、状態を管理することに集中できる。

最後にパフォーマンスについてだが、Svelteはコンパイラとして動作するため、開発者が書いた {#if} などの構文を、ビルド時に非常に効率的な素のJavaScriptコードに変換する。そのため、一般的な使用範囲であれば、条件分岐による表示の切り替えがアプリケーションの性能に悪影響を与えることを過度に心配する必要はない。これらの条件分岐の仕組みを正しく使いこなすことで、アプリケーションの状態に応じてUIを動的に変化させ、ユーザーにとって分かりやすく快適な体験を提供することが可能になる。これは現代的なWebアプリケーションを開発する上で不可欠な基礎技術である。