Svelte 環境構築まとめ #JavaScript

はじめに

Svelte は、React や Vue.js の先を行く新たな UI フレームワークです。……と聞くと、またか、と思われた方も多いかもしれません。

従来のフレームワークとの比較で言えば、React が生の JavaScript で UI を作るという方向性だったのに対し、Svelte はテンプレートをコンパイルして Virtual DOM 形式の UI を持つ Javascript ソースコードを生成する戦略をとっているという違いがあります。Vue.js をご存知の方であれば .vue ファイルに特化して計量化したフレームワークと考えると理解しやすいかもしれません。

React は単純であるが故に簡単ではない部分ではありましたが、Svelte では従来は煩雑だった様々な部分がテンプレートで隠蔽され直感的に理解しやすくなっています。

本稿では、Svelte の環境構築方法について説明します。なお、Svelte 2 以降では ES6 のソースコードを出力するため、そのままでは IE11 に動作しませんが Babel を通すことで対応可能です。¹

前提条件

前提条件として必要な作業を記載しています。Node.js での開発ではありきたりな内容ですので、Svelte についてだけ読みたい人はSvelte の初期設定まで飛ばして頂いて構いません。

nodejs のインストール

nodejs 8系（LTS）が入っていることを前提としています。Windows ユーザーであれば、scoop を導入し、 nodejs-lts をインストールするのが簡単です。

scoop install nodejs-lts

package.json の作成

nodejs 用のプロジェクトを用意します。

mkdir [プロジェクト名]
cd [プロジェクト名]
npm init

プロジェクト情報の設定が終わったら、ソースコードや静的コンテンツを格納するフォルダも作っておきましょう。

mkdir src    # ソースコード格納フォルダ
mkdir public # 画像など静的コンテンツの格納フォルダ

webpack のインストール

また、ビルドツールとして webpack を使います。npm で webpack をインストールしてください。²

npm install --save-dev webpack webpack-cli webpack-dev-server

webpack.config.js の作成

webpack の設定ファイルを用意します。webpack4 以降では無設定でもある程度のことはできますが、実用的ではなく結局必要になるのであえて用意します。Svelte の設定については、後でこのファイルに追加していきますので、ここでは記載していません。

webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 入り口となる HTML を生成するプラグイン

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        path: path.resolve(__dirname, '/dist'),
        filename: '[name].js'
    },
    plugins: [
        new HtmlWebpackPlugin()
    ]
};

package.json への起動コマンドの追加

package.json に webpack の起動コマンドを追加します。ここで記載したコマンドは、npm run に続けて記述することで実行できます。npm run start で開発モードでサーバーを起動、npm run build でリリース用の js ファイルを生成します。

  "scripts": {
    "start": "webpack-dev-server --mode development --hot --open --content-base public",
    "build": "webpack --mode production"
  }

Svelte の初期設定

svelte のインストール

npm で svelte を install します。³

npm install --save-dev svelte svelte-loader

svelte-loader 設定の追加

webpack.config.js に svelte-loader の設定を行います。svelte-loader は、svelte のテンプレートファイルを読み込み javascript に自動的に変換してくれます。

webpack.config.js

  module: {
      rules: [
          {
              test: /\.html$/,
              include: path.resolve(__dirname, './src'),
              use: [
                  {
                      loader: 'svelte-loader'
                  }
              ]
          }
      ]
  },

Svelte を使ったコードの追加

src フォルダに Svelte のテンプレートファイルとそれを呼び出しDOMに接続する index.js を作成します。

App.html

<div>Hello {name}!</div>

index.js

import App from './App.html';

window.app = new App({
    target: document.body,
    data: {
        name: 'world'
    }
});

それでは、開発サーバを起動しましょう。

npm run start

webpack-dev-server の起動時に --open オプションをつけているため、ブラウザが自動的に起動します。

それでは、Svelte の開発者コンソールを開き、name を変更してみましょう。

app.set({ name: 'Svelte' })

表示が変わったことが確認できるかと思います。

このように Svelte では HTML 形式のテンプレートファイルを書くだけで、React で作っていたような画面が簡単に作成できるのがわかると思います。

IE11対応については「Svelte をIE11で動作させる」に書きましたので参考にしてください。 ↩
webpack-cli は webpack をコマンドラインから起動するために必要です。webpack-dev-server は webpack 用の開発専用 Web サーバです。 ↩
svelte-loader は webpack 用の svelte ローダー拡張です。webpack を使わない場合は不要です。 ↩