こんにちわ、hisayukiです。
最近ちょっと立て込んでて、なかなか書く時間が取れないうちに3月も中旬になりました・・・
目標月8枚ですが、最低1枚は書こうと思いますｗ
今回は以前書いたこちらの記事で紹介したSvelteについて書いていこうと思います。
Svelteとは
まず、軽くて早い
Svelte（スヴェルト）は拡張子が「.svelte」のテンプレートファイルをコンパイルするコンパイラです。
コンパイル後に吐き出されるコードは、Virtual DOM形式のUIを持つピュアなJSファイルとCSSファイルになります。
コンポーネントに必要な機能のみがコンパイルされるため、JSの容量を最小限に抑えことができます。
そしてReact、Angular、Vueのどれよりも高速で軽量なのがウリです。
そしてコード量が少ない！
テンプレートファイルに書くのは主にHTMLとCSS、JSになります。
こちらもReact、Angular、Vueのどれよりも記述量が少なくなります。
個人的にはどんどん使っていきたいのですが、日本の浸透度はかなり低いと思います。
まぁ、日本語ドキュメントはないので😅
あと、ES5サポートを放棄してるのでES5形式で書く場合はBabelを使う必要あります。
コンパイラのスピードを重視するためにES6以上を対象に切り替えたようです。
豊富なサンプル
Svelteは公式ページのサンプル集が非常によく揃ってます。
ちょっとしたアプリ感覚のものもありますので、作りながら試すが楽しく出来ると思います❗
Storeが基本搭載されている
Svelte本体がstoreを内包している！
storeがデフォルトで使えるので、コンポーネント間の値のやり取りもスムーズにすることができます。
これが結構ありがたくて、ReactのReduxのように別途導入する必要がありません。
言語仕様でprop地獄を回避してくれるのは嬉しいですｗ
svelte-preprocessが優秀
非公式ですがSvelteの要って言うくらい、超大事なパッケージです。
これがないとかなり辛いです。
Typescript対応
「.svelte」のテンプレートファイルのTypescriptについてはsvelte-preprocessがピュアJSに変換してくれます。
ただし、Rootに当たるmain.jsは対象外です。
こちらもmain.tsにしたい場合は、rollup.config.jsにtypescript({ typescript: typescriptCompiler })を追加する必要があります。
こちらについてはQiitaにまとめてありますので、そちらを参照してください。
Sass対応
SassやScssにも対応してます！
scss記法であればそのままで自動的に変換をしてくれます。
sass記法だとrollupjsでpostcssのプラグインに頼る必要があります。
最初はsass記法で環境立てたのですが、多少ですが手間が増えます。
sass記法にこだわりがなければscss記法をオススメします。
Pug対応
<template lang="pug">で囲われた部分をPug記法として認識してコンパイルしてくれます。
個人的には最初使っていたのですが、そもそもPugそのものにちょっと恩義を感じられなくなってきたので外しました😅
その他
他にもこれだけのパッケージに対応してます。babelはES5を対応するなど対応範囲を広げる場合に、使う機会がありそうですね。
- babel
- postcss
- coffeescript
- less
- stylus
Rollup.jsの使用
SvelteはビルドにRollup.jsを推奨してるみたいですね🤔
僕自身も初めて使いましたが、さほど使いづらさは感じなかったです。
ただやっぱり、普段Webpackなどを使ってる人からすると多少の学習コストはあります。
CommonJSとES5以下は対応してないので、別途プラグインで対応が必要です。
というか、ほとんどの機能はプラグイン拡張なので上記の対応も同じ感覚でやれます。
CSS framework
Svelte Material UI
正直まだ辛い💦
今の所まだこれしか使ったことないです。
使えなくはないんですが・・・まだBetaなので色々不備があります。
特にドキュメントが揃ってないので、コンポーネントへの設定値などはDemoサイトのソースをGithubで探すという方法しかありませんｗ
その他
まだ使ったこと無いのでなんとも言えないですね🤔
MaterialUIが辛いなーって思ったときに、sveltestrapはちょっと使ってみたいなって思いました。
Bootstrapからの派生なので、比較的使いやすいのかなって思います🤔
まとめ
ちゃんと作っていけばReactやVueよりも使いやすいんじゃないかって思ってます。
コード量もスピード感も増えていくので、そのアタリが開発者には嬉しいですね✨
試み的には面白く、海外では情報も増えてきてはいます。
ただ、日本での情報はカナリ少なくアーリーアダプター向けの言語ではあります。
日本ではまだまだこれからなので、今後伸びていくことを期待してます❗
コメント