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


関連記事

Cordovaの実機デバッグでハマった話

1 はじめに2 Cordovaとは2.1 React Nativeとの違い3 Cordovaでモバイルアプリを作る3.1 Node.jsをインストール3.2 Cordovaのコマンドラインツールをイン ...

Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜

はじめに 7/12 修正 記事下部にて、filterメソッドを使用している箇所がありましたが、forEachの方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事で ...

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ ...

ウチのMaterialize事情

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

js

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

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

フォロー

blog-page_side_responsive

2020年12月
 12345
6789101112
13141516171819
20212223242526
2728293031  

アプリ情報

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