今更感がありますが、久しぶりにSvelteについて調べて見るとTypeScriptがサポートされていたので、環境構築(TypeScript + scss + eslint)をやってみたいと思います。

Svelteとは

Svelte(スベルト)とはReact、Vueに代表されるフロントエンド向けのUIフレームワークで、以下のような特徴があります。

少ない記述量でコードが書ける

Svelteではコードの読みやすさにフォーカスし、ボイラープレートを排除できるような仕組みを提供しています。
公式サイトのブログではReact、Vueとのコード量の比較について書かれており、Reactだと442文字、Vueだと263文字で書かれたコードをSvelteで145文字で書いています。

実はフレームワークではなくJavaScriptのコンパイラ

React、Vueがフレームワークとして動作するのに対し、SvelteはJavaScriptのコンパイラとして、動作します。最適化されたコードが生成されるため、コードのサイズが小さくなり、軽量かつ高速に動作します。

非仮想DOM

React、Vueでは仮想DOMという仕組みを使用し、リアクティブなUIを実現していますが、Svelteでは仮想DOMは使わず、前述のコンパイラの仕組みの中でコードを解析し、リアクティブ化すべき箇所を把握しています。

公式サイトのブログはこちら。

学習コストが低い

Svelteは構文的にはVueにとても良く似ていますので、Vueを触った事がある人であればすんなり使えるようになると思います。
ただ、JavaScriptの標準文法をハックしたような文法がちらほらあり、若干気持ち悪さも感じますが、慣れですかね・・・

アプリケーションの生成

Svelteの作者のRich-Harrisさんが開発しているdegitというツールを使ってアプリケーションの雛形を生成します。

$ npx degit sveltejs/template svelte-app

コマンドを実行するとアプリケーションの雛形が生成されます。

TypeScriptを使えるようにする

$ cd svelte-app
$ node scripts/setupTypeScript.js
Converted to TypeScript.

コマンドを実行し、Converted to TypeScript.と表示されればOKです。

ここで一旦ライブラリのインストールを行います。

$ npm i

SCSSを使えるようにする

$ npm i -D sass

ライブラリのインストールだけでOKです。

Eslintの導入

まずはEslintのセットアップを行います。

$ eslint --init
✔ How would you like to use ESLint? · problems
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · none
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser, node
✔ What format do you want your config file to be in? · JavaScript

公式でEslintのpluginが提供されていますので、インストールします。

$ npm i -D eslint-plugin-svelte3

eslintrc.jsを編集します。

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "svelte3", // 追加
        "@typescript-eslint"
    ],
    // 追加
    overrides: [
        {
            // files: ["*.svelte"], 公式ではこう書かれているがディレクトリ内のファイルが対象にならないため、修正
            files: ["**/*.svelte"],
            processor: "svelte3/svelte3",
        }
    ],
    settings: {
        "svelte3/typescript": () => require("typescript"), // 追加
        "svelte3/ignore-styles": (attributes) => attributes.lang && attributes.lang === "scss", // 追加
    },
    "rules": {
    }
}

アプリケーションの起動確認

ここまででSvelteの雛形アプリケーションにTypeScriptとscssが使えるようになりました!

$ npm run dev

> svelte-app@1.0.0 dev
> rollup -c -w

rollup v2.57.0
bundles src/main.ts → public/build/bundle.js...
LiveReload enabled
created public/build/bundle.js in 818ms

[2021-09-28 23:06:26] waiting for changes...

> svelte-app@1.0.0 start
> sirv public --no-clear "--dev"


  Your application is ready~! 🚀

  - Local:      http://localhost:5000
  - Network:    Add `--host` to expose

localhost:5000にアクセスし、下記画面が表示されればOKです!

まとめ

今回はアプリケーションの雛形が完成しましたので、次回からはSvelteの色々な機能を検証していきたいと思います。

最後までお読みいただき、ありがとうございました。

Svelte環境構築(TypeScript + scss + eslint)