・0 pv・6 min read
Svelte 学習メモ ブロック編
こんにちは！
本日も引き続き、Svelteについての学習メモをしていきます。
本日は、ブロックについて。
#ifブロック
条件によってコンテンツの内容を変える事ができるようです！
<script>
let count = $state(0);
</script>
<button onclick="{() => count = count + 1}"> count: {count} </button>
{#if count > 0 }
<p>カウントが開始されました。</p>
{/if}同様にelseif, elseもあって、条件分岐できるっぽい。
<script>
let count = $state(0);
</script>
<button onclick="{() => count = count + 1}"> count: {count} </button>
{#if count < 10}
<p> カウントは10未満です。</p>
{:else if count >= 10 && count < 20}
<p> カウントは10以上20未満です。</p>
{:else}
<p> カウントは20以上です。</p>
{/if}プログラミングに慣れ親しんでたら、けっこうすぐに理解できそうですね。
#eachブロック
要素を繰り返して、処理する時に使うものです。
プログラムで言うと、for文の役割と同様ですね。
<script>
let fruits = [ "りんご", "バナナ", "みかん" ];
</script>
{#each fruits as fruit }
<p>{fruit}</p>
{/each}, をはさむことで、インデックスも指定できるようです！
<script>
let fruits = [ "りんご", "バナナ", "みかん" ];
</script>
{#each fruits as fruit, i }
<p>{i}: {fruit}</p>
{/each}こうすると、この通り、インデックスも表示されます。
連想配列の場合は、こんな感じになるようですね。
わたしの好きなタロットカードを例にしてあげてみました。
<script>
let cards =
[
{ no :'0', name : "The Fool", japanname:"愚者"},
{ no :'1', name : "The Magician", japanname:"魔術師"},
{ no :'2', name : "The High Priestess", japanname:"女教皇"},
{ no :'3', name : "The Empress", japanname:"女王"},
{ no :'4', name : "The Emperor" , japanname:"帝王"},
{ no :'5', name : "The Hierophant", japanname:"教皇"},
{ no :'6', name : "The Lovers", japanname:"恋人"},
{ no :'7', name : "The Chariot", japanname:"戦車"},
{ no :'8', name : "Strength", japanname:"力"},
{ no :'9', name : "The Hermit", japanname:"隠者"},
{ no :'10', name : "Wheel of Fortune", japanname:"運命の輪"},
{ no :'11', name : "Justice", japanname:"正義"},
{ no :'12', name : "The Hanged Man", japanname:"つるされた人"},
{ no :'13', name : "Death", japanname:"死神"},
{ no :'14', name : "Temperance", japanname:"節制"},
{ no :'15', name : "The Devil", japanname:"悪魔"},
{ no :'16', name : "The Tower", japanname:"塔"},
{ no :'17', name : "The Star", japanname:"星"},
{ no :'18', name : "The Moon", japanname:"月"},
{ no :'19', name : "The Sun", japanname:"太陽"},
{ no :'20', name : "Judgement", japanname:"審判"},
{ no :'21', name : "The World", japanname:"世界"},
];
</script>
<style>
li { list-style: none;}
</style>
# 大アルカナ
<ul>
{#each cards as {no, name, japanname}}
<li> {no}: {name} : {japanname} </li>
{/each}
</ul>すると、結果はこんな感じ。
一気に描画できるのは便利！
#awaitブロック
Promiseの非同期処理を待つもののようですね。
フィールドに書かれたURLのものからjsonデータを取得します。
jsonデータは、JSONPlaceholderのデータを使用しました。
<script>
import Input from "./Input.svelte";
let url = "https://jsonplaceholder.typicode.com/posts";
let promise = $state(getData(url));
async function getData(url)
{
const res = await fetch(url);
const text = await res.json();
if( res.ok )
{
return text;
}
else
{
throw new Error(text);
}
}
function handleClick()
{
promise = getData(url);
}
</script>
<button onclick="{handleClick}">再取得</button>
<Input bind:text={url} />
{#await promise}
<p>...waiting</p>
{:then value}
{#each value as item }
<p >{item.id}:{item.title}</p>
{/each}
{:catch error}
<p style="color: red">{error.message}</p>
{/await}Input.svelte
<script>
let { text=$bindable() } = $props();
</script>
<input type="text" bind:value={text} />正しく取得されるとこんな感じ
うまく取得できないとこうなります。
#keyブロック
keyの中の値が変化した時に、一旦その内容を破棄して、再生成するものみたいです。
どういう時に、効果を発揮するかというと、トランジションの再生をする時に、結構便利に使えるみたいですね。
transitionは、transition:トランジション名のように使えるようです。
これでトランジションが利くのも便利！
<script>
import { slide } from "svelte/transition";
let name = $state("world");
</script>
<input type="text" bind:value={name} />
{#key name}
<div transition:slide>{name}</div>
{/key}今日の学習はここまで。
Svelte、まだまだ奥が深そうです…！