Svelteとsvelte-material-uiで割り算ツールを作ってみたらほぼ学習コスト0で作れた

こんにちは！
フロントエンドの技術進歩は目まぐるしく変化していますね。
JSフレームワークの一つ「Svelte」は一年前くらいから人気が高まっているようです。

こちらの海外サイトによると、2019年のReact, Vue.jsなど主要フレームワークの中で、
最も認知度が低く、最も関心度が高いJSフレームワークだそうです。

本記事用にJSフレームワーク「Svelte」で割り算ツールを作ってみました。
・Svelteがとっても簡単に書ける
・svelte-material-uiはいい感じ♪
これらのことがお伝えできればいいなと思います。

環境構築

Svelteプロジェクト作成

npx degit sveltejs/template svelte-sample
cd svelte-sample
npm install
npm run dev

svelte-material-uiの導入

こちら手順は必須ではありません。
CSSを書くのが面倒くさかったので、導入しました。笑

手順については、@hisayukiさんの記事を参考にしていただければと思います。
https://qiita.com/hisayuki/items/11e625c647cc421cbe86
@hisayukiさんありがとうございます。

割り算ツールの作成

App.svelteを開き、以下のように記述します。

<script>
        // svelte-material-uiのコンポーネントをimport
	import Button, {Labeln} from '@smui/button';
	import Textfield, {Input} from '@smui/textfield';
	import Card from '@smui/card';
	import HelperText from '@smui/textfield/helper-text/index';

        // 割られる数
	let dividend = '';
        // 割る数
	let divisor = '';
        // 結果
	let result = '';
        // CALUCULLATEボタンを押したときの処理
	function handleClick() {
		if (dividend && divisor) {
			if (!isNaN(Number(dividend)) && !isNaN(Number(divisor))) { {
				if (divisor != 0) {
					result = dividend / divisor;
				} else {
					alert('0で割ってはいけません。');
				}
			} else {
				alert('数字を入力してください。');
			}
		} else {
			alert('入力値が空白です。');
		}
	}
</script>

<main>
	<h1>割り算</h1>
	<div style="display:flex; flex-wrap: wrap;">
		<div>
			<Textfield variant="outlined" dense bind:value={dividend} label="割られる数" input$aria-controls="helper-text-dense-c" input$aria-describedby="helper-text-dense-c" />
			<HelperText id="helper-text-dense-c">例：1, 222, -33, 4321</HelperText>
		</div>
		<div style="padding: 15px;">
			÷
		</div>
		<div style="display: inline-block">
			<Textfield variant="outlined" dense bind:value={divisor} label="割る数" input$aria-controls="helper-text-dense-c" input$aria-describedby="helper-text-dense-c" />
		<HelperText id="helper-text-dense-c">例：1, 222, -33, 4321</HelperText>
		</div>
	</div>
	<Button on:click={() => {handleClick()}} variant="outlined"><Label>Caluculate</Label></Button><br/>
	<h2>Result</h2>
	<div class="card-number">
		<Card style="width: 210px;" padded>{result}</Card>
	</div>
</main>

完成したものがこちら

svelte-material-uiはいい感じです！
詳しくは▶︎こちら

所感

今回はほとんどJSとReact, HTML, CSSの知識で作れてしまいました。
ReactのStateのようなSvelte特有の機能は使用しませんでした。

Reactを少し触ったことある方であれば、チュートリアルをやらずとも作れてしまうと思います。
（本当はチュートリアルはやった方がいいと思いますが、、）

参考URL

https://note.com/kawa1228/n/n3a45fab21f99#fWe6h
https://qiita.com/hisayuki/items/11e625c647cc421cbe86