Deploy a Svelte App to Cloudflare.

この抜粋の内容は次のとおりです。

• 環境構築
• Svelte
• SvelteKit
• Deploy a Svelte site

さらに詳しく知りたい方は読み続けてください。

---

2023年8月2回目です。

Svelte についてです。

身近の Frontend Engineer と Architect の間にある海溝。
それは、「やりたくない海溝⚡️」です。

やりたくない派の彼らの話を要約すると以下のとおりです。

• React で「状態管理」をやりたくない
• React で認証をやりたくない
• React で Rendering をやりたくない

そうですよね。どれも面倒です。そこに海溝がある。

「どいつもくだらないや　からが人生」

その海溝を乗り越えませんか？

それが、Svelte です。もしくは、Remix。

SvelteKit で SSR をやっていきます。

環境構築

• 構成
  • devcontainer
    • Node.js + JavaScript
  • extensions
    • svelte.svelte-vscode

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 は、UI を構築するためのライブラリと説明されています。
• 特徴の1つが、「状態管理」を特別な実装なしに使うことができることです。
  • 「状態管理」できます！どうですか？
• 今回、Svelte を触るにあたり参考にしたのが「実践 Svelte入門」です。初めて Svelte を触る人には、お勧めしたい1冊です。
• ちなみに、最近の技術評論社の本は、読みやすくてオススメです。「Go言語プログラミングエッセンス」も良いです。

• Svelte を試した repo は、こちらです。

SvelteKit

• SvelteKit は、UI以外の部分を提供する Framework ですと説明されています。
• Routing や Server Side Rendering など。
  • 「Rendering」できます。もうやるしかないでしょ！
• SvelteKit を試した repo は、こちらです。

• demo の起動は、公式のとおり、これだけです。

npm create svelte@latest myapp
cd myapp
npm install
npm run dev

• そして、最終的に書いたのが、シンプルなポートフォリオ サイトです。

Deploy a Svelte site

Deploy a Svelte site に従い、一部修正が必要です。¹

対象は、以下の2つです。この修正が終われば、あとは Cloudflare に deploy するだけです。

• SvelteKit の deploy 先として Cloudflare を使います。
• 手順は以下のとおりです。
  1. Cloudflare のアカウントを作成します。
  2. Workers を選択します。
  3. Pages から「Gitに接続」をクリックします。
  4. 好きなリポジトリを選択します。
  5. 「セットアップの開始」をクリックします。

Summary

• Svelte、SvelteKit、Cloudflare について書きました。
• Svelte 自体の書き味は、とても良いものだと感じました。script template style という書体に慣れる必要があります。
• とはいえ、順番自体は強制されていないようです。Go でいう「Go らしさ」のような、それじゃなくても良いけど、「Go らしく書こうよ」的なノリ？
• Remix の Routing と似ていると思います。あまり詳しくありませんが、今の Frontend の流れ自体がそういう感じなのかもしれません。

1. https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-site/#sveltekit-cloudflare-configuration ↩