Svelteのconsole.logの使い方
Svelteでconsole.logを使用する場合はJavaScriptのコードと同様にscript内にconsole.logを書けば良いのですが、HTML内に{console.log(foo)}のように書きたい場合もあります。
<script>
let promise
async function getProduct() {
const res = await fetch('https://dummyjson.com/products/1')
const json = await res.json()
if (res.ok) {
return json
}
}
promise = getProduct()
</script>
<h1>間違った結果</h1>
{#if promise}
{#await promise}
loading...
{:then data}
{console.log(data)}
商品名: {data.title}
{/await}
{/if}
しかし、このように書くとconsole.logがブラウザのConoleに表示されますが、画面上にundefinedが表示されてしまいます。
これはconsole.logの実行後にundefinedが返されるためです。
document.querySelector('h1').innerHTML = console.log(1) でundefinedが表示されるのと同じ理屈です。
ページ上にundefinedが表示されないようにするには以下のように括弧で囲んで、カンマで区切ったあと空文字を入力します。
<script>
let promise
async function getProduct() {
const res = await fetch('https://dummyjson.com/products/1')
const json = await res.json()
if (res.ok) {
return json
}
}
promise = getProduct()
</script>
<h1>正しい結果</h1>
{#if promise}
{#await promise}
loading...
{:then data}
{(console.log(data), '')}
商品名: {data.title}
{/await}
{/if}
ちなみに実行を一時停止してConsoleで確認したい場合は、{@debug data}タグを使用します。
{#if promise}
{#await promise}
loading...
{:then data}
{@debug data}
商品名: {data.title}
{/await}
{/if}
