Svelte3×TypeScriptで湯婆婆を実装してみた。

1.出来上がったもの

【Svelteで湯婆婆を実装してみる】
https://d3uk6e6cymx8dm.cloudfront.net

つたない出来ですが、最終的に改名されます。

GitHub
https://github.com/TakuyaShirosaka/SvelteYubaba

2.実装に当たり意識したこと

・TypeScriptでの実装

// テンプレートプロジェクトの作成
npx degit sveltejs/template svelte-app
cd svelte-app

// 下記スクリプトを実行すればTypeScriptが使用できる
node scripts/setupTypeScript.js

こんな感じに書ける

Document.svelte

<script lang="ts">
    import { onMount } from "svelte";
    import Confirm from "./Confirm.svelte";

    // props
    export let props_header: string;

    // const
    const src: string = "img/document.png";

    // reactive
    let myName: string = "";
    let visible: boolean = false;
    let input_disabled: boolean = false;

    function inputValidate(e: FocusEvent) {
        const target: HTMLInputElement = e.target as HTMLInputElement;
        const value: string = target.value;
        console.dir("inputValidate-value:" + target.value);

        if (value.length > 0) {
            visible = true;
        } else {
            visible = false;
        }
    }

ちなみにspa-routerなどを使用せずにマルチページ(MPA)にするには

rollup.config.js

export default [
    {
        input: 'src/main.ts',
        output: {
            sourcemap: true,
            format: 'iife',
            name: 'app',
            file: 'public/build/bundle.js'
        },
        ・・・・・・・
    },
    {
        input: 'src/about.ts',
        output: {
            sourcemap: true,
            format: 'iife',
            name: 'app',
            file: 'public/build/about.js'
        },
        ・・・・・・・
    }
]

のようにexport defaultの内容をテンプレートの物から上記のように配列で返すように私は修正しました。
各HTMLでは上記の設定で出力したJS/CSSを読み込むようにしておくこと。
何か他に良い方法があったらご指摘ください。

・Svelteの公式HP内にあるExampleで実装できるもの(外部ライブラリは極力使用しない)
https://svelte.dev/examples#hello-world

とても色んなパターンの例がありました。
大体のことはこれを参考にすれば実現できるのではないでしょうか？
今回の内容程度なら余裕です。

3.使ってみた感想

・普段Vue.jsを業務で使用することが多いのですが、
　お決まりの構文みたいなのをいちいち書かなくても直感的にパパっとかけるのは凄い楽。

・アニメーションの機能は奥が深い、例えばflyとかslideは:in :outで違うアニメーションは適用できるのか？？

・Storeの機能をもう少し触ったほうが良かったなぁと。後日一部Updateするかも。

・クロスブラウザの観点ではSvelteはどれだけ対応してくれてるのか？
　Mac(safari)では動作確認しておらず気になる。。。。