個人開発でSvelte使ったら最高だったので推したい
はじめに
先日Svelte開発した個人開発プロジェクトをリリースしました。
結果非常に開発しやすく、もっと流行れという気持ちになったので推しポイントを紹介します。
めっちゃいいとこ
書き方が簡単
読みやすく、短いコードはバグが少ないコードはバグが少ないというのはコードを書くエンジニアなら誰もが同意すると思います。
Svelteはこの思想のもと、設計されています。
上記記事からリアクティブなコードを抜粋してみましょう。
<script>
let a = 1;
let b = 2;
</script>
<input type="number" bind:value={a} />
<input type="number" bind:value={b} />
<p>{a} + {b} = {a + b}</p>
scriptタグ内で変数を宣言し、inputタグのbind:valueに変数を渡すだけでリアクティブに書くことができました。
import React, { useState } from 'react';
export default () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
function handleChangeA(event) {
setA(+event.target.value);
}
function handleChangeB(event) {
setB(+event.target.value);
}
return (
<div>
<input type="number" value={a} onChange={handleChangeA} />
<input type="number" value={b} onChange={handleChangeB} />
<p>
{a} + {b} = {a + b}
</p>
</div>
);
};
Reactと比較して文字数が少ないことがわかります。
ドキュメントがわかりやすい
公式ドキュメントは日本語化されており、step by stepでSvelteらしい書き方を習得できます。
エコシステムも十分になりつつある
Reactを採用する大きな理由として、エコシステムの充実があると思います。
当然Reactほどではありませんが、Svelteのエコシステムもかなり充実してきています。
SvelteにはSveltekitが用意されており、ReactのNext.jsに対応するような存在です。
癖が無いと言えないですが、使いやすく機能も十分です。
async/awaitな処理を簡単に扱えて人気なライブラリである、TanStack QueryはSvelte版も用意されています。
また、Reactで簡単にノードベースUIを作れるReact FlowもSvelte版をリリースしました。
FirebaseのOSS Alternativeである、supabaseでもSveletekitに対応しています。
UIライブラリである、FlowbiteもSvelte版が用意されています。
このようにReact向けに開発されていたであろうライブラリもSvelteに対応してきており、エコシステムが充実してきています。
デプロイが簡単
開発がしやすくてもデプロイが面倒だと意味がありません。
先程紹介したSveltekitは簡単にVercelへデプロイ可能です。
ログ機能なども問題なく使用できます。
まとめ
Svelteの良さが少しでも伝われば何よりです。ぜひ次のプロジェクトで採用を検討してみてください。
おまけ
LangChainの本を出版しました。生成AIを使ったお仕事お待ちしております。
Discussion