1.5K Views
April 25, 24
スライド概要
完成度中途半端版です
#個人開発集会 2024.04.11にて発表した内容です
ぼくのかんがえたさいきょう のうぇぶふろんと2024 個人開発集会 2024-04-11 Lina Tsukusu
About Me 創好リナ (Lina Tsukusu) Github: neverclear86 VTuber系フリーランスエンジニア Web系をメインにやってる
あなたのWeb開発デッキは?
Next + MUI? Remix? Nuxt + Vuetify? Fresh?
色々あると思いますが
私が思う2024年の Tire1デッキは
風骨Svelteアグロデッキ
今日はこちらのデッキを紹介します
まずこのデッキの構成について
SveltekitとTailwindを軸に Skeletonを召喚するデッキ
立ち上がりも早く、 コントロールデッキとも戦える
このデッキの強い理由 1. すぐに開発を始められる 2. 記述がシンプルで少ない 3. デザインをあとから変えるのも楽 4. あんまり再描画とか考えずにやっても軽い
デッキレシピ Sveltekit Tailwind Skeleton vite vitest playwright
テスト系は他のデッキでも汎用的に使われてるの で今日は話さない
まずはコアになるSvelte, Sveltekit について
Svelteは React、Vueの立ち位置
ただ1点大きく違うことがある
React, Vueは仮想DOMを構築して操作するライブラリ
Svelteはコンパイラである
仮想DOMを構築せず、バニラjsでDOM操作するコードを 生成する
それ故に記述はreactやVueよりもシンプルになれる
ではどれぐらいシンプルか
2つの数値を入力して合計を出力するコンポーネント例
状態管理も標準装備
Sveltekitはnextjs的な立ち位置
扱いやすいファイルパスでのルーティング
layoutとpageに別れてて便利
パラメーターのバリデーションもできるよ
adapterを使ってデプロイ先の環境ごとにビルドができる
SvelteもSveltekitも公式ドキュメントが整ってる
ブラウザでチュートリアルができてすごい!!
Svelte5がこれから来る
もう強いのに進化を残している
詳細は(おそらく)27日のSvelteSummitで
Tailwind
CSSを無限の自由度で書きたくない
どの要素になんのスタイルがかかっているかぱっと見てわ かる
svelte は属性に{}で埋め込めたりclass:クラス名のboolean でクラス適応できたり相性がいい
テーマを定義できたりプラグインいっぱいあったり
ドキュメントが一箇所にまとまっていてCSSを調べるより 楽
ここまで紹介したSveltekitとTailwindを融合して特殊召喚
SkeletonUI
Sveltekit+tailwindのコンポーネントライブラリ
Skeletonのプロジェクト作成コマンド一発で Sveltekit+Tailwindの環境が構築される!
Buttonとか見た目で完結できる汎用的なコンポーネントは Tailwindのクラスで使える
カスタマイズ性が高い!
機能が伴うコンポーネントはSvelteコンポーネントになっ ている
propsでかなりカスタマイズできる
ここまでは他のライブラリでも十分
ここからがマグマなんです
テーマ機能が秀逸
デザイントークン機能で柔軟なスタイリング
一色の定義から濃さを変えて10種類くらい生える
ライト、ダークモードで自動で反転する変数もある!
テーマで基本色+6色と丸みなどを定義可能
テーマを変えたりダークモード変換もかんたん!
テーマもデフォルトで10種類くらいあってほとんどこれで 十分だったりする
さらに
ドキュメントがクソ見やすい〜
これはもう
使っちゃう!
実際にプロジェクト作ってみよう(デフォルトのデモアプリ でちょっといじる)
というわけで個人的に2024年環境をメタれそうだと思うウ ェブフロントデッキ
風骨Svelteアグロデッキ