記事検索
購読 する ログイン

Svelte 3入門 第1回 Svelteの特徴

ReactやVue.jeとも違う、シンプルで新しいアプローチの開発ツール、Svelteを紹介します。まずはテンプレートを試してみましょう。

カテゴリー
UIフレームワーク >
Svelte

発行

著者 國仲 義則 フロントエンド・エンジニア
Svelte 3入門 シリーズの記事一覧

Svelteとは

Svelte（スベルト）は、「根本的に新しいアプローチ」を謳うウェブアプリケーション開発ツールです。ReactやVue.jsと並んで紹介されることも増えてきましたが、それらとは異なるアプローチを取っています。

ReactやVue.jsはアプリケーションの状態管理に仮想DOMという仕組みを用いて、ブラウザ上でさまざまな処理を行います。

それに対し、Svelteではアプリケーションを事前にコンパイルし、アプリケーションの状態が変更されたらDOMを更新するという手法をとっています。ですので、Svelteで実行されるコードはネイティブDOMのスクリプトとなります。その結果、ビルドされたコードに大きな専用ランタイムライブラリを含まず、専用コードは小さな範囲に留まっています。

次に例を示しますが、ファイル形式は独自であるものの、標準に近い書き方ができることも魅力の一つです。

シンプルな記法

Svelteのファイルは.svelte拡張子をつけたファイル群とJavaScriptファイルからなります。.svelteファイル内は、スクリプト、マークアップ、スタイルの3つで構成されます。このファイルの例を見てみましょう。

次のコードは、ボタンをクリックすると表示カウントが増えていくデモと、その.svelteファイルのコードです。

<script>
let count = 0;

function onClickButton () {
  count += 1;
}
</script>

<div>
  <output>{count}</output>
</div>
<button on:click={onClickButton}>button</button>

<style>
/* 必要なければstyleタグごと消してよい */
</style>

これをコンパイルすれば、デモページで使用しているコードになります。

ご覧のように、非常にシンプルです。また、スクリプト部分は、ライブラリなどを用いない素のJavaScriptコードを書く場合とほとんど変わりません。こういった点から、初めてフレームワークを使う際の候補としてもよいかもしれません。

なお、このシリーズでは、Svelte 3.20.1を使って説明していきます。

Svelteを試してみる

それでは、Svelteを実際に触っていきましょう。インストール方法はSvelteのサイトに載っているとおりに進めればすぐに終わります。

npx degit sveltejs/template プロジェクトディレクトリ名

このコマンドで、Svelteを使ったプロジェクトのテンプレートが作成されます。

注：degit

コマンドに使用されているdigitは、gitリポジトリのファイルをコピーするためのnpmパッケージです。

ファイル構成は次のようになります。

public/
  ├ index.html
  ├ global.css
  └ favicon.ico
src/
  ├ App.svelte
  └ main.js
.gitignore
README.md
package.json
rollup.config.js

publicディレクトリはビルドしたファイルの送り先でもありますが、Svelteのテンプレートでは静的ファイルがあらかじめ配置されています。必要に応じて画像などの静的リソースファイルを追加しましょう。

srcディレクトリが、コンパイル対象となるSvelteのファイル群です。このディレクトリにJavaScriptファイルやSvelteファイルを配置し、アプリケーションを作成していきます。冒頭のデモでは.svelteファイル内にスクリプトを記載していましたが、ユーティリティ系の関数などは別ファイルとして配置できます。

rollup.config.jsがあることからもわかるように、Svelteのテンプレートはrollupを使用しています。Svelteのビルドにはrollup-plugin-svelteというプラグインが使用されます。

rollupではなく、webkpackを使う

Svelteのテンプレートにはwebpackを使用したものもあります。そちらを使いたい場合はテンプレートのインストール時のコマンドを次のように変更します。

npx degit sveltejs/template-webpack プロジェクトディレクトリ名

Svelteを使うのが目的であれば、rollupとwebpackのどちらでも問題ありません。周辺ツールの充実度や慣れ、好みで選んでもよいでしょう。

テンプレートがインストールされたら、cdコマンドを使って該当ディレクトリに移動します。

テンプレートにはpackage.jsonが用意されていますので、npmコマンドを使ってパッケージをインストールします。

npm install

アプリケーションのビルドとサーバーの実行

テンプレートのpackage.jsonには3つのコマンドが用意されています。それぞれの役割を見てみましょう。

ビルド

あらかじめ用意されているビルドコマンドを使い、アプリケーションをビルドしてみましょう。

npm run build

このコマンドを実行すると、publicディレクトリにbuildディレクトリが作成され、その中にJavaScriptファイルとCSSファイルが追加されます。

public/
  └ build/
    ├ bundle.css
    ├ bundle.css.map
    ├ bundle.js
    └ bundle.js.map
  ...
src/
  ...
...

サーバーの実行

サーバーを実効するコマンドも用意されています。

npm start

初期状態では、http://localhost:5000にアクセスすることで動作を確認できます。

ビルドと監視

開発用に、ソースファイルを監視して変更があったらアプリケーションを再ビルドするコマンドがあります。また、このコマンドではサーバーも同時に実行し、再ビルド時には自動で更新が行われます。

npm run dev

サーバーにアクセスするURLは、http://localhost:5000です。

ローカルサーバーやビルド処理の変更

これらのコマンドはビルドツールのrollupや、ローカルサーバーのsirvといったパッケージを実行するものです。ローカルサーバーのポート番号を変更したい場合など、必要に応じてコマンドのオプションを追加修正するとよいでしょう。

また、rollupによるビルド処理自体を変更したい場合は、rollup.config.jsを更新する必要があります（webpackの場合はwebpack.config.jsです）。

アプリケーションを実行するためのファイル

テンプレートのsrcディレクトリにはmain.jsとApp.svelteの2つのファイルがあります。このうち、main.jsがアプリケーションを実行するための起点となります。

イメージ的には、App.svelteがアプリケーション本体、main.jsがその実行と考えるとよいかもしれません。

main.jsは初期状態で次のようになっています。Appコンポーネントにオプションを渡して実行しています。

main.js

import App from './App.svelte';

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

export default app;

オプションは、targetキーが必須で、テンプレートの初期状態ではdocument.bodyが指定されています。targetキーで指定された要素の子として、アプリケーションのDOMが追加されます。

テンプレートで用意されたpublicディレクトリにあるindex.htmlでは、次のようにビルド後のJavaScriptファイルを読み込んでいます。

<script defer src='bundle.js'></script>

そのため、前述のdocument.bodyはpublic/index.htmlのbodyになります。なお、index.htmlのbody要素は、初期状態では改行文字列のみが入っています。

たとえば、index.htmlを次のように変更します。

index.html

<body>
  <h1>Svelte Demo</h1>
  <div id="app"></div>
</body>

そのうえで、main.jsのtargetを#appに変更してみましょう。

main.js

import App from './App.svelte';

const app = new App({
  target: document.querySelector('#app'),
  props: {
    name: 'world'
  }
});

export default app;

このコードで実行すると、div#appの子としてアプリケーションが実行されているのがわかります。

propsキーは、Appコンポーネントのpropsに渡す値です。propsについては次回以降のコンポーネントの紹介で説明します。

コンポーネントの実行について

上記のコードではApp.svelteをmain.jsでインポートして使っています。main.jsで読み込むコンポーネントが特別なものというわけではなく、インポートしたSvelteコンポーネントはJavaScriptとして実行可能です。

SvelteコンポーネントをJavaScriptから実行する場合、ほかにもいくつかのオプションがあります。詳しく知りたい場合は公式ドキュメントの「Creating a component 」を参照してください。

まとめ

今回はSvelteのテンプレートをそのまま実行するところまで紹介しましたが、アプリケーションが初期状態の例のままです。

次回から、簡単なアプリケーションを作りながら、コンポーネントなどの機能を紹介していきます。
X GitHub
運営会社