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


関連記事

react-icon

React Big Calendarの複数タイムゾーン対応

1 はじめに2 端末のタイムゾーンのみに対応する場合3 複数のタイムゾーンに対応する。3.1 日時を指定のタイムゾーンに変換する3.2 イベントの開始日時・終了日時を動的に設定する3.3 ラップクラス ...

js

Vue.jsをTypeScriptで安全に開発するためのtsconfig.json

1 はじめに1.1 開発環境1.2 プロジェクト作成時点のtsconfig.json2 include3 exclude4 compilerOptions4.1 コンパイル系オプション4.1.1 ta ...

Vue.jsでWebアプリケーションを作る〜Vue.jsの基礎〜

1 はじめに1.1 Vue.jsとは1.2 インストール1.3 Vueアプリケーションを作る2 データを表示する2.1 文字列を表示する2.2 HTMLで表示する3 属性を指定する3.1 インラインス ...

tailwindcss

Tailwind CSSの基礎とVue.jsへの導入

1 はじめに2 Tailwind CSSとは2.1 utility class3 Bootstrapとの比較3.1 柔軟性3.2 コード量3.3 学習コスト3.4 ファイルサイズ3.5 その他4 なぜ ...

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

フォロー

blog-page_side_responsive

2020年12月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

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