こんにちは。エンジニアの井上です。
最近、フロントエンドに React Redux, Angular などのフレームワークを使って開発することが増えてきました。
上記のほかにも、Vue の人気が高まっているようです。React を高速化した Inferno も話題です。Angular2 を勉強している間に 4 がリリースされました。
JavaScript にはとにかくたくさんフレームワークがあります……
フロントエンドはいったいどうなってしまうのでしょう。
移り変わりの激しいフレームワークの世界ですが、今回は少し違う流れを作りそうなフレームワーク、Svelte を紹介したいと思います。
Svelte とは
Svelte は昨年末にリリースされたばかりの軽量で高速なコンポーネント指向の UI フレームワークです。
Front-End Developer Handbook 2017 で 2017 年のフロントエンドの展望のひとつとして挙げられたことで注目を浴びました。
Svelte の公式サイトを見てみると
The magical disappearing UI framework
というキャッチコピーで紹介されています。「消える」とはどういうことでしょう？
Svelte の大きな特徴は、ピュアな JavaScript にコンパイルすることができる という点です。
Babel がES6 のコードを ES5 に変換するように、Svelte はコンポーネントをプレーンな JavaScript に変換します。
そのため、いちいちフレームワーク本体のランタイムをロードせずともアプリケーションを動作させることができます。
また、コンポーネントに必要な機能のみがコンパイルされるため、変換後のコードが無駄に大きくなるということもありません。
Svelte を使って作成したウィジェットを他のフレームワークと合わせて使うことも可能です。
まずは svelte をコンパイルするための svelte-cli をインストールします。
$ npm install -g svelte-cl
次にコンポーネントを作成します。
HelloWorld.html
<h1>Hello {{name}}</h1>
コンパイルします。
$ svelte compile --format iife HelloWorld.html > HelloWorld.js
HelloWorld.html がコンパイルされ、HelloWorld.js が生成されているはずです。
--format iife というオプションは、コンポーネントを即時関数として出力して、<script> タグで使えるようにします。
デフォルトでは ES Module として出力されるので、webpack などのビルドツールでバンドルする必要があります。
index.html を作成して HelloWorld.js を読み込みます。
index.html
<!doctype html>
<html>
<head>
<title>My first Svelte app</title>
</head>
<body>
<main></main>
<script src='HelloWorld.js'></script>
<script>
var app = new HelloWorld({
target: document.querySelector( 'main' ),
data: {
name: 'world'
}
});
</script>
</body>
</html>
ブラウザで index.html を開くと Hello world と表示されました。
おわりに
Svelte はまだリリースされて間もなく、実際の業務で使用できる状態ではありません。
しかし、次々にフレームワークが入れ替わるいま、依存のないピュアな JavaScript でモジュールを生成できるのはとても魅力的です。
これからのフレームワークにも少なからず影響を与えるのではないでしょうか。今後の動向が気になります。
フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！
関連記事
