svelte と tailwind で始めるフロントエンド開発

1. Svelte と Tailwind で始め
る今時のフロントエンド

2. 日進月歩のフロントエンド界隈
ですが、皆さんはどのような環
境で開発してますでしょうか？

3. ここ数年のフロントエン
ドのカオス化はすごいこ
とになっておりました。

4. jQuery・React・Vue様々な
技術が生まれそして消えてい
きました。

5. Svelte はそんな中、頭一つ
抜けている感があります。

6. Svelteのここが良い
•覚えることが少ない
•普通のJavascriptだけで大丈夫
•VDOMを使わない（遅くはない）
•Redux VuexのようなFlux的な状態管理をしない
•機能的にもReact・Vue.jsに負けてない

7. では早速 Svelte の使
い方をお見せします。

8. npx degit sveltejs/template project

9. まず、プロジェクトを作成す
るコマンドをコマンドライン
から入力していきます。

10. 終了したら以下を実行
npm install
npm run dev
http://127.0.0.1:5000/
ブラウザから上記にアクセス

11. Webサーバ（開発用）が立ち
上がってもう開発できます。
圧倒的な敷居の低さです！

12. ちなみにビルドエンジン
は vite がおすすめです。

13. Vite はここがいい
•ビルドが速い
•TSの型チェックをしない

14. 話を Svelte 戻しまして
Svelte は画面も作成しやす
いです。

15. HTML ・CSS・Scriptを一
つのファイルに書くことがで
きます。

16. <
s
c
r
i
p
t
>
/
/
ここにスクリプト
<
/
s
c
r
i
p
t
>
<
m
a
i
n
>
<
!
— ここに
H
T
M
L
タグ —
>
<
/
m
a
i
n
>
<
s
t
y
l
e
>
/
*
ここに
C
S
S
*
/
<
/
s
t
y
l
e
>

17. CSSをグローバルで定義してど
こで使っているかわからなくな
ることも少なくなります。

18. そして、ここで Tailwind の登場
なのですが Tailwind は更にCSS
のカオス化を防いでくれます。

19. https://tailwindcss.com/ （公式）
ドキュメント

20. Class にスタイルを直接書いていくの
はちょっとお行儀が悪いのですが、
逆にそこが Svelte とは相性抜群です。

21. <
m
a
i
n
c
l
a
s
s
=
“
p
-
5
m
e
n
u
”
>
<
/
m
a
i
n
>
<
s
t
y
l
e
l
a
n
g
=
“
p
o
s
t
c
s
s
"
>
.
m
e
n
u
{
@
a
p
p
l
y
t
e
x
t
-
w
h
i
t
e
b
o
r
d
e
r
;
}
<
/
s
t
y
l
e
>

22. １画面１CSSでかけることを利用すると、
CSSをスッキリ書くことができます。
（CSSを直接書くことも不要になります）

23. そんな素敵な Svelte と
Tailwind を皆さんも使って
みてくださいませ。