はじめに

この記事はAteam Brides Inc. Advent Calendar 2019　24日目の記事です。
エイチームブライズ新卒1年目の@oekazumaです。
この記事はHey!そこの君！ jQueryからSvelteへ乗り換えてみない？っていう感じのノリでサクサク書いていきます

Svelteって？

こちらを見ていいねして帰ってきてください
君はVue,Reactの次に来るSvelteを知っているか？

当記事では jQueryで書いたらこうなるけどSvelteで書いたらこうなるよ！Svelteの輪を広げようよ！をコンセプトに解説していきます。

ボタンをクリックして文字を入れ替える

jQueryの場合

jQuery


$(document).on('click', '#update', function() {
  $('#message').text('jQuery')
})

HTML


Hello <span id="message">World</span> !
<button id="update">change</button>

Svelteの場合

Svelte

<script>
    let message = 'World'
    function update() {
        message = 'Svelte'
    }
</script>

Hello { message }!
<button on:click={update}>change</button>

<記述量的にはそんなに変わらない感あるけど書き方のスッキリ度合いが違うね！

文字入力をリアルタイム取得し表示する

jQueryの場合

jQuery

$(function() {
  var $inputName = $('#input');
  var $outputName = $('#output');
  $inputName.on('input', function(event) {
    var value = $inputName.val();
    if (value) {
      $outputName.text(value);
    } else {
      $outputName.text('World');
    }
  });
});

<input id="input">
<p>Hello <span id="output">World</span>!</p>

Svelteの場合

<script>
    let name = '';
</script>

<input bind:value={name}>
<p>Hello {name || 'World'}!</p>

<svelteの書き方、気持ちがええっすね！これだけでほんまにええんか？ってレベルやん。

リストを追加と削除ができるようにする

jQueryの場合

jQuery

(function() {
  var list = [1, 2 ,3]

  $(document).on('click', '#add', function() {
    addItem(list.length+1)
    list.push(list.length+1)
  })
  $(document).on('click', '.remove', function(event) {
    $(event.target).parent().remove()
    updateLength()
    list = list.slice(0 ,list.length-1)
  })

  function init() {
    for (var i = 0; i < list.length; i++) {
      addItem(list[i])
    }
  }

  function addItem(name) {
    $('#list').append('<li>' + name + ' <button class="remove">remove</button></li>')
    updateLength()
  }

  function updateLength() {
    $('#length').text($('#list li').length)
  }

  init()
})()

HTML

<p>Length: <span id="length">0</span></p>
<ul id="list"></ul>
<button id="add">add</button>

Svelteの場合

Svelte

<script>
let list = [1, 2, 3]

function addItem() {
  list = [...list, list.length + 1]
}

function removeItem() {
  list = list.splice(0, list.length - 1)
}
</script>

<p>Length: { list.length }</p>
<ul>
  {#each list as item}
    <li> { item }
      <button on:click={removeItem}>remove</button>
    </li>
  {/each}
</ul>
<button on:click={addItem}>add</button>