・0 pv・2 min read
Svelteの学習メモ
こんにちは！
今日は、Svelteを使ってみたので、学習メモがてら、書いてみたいと思います。
Svelteとは？
Svelte(スベルトって呼ぶらしい)は、ReactやVueに並ぶ、JavaScriptのフレームワークのひとつです。
(ReactとかVueの説明は割愛させて)
公式サイトによると、こんな感じのことが書いてあります。
Svelte はコンパイラを使用する UI フレームワークで、息を呑むほど簡潔にコンポーネントを記述でき、 ブラウザで最小限の動作となるようにしてくれます。 開発者には既知の言語である HTML、CSS、JavaScript を使うことができます。 これは、web 開発への ラブレターです。
なんかおしゃれ感ある…！
なぜSvelteなのか？
ReactとかVueとかでも良かったんですが、個人的に、
学習コストが低そうで、シンプルに書けそうなところが気に入りました。
学習コストの低さという点では、
Vueも悪くなかったんですけど、
公式ページで書いていた、下の意味がなんかかっこいいな。と思って使い始めております。
魅力的でスリム、優雅でスタイリッシュ (web開発へのラブレターって表現もいい)
大規模なアプリだと、Reactのがいいゾみたいな話もあるようですが、
わたしのつくる規模はどちらかというと小規模な事が多いので、Svelteでも十分よさそうです！
Svelteのコード例
実際の、Svelteのコードは感じです。
(Svelte5のバージョンです。Svelte4と書き方が変わっているみたい)
シンプルにカウントアップするやつ。
<script>
let count = $state(0);
function increment() {
count ++;
}
</script>
<button onclick={increment}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>なんだか、とてもシンプルじゃありませんか？
style属性も同じファイル内に書けて、
<script>
let count = $state(0);
function handleClick() {
count += 1;
}
</script>
<style>
button{
color:#00ff00ff;
}
</style>
<button onclick={handleClick}>
Clicked {count}
{count === 1 ? 'time' : 'times'}
</button>となります！
見慣れない、$state とかはいますが、(この辺もおいおい学んでいきます)
素のHTML, CSS, JavaScriptに慣れている人は、比較的とっつきやすいのではないでしょうか？
今までのように、CSSファイルは、別ファイルで記述することもできるっぽいです。
公式ページのPlayGroundで、実際にコードを実行することもできるので、興味あれば、
この辺でポチポチ遊んでみてください～
https://svelte.dev/playground/reactive-assignments
まだまだ学習をはじめたばかりで、わかっていないことも多いですが、
少しずつSvelteに慣れて、楽しくコードが書けるようになっていきたいです！
短いですが、今日はこの辺で。
では～