Svelte와 svelte-material-ui로 제법 도구를 만들어 보았는데 대체적으로 학습 원가가 0이었다

안녕하세요!
앞부분의 기술 진보는 정말 순식간에 변화무쌍하다.
JS 프레임 중 하나인'Svelte'는 1년 전께부터 인기를 끌었다.
여기.의 해외 사이트에 따르면 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와 리액트, HTML, CSS의 지식을 통해 만들어졌다.
리액트의 스테이트와 같은 Svelte 특유의 기능은 사용하지 않았다.
리액트를 조금 접한 사람이라면 튜토리얼을 하지 않아도 할 수 있다.
(나는 사실 강좌를 하는 것이 좋다고 생각한다.)

참조 링크

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