ぼくのかんがえたさいきょうのうぇぶふろんと2024

ぼくのかんがえたさいきょう のうぇぶふろんと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アグロデッキ