Svelteとは？JavaScriptとの関係やフレームワーク・ライブラリについても解説！

WEBページを作成する方法を調べていく中で、「Svelte（スベルト）」と呼ばれるフレームワークの紹介を見た人もいるのではないでしょうか？

本記事ではSvelteとは何かを解説し、混同されやすいフレームワークやライブラリといった言葉の解説、そもそもJavaScriptとはなんなのかといったことを解説していきます。

SvelteとはJavaScriptのフレームワーク

「Svelte」とはユーザーインターフェースを構築するためのJavaScriptフレームワークです。ユーザーインターフェースとは、メールフォームやお問合せフォームのようなユーザーが目にするもの、操作するもののことを指します。Svelteを使用することにより、高速で軽量なWEBアプリケーションを作成することができます。

 

JavaScriptとは

JavaScriptとはWEBページに動きをつけるためのプログラミング言語です。

WEBページは、HTMLと呼ばれる、ボタンや枠などのWEBページを作成する要素を記述する言語と、CSSと呼ばれるデザイン部分を作成するための言語の2つを組み合わせて作成されています。この二つの言語を組み合わせて作成されたWEBページは静的なページと呼ばれ、これだけではボタンを押した際にどういった挙動を行う、と言った動きのあるWEBページを実装することはできません。そのため、動きのあるWEBページを作るためにJavaScriptが用いられます。

JavaScriptや、JavaScriptを用いたフレームワークであるSvelteなどで実装されるWEBブラウザ機能は、フロントエンドと呼ばれます。

 

フレームワークとは？

フレームワークとは「構造・骨組み」を意味し、このフレームワークを利用することで、基本的な機能が実装されたプログラムを作成することができるテンプレートのようなプログラムのことです。また、開発者は、フレームワークのルールに則って、実装したいプログラムを追加で記述することでカスタマイズを行うことができます。

例えば、ブログのWEBサイトを作ろうとした場合、記事管理機能や記事投稿機能、読者が読んだ記事に対しアクションを起こすためにお気に入り機能やコメント機能などが必要になります。ブログを作成できるフレームワークを使えば、こういった基本的な機能が網羅されたシステムを使うことができます。基本的な機能に加え、フレームワークのルール内であれば開発者は自分好みに要素を追加したり、カスタマイズを行うことができます。

 

ライブラリとは？

ライブラリはフレームワークと混同して認識している人も多いですが別ものです。ライブラリとは特定の機能を持ったプログラムを他のプログラムから呼び出し、別のプログラムでも利用できるように部品化し、一つのファイルに収納したもののことです。フレームワークは部分的に要素を抽出して使用できないのに対し、ライブラリは実装したい要素に必要な機能のみを利用することができるのが特徴です。

JavaScriptでは、JavaScriptのプログラミングルールをより簡素にしたjQueryと呼ばれるライブラリや、日付を扱う関数をまとめたライブラリなどが存在します。ライブラリを用いることで、開発時間を短縮できるだけでなく、開発に時間がかかる機能に人的、時間的リソースを割くことできるようになります。

Svelteの特徴は？

これまで、Svelteはフロントエンドの機能を実装するためのJavaScriptのフレームワークであると説明を行なってきました。それでは、Svelteの特徴を詳しく見ていきましょう。

 

仮想DOMを使用していない

DOMとはDocument Object Modelの略で、JavaScriptでHTMLを操作する際に使用する仕組みです。JavaScriptなどで要素の変更をおこなった場合、変更された情報をもとにHTMLの作成（DOMの作成）を行い、画面に表示するため画面全体の描画を行います。仮想DOMとは、画面の要素が変更された際、本物のDOMではなく、バーチャルでDOMの作成を行い、実際のDOMとの比較を行い、差分がある箇所のみの描画を行う仕組みのことです。仮想DOMを用いることで高速で描画を行うことができます。

しかし、Svelteは仮想DOMを用いず、高速なアプリケーションを実現しています。Svelteでは、JavaScriptで書かれたコードをコンピュータが実行できる形にコンパイルする際、ピュアなJavaScriptと CSSのファイルを生成し、それらのファイルをHTMLに読み込ませることでWEB画面の描画を行います。このコンパイルを行う際にどの値が変更されうるかを判断し、その差分のみをDOMに反映させるコードを生成します。

 

軽量で高パフォーマンス

先述した通り、Svelteではコンパイルを行う際に変更される可能性がある要素を判断し、その要素のみを変更させる形でコードの生成を行います。そのため、従来のDOMを用いた場合に比べ必要箇所のみ再描画ができるため、処理が軽く高速でW EB画面の描画を行うことができます。

また、コンパイル時に生成されたコードは、「バニラJavaScript」と呼ばれるフレームワークやライブラリを含まない純粋なJavaScriptになっています。実行時に他のライブラリやフレームワークなど、無駄な処理が入らないため、軽量で高速なパフォーマンスを実現しています。

 

コードの記述量が少ない

Svelteでは要素の変更が行われた際、変更された要素のみを直接変更する仕組みであると説明を行いました。そのため、要素の状態を保持、変更するために余分なコードを記述する必要がありません。一般的に、フロントエンドを実装する際は、ライフサイクルフックと呼ばれる要素の状態を変更、保存するコードが必要になりますが、Svelteではそう言ったコードを必要としません。

そのため、他のJavaScriptのライブラリやフレームワークに比べ、コードの記述量が少なくすみ、コードの可読性を上げることができます。

少ないコードでフロントエンドの実装が可能

Svelteはユーザーインターフェースを実装するためのJavaScriptのフレームワークです。仮想DOMを用いずに、直接DOMを変更する仕組みになっているため、コード記述量が少なく、高速なアプリケーションが実装できると解説してきました。

SvelteではHTML、CSS、JavaScriptを用いて開発を行います。公式のチュートリアルも充実しているため、これからフロントエンドの学習を行う人は、フロントエンドの基礎的なことも学習が可能なSvelteを検討してみるのはいかがでしょうか。