FrontEnd

Svelteのチュートリアルをやってみた

投稿日:2020年12月28日 更新日:

はじめに

フロントエンドの開発をする際のフレームワークは、Vue.jsを使うことがほとんどだったのですが、先日、知人よりSvelteなるものがあると教えてもらったので、チュートリアルをやってみました。

Svelteのv1.0.0は2016年12月30日にリリースされており、現在では、v3.31.0までリリースされています。

Svelteとは?

はじめに、Svelteについて、さっと紹介します。

Svelte is a tool for building fast web applications. と公式にあるように、高速なWebアプリケーションを構築するためのフレームワークです。乱暴な言い方をすると、ReactやVue.jsなどと似た方なものです。ただし、これらとはアプローチが異なるので、その辺りを次で説明します。

Svelteの特徴

公式曰く、Svelteの特徴は以下の3つです。

  • Write less code
  • No Virtual DOM
  • Truly reactive

Write less code

Svelteは、書かなければならないコード量を減らすことを目標としています。公式曰く、あるSvelteのコンポーネントと同等のReactのコンポーネントのコード量は、Svelteのコード量と比べて、だいたい4割ほど多いそうです。

実際に公式サイトに掲載されていたサンプルを見比べてみましょう。初めに、Svelteで書かれたコードです。

2つの入力欄とその合計を表示するだけのシンプルな画面です。

次にReactで書かれたコードです。

見比べてみると、Svelteのコードの方がコード量が少ないことが見て取れます。

No Virtual DOM

ReactやVue.jsなどとは異なり、SvelteはVirtual DOMを使わない代わりに、ビルド時にフレームワークのないJavaScriptのコードに変換されます。これにより、DOMを更新するためにVirtual DOMの差分をチェックする必要がないため、高速に動作することができます。

Truly reactive

No Virtual DOMの説明と重複するのですが、Virtual DOMを使わず、ビルド時にDOMを直接変更するコードに変換されるため、高速に動作することができます。

また、Svelteでは状態を変化させるために状態管理ライブラリを使用する必要はありません。変数の値を変更するだけで画面に反映されます。

Svelteのシンタックス

Svelteのコードは .svelte ファイルに記述します。記述の仕方はVue.jsに似ており、 <script> タグの中に変数や関数などを定義し、 <style> タグの中にCSSを記述します。なお、CSSはコンポーネントにスコープされているので、他のコンポーネントには影響しません。

基本的なシンタックスをいくつか紹介します。

変数

変数は <script> タグの中にそのまま定義するだけです。

画面に表示するには、 {} で囲うだけです。

props

props は変数定義と似ていますが、 export をつけて宣言します。

値渡しはこのようにします。

また、オブジェクトを展開して渡すこともできます。

event

例えば、ボタンクリック時にカウントアップさせるには、このように記述します。

また、 | で繋ぐことで、イベントの振る舞いを修飾することができます。

bindings

svelteのデータフローはトップダウン型のため、親のコンポーネントは子のコンポーネントにpropsを渡すことができますが、その逆はできません。しかし、 bind:value を使うことで、これを実現することができます。

if

条件に応じて表示を切り替えたい場合は {#if} を使用します。

each

繰り返しで処理したい場合は {#each} を使用します。

また、 (person.id) のように識別する値を指定することもできます。

await

非同期で処理した値を表示したい場合は {#await} を使います。

lifecycle

コンポーネントのlifecycleには onMountonDestroybeforeUpdateafterUpdateTick があります。

onMount はコンポーネントがレンダリングされた直後に実行されます。

onDestroy はコンポーネントが破棄される時に実行されます。

onDestroy に限らず、lifecycle関数はコンポーネントの初期化時に呼び出す必要がありますが、ReactやVue.jsなどとは異なり、どこでも呼び出すことができます。以下のように関数内に書けるため、 clearInterval() に渡すidを保持しておく必要がありません。

beforeUpdate はDOMが更新される直前に実行されます。また、 afterUpdate はDOMが更新された直後に実行されます。

Tick はほかのlifecycleとは異なり、いつでも呼び出すことができます。Svelteでは、コンポーネントを更新してもすぐにDOMには反映されず、次のマイクロタスクが実行されるタイミングでまとめて更新されます。

await tick() とすることで、次のマイクロタスクが実行されるタイミングで任意の処理を実行することができます。

環境構築

Svelteの環境構築は非常に簡単です。任意のバージョンのNode.jsをインストールした後に npx degit sveltejs/template project-name を実行し、 npm install を実行するだけです。

サーバーを起動するには npm run dev を実行します。その後、 http://localhost:5000/ にアクセスすると、表示の確認ができます。

本番環境などで使用する場合は、 npm run build でビルドし、 npm run start でサーバを立ち上げます。

TypeScriptで書く場合

TypeScriptで書きたい場合は、 node scripts/setupTypeScript.js を実行します。

さいごに

Svelteについて、ざっと紹介しました。チュートリアルでは実際にブラウザで実際にコードを書きながら学習できるので、始めやすいと思います。

おすすめ書籍

JavaScriptモダンプログラミング完全ガイド 堅牢なコードを効率的に開発できる! impress top gearシリーズ プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

rails

Rails 7でフロントエンド開発が大きく変わる

1 はじめに1.1 脱Node.jsの経緯2 Rails 7.0でのアセット管理3 propshaft4 importmap-rails4.1 JavaScript CDN経由でのnpmパッケージの利 ...

正式版Vue.js 3.0のTeleportを触ってみる

1 はじめに1.1 Vue.js 3.0のプロジェクト作成方法1.2 Teleportとは2 基本形2.1 コード2.2 画面3 別のコンポーネントの入れ子にする場合3.1 コード3.2 画面4 同じ ...

react-icon

Vite 3を使ってみた

1 はじめに2 なぜViteは早いのか2.1 Native ESMの活用2.2 esbuildによる事前バンドル3 Viteのセットアップ3.1 Reactテンプレートでのセットアップ3.2 vite ...

js

今さらChart.jsでグラフ描画

1 はじめに2 準備3 折れ線グラフと棒グラフ3.1 コード全体3.2 html3.3 JS4 円グラフ4.1 html4.2 JS5 さいごに6 おすすめ書籍 はじめに JSのチャートライブラリは色 ...

Vue CLIでPWAが簡単に実装できる 〜 Service Worker と A2HS 〜

1 はじめに2 環境構築2.1 Vue CLIをインストール2.2 プロジェクトを作成2.3 PWA選択時に追加されるファイル2.4 動作確認時の注意3 Service Worker3.1 Servi ...

フォロー

blog-page_side_responsive

2020年12月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。