フロントがだるいならSveltekitを使え

フロントがだるいなら Sveltekitを使え Web技術集会 LT会 #1 2024-12-18 Lina Tsukusu

About Me 創好リナ (Lina Tsukusu) Github: neverclear86 VTuber系フリーランスエンジニア Web系がメイン お金が尽きたのでもやしが主食に 仕事無いですか?

注意 このLTでは演出上の都合で過剰な表現が使われています。 本意ではないのでご了承ください。

Web開発をされる皆さん

フロントエンドって 面倒くさくないですか?

値を保持したいだけなのにステート管理ツールが多すぎ useState?useMemo?useCallback?どれつかうの? ルーティングも自分で設定しないと･･･ このコードはサーバーで動く?クライアントで動く? 仮想DOMだとcanvas系のライブラリがしんどい... そもそも毎回必要な記述が多くて覚えられない

ただでさえ、 UI/UXとか端末対応とか 考えなきゃいけないのに･･･

適当にHTML/CSS/JS(TS)を 直感的に書くだけで 動いてくれねぇかなぁ

あるよ

毎回同じような呪文も要らなくて 直感的に書いたら動くFWが

あるよ

Ω ΩΩ< ﾅ､ﾅﾝﾀﾞｯﾃｰ!!

とりあえず見て

ひとまずReactと比較

ボタンを押すと+1されるカウンター のコンポーネント

React

Svelte

直感的〜〜〜

普通のJS変数としては扱えない

$state はついてるけど 普通の変数として扱える (配列もオブジェクトもいけるぞ)

<> これいる? 標準のイベントハンドラは onclick では?

当然HTML直書き 標準の onclick 属性に関数渡してるだけ

シンプルで素晴らしい! シンプルなのはいいこと!!

なんでこれ動くの?

ページの動作は今まで jQueryさんとか仮想DOMさんが 頑張ってメンドイところを 吸収してくれてた

しかし

最近の開発の流れを改めて見ると

1. どうせNode環境でどうせTypeScript使って書く 2. 動かせるようにJavaScriptに変換、 仮想DOMランタイムをバンドル 3. ブラウザ実行時にランタイムがコードを解釈して動かす

ブラウザ実行時に ランタイムがコードを解釈 して動かす

2.でコンパイルみたいなことを してるのに?

 < じゃあコンパイル時に 解釈すればええやん

Svelte はランタイムでなく コンパイラである

なので

似たような記述を 毎回する必要がない

おまけにコンパイルされて バニラJSなので初期表示が有利

ただのコンパイラなので これだけだとまだ Webアプリ構築はメンドイ

当然メタフレームワークもあ る! (ReactのNext.jsみたいな)

ファイルベースで ルーティング

ディレクトリ作って +page.svelte とか作るだけ

データの扱いも楽に

データロードや フォームアクションを よしなにしてくれる

adapterシステムで Zero-Configでデプロイ

SSR時もファイル名で サーバーサイドのコードが 明確に

まあ大体いつもほしい機能は 設定無しでやってくれる

逆に複雑な事をしたいときは 設定すれば大体できる

偉すぎ〜〜〜

(私はもうReact,Vueに戻れない)

私のようなスボラエンジニアで 仕事でReactとか使ってるなら ご注意を

おまけ

Tailwind とも相性がいいので おすすめ DaisyUI もおすすめ

Skeleton コンポーネントライブラリ

Sveltekitで今すぐ ズボラフロントを始めよう

以上