Svelteを使ってみる（１）

最近ちらほらと名前を聞く「Svelet」というフレームワーク？の導入の仕方のメモ（個人的にはコンポーネントトランスファという方がしっくり来るんだが）

おそらく話題になってる経緯は、 In 2017 expect... · Front-end Developer Handbook 2017 に「Svelet」の名前が出てきているからなんだろうな〜というくらいにしか思ってないです。そのため、今後他のフレームワーク（React, Angular, Vue, Riot など)みたいに普及するかはわからないです。ただ、他のフレームワークよりもデザイナーさんとかは扱いやすいと思ってます。

まだ、検証してはいないので今後利用していく上で意見が変わるかもしれませんが、現段階では他のフレームワークやライブラリにほぼ競合しないのでは？と思い、その辺りが個人的に注目度が高いです。このあたりは今後いろいろ試してみてブログで報告できたらいいなー。

当面は公式 https://svelte.technology/guide#getting-started の getting-startedに従っていきます。

前提条件

node.js (npm) がインストールされていること。 *1

Svelte CLIをインストール

npm の場合

npm install  svelte-cli

※ 任意でグローバルインストールしてください。

yarn の場合

yarn add  svelte-cli
yarn

インストール結果

├── node_modules
│   ├── .bin
│   │   └── svelte -> ../svelte-cli/bin.js

svelteというコマンドがインストールされます。

コンポーネントを用意する

コンポネント用のHTML HelloWorld.html ファイルを用意します。

<h1>Hello {{name}}</h1>

ほぼ、普通のHTMLファイルです。

コンポーネントファイルをコンパイルする

コンポーネントをコンパイルして、JSファイルへ変換します。

svelte compile --format iife HelloWorld.html > HelloWorld.js

index.html からコンポーネントのJSファイルを読み込む

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My first Svelte app</title>
</head>
<body>
  <main></main>
  <script src="HelloWorld.js"></script>
  <script>
    var app = new HelloWorld({
        target: document.querySelector('main'),
        data: {
            name: 'test'
        }
    });
  </script>
</body>
</html>