目次

    Svelteとは?

    Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
    
    訳:Svelteはウェブアプリケーションを構築するための新たな方法です。Svelteは宣言的コンポーネントを用い、効率的にそれらを外科的にDOMをアップデートするコンパイラです。
    
    


    上記は、Svelteの公式サイトから引用してきたものです。ご存知の通り、ReactはJavaScriptのライブラリ、VueとAngularはJavaScriptのフレームワークですが、Svelteはコンパイラです。これは何を意味するのでしょうか?


    もともと、AngularやVue、Reactが開発された目的の1つはDOMの不要なアップデートを抑えるためでした。jQueryは素晴らしいフレームワークの1つですが、サイトやアプリケーションの一部を修正すると、全てのページが再レンダリングされてしまう欠点を持っていました。小さなアプリケーションであれば問題ありませんが、大きなアプリケーションとなるとレンダリングのコストが増大するため、大きな問題になり得ます。


    Reactなどのフレームワークはこの問題に仮想DOMを用いて対処しました。仮想DOMを用いることで、実際に更新された差分のみを更新し、不要なレンダリングを抑えることができます。

    Svelteはこの問題を、Svelte自身がコンパイラとして変更の差分を検出、更新することで解決しました。また、Svelteはコンパイル後のファイルにJavaScriptやCSSのライブラリのコードを取り除いたものを出せるので、コンパイル後のファイルサイズも小さくなります。Svelte自身はただのコンパイラなので、非常に軽量です。また、コードを非常にシンプルに書けるというメリットもあります。


    もちろん、デメリットもあります。現時点ではRedux(React)やVuex(Vue)などの大きなエコシステム及び状態管理システムを持たないため、大規模なアプリには不向きと言えるかもしれません。


    ここからは、シンプルなカウンターアプリを用いてSvelteの使い方について簡単に説明します。


    導入のためのステップ

    1. 1. 必要なライブラリのインストール及び環境構築
    npx degit sveltejs/template YOUR-APP-NAME
    cd YOUR-APP-NAME
    npm install(CRAを使ってReactのアプリを作成した時と違い、この時点ではnode_modulesがインストールされていません。なので、一度インストールする必要があるので注意です)。
    npm run dev


    1. 2. 必要に応じて、作成されたファイルを確認してください(任意です)。CRAと違ってwebpackではなくrollupがバンドルツールとして用いられている点、タイプチェッキングファイルがあるのでTypeScriptも簡単に使えそうな点が印象的です。main.jsの中にはAppのインスタンス化が行われており、Vue2の書き方と似ていることが分かります。
    // main.js(参考として載せているだけで、デフォルトのまま変更の必要はありません)
    
    
    import App from './App.svelte';
    
    
    const app = new App({
    	target: document.body,
    	props: {
    		name: 'world'
    	}
    });
    
    
    export default app


    1. 3. counterフォルダとCounter.svelteファイルを作成してください。Reactの拡張子は.js(jsx)、Vueの拡張子は.vueですが、svelteの拡張子は.svelteになります(そのまんまですね)。ベーシックなカウンターアプリのコードを以下に記載します。Vueをもし使ったことがあればお気づきかもしれませんが、Vueの書き方と非常によく似てます。JavaScriptのパートはscriptタグで囲い、CSSのパートはstyleタグで囲います。異なる点は、HTMLのパートはtemplateタグで囲う必要がないところです。実際のコードの書き方自体も非常にシンプルで、書き方自体はVue3のcomposition APIのsetup script構文に酷似していますがrefのインポートも不要です(もちろんset upの記載も不要です)。また、Vueはこのファイルだけにスタイルを利かせたい場合はscopedを記載する必要がありますが、Svelteの場合はその記載も不要で、デフォルトでscopedな設定になっています(書き忘れがなくなるのでありがたいですね)。例えば今回のケースだと、ボタンの文字を青色に変えていますが、この設定はCounter.svelteファイルだけに適応されます。また、これはReactをよく使う人向けの注意ですが、"onClick"ではなく"on:click"と記載しないと動きません。あくまで書き方はVueに近い印象ですね。
    // Counter.svelte
    
    <script>
      let count=0;
    
    
      const incrementCount = () => {
        count++
      }
    </script>
    
    
    {count}
    <button on:click={incrementCount}>
      add
    </button>
    
    
    <style>
      button {
        color: blue;
      }
    </style>


    1. 4. 作成したCounter.svelteファイルをApp.svelteにインポートし、利用してください。Reactに慣れている人はこちらも最初戸惑うと思いますが、export defaultをつけなくても自動でexport defaultされる仕様になっています。もちろん、各変数や関数を別途エクスポートすることもできます。便利ですね。余談ですが、Vue3のcompositionAPIのscript setup構文の場合もexport default不要で自動エクスポートされます。理解すれば便利ですが、Reactから入った人は戸惑うかもしれません(自身も最初はかなり戸惑いました。。)。
    // App.js
    
    <script>
    	import Counter from "./counter/Counter.svelte"
    </script>
    
    
    <Counter/>


    1. 5. 以下が実際のカウンターアプリの画面です。きちんと動いていますね。ちゃんとのボタンテキストの色も青に変わっています。


    まとめ

    本文中でも述べましたが、Svelteは軽量で、シンプルにコードが書けるコンパイラです。

    シンプルなカウンターアプリ1つとっても、Vueのようにtemplateタグやrefのインポートが不要(composition APIの場合)で、ReactのようにuseStateを用いてreactiveな値にする必要がありません。結果、コードの量もReactやVueと比較しても減らせる傾向があります。


    また、個人的にチュートリアルが充実しているのもSvelteの良いところの1つだと思っています(Async/awaitの使い方などもチュートリアル内にあります)。参考資料内にチュートリアルも載せるので、ぜひご参考いただければと思います。


    参考資料

    Official documentation: https://svelte.dev/ 

    Official tutorial: https://svelte.dev/tutorial/basics

    A Practical Introduction to Svelte: https://blog.openreplay.com/a-practical-introduction-to-svelte

    Vue official documentation(script setup): https://vuejs.org/api/sfc-script-setup.html

    Svelteとは何か? ReactやVueJSとの違いは?: https://it-kyujin.jp/article/detail/1631/


    ここまでお読みいただきありがとうございました!

    PREV
    2022.05.18
    最強の文章術 ストーリーテリングとは?
    NEXT
    2022.06.10
    フレーミング効果とWEBサイト