Svelte×TypeScriptでJSPrimerのTodoアプリを書いてみた。

動機

色んな技術に興味はあるが、
実際に手を動かすということが全く出来ていないので、
勉強がてらJSPrimerのTodoアプリをSvelteで書いてみました。

ソースコード

Svelteのシンタックスハイライトがないので、
JavaScriptのハイライトを当てていて、若干おかしいですが..
こんなシンプルに書けるんですね
storeの使用はしていないです。
export部分やindex.htmlは割愛してます。

App.svelte

<script type="ts">
    class Todo {
        id: number;
        title: string;
        isComplete: boolean;
        constructor(id: number, title: string, isComplete: boolean) {
            this.id = id;
            this.title = title;
            this.isComplete = isComplete;
        }
    }

    let id: number = 0;
    let todo: string = '';
    let todos: Array<Todo> = [];

    const addTodo = (): void => {
        id += 1;
        let newTodo = new Todo(id, todo, false);
        todos = [...todos, newTodo];
        todo = '';        
    }
    const deleteTodo = (todo: Todo): void => {
        todos = todos.filter(t => t !== todo);
    }
</script>

<svelte:head>
    /*
        Copyright (c) 2016-present jsprimer project
        Code released under the MIT license
        https://jsprimer.net/use-case/todoapp/final/final/index.css
    */
    <link rel="stylesheet" href="https://jsprimer.net/use-case/todoapp/final/final/index.css" />
</svelte:head>

<div class="todoapp">
    <form on:submit|preventDefault={addTodo}>
        <input
            class="new-todo"
            type="text"
            placeholder="What need to be done?"
            autocomplete="off"
            bind:value="{todo}"
        />
    </form>
    <div class="todo-list">
        <ul>
            {#each todos as todo}
                <li>
                    <input type="checkbox" bind:checked={todo.isComplete}>
                        {#if todo.isComplete}
                            <s>{@html todo.title}</s>
                        {:else}
                            {@html todo.title}
                        {/if}
                        <button class="delete" on:click={() => deleteTodo(todo)}>x</button>
                </li>
            {/each}
        </ul>
    </div>
    <footer class="footer">
        <span>Todoアイテム数: {todos.length}</span>
    </footer>
</div>

<style>
</style>

今後

Todoのモデルは外部クラスに切り出す等、
まだまだ洗練の余地はあると思う..
TodoMVC にはフィルター機能もあるので付けられたら良き。

TypeScriptの扱いもまだまだなので、
これからも実際に手を動かすということを大事にしていきたい。

SvelteやRustでWebアプリを作りたいと思う今日この頃。

ESbuildの使用についても記載されているので余力があれば試す。
https://github.com/sveltejs/svelte-preprocess/issues/177

参考

JavaScript Primer
Svelte公式
TypeScript公式
TypeScript Deep Dive 日本語版
rollup.js