Svelteとは？お手軽って聞いたけど本当？基本的なところはおさえておきたい。

Svelte.js聞いたことはありましたが、これまで全く触ったことがありませんでした。
良い機会だと思って、どんなものなのか？何がいいのか？など概要を人に説明できるぐらいになれるようにインプットしたいと思います！

:::note info
【こんな方にオススメ！】
・Svelte.jsについてなにも知らない人
・Svelte.jsを触ってみたいと思っている人
:::

いろんなフレームワークがありますが、会話に混ざれる程度の知識を身につけることをゴールとしてインプットしていきます！

## Svelte.jsとは？
Svelte（スヴェルト）はJavaScriptフレームワークです。
`.svelte`という拡張子のファイルの中にコードを記述してコンパイルすることで動作します。

最大の特徴はReact.jsなどのライブラリと比べて**シンプルで、学習コストが低いこと**です。

デメリットとして挙げられるのが情報量の少ないことや小規模向けのフレームワークのため拡張性が高くないことがあげられます。

:::note info
2020年よりTypeScriptを公式にサポートするようになりました。
:::

Svelteはアプリケーション実行時ではなく、ビルド時にJavaScriptに変換されることも特徴の一つです。

https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started

チュートリアルをやっていこうと思います。

https://svelte.jp/tutorial/basics

チュートリアルを進めることで基本構文を学べました。

:::note warn
更新される変数は代入の左側に直接置かなければならない。と言う仕様があるようなので頭の片隅に置いておきたいと思います。
:::

## 開発環境の構築
開発を始める前にvscodeの拡張機能をインストールします。

https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode

一度も開発環境を構築したことないという方のためのガイドも用意してくれているので参考にしてください！

https://svelte.jp/blog/svelte-for-new-developers

私もこちらのチュートリアルに沿って環境を構築していきたいと思います。

### プロジェクトの作成
```
npm create vite@latest svelte -- --template svelte
```

`--template svelte`を`--template svelte-ts`に置き換えるとTypeScritpで開発できるようになります。

実行すると下記のように次のアクションを表示してもらいます。
```
Done. Now run:
  cd svelte
  npm install
  npm run dev
```
`npm run dev`を実行すると下記のようなページがローカル環境で立ち上がります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/9545741b-ed3d-02ca-fca5-fc40060dd155.png)

`npm run build`を実行するとプロダクションモードでビルドします。
`npm run preview`はプロダクションモードでビルドしたものを確認できます。

### ファイル構成
簡単に生成されたファイル構成を紹介しておきます。

`index.html`で`main.js`を読み込んでいます。
```html:index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Svelte</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
```

`main.js`では、`app.css`や`App.svelte`ファイルを読み込んでいます。
```javascript:main.js
import './app.css'
import App from './App.svelte'

const app = new App({
  target: document.getElementById('app'),
})

export default app
```

`App.svelt`ではlibフォルダで定義したcounterや画像をimportで読み込んで実際の表示部分が実装されています。

表示を変更したい時はこちらのファイルを編集することが多くなりそうです。
```javascript:App.svelt
<script>
  import svelteLogo from './assets/svelte.svg'
  import Counter from './lib/Counter.svelte'
</script>

<main>
  <div>
    <a href="https://vitejs.dev" target="_blank" rel="noreferrer">
      <img src="/vite.svg" class="logo" alt="Vite Logo" />
    </a>
    <a href="https://svelte.dev" target="_blank" rel="noreferrer">
      <img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
    </a>
  </div>
  <h1>Vite + Svelte</h1>

  <div class="card">
    <Counter />
  </div>

  <p>
    Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
  </p>

  <p class="read-the-docs">
    Click on the Vite and Svelte logos to learn more
  </p>
</main>

<style>
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.svelte:hover {
    filter: drop-shadow(0 0 2em #ff3e00aa);
  }
  .read-the-docs {
    color: #888;
  }
</style>
```

カウンターのコンポーネントはシンプルです。
```javascript:lib/Counter.svelt
<script>
  let count = 0
  const increment = () => {
    count += 1
  }
</script>

<button on:click={increment}>
  count is {count}
</button>
```

次は実際にコーディングしてみたいと思います。

## Svelteでのコーディング
弊社サイトのパーツを一部再現することにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/146612/44984047-519f-96b4-c252-daaffa8764c6.png)

### 所感
これまでReactやVueに触れたことがある人なら感覚的にコンポーネントに分けてコーディングできます。
`Form.svelte`を`lib/`の配下に作成して`Buttom.svelte`を読み込ませてみます。

```javascript:Form.svelte
<script>
  import Button from './Button.svelte';
  import Comparison from '../assets/form.png';
</script>

<form action="">
  <Button />
</form>
```

```javascript:Button.svelte
<button class="button">
  <span class="button-label">無料</span>
  <p>見積もりスタート</p>
</button>
```

styleは作成したファイルの一番下に追加します。

```javascript:Button.svelte
<button class="button">
  <span class="button-label">無料</span>
  <p>見積もりスタート</p>
</button>

<style>
  .button {
  }

  .button-label {
  }
</style>
```

今回フレームワークの機能を使ったのはこれぐらいで、そのほかは通常のコーディングとなったので詳細は割愛します。

## まとめ
ReactやVueを学習していれば前提知識をほとんど必要ないと感じました。
もし、学習していなかったとしてもチュートリアルを実施すれば**問題なく開発ができると考えます。**

:::note info
フレームワークとしてはかなり学習コストが低いのではないかと考えています！
:::

修正もすぐビルドされるので「編集→保存」からの反映が早く開発体験も素晴らしいです。

今回は基本の学習でしたが、引き続き知識を深めたいと思います！