stateを使ってみよう

このページでは、生のJavaScriptにはない便利な機能、stateの使い方を見ていこうと思います。

stateとは

stateとは、値を変えるだけで、それを参照するHTML要素の内容も自動的に変わってくれる変数です。と言われてもなに言っているか分からないと思うので、ここから実際に書いていきましょう。

stateを使ってみる

前のページに引き続き、src/routes/+page.svelteの内容をいじっていきます。まず、scriptタグの中に、次のコードを追加してください。

let count = $state(0);

stateは、$state(初期値)という形で宣言します。イメージとしては、上のコードは、let count = 0;の特別な場合、といった感じです。

では、宣言をしたので、これを表示していきましょう。HTMLの部分に、次のコードを追加してください。前もお話したように、{}の中身はスクリプトとして扱われます。

<h1>現在のカウント:{count}</h1>

現在のカウント:0と表示されたと思います。これだけの内容では、stateを使わずに宣言しても同じ事ができます。stateの強みはここからです。この数を増やしていくボタンを作ってみましょう。HTMLの部分に次のコードを追加してください。

<button onclick={()=>{count = count + 1;}}>増やす</button>

(ここでもアロー関数式を使いました、やっていることはcount = count + 1;する関数を任意の名前で作成し、onclickに指定したのと同じです。)これで作成したボタンを押してみると、表示される数字が実際に増えると思います。これをstateなしで実現しようとすると、かなり大変になると思います。

stateには、文字列を指定することもできます。これを利用して、CSSをstateで変更することもできます。まず、以下のコードをscriptタグの中に追加してください。

let color = $state("red");

そしたら、以下のコードをHTMLの部分に追加してください。

<h1 style="color: {color}">色が変わります</h1>
<button onclick={()=>{color = "red";}}>赤に変える</button>
<button onclick={()=>{color = "blue";}}>青に変える</button>

ボタンを押したら色が変わるようになったと思います。

注意点として、前回紹介したstyleタグの中身は、stateで変更することはできません。つまり、

<style>
    h1{
        color: {color};
    }
</style>

とはできないということです。ただし、SvelteではCSSのクラスを普通に使うことができるので、それを利用して以下のようなことができます。

まずは以下のスクリプトを追加します。

let size = $state("small");

次に、styleタグの中にクラスを定義します。

<style>
    .small{
        font-size: 10px;
    }
    .big{
        font-size: 30px;
    }
</style>

そしたら、以下のHTMLを追加します。

<h1 class="{size}">大きさが変わります</h1>
<button onclick={()=>{size = "small";}}>小さくする</button>
<button onclick={()=>{size = "big";}}>大きくする</button>

クラスを変更することで、大きさを変更することができたと思います。