JavaScriptはフレームワークについて考え直すときが来ています / Svelteを使ってみた
今回はJavaScriptのノンフレームワーク、Svelteを紹介しましょう。
また新FWかよ、もういいよ。
まあそう言わずにちょっと見てってくださいよ。
何しろあのFront-End Developer Handbook 2017でも今後伸びるって言われてますよ、これは今後も期待大ですよ！？
これまでのFWと何が違う？
JavaScriptはフレームワークについて考え直すときが来ていますになんとなく書いてあるけど、トランスパイラで変換した後のJavaScriptがフレームワークを読み込む必要がないというのが特徴です。
とりあえずHelloWorldしてみましょう。
Svelteをインストール
npm install -g svelte-cli
npmについては別記事などを参照。
最近のはWindowsでも普通に動くから楽でいいね。
ソース
<!DOCTYPE html>
<html lang="ja">
<body>
<main></main>
<script src="MyApp.js"></script>
<script>
new MyApp({
target: document.querySelector('main'),
data: { name: 'world' }
});
</script>
</body>
</html>
<h1>Hello {{name}}!</h1>
コンパイル
cd
MyApp.svelteのディレクトリ
svelte compile --format iife MyApp.svelte > MyApp.js
MyApp.jsというファイルが出力されます。
表示
index.htmlにアクセスすると、「Hello world!」が表示されるはずです。
index.htmlはMyApp.jsを呼んでるだけで、重量級のライブラリをインポートしたりといったことは全くしていません。
MyApp.jsには、MyApp.svelteのコンパイル結果が入っています。
1行だったソースが200行弱に増えているのですが、中身はcreateElementとかappendChildとかの、素のJavaScriptです。
こちらも外部ライブラリを呼び出したりはしていません。
感想
フロントエンド開発者に恩恵をもたらすというより、どちらかというと閲覧者側へのメリットが多いと感じた。
何しろ出力が素のJavaScriptだから軽い。
あとライブラリを使う場合に、jQueryを先に読み込んで次にこれを、みたいな面倒な順序を考えないでいいのは楽そう。