LoginSignup
2
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-07-28

動機

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

ソースコード

Svelteのシンタックスハイライトがないので、
JavaScriptのハイライトを当てていて、若干おかしいですが..
こんなシンプルに書けるんですね:blush:
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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1