2021年注目のJavaSciprtフレームワーク、Svelteとは？ – 解説とセットアップ手順

2020年注目度No.1JSフレームワーク

みなさん、こんにちは。どんぶラッコです。

突然ですが、Svelteというフレームワークをご存知でしょうか？

どんぶラッコ

Twitterで目にすることも多く、某プログラミングスクールのカリキュラムでも採用されていたので気になっていました

実はこのSvelte, State of JS というサイトの調査によると、Vue.jsやReactをおさえ、JavaScriptのフレームワークの中で最も注目度が高い言語として紹介されています。

参考State of JS 2020: Front-end FrameworksState of JS 2020

公式サイトでは、Svelteの特徴として3つ挙げています。

個人的に面白い点だと思っているのは No virtual DOM です。仮想DOMの仕組みを使わない、と公言しているのです。

便宜上、先ほどから Svelteを “フレームワーク” と表現していますが、 Svelte自体は コンパイラ の方が表現として正しいです。

書いたコードを変換して、vanilla JavaScript (生のJavaScript)にしてくれるわけです。その際、余計な部分を削ぎ落とした形でコンパイルしてくれるので、ファイルが軽くなるし、実行速度も早くなると謳っています。

筆者がフレームワークに触れてみた印象としては、Vue.jsやReactを既に学習された方であればすんなり理解できると思います。

ということで、これからSvelteの導入手順や文法の特徴について、何回かに分けてご紹介していきます！

どんぶラッコ

この記事の内容は、筆者がWeb技術勉強会で実施したハンズオンの内容を再編したものになります。

なので、JavaScriptの文法などは既に学習済みという前提でお話しします！

実行環境

Mac OS BigSur
Node v12.18.2

第1回初めてのSvelte

インストール・セットアップ

まずは、Svelteプロジェクトを作成してみましょう。下記コマンドを入力してください。

プロジェクトの作成

npx degit sveltejs/template svelte-handson

svelte-handson となっているところは、お好きなプロジェクト名を入力してください。

ちなみに、degit は git clone 的なことを npmコマンドで実現できるやつです。

参考Rich-Harris/degitGitHub

どんぶラッコ

degit コマンドの作成者でもある Rich Harris さんが Svelteの作成者でもあるよ！

インストールが完了したら、プロジェクトのディレクトリに移動してコマンドを立ち上げてみましょう。

svelteを立ち上げてみる

cd svelte-handson
npm install
npm run dev

http://localhost:5000 にアクセスできれば成功です！

ディレクトリ構造

では立ち上がることが確認できたところで、ディレクトリ構造を確認してみましょう。

ディレクトリ構造

.
├── README.md
├── node_modules
├── package.json
├── public
│   ├── build
│   ├── favicon.png
│   ├── global.css
│   └── index.html
├── rollup.config.js
└── src
    ├── App.svelte
    └── main.js

ものすごくシンプルな構造ですね。

基本的に src ディレクトリでコーディング、ビルドした結果は public ディレクトリで確認することができる、と考えておけば問題ありませんね。

svelte ファイルの中身と特徴

実際に記述を進めていくのは /src フォルダ内部にある svelteファイルです。デフォルトのプロジェクトでは App.svelte が作成されています。

App.svelte の中身を確認してみましょう。

App.svelte

<script>
	export let name;
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>

見ていただくとわかるとおり、 JavaScript, HTML, CSS の順番で記載されています。１ファイルの中に3つ全てを記載するところはコンポーネント思考のフレームワークを利用されている方なら馴染みがある光景じゃないでしょうか。

JavaScript, HTML, CSS の記述順番について

JS, HTML, CSS の記述順番ですが、半年前のチュートリアルを確認すると JS, CSS, HTML の順番でファイルが構成されており、 HTML, CSS の順番が逆です。なので順番などはまだ定まっていないのかもしれません。いずれにしても、 JSの記述を一番最初に書く、ということをおさえておけば問題ないです。この辺はReactっぽいですね。

そして、もう一つ特徴的なのが、 HTMLファイルを直接記述している点です。コンポーネントを作る場合、Vue.jsであれば <template> タグ、Reactであれば <> タグなど、独自のタグを追加する必要がありますが、Svelteの場合はそのような配慮は必要なく、直接HTMLタグを書いてしまってOKです。この辺は直感的でわかりやすいですね！

1コンポーネント 1要素じゃなくてOK

Svelteファイルの中では 1コンポーネント１要素の原則はありません。なので、 App.svelte 内の <main> タグを外して

App.svelte

<script>
	export let name;
</script>

<h1>Hello {name}!</h1>
<p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>

<style>
// 以下省略

のようにしてHTML要素が複数ある状態にしても、コンパイルエラーは発生しません。

この点も直感的ですね！

また、 <style> タグですが、scoped がデフォルトでされています。なので、App.svelte 内部で指定されたCSS指定は App.svelte 内部のHTMLにのみ有効という状態になります。サンプルでも h1 タグに直接CSSを指定したりしていますが、他のsvelteファイル内部の h1 タグでは影響しません。この辺は子コンポーネントの作成で改めて触れます！

そして、この App.svelte は同じ src ディレクトリ内の main.js に読み込まれています。

src/main.js

import App from './App.svelte';

const app = new App({
	target: document.body,
	props: {
		name: 'world'
	}
});

export default app;

どんぶラッコ

props: { ... } の中身のキーバリューを App.svelte に渡しています。今回は name: 'world' を渡しているから、 App.svelte 内で <h1>Hello {name}</h1> と記述すると Hello world と表示されるんだね

svelte component のコンパイル

冒頭でsvelteはコンパイラだという話をしました。それはどのように実現されているかというと、 rollup-plugin-svelte が担当しています。

参考sveltejs/rollup-plugin-svelteGitHub

先ほどプロジェクトのディレクトリ構成をご紹介したときに、 rollup.config.js というファイルがありましたね。

この中でコンパイルに関する設定をすることが可能です。

一部抜粋して rollup.config.js の中身を掲載しておきます。

rollup.config.js

import svelte from 'rollup-plugin-svelte';
// 中略

function serve() {
	// 中略
}

export default {
	input: 'src/main.js',
	output: {
		sourcemap: true,
		format: 'iife',
		name: 'app',
		file: 'public/build/bundle.js'
	},
	plugins: [
		svelte({
			compilerOptions: {
				// enable run-time checks when not in production
				dev: !production
			}
		}),
		// 中略
	],
	watch: {
		clearScreen: false
	}
};

わかりやすいところで言うと、 input でどのファイルを入力するか、 output でどこに出力するかを定義しています。 output.file を確認すると public/build/bundle.js となっていますね。

実際に public ディレクトリ内にある index.html を確認すると、 bundle.js が読み込まれていることがおわかりいただけます。

public/index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset='utf-8'>
	<meta name='viewport' content='width=device-width,initial-scale=1'>

	<title>Svelte app</title>

	<link rel='icon' type='image/png' href='/favicon.png'>
	<link rel='stylesheet' href='/global.css'>
	<link rel='stylesheet' href='/build/bundle.css'>

	<!-- この部分！ -->
	<script defer src='/build/bundle.js'></script> 
</head>

<body>
</body>
</html>