バックエンドエンジニアにお勧めしたいフロントエンドフレームワークSvelte

ATOM開発チームのバックエンドエンジニア、にゃんと申します。

現在のWebアプリケーション開発ではバックエンドとフロントエンドで職種が別れているのが一般的になってきましたが、バックエンドエンジニアだからと言ってフロントの知識が不要というわけではありません。私も自分なりに様々なフロントエンドフレームワークに触れていますが、バックエンドをメインとするエンジニアとって1番使いやすいのはSvelteではないかと考えています。

というわけで今日はバックエンドエンジニアが見たSvelteという話をしたいと思います。

Svelte（すべると）って何？

SvelteはReactやVueなどと同じコンポーネントベースのフロントエンドのアプリケーションフレームワークです。以下のような特徴があります。

コンパイル時にコードを最適化することで、小さく、高速なアプリを構築できる
リアクティブプログラミングを簡単に実装できる
仮想DOMを使わないのでパフォーマンスが高い

なぜSvelteをお勧めするのか？

記述がシンプル
必要なものが最初から揃っている

記述がシンプル

React、Vueとコードを比較してみましょう。inputに入力した2つの値を足し算するだけの簡単なサンプルコードです（加算処理はHTML側に埋め込むことが可能ですが、比較のためあえてJS側に書いています）

<script>
  let a = 1;
  let b = 2;
  $: result = a + b;
</script>

<form>
  <input type="number" bind:value={a} size="4"/>
  +
  <input type="number" bind:value={b} size="4"/>
  =
  <strong>{result}</strong>
</form>

同じものをReactやVueで書くと以下のようになります。

import { useState, useEffect } from 'react';

function App() {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);
  const [result, setResult] = useState(a + b);

  useEffect(() => {
    setResult(a + b);
  }, [a, b]);

  return (
    <form>
      <input type="number" value={a} onChange={e => setA(Number.parseInt(e.target.value))} />
      +
      <input type="number" value={b} onChange={e => setB(Number.parseInt(e.target.value))} />
      =
      <strong>{result}</strong>
    </form>
  );
}

export default App;

<script>
export default {
  data() {
    return {
      a: 1,
      b: 2,
    };
  },
  computed: {
    result() {
      return this.a + this.b;
    },
  },
};

</script>

<template>
  <form>
    <input type="number" size="4" v-model="a" />
    +
    <input type="number" size="4" v-model="b" />
    =
    <strong>{{ result }}</strong>
  </form>
</template>

いかがでしょうか、Svelteのコードは非常にシンプルで理解が容易です。

Svelteでは単にletで変数を宣言すればリアクティブな値となります。Svelteはコンパイルでリアクティブ処理を行うコードに書き換えているため簡易な記述でリアクティブプログラミングが実現できます。

HTML部分の記述も、JSXよりもシンプルなテンプレート文法のためフロントエンドに詳しくないバックエンドエンジニアでもスムーズに扱えます。

必要なものが最初から揃っている

Svelteでは最低限の機能追加のためにnpmを探して比較検討インストールする手間が少ないのも利点です。

SvelteにはSvelteKitというフレームワークが統合されています。これはReactにおけるNext.JS、Vueに対するNuxt.JSにあたるもので、Routing、SSRなどを担当し、ある程度大きなアプリを開発する場合は必須です。Next.JSはReactを知っている前提でドキュメンが書かれており、初心者が最初にNext.JSを学ぶのは少々ハードルが高くなっています。Svelteではドキュメントも統合されているので混乱が少なくてすみます。

また、Svelteではアプリケーションの状態管理にはStoreを使います。ReactやVueではReduxやVuexというライブラリがよく用いられますが、StoreはSvelteは基本機能に統合されているため別途インストールの必要はなく、シンプルな記述で利用できます。

これらは慣れてしまえばさほど問題ではないとはいえ、サブスキルとしてフロントを扱うバックエンドエンジニアには大きな助けになります

シェアについて

Svelteの欠点はまだシェアが小さい事です。VueやReactに比べるとネット上の情報やライブラリは不足しています。

ただ、これはバックエンドエンジニアが使う場合は大きなデメリットにはならないと思います。困ったら最悪バックエンドに逃げることが可能だからです。いざとなれば複雑な処理はAPIサーバに実装し、Svelteを高性能なView層として使うこともできます。

というわけで

いきなりメインプロダクトに採用するのは難しいと思いますが、まずは管理画面など裏側のツールで採用して感触を掴んでみるのは悪くないと思います。フロントエンド専門がいるチームでも管理画面の修正を毎回依頼するのも気が引けるので、自分たちでサクッと実装できるSvelteはアリではないでしょうか。