Submit Search
svelte と tailwind で始めるフロントエンド開発
0 likes
281 views
Shuichi Takaya
svelte と tailwind で始めるフロントエンド開発
Technology
Read more
1 of 23
Download now
Download to read offline
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
More Related Content
PDF
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
PDF
RailsでReact.jsを動かしてみた話
yoshioka_cb
PDF
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
PDF
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
PDF
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
PDF
React.js + Flux
dsuke Takaoka
PDF
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
PDF
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
なぜ人は必死でjQueryを捨てようとしているのか
Yoichi Toyota
RailsでReact.jsを動かしてみた話
yoshioka_cb
SIROK技術勉強会 #1 「Reactってなんだ?」
Naoyuki Kataoka
まだ DOM 操作で消耗してるの?
Yuki Ishikawa
Nodeとフロントエンド − 知っておかなければならない、今と未来の話 −
Kohei Asai
React.js + Flux
dsuke Takaoka
( ゚∀゚)o彡° Flux! Flux!
Yuki Ishikawa
いまさら聞けない!?Backbone.js 超入門
Kohei Kadowaki
What's hot
(19)
PDF
Flux react現状確認会
VOYAGE GROUP
PPTX
Reactつかってみた
Minori Tokuda
PDF
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
PDF
jQueryを中心としたJavaScript
hideaki honda
PDF
Browser oh browser browser
Teppei Sato
PDF
React+fluxを導入した話
Yuki Ishikawa
KEY
goog.require()を手書きしていいのは小学生まで
Teppei Sato
PDF
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Hajime Ogushi
PDF
Blazor 触ってみた
Oda Shinsuke
PDF
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
PDF
タスクランナー導入 〜とあるWordPress制作環境〜
Masaya Kogawa
PDF
Learning jQuery
taiju higashi
PDF
Hello, Node.js
Shin Sekaryo
PPTX
React.js + Reduxで作るSPA
Shohei Saeki
PPT
Node.js で Web アプリ開発
Tatsumi Naganuma
PDF
Node.jsでサーバプログラマ デビューしよう
Yuusuke Takeuchi
PDF
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
PDF
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
PPTX
React.jsを勉強しよう
Hikaru Sato
Flux react現状確認会
VOYAGE GROUP
Reactつかってみた
Minori Tokuda
ReactをRailsとどっぷり使ってみた話と、フロントエンド×AWSのこれから
Yusuke Murata
jQueryを中心としたJavaScript
hideaki honda
Browser oh browser browser
Teppei Sato
React+fluxを導入した話
Yuki Ishikawa
goog.require()を手書きしていいのは小学生まで
Teppei Sato
これで大丈夫。Web制作で使うコマンドラインツールの名前と役割をざっくり理解する
Hajime Ogushi
Blazor 触ってみた
Oda Shinsuke
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
Jun-ichi Sakamoto
タスクランナー導入 〜とあるWordPress制作環境〜
Masaya Kogawa
Learning jQuery
taiju higashi
Hello, Node.js
Shin Sekaryo
React.js + Reduxで作るSPA
Shohei Saeki
Node.js で Web アプリ開発
Tatsumi Naganuma
Node.jsでサーバプログラマ デビューしよう
Yuusuke Takeuchi
サーバサイドエンジニアが 1年間まじめにSPAやってみた
Itaru Kitagawa
JavaScriptと共に歩いて行く決意をした君へ
Muyuu Fujita
React.jsを勉強しよう
Hikaru Sato
Ad
More from Shuichi Takaya
(12)
PPTX
とあるムービーを作った話
Shuichi Takaya
PPTX
Android O で開発者が気をつけること
Shuichi Takaya
PPTX
ABTest
Shuichi Takaya
PDF
Bracketsについて
Shuichi Takaya
PDF
Androidハイブリッドアプリを約2年間メンテンナンスしてきて分ったこと
Shuichi Takaya
PDF
Test the web forward に行きました。
Shuichi Takaya
PDF
フラッシャーはこれからどうしたらいいのか。
Shuichi Takaya
PDF
普段はAndroid開発やってるけど、Tizenをさわってみたよ
Shuichi Takaya
PDF
グレープフルーツの剥き方
Shuichi Takaya
PDF
Androidアプリのリバースエンジニアリング
Shuichi Takaya
PDF
Android端末のroot化について
Shuichi Takaya
PDF
Androidアプリ開発を楽にするために
Shuichi Takaya
とあるムービーを作った話
Shuichi Takaya
Android O で開発者が気をつけること
Shuichi Takaya
ABTest
Shuichi Takaya
Bracketsについて
Shuichi Takaya
Androidハイブリッドアプリを約2年間メンテンナンスしてきて分ったこと
Shuichi Takaya
Test the web forward に行きました。
Shuichi Takaya
フラッシャーはこれからどうしたらいいのか。
Shuichi Takaya
普段はAndroid開発やってるけど、Tizenをさわってみたよ
Shuichi Takaya
グレープフルーツの剥き方
Shuichi Takaya
Androidアプリのリバースエンジニアリング
Shuichi Takaya
Android端末のroot化について
Shuichi Takaya
Androidアプリ開発を楽にするために
Shuichi Takaya
Ad
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.
1画面1CSSでかけることを利用すると、 CSSをスッキリ書くことができます。 (CSSを直接書くことも不要になります)
23.
そんな素敵な Svelte と Tailwind
を皆さんも使って みてくださいませ。
Download