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