🍜
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
- devcontainer
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 に従い、一部修正が必要です。[1]
対象は、以下の2つです。この修正が終われば、あとは Cloudflare に deploy するだけです。
- SvelteKit の deploy 先として Cloudflare を使います。
- 手順は以下のとおりです。
- Cloudflare のアカウントを作成します。
- Workers を選択します。
- Pages から「Gitに接続」をクリックします。
- 好きなリポジトリを選択します。
- 「セットアップの開始」をクリックします。
Summary
- Svelte、SvelteKit、Cloudflare について書きました。
- Svelte 自体の書き味は、とても良いものだと感じました。
scripttemplatestyleという書体に慣れる必要があります。 - とはいえ、順番自体は強制されていないようです。Go でいう「Go らしさ」のような、それじゃなくても良いけど、「Go らしく書こうよ」的なノリ？
- Remix の Routing と似ていると思います。あまり詳しくありませんが、今の Frontend の流れ自体がそういう感じなのかもしれません。
Discussion