Deploy a Svelte App to Cloudflare.

この抜粋の内容は次のとおりです。
- 環境構築
- Svelte
- SvelteKit
- Deploy a Svelte site

```mermaid
flowchart LR
    page["+page.svelte"]
    server["+page.server.js
    +server.js"]
    qiita["qiita.com"]
    db1[(Database)]
    page -->|HTTP Request| server
    server -->|HTTP Response| page
    subgraph ServerSide
    server --> qiita
    qiita --> server
    server --> db1
    db1 --> server
    end
```

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

---

2023年8月2回目です。

[Svelte](https://svelte.jp/) についてです。

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

やりたくない派の彼らの話を要約すると以下のとおりです。
- React で「状態管理」をやりたくない
- React で認証をやりたくない
- React で Rendering をやりたくない

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

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

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

それが、Svelte です。もしくは、[Remix](https://remix.run/)。

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

## 環境構築
- 構成
   - devcontainer
      - Node.js + JavaScript
   - extensions
      - `svelte.svelte-vscode`

https://github.com/danny-yamamoto/sveltekit-example/blob/0ba7b9070b697dea946708994ba2c11466a7dbc7/.devcontainer/devcontainer.json#L4-L18

## 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入門」](https://www.amazon.co.jp/Svelte%E5%85%A5%E9%96%80-%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E9%81%B8%E6%9B%B8-Kyohei-Hamaguchi-tnzk/dp/4297134950)です。初めて Svelte を触る人には、お勧めしたい1冊です。
- ちなみに、最近の技術評論社の本は、読みやすくてオススメです。[「Go言語プログラミングエッセンス」](https://www.amazon.co.jp/Go%E8%A8%80%E8%AA%9E%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%82%A8%E3%83%83%E3%82%BB%E3%83%B3%E3%82%B9-%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E9%81%B8%E6%9B%B8-mattn/dp/4297134195)も良いです。

https://www.amazon.co.jp/Svelte%E5%85%A5%E9%96%80-%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E9%81%B8%E6%9B%B8-Kyohei-Hamaguchi-tnzk/dp/4297134950

https://www.amazon.co.jp/Go%E8%A8%80%E8%AA%9E%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E3%82%A8%E3%83%83%E3%82%BB%E3%83%B3%E3%82%B9-%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E9%81%B8%E6%9B%B8-mattn/dp/4297134195

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

https://github.com/danny-yamamoto/svelte-example

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

https://github.com/danny-yamamoto/sveltekit-example

- demo の起動は、[公式](https://svelte.jp/docs/introduction)のとおり、これだけです。
```bash
npm create svelte@latest myapp
cd myapp
npm install
npm run dev
```

- そして、最終的に書いたのが、シンプルな[ポートフォリオ サイト](https://my-portfolio-1bp.pages.dev/)です。

https://my-portfolio-1bp.pages.dev/

## Deploy a Svelte site
```mermaid
flowchart LR
    client["client"]
    cdn["Cloudflare"]
    git["GitHub.com"]
    dev["VSCode"]
    cdn -->|Polling| git
    client --> cdn
    dev --> git
```

[Deploy a Svelte site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-site/) に従い、一部修正が必要です。[^1]
[^1]: https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-site/#sveltekit-cloudflare-configuration

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

https://github.com/danny-yamamoto/my-portfolio/blob/0b67eea0beecd29eb03b08b07731ca5e245aabd3/svelte.config.js#L1-L2

https://github.com/danny-yamamoto/my-portfolio/blob/0b67eea0beecd29eb03b08b07731ca5e245aabd3/src/app.d.ts#L9-L17

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

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