Svelteメモ
最終更新日：2022年03月22日
UnityエンジニアですがSvelteはじめました。
更新履歴
（2022年2月5日）とりあえずページ作成
Svelte（スベルト）とは
Richard Harris氏（元New York Times社、現Vercel社）が開発したウェブアプリケーションのフレームワークです。Reactに近いですが、拡張子.svelteファイルに素に近いJavaScript、CSS、HTMLを記述してコンポーネントの作成ができ、記述量が少ないのが特徴です。
また、ReactのNext.jsに相当するフルスタックフレームワークのSvelteKitや、React Nativeに相当するSvelte Nativeが開発中のようです。なお、Svelteの公式サイトはSvelteKitで作られています。
Svelteの特徴
Reactとの大きな違いとして仮想DOMを使用していません。また、普通に書いたJavaScriptコードがリアクティブなコードとしてコンパイルされる仕組みになっているようです。バンドラーはRollupが使用されています。
とりあえずSvelteを使ってみる
Node.jsをインストールして、
$ npx degit sveltejs/template svelte-test
$ cd svelte-test
$ npm install
$ npm run dev
で、ローカルホストサーバーが立ち上がります。src/App.svelteを開いてみると、上記の素に近いJavaScript、CSS、HTMLでコンポーネントを作成できる特徴が分かると思います。書き換えると変更が即座に反映されます。
デプロイする
Svelte / SvelteKitで開発したウェブサイトをデプロイするには、VercelやCloudflare Pagesを使うと簡単です。VercelのCLIを使うか、作成したプロジェクトをGitHub等にpushして連携設定をするとビルドされウェブに公開されます（詳しくはGoogle先生に）。ドメインを登録してDNSを設定すれば独自ドメインでウェブサービスがホストされます。
なお、Vercelは料金プランに帯域1TB/月の壁があり、大量のアクセスが想定される用途では注意が必要そうです。
以下の方法でもビルド・ホストできます。
$ npm run build
$ node build/index.js
URLのルーティングをするには
React Routerに相当するsvelte-routingを使用します。
以下φ(..)メモメモ中