「「Svelte Japan Online Meetup #3」」

要約

Superforms v2 with Formsnap and Valibot (かずうみさん)
- formにフォーカス
- Valibot: バリデーションlib
- バンドルサイズを小さくするための工夫がされている
- Formsnap
- Superformsのラッパー
- 少ない記述量 + アクセシビリティも配慮されている
- shadcn-svelte
- UIコンポーネント
- Formsnapと作者が同じなので、差し替えが容易
脱法Svelte (ssssotaさん)
- 法: 1ファイル1コンポーネント
- Svelte 5: Snippetsが提供されるが、大変なケースもある
- svelte-twc
- react-twcから着想を得た
- class注入済みのコンポーネントが作成できる
- Snippetのテストをどう書くか?
- @testing-library/svelte
- svelte-jsx-snippet
  - v5で利用できる
VanillaJSマンの視点から見た、Observable, Reactive, SignalsとGUI実装技術について (はなだ☆のぶかずさん)
- UIの難しさ
- 本質的なもの
  - 何かするか分からない
  - 非同期性
  - パフォーマンス
  - 状態管理
  - セキュリティ
- 要求が肥大化しやすい
  - アニメーション
  - リッチ
  - デバイスの多様化
  - 国際化対応
  - UX
  - アクセシビリティ
- 対処
  - 設計を大事に
  - コードを分割
  - 分割したコードをうまく組み合わせる
  - FWだけでは解決しない
- 入力と表示の間に状態・処理が含まれている
- MVCモデルが自然と導出される
- イベントと状態はセット
- SPA
  - MVC初期化問題
  - Client-Sever時代に戻る
- 状態FWとMVC
  - 更新伝搬をうまく処理したい
- Dependency MVC
- モデルがビューへ通知を送ることで更新
- Observer
- Reactive
- 入力からの変数の変化の伝搬の仕組み
- 変数の伝搬システムのみの場合が多い
- Svelte 5でのReactiviy
- 構文でサポートされている
  - $derived
Svelte採用記 - 位置情報と可視化の会社で、全社の標準技術スタックに選ぶまで (Sorami Hisamotoさん)
- 今年から全社の標準技術として採用
- 位置情報を扱う可視化の専門家
- 導入経緯
- 元々はVue
- 地図ライブラリとの相性
  - MapLibre / Mapbox GL JS
- 別分野から参入 + 課題 > 技術
- 初学者に優しい
- 適材適所で使い分け
- データ可視化の界隈で評価されている
- 悩み
- UIライブラリの選定
  - Melt UIが伸びている
- Svelte 5への移行
  - 記法や仕組みが大きく変わる
- 学ぶには?
- 公式チュートリアル
- 思想
- 根本的にはWeb開発が難しすぎる
- Svelte Origins
  - 少数の人々に愛されるものを
よりシンプルになる Svelte の世界 (azukiazusaさんさん)
- v5の変化: コンセプトを大きく変える機能が多く取り込まれた
- 特徴
- 記述量が少ない & シンプルな構文
- 学習コストが少ない
- アプリが複雑になるにつれて、辛さが出てきた
- 変数がリアクティブか判断が難しい
- リファクタリングが困難
- カスタムストア
  - 急に学習コストが高い
- ストアの値を参照している糖衣構文
- アプリが大きくなると学習コスト + 認知負荷が高くなる
- Rune
- $state(): リアクティブな変数
  - リファクタリングがしやすくなる
- $effect(): 副作用を実行
  - ラベル構文を置き換え
  - ライフサイクル関数も置き換え
  - 注意点
  - 状態の同期は避ける
- $props
  - export letを置き換え
  - JSに近いことでpropsを指定できる
- on: ディレクティブが非推奨に
- Snippets
- 再利用可能なマークアップ
- 単なる値として扱われるので、コンポーネントに渡せる
- 型をつけられる
- は非推奨に

KATO-Hiro / Daily-hit

「「Svelte Japan Online Meetup #3」」 #1332

要約

感想

Keep

Problem

Try

出典