Svelteを使ったサンプル作成をしてみました

技術ネタ
この記事は約5分で読めます。

こんにちわ、hisayukiです。

最近ちょっと立て込んでて、なかなか書く時間が取れないうちに3月も中旬になりました・・・
目標月8枚ですが、最低1枚は書こうと思いますw

今回は以前書いたこちらの記事で紹介したSvelteについて書いていこうと思います。

スポンサーリンク

Svelteとは

Svelte • Cybernetically enhanced web apps
Cybernetically enhanced web apps

まず、軽くて早い

Svelte(スヴェルト)は拡張子が「.svelte」のテンプレートファイルをコンパイルするコンパイラです。
コンパイル後に吐き出されるコードは、Virtual DOM形式のUIを持つピュアなJSファイルとCSSファイルになります。
コンポーネントに必要な機能のみがコンパイルされるため、JSの容量を最小限に抑えことができます。

そしてReact、Angular、Vueのどれよりも高速で軽量なのがウリです。

そしてコード量が少ない!

テンプレートファイルに書くのは主にHTMLとCSS、JSになります。
こちらもReact、Angular、Vueのどれよりも記述量が少なくなります。

個人的にはどんどん使っていきたいのですが、日本の浸透度はかなり低いと思います。
まぁ、日本語ドキュメントはないので😅

あと、ES5サポートを放棄してるのでES5形式で書く場合はBabelを使う必要あります。
コンパイラのスピードを重視するためにES6以上を対象に切り替えたようです。

豊富なサンプル

Svelteは公式ページのサンプル集が非常によく揃ってます。
ちょっとしたアプリ感覚のものもありますので、作りながら試すが楽しく出来ると思います❗

Hello world • Svelte Examples
Interactive example Svelte apps

Storeが基本搭載されている

Svelte本体がstoreを内包している!

storeがデフォルトで使えるので、コンポーネント間の値のやり取りもスムーズにすることができます。

これが結構ありがたくて、ReactのReduxのように別途導入する必要がありません。
言語仕様でprop地獄を回避してくれるのは嬉しいですw

svelte-preprocessが優秀

非公式ですがSvelteの要って言うくらい、超大事なパッケージです。
これがないとかなり辛いです。

GitHub - sveltejs/svelte-preprocess: A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more.
A ✨ magical ✨ Svelte preprocessor with sensible defaults and support for: PostCSS, SCSS, Less, Stylus, Coffeescript, TypeScript, Pug and much more. - sveltejs/s...

Typescript対応

「.svelte」のテンプレートファイルのTypescriptについてはsvelte-preprocessがピュアJSに変換してくれます。

ただし、Rootに当たるmain.js対象外です。
こちらもmain.tsにしたい場合は、rollup.config.jsにtypescript({ typescript: typescriptCompiler })を追加する必要があります。

こちらについてはQiitaにまとめてありますので、そちらを参照してください。

【Svelte】最低限の修正でTypeScript対応してみました【初期設定】 - Qiita
概要Svelteでcomponentを書く時に、中身をJSからTypescriptでかけるようにしました。今回はデフォルトでできるプロジェクトに対して、最低限何があればTypescriptにでき…

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などを使ってる人からすると多少の学習コストはあります。

CommonJSES5以下は対応してないので、別途プラグインで対応が必要です。
というか、ほとんどの機能はプラグイン拡張なので上記の対応も同じ感覚でやれます。

CSS framework

Svelteで使えるUIコンポーネントライブラリをまとめてみた - Qiita
はじめにSvelteで使えるUIコンポーネントライブラリを調べたのでまとめます。新しく出てきたライブラリを追加したり、1年以上メンテナンスされていないライブラリは削除していきます。Svelte…

Svelte Material UI

正直まだ辛い💦

今の所まだこれしか使ったことないです。
使えなくはないんですが・・・まだBetaなので色々不備があります。
特にドキュメントが揃ってないので、コンポーネントへの設定値などはDemoサイトのソースをGithubで探すという方法しかありませんw

その他

まだ使ったこと無いのでなんとも言えないですね🤔

MaterialUIが辛いなーって思ったときに、sveltestrapはちょっと使ってみたいなって思いました。
Bootstrapからの派生なので、比較的使いやすいのかなって思います🤔

まとめ

ちゃんと作っていけばReactやVueよりも使いやすいんじゃないかって思ってます。
コード量もスピード感も増えていくので、そのアタリが開発者には嬉しいですね✨

試み的には面白く、海外では情報も増えてきてはいます。
ただ、日本での情報はカナリ少なくアーリーアダプター向けの言語ではあります。

日本ではまだまだこれからなので、今後伸びていくことを期待してます❗

コメント