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


関連記事

Vue.js 3.0のComposition APIを使ってみた

1 はじめに1.1 Composition APIとは1.2 環境構築2 Composition API での書き方2.1 function2.2 computed2.3 watch2.4 lifec ...

ウチのMaterialize事情

1 はじめに2 ボタン3 フォーム3.1 ラベルについて3.2 セレクトボックスについて3.3 ラジオボタンについて4 アラート5 フォント6 さいごに はじめに うちのチームでは現在、CSSフレーム ...

js

TypeScriptでJavaScriptのライブラリを使用するには?

1 はじめに2 対応方法2.1 npmで@typesからインストールする2.2 自分で型定義ファイルを作る3 Declaration Space3.1 Type Declaration Space3. ...

Vue on Rails で作ったアプリを振り返ってみる

1 はじめに2 全体的なこと2.1 ディレクトリ構成2.2 CSSフレームワーク2.3 Capistranoでのデプロイ3 axiosのラッパー4 Vuex4.1 ログインの状態管理5 Router6 ...

react-icon

【初級者向け】Reactの開発環境の構築

1 はじめに2 Reactとは2.1 Declarative2.2 Component-Based2.3 Learn Once, Write Anyway2.4 Reactのメリット、デメリット3 環 ...

フォロー

follow us in feedly

blog-page_side_responsive

2020年12月
 12345
6789101112
13141516171819
20212223242526
2728293031 

アプリ情報

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