SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

高速・軽量なJavaScriptフレームワーク「Svelte」の世界

高速で開発者体験も抜群!JavaScriptフレームワークの新星「Svelte」とは何か?

高速・軽量なJavaScriptフレームワーク「Svelte」の世界 第1回

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載では、「State of JS 2020」でも注目されているJavaScriptフレームワークのひとつ「Svelte」について、その概要や魅力、Svelteを使用したアプリケーションの開発方法について紹介します。今回は、同じJavaScriptフレームワークであるReactとVueと比較しながら、Svelteの特徴と、2022年にSvelteを使うべき理由について紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 本記事では、ユーザーインターフェイスを構築するためのJavaScriptフレームワークのひとつ「Svelte(スベルト)」についてご紹介します。

 Webフロントエンドの領域は年々大きくなっており、読者の皆さまの中でもReactやVueといったフレームワークを使ったことがある方が多いものと思います。もしかしたら、Svelteの名前もどこかでご覧になり、気になっている方もいるかもしれません。

 Svelteは、そのアプローチの新しさから注目されはじめています。 JavaScript のライブラリに関する大規模調査「State of JS 2020」で「最も愛されているWebフレームワーク」「もっとも開発者の満足度の高いフレームワーク」に選ばれたことでも話題となりました。

 そこで本記事では、ReactやVueに少しでも触れたことがある方を想定して、それらと比較する形で、Svelteの特徴をわかりやすく説明していこうと思います。

 また、続く第2回・第3回では、実際にSvelteを使用してアプリケーションを開発する手順を説明します。続けてお読みいただくことで、Svelteによるアプリケーション開発の流れを一通り理解・体験していただける構成となります。

Svelteの特徴

普通のHTML+JavaScript に近い書き方ができる

 Svelteの特徴の一つは、ユーザインターフェイスに必須の状態管理を伴うコードを、特別な記法や関数を使うことなく実装できることです。例えば、ボタンを押して数値をカウントアップ・カウントダウンするコードを、Svelte、React、Vueで見比べてみましょう。

// Svelte
<script lang="ts">
  let count = 0;
</script>

<div>
  <p>クリックした回数: {count}</p>
  <button on:click={() => count += 1}>クリックしてください</button>
</div>

// React
function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>クリックした回数: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        クリックしてください
      </button>
    </div>
  );
}

// Vue
<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <div>
    <p>クリックした回数: {{ count }}</p>
		<button v-on:click="count++">クリックしてください</button>
  </div>
</template>

 いずれも、「クリックしてください」と書かれたボタンを押すと、「クリックした回数」の右側に表示されている数値がカウントアップしていきます。実際に動作しているところは、Svelteは公式のREPLから、ReactではCodePenから確認することができます。以下では主にReactとの対比で解説しますが、Vueの例も公式のREPLから確認できます。

 Reactに比べてSvelteのコードの行数が少ないことも優れた点ですが、それ以上に、従来のWeb開発で慣れ親しんできた「普通のHTMLと普通のJavaScript」の見た目にかなり近いことにも注目です。

 Reactでは、コンポーネントはクラスや関数として定義され、JSXというHTMLに似たマークアップ言語を記述することで、コンポーネントのHTML上での文書構造(DOM構造)を定義します。このJSXはマークアップ言語の宣言性と動的言語の表現力を融合させた優れたテクノロジーではあるのですが、それが故に伝統的なHTMLとJavaScriptでのWeb開発とはかなり異なった世界観を理解することが必要となります。

 一方のSvelteでは、コンポーネントの文書構造は、ほとんど普通のHTMLで書くことができます。異なるのは、{foobar}で示される構文変数や制御構造を使うことができることと、Svelte上でのイベントハンドラを表す特別な属性(上記の例ではon:click)が使えることくらいです。これらは使わなくても良いので、単なるHTMLの断片をコピペしてSvelteコンポーネントとして使いまわすこともできます。

 特に注目すべきは、コンポーネント内の状態(ステート)を使う方法です。Reactでは、これをuseState(関数コンポーネントの場合)やsetState(クラスコンポーネントの場合)といった特別な関数を使って実現するところ、Svelteでは、通常のJavaScriptの変数を定義し、新しい値を代入するだけで使用することができます。これによって、画面の表示内容の変化を伴う動的な処理でも、普通のJavaScriptを書くのと同じ感覚で開発することができます。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Svelteの特徴

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
高速・軽量なJavaScriptフレームワーク「Svelte」の世界連載記事一覧
この記事の著者

濱口 恭平(ハマグチ キョウヘイ)

 1990年・三重県生まれ。ドイツに拠点を置く Web3 / Privacy Tech スタートアップ でCTO/VPoEを務める傍ら、サイドプロジェクトとして「誰でも使えるビデオ通話SDK 」"kommu" を開発している。 多くの人に快適な開発者体験を提供できるフロントエンド技術を探求する中で Svelte に出会い、開発者コミュニティでの交流をきっかけに2021年には公式イベントSvelte Summit での登壇を経験。 2022年からは国内...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15394 2021/12/28 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング