Re:ゼロから始める文系プログラマ

未経験がプログラミングを通して人生を変える

Svelteとは?|最新のJavaScriptフレームワークを徹底解説


スポンサードリンク
 

f:id:ShotaNukumizu_1000:20220103133834p:plain

おはようございます。Shotaです。

最近のフロントエンド開発で、SvelteというJavaScriptフレームワークをよく耳にするようになりました。

ReactやVueのように宣言的にUIを記述できるので、簡単にWEBアプリケーションやUIを開発できるのが最大の特徴です。

フロントエンド開発でJavaScriptを書いている人の中には、

🤨「Svelte?何だそれ」

😥「Svelteを使うメリットって何があるのだろう...」

このように考えている方も少なくないと思います。

そこで、今回の記事では最新のJavaScriptフレームワークSvelteについて詳細に解説します。

それでは早速、本題に入りましょう。



Svelteとは?

f:id:ShotaNukumizu_1000:20220103134716p:plain

Svelteとは、ブラウザ上で動かすUIを構築できるJavaScriptフレームワークです。UI部品を作るためのライブラリやフレームワークであるReactやVueに対抗するべき開発されました。主に、WEBアプリのフロントエンド開発に使われます。

Svelteでは.svelteという拡張子のファイルにHTMLやCSSJavaScriptを書いてそれをコンパイルすることで動作させることができます。

SvelteはReactのように複雑ではないので、フロントエンド開発の初心者でも学習のコストはそこまで高くありません。また、手軽に開発できるので小規模なアプリを開発するのに向いています。


Svelteの特徴

f:id:ShotaNukumizu_1000:20211230093315p:plain

本章では、Svelteの特徴についてメリット、デメリットに分けてそれぞれ解説していきます。


メリット

Svelteのメリットとして、主に以下のようなものが挙げられます。

  • 記述量が少ない

  • 非常に構造がシンプル

  • 基本的な開発に必要なツールが揃っている。TypeScriptにも対応している


ざっくりまとめると、Svelte簡単にWEBアプリを開発できるフレームワークです。


デメリット

しかし、Svelteにもデメリットがあります。

  • VueやReactに比べ情報量が少ない

  • 拡張性が高くない


Svelteは高機能なフレームワークですが、まだ発展途上で情報量が少ないです。それだけではなく、拡張性もそこまで高くないので大規模開発には向いていないでしょう。


SvelteとVueの比較

f:id:ShotaNukumizu_1000:20220102101238p:plain

Svelteのコードスタイル

<script>
    const name = 'world';
</script>

<h1 class="title">Hello {name}!</h1>

<style>
    .title {
        color: red;
    }
</style>

Vueのコードスタイル

<script setup>
    const name = 'world';
</script>

<template>
    <h1 class="title">Hello {{name}}!</h1>
</template>

<style>
    .title {
        color: red;
    }
</style>

SvelteとVueは書き方が多少似ています。

しかし、SvelteではWebページの状態を保存する際に単に$を変数名の前につけることで別で定型文を用意する必要がありません。(Vueの場合は別でstoreを用意してVuexで記述する必要がある)

SvelteとVueは両方とも少ないコード量で実装できるように設計されていますが、SvelteはVueよりも極力コードを減らして機能を実装できるように設計されています。


まとめ

今回の記事では、最新のJavaScriptフレームワークであるSvelteについて詳細に解説しました。

今回の記事を参考に、Svelteについての理解を深めていただけると幸いです。

今回の記事はこれで終了です。

【参考サイト】

udemy.benesse.co.jp

zenn.dev

qiita.com