Open14

Go & Sveltekit static adapterでWebアプリ開発

Svelteが気に入ったので

  • Svelteをほんの少しだけ触って、気になったのでSveltekitの staticアダプターを活用した静的なWebアプリケーションを作成する。
  • 静的ファイルとして、jsその他ファイル群にコンパイルできる点が気に入った。
  • しかし、まだコミュニティが未発達で情報は少ない。ただし、ドキュメントが整備されているので、大抵のことは載っているし、"Svelte REPL"とかで検索すると実例デモ付きのソースコードを読めるので助かる。
  • GoとGinを使って、Sveltekitでコンパイルしたソースを、静的ファイルとしてサーバーに置く。
  • 作りかけのものはあるが、テストコードも書いていないのと、ソースがめちゃくちゃなので、今後修正していく。
  • Pythonで作成したものをGoに移植して、主要OS上のWebブラウザで動くアプリケーションにしたい。

Svelteは仮想DOMを用いずにVanilla JSにコンパイルするらしく、その簡潔さが気に入った。
そしてさらに、SveltekitのAdapterをStaticに設定してやれば、SSGができる?

あとで見る
Svelteの開発者が登壇した際の動画。

以下、和訳が間違っているかもしれません。ご指摘いただけると幸いです。

Rich Harrisに依ると

Frameworks are not tools for organizing your code,
they are tools for organizing your mind.

訳:「フレームワークはあなたのコードを整理する道具ではなく、あなたの考えを整理する道具だ。」

また

Svelte 3 moves Reactivity out of the component API, and into the LANGUAGE.

訳:「Svelte3は反応性をコンポーネントAPIから”言語”に移行させる。」
訳になっていない...
APIではなく、言語としての役割を担っていくということだろう。

英語を聞いて文章にまとめようとすると難しいな...
今回の動画の本質は上記だけじゃなく、動画内で説明していたReactとの比較や、変数のバインド、CSSの具体例などにからわかるように、Svelte側で抽象化してやってソースコードの複雑性を減らしてやる(Svelteが標榜する「Write less code」)ことが本質である。
そしてVanilla JSへのコンパイル、まさにその抽象化された元コードを翻訳してやることで、直接にDOMを操作しパフォーマンスとコンパイル前のソースに人間への直感性を担保しているのだと理解した。

Svelteのバインディングの方法とコンポーネントに値を渡す方法を理解できていない。

eachでの動的なフォーム生成に手こずっている。
動的に反映されない。

動的なフォームの実装が完了。
フォームを

<input type="number" value=1 bind:value="{todo.something}">

と実装していたために、値を2度設定していることになっていた。そのせいで、値がユニークでないというエラーが出て、3日くらい溶かした…

また時間の初期値の設定はUTCのフォーマットを文字列とすることで完了した。

webアプリができたので更新。

成果物
カフェインの減衰を計算するプログラム。Goが動く環境なら、クローンしてGoだけビルドすれば動きます。
グラフ周りの理解が浅く汚いし、バグがまだ残っていますが...

Svelteで学んだことはZennの記事にする予定。

Svelteの作者のリッチ・ハリスがポッドキャストに出ている動画。Svelteの成立背景から目的などを話している。途中まで見た。

Svelte 3 moves Reactivity out of the component API, and into the LANGUAGE.

訳:「Svelte3は反応性をコンポーネントAPIから”言語”に移行させる。」

この箇所が以前はわからなかったが、本動画でSvelteを作っている最中に言語を作り出しているんだと数年前に気づいた、と語っておりなんとなく感覚がわかってきた気がする。

https://www.youtube.com/watch?v=JIBZwYZcwIo

フロント側の処理がもたつく気がするのでRustの勉強も兼ねてWasmのSvelteへの導入を検討中。

想定している利用技術

  • フロントエンド

    • TypeScript
    • Svelte
      • Sveltekit
    • Rust(Wasm)
  • バックエンド

    • Go
      • Gin
ログインするとコメントできます