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

1.5K Views

April 25, 24

スライド概要

完成度中途半端版です

#個人開発集会 2024.04.11にて発表した内容です

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

ぼくのかんがえたさいきょう のうぇぶふろんと2024 個人開発集会 2024-04-11 Lina Tsukusu

2.

About Me 創好リナ (Lina Tsukusu) Github: neverclear86 VTuber系フリーランスエンジニア Web系をメインにやってる

3.

あなたのWeb開発デッキは?

4.

Next + MUI? Remix? Nuxt + Vuetify? Fresh?

5.

色々あると思いますが

6.

私が思う2024年の Tire1デッキは

7.

風骨Svelteアグロデッキ

8.

今日はこちらのデッキを紹介します

9.

まずこのデッキの構成について

10.

SveltekitとTailwindを軸に Skeletonを召喚するデッキ

11.

立ち上がりも早く、 コントロールデッキとも戦える

12.

このデッキの強い理由 1. すぐに開発を始められる 2. 記述がシンプルで少ない 3. デザインをあとから変えるのも楽 4. あんまり再描画とか考えずにやっても軽い

13.

デッキレシピ Sveltekit Tailwind Skeleton vite vitest playwright

14.

テスト系は他のデッキでも汎用的に使われてるの で今日は話さない

15.

まずはコアになるSvelte, Sveltekit について

16.

Svelteは React、Vueの立ち位置

17.

ただ1点大きく違うことがある

18.

React, Vueは仮想DOMを構築して操作するライブラリ

19.

Svelteはコンパイラである

20.

仮想DOMを構築せず、バニラjsでDOM操作するコードを 生成する

21.

それ故に記述はreactやVueよりもシンプルになれる

22.

ではどれぐらいシンプルか

23.

2つの数値を入力して合計を出力するコンポーネント例

25.

状態管理も標準装備

26.

Sveltekitはnextjs的な立ち位置

27.

扱いやすいファイルパスでのルーティング

28.

layoutとpageに別れてて便利

29.

パラメーターのバリデーションもできるよ

30.

adapterを使ってデプロイ先の環境ごとにビルドができる

31.

SvelteもSveltekitも公式ドキュメントが整ってる

32.

ブラウザでチュートリアルができてすごい!!

33.

Svelte5がこれから来る

34.

もう強いのに進化を残している

35.

詳細は(おそらく)27日のSvelteSummitで

36.

Tailwind

37.

CSSを無限の自由度で書きたくない

38.

どの要素になんのスタイルがかかっているかぱっと見てわ かる

39.

svelte は属性に{}で埋め込めたりclass:クラス名のboolean でクラス適応できたり相性がいい

40.

テーマを定義できたりプラグインいっぱいあったり

41.

ドキュメントが一箇所にまとまっていてCSSを調べるより 楽

42.

ここまで紹介したSveltekitとTailwindを融合して特殊召喚

43.

SkeletonUI

44.

Sveltekit+tailwindのコンポーネントライブラリ

45.

Skeletonのプロジェクト作成コマンド一発で Sveltekit+Tailwindの環境が構築される!

46.

Buttonとか見た目で完結できる汎用的なコンポーネントは Tailwindのクラスで使える

47.

カスタマイズ性が高い!

48.

機能が伴うコンポーネントはSvelteコンポーネントになっ ている

49.

propsでかなりカスタマイズできる

50.

ここまでは他のライブラリでも十分

51.

ここからがマグマなんです

52.

テーマ機能が秀逸

53.

デザイントークン機能で柔軟なスタイリング

54.

一色の定義から濃さを変えて10種類くらい生える

55.

ライト、ダークモードで自動で反転する変数もある!

56.

テーマで基本色+6色と丸みなどを定義可能

57.

テーマを変えたりダークモード変換もかんたん!

58.

テーマもデフォルトで10種類くらいあってほとんどこれで 十分だったりする

59.

さらに

60.

ドキュメントがクソ見やすい〜

61.

これはもう

62.

使っちゃう!

63.

実際にプロジェクト作ってみよう(デフォルトのデモアプリ でちょっといじる)

64.

というわけで個人的に2024年環境をメタれそうだと思うウ ェブフロントデッキ

65.

風骨Svelteアグロデッキ