ロゴ ロゴ

Svelteはいいぞ

まえがき

さて春休みもそろそろ後半戦，温度は少し上がり，桜もつぼみが膨らんで，いよいよ春の訪れを感じます．ちなみに私は研究関連の開発がひと段落して，学会も終わったので，少し解放的な気分でブログを執筆しております．どうもウグイスです．

今回はWebのフロントエンドのUIフレームワークであるSvelteが楽しかったので，紹介していこうという趣旨のブログになります．

前回のブログとかでもちらほら触れていたんですが，最近研究の一環で，Webアプリのバックエンドとフロントエンドを作成しています．バックエンドは何回か使ってるFlaskを使って書いているだけなので特にブログにしたいこととかはなかったです．

ただフロントエンド側の技術はあまり触れたことがなかったので，今回いろいろ調べたり触ったりしてみて，svelteがお肌に合ったのでちょっと紹介してみようかなといった感じです．

Vueも触ってみたんですが，ちょっとお肌に合わなかったんですよね，というか新旧の情報が錯綜していて，調べる過程が苦痛でした．

そういう意味ではSvelteも新旧の情報が飛び交っているんですが，そもそもが理解しやすいので，あまり苦痛ではなかったです．

ちょっと前置きが長くなりましたが，まずは触ってみましょう．

先に予防線を張らせてもらいます．筆者はフロントエンド技術については経験がない人間です．何が言いたいかというと，このブログの内容はフロント経験がない人間の意見であり，深い洞察とか細かい技術仕様の話とかはないです．

以上を理解して，浅い気持ちで以降を読み進めていただけるといいと思います．

svelteとは

Webアプリのフロントエンドライブラリです．特定の記法で書かれた.svelteファイルをコンパイルすることで，適切なJSやCSSに変換することができるそうな．

特徴としては仮想DOMを使わないことで，差分検知といった処理がないだけ軽いとかなんとか．まあすごいらしい

で，今回はsvelteを使用したアプリケーションのフレームワークであるsvelte kitを使用していこうかといったところです．

使ってみる

プロジェクトの作成

公式のプロジェクト作成ページ

まずはプロジェクトの作成を行います．基本的にsvelteはドキュメントがしっかりしている印象があります．フロントに疎い私でも何とか進めることができました．

適当な開発ディレクトリで，以下のコマンドをたたきます．(my-appは自分のお好みの名前で)

npx sv create my-app
cd my-app
npm install
npm run dev

これで開発用サーバが立ち上がります．ちなみに公式はvscodeとsvelte extensionの利用を推奨しています．特に宗教等で使わない人以外は使うといいと思います．

npx sv createの時にいろいろ聞かれますが，とりあえずよくわからないので，minimalな感じでJSで入れてみました．よくわかる人はいい感じにセットアップできるんでしょう．

ディレクトリ構成

基本的にsrc以下にファイルを追加していきます．src/lib以下にjsファイルとsvelteファイルを置きます．こちらは複数のページから参照されるようなファイルを置く想定なんでしょうね．src/lib/server以下に置いたファイルはserver側でしか使えないです．私はSSG目的なので使わないのですが，svelteでアプリを完全に作るとなると必要なんでしょう．

route以下に実際のページを構成するファイルを置きます．

route直下に+page.svelteがあると思います．これが/に当たります．例えば，適当なディレクトリを作ってその下に+page.svelteを置くと，/ディレクり名にページが作られるみたいな感じかな？ちょっとうまい言葉が見つからない

また，static以下に静的ファイルをおきます．画像ファイルとかです．デフォルトではfavicon.pngがあります．ちなみにSSGでビルドするときはstaticにあるのはそのままビルドに含まれるので，ここにアプリで必要ないファイルは置いちゃダメです．

基本的にはいじるのは上の3つの場所になるのかなと思います．

基本的なsvelteファイルの作り方

基本的には<script></script>の間にスクリプトを書き，それ以下にHTML要素とstyleを記述するという，とてもHTMLな書き方をします．

なんというか個人的にはJinjaとかのテンプレートエンジン味を感じます．それもあってすごい書いていてしっくりくる．

Template Syntaxというものがあり，これまたテンプレートエンジン味があって素晴らしい．

とりあえず，実物を見たほうが早いということで試しのサンプル行ってみましょう．

と言いたいところですが，せっかくサンプルプログラムを書くなら一応アプリっぽいものでもということで，試しに以下のAPIを使ってみました．

Public Holiday Api

https://date.nager.at/Api

サンプルプログラム

<script>
    import { resolveRoute } from "app/paths";
    import { onMount } from "svelte";

    const host = "https://date.nager.at"

    let getCountryList =state("")
    let selectedCode = state()
    let fetchPromise =state("")

    async function fetchHolidays(code) {
        return (await fetch(`{host}/api/v3/publicholidays/2025/{code}`)).json()
    }

    onMount(() => {
        getCountryList = fetch(`{host}/api/v3/AvailableCountries`).then(v => {return v.json()})
    })effect(() => {
        if (selectedCode) { fetchPromise = fetchHolidays(selectedCode) }
    })
</script>

<h1>世界の祝日に関する適当なアプリ</h1>

<h2>国選択</h2>

{#await getCountryList}
    <p>now loding...</p>
{:then result} 
    <label>
        国：
        <select bind:value={selectedCode}>
            {#each result as country}
                <option value={country.countryCode}>{country.name}</option>
            {/each}
        </select>
    </label>
{:catch}
    <p>APIが使えません</p>
{/await}

<h2>祝日一覧</h2>

{#await fetchPromise}
    <p>now loding!!!!!!</p>
{:then result} 
    {#each result as holiday}
        <p>{holiday.localName}</p>
    {/each}
{:catch error}
    <p>{error}</p>
{/await}

適当に作ってみました．まずapiから選択できる国一覧をGETしてきて，selectに突っ込みます．

そして，selectのvalueをbindしているので，selectの内容が変化するたびに，effectが発火して，選択された国の祝日一覧を書き出す感じです．

一切触れてなかったんですが，stateはリアクティブな変数を作成できる感じです．その変数が変更された場合UIに反映される状態になります．

あとがき

もう少ししっかりと書くつもりでしたが，ちょっと疲れてきたのと，キリがいいのでいったん切ります．続きはそのうち書く．

個人的にはしっくり来ています．私自身はフロントを積極的にはやるつもりはないですが，ちょっとしたフロントが欲しい時のいい感じの選択肢にはなりました．

続きを書くなら，実際にビルドするところまでブログにできたら面白いですね．

ここまでご精読ありがとうございます．また次回お会いしましょう．ウグイスでした．

コメント入力

関連サイト