SlideShare a Scribd company logo
Svelte と Tailwind で始め
る今時のフロントエンド
日進月歩のフロントエンド界隈
ですが、皆さんはどのような環
境で開発してますでしょうか?
ここ数年のフロントエン
ドのカオス化はすごいこ
とになっておりました。
jQuery・React・Vue様々な
技術が生まれそして消えてい
きました。
Svelte はそんな中、頭一つ
抜けている感があります。
Svelteのここが良い
•覚えることが少ない
•普通のJavascriptだけで大丈夫
•VDOMを使わない(遅くはない)
•Redux VuexのようなFlux的な状態管理をしない
•機能的にもReact・Vue.jsに負けてない
では早速 Svelte の使
い方をお見せします。
npx degit sveltejs/template project
まず、プロジェクトを作成す
るコマンドをコマンドライン
から入力していきます。
終了したら以下を実行
npm install
npm run dev
http://127.0.0.1:5000/
ブラウザから上記にアクセス
Webサーバ(開発用)が立ち
上がってもう開発できます。
圧倒的な敷居の低さです!
ちなみにビルドエンジン
は vite がおすすめです。
Vite はここがいい
•ビルドが速い
•TSの型チェックをしない
話を Svelte 戻しまして
Svelte は画面も作成しやす
いです。
HTML ・CSS・Scriptを一
つのファイルに書くことがで
きます。
<
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
>
CSSをグローバルで定義してど
こで使っているかわからなくな
ることも少なくなります。
そして、ここで Tailwind の登場
なのですが Tailwind は更にCSS
のカオス化を防いでくれます。
https://tailwindcss.com/ (公式)
ドキュメント
Class にスタイルを直接書いていくの
はちょっとお行儀が悪いのですが、
逆にそこが Svelte とは相性抜群です。
<
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
>
1画面1CSSでかけることを利用すると、
CSSをスッキリ書くことができます。
(CSSを直接書くことも不要になります)
そんな素敵な Svelte と
Tailwind を皆さんも使って
みてくださいませ。

More Related Content

PDF
なぜ人は必死でjQueryを捨てようとしているのか
PDF
RailsでReact.jsを動かしてみた話
PDF
SIROK技術勉強会 #1 「Reactってなんだ?」
PDF
まだ DOM 操作で消耗してるの?
PDF
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
PDF
React.js + Flux
PDF
( ゚∀゚)o彡° Flux! Flux!
PDF
いまさら聞けない!?Backbone.js 超入門
なぜ人は必死でjQueryを捨てようとしているのか
RailsでReact.jsを動かしてみた話
SIROK技術勉強会 #1 「Reactってなんだ?」
まだ DOM 操作で消耗してるの?
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
React.js + Flux
( ゚∀゚)o彡° Flux! Flux!
いまさら聞けない!?Backbone.js 超入門

What's hot (19)

PDF
Flux react現状確認会
PPTX
Reactつかってみた
PDF
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
PDF
jQueryを中心としたJavaScript
PDF
Browser oh browser browser
PDF
React+fluxを導入した話
KEY
goog.require()を手書きしていいのは小学生まで
PDF
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
PDF
Blazor 触ってみた
PDF
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
PDF
タスクランナー導入 〜とあるWordPress制作環境〜
PDF
Learning jQuery
PDF
Hello, Node.js
PPTX
React.js + Reduxで作るSPA
PPT
Node.js で Web アプリ開発
PDF
Node.jsでサーバプログラマ デビューしよう
PDF
サーバサイドエンジニアが 1年間まじめにSPAやってみた
PDF
JavaScriptと共に歩いて行く決意をした君へ
PPTX
React.jsを勉強しよう
Flux react現状確認会
Reactつかってみた
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
jQueryを中心としたJavaScript
Browser oh browser browser
React+fluxを導入した話
goog.require()を手書きしていいのは小学生まで
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Blazor 触ってみた
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
タスクランナー導入 〜とあるWordPress制作環境〜
Learning jQuery
Hello, Node.js
React.js + Reduxで作るSPA
Node.js で Web アプリ開発
Node.jsでサーバプログラマ デビューしよう
サーバサイドエンジニアが 1年間まじめにSPAやってみた
JavaScriptと共に歩いて行く決意をした君へ
React.jsを勉強しよう
Ad

More from Shuichi Takaya (12)

PPTX
とあるムービーを作った話
PPTX
Android O で開発者が気をつけること
PPTX
PDF
Bracketsについて
PDF
Androidハイブリッドアプリを約2年間メンテンナンスしてきて分ったこと
PDF
Test the web forward に行きました。
PDF
フラッシャーはこれからどうしたらいいのか。
PDF
普段はAndroid開発やってるけど、Tizenをさわってみたよ
PDF
グレープフルーツの剥き方
PDF
Androidアプリのリバースエンジニアリング
PDF
Android端末のroot化について
PDF
Androidアプリ開発を楽にするために
とあるムービーを作った話
Android O で開発者が気をつけること
Bracketsについて
Androidハイブリッドアプリを約2年間メンテンナンスしてきて分ったこと
Test the web forward に行きました。
フラッシャーはこれからどうしたらいいのか。
普段はAndroid開発やってるけど、Tizenをさわってみたよ
グレープフルーツの剥き方
Androidアプリのリバースエンジニアリング
Android端末のroot化について
Androidアプリ開発を楽にするために
Ad

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