Hey！そこの君！ jQueryからSvelteへ乗り換えてみない？

# はじめに
この記事は[Ateam Brides Inc. Advent Calendar 2019](https://qiita.com/advent-calendar/2019/a-t-brides)　24日目の記事です。
エイチームブライズ新卒1年目の@oekazumaです。 
この記事はHey!そこの君！ jQueryからSvelteへ乗り換えてみない？っていう感じのノリでサクサク書いていきます:bullettrain_front:

# Svelteって？
こちらを見ていいねして帰ってきてください:blush:
[君はVue,Reactの次に来るSvelteを知っているか？](https://qiita.com/oekazuma/items/d3d97f78466be983b19f)

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

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

![tv8k2-c2fbw.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217487/170af06a-3ba4-e3e6-d44f-95b139d581d4.gif)



jQueryの場合

```js:jQuery

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

```

```html:HTML

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

Svelteの場合

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

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

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

# 文字入力をリアルタイム取得し表示する
![qnkl8-b7f1g.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217487/005c9581-3387-09e5-b654-d581b55c0c6a.gif)

jQueryの場合

```js: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');
    }
  });
});
```

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

Svelteの場合

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

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

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

# リストを追加と削除ができるようにする
![8z858-tvvob.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/217487/fd5d5fc9-b87d-ce62-2178-a7bd5ad9ed1c.gif)

jQueryの場合

```js: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:HTML
<p>Length: <span id="length">0</span></p>
<ul id="list"></ul>
<button id="add">add</button>
```

Svelteの場合

```vue: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>
```

:man_tone1:<Svelteはpush()とかsplice()での配列操作では画面の自動更新されないから若干違和感あるけどjQueryと比べたらすごくスッキリで気持ちいい！！

#さいごに
Svelte素晴らしくないですか？

:guardsman_tone1:<うんうん素晴らしいね！

jQueryを使っている君はSvelteに乗り換えたくなった？

:joy_cat:<泣くほど変えたくなったよ！

っというわけで明日はクリスマス:santa_tone2: [Ateam Brides Inc. Advent Calendar 2019](https://qiita.com/advent-calendar/2019/a-t-brides)　ラストを @okoshiが飾ってくれます！
楽しみにしてください！


# 私たちのチームで働きませんか？
![alt](https://brides.a-tm.co.jp/wp-content/uploads/2019/11/ATEAM_BRIDES.jpg)
[エイチーム](https://www.a-tm.co.jp/)は、インターネットを使った多様な技術を駆使し、幅広いビジネスの領域に挑戦し続ける**名古屋の総合IT企業**です。
そのグループ会社である**株式会社エイチームブライズ**では、一緒に働く仲間を募集しています！

- [ハナユメ サイト開発グループ](https://jobs.qiita.com/employers/brides-a-tm/development_teams/138)
- [HIMARI開発チーム](https://jobs.qiita.com/employers/brides-a-tm/development_teams/147)
- [技術開発部](https://jobs.qiita.com/employers/brides-a-tm/development_teams/148)

上記求人をご覧いただき、少しでも興味を持っていただけた方は、まずは**チャットでざっくばらんに話**をしましょう。
技術的な話だけでなく、私たちが大切にしていることや、お任せしたいお仕事についてなどを詳しくお伝えいたします！

[Qiita Jobs](https://jobs.qiita.com/)よりメッセージお待ちしております！