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

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

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

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

Svelte.jsとは？

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

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

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

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

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

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

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

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

開発環境の構築

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

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

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

プロジェクトの作成

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を実行すると下記のようなページがローカル環境で立ち上がります。

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

ファイル構成

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

index.htmlでmain.jsを読み込んでいます。

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ファイルを読み込んでいます。

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で読み込んで実際の表示部分が実装されています。

表示を変更したい時はこちらのファイルを編集することが多くなりそうです。

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>

カウンターのコンポーネントはシンプルです。

lib/Counter.svelt

<script>
  let count = 0
  const increment = () => {
    count += 1
  }
</script>

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

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

Svelteでのコーディング

弊社サイトのパーツを一部再現することにしました。

所感

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

Form.svelte

<script>
  import Button from './Button.svelte';
  import Comparison from '../assets/form.png';
</script>

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

Button.svelte

<button class="button">
  <span class="button-label">無料</span>
  <p>見積もりスタート</p>
</button>

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

Button.svelte

<button class="button">
  <span class="button-label">無料</span>
  <p>見積もりスタート</p>
</button>

<style>
  .button {
  }

  .button-label {
  }
</style>

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

まとめ

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

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

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

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