Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
NIFTY Tech Talk #09 SvelteKitをサービスに導入してみた!
Search
ニフティ株式会社
PRO
March 08, 2023
Video
Resources
Programming
0
1k
NIFTY Tech Talk #09 SvelteKitをサービスに導入してみた!
ニフティ株式会社
PRO
March 08, 2023
Tweet
Share
Video
Resources
SvelteKit, Next.jsの導入事例紹介など 〜ニフティのフロントエンドの今とこれから〜 - NIFTY Tech Talk #9
https://nifty.connpass.com/event/273568/
More Decks by ニフティ株式会社
See All by ニフティ株式会社
GitHubで育つ コラボレーション文化 : ニフティでのインナーソース挑戦事例 - 2024-12-16 GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
120
Grow on GitHub Collaboration Culture: Case Study of InnerSource Challenge - GitHub Universe 2024 Recap in ZOZO
niftycorp
PRO
0
20
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
200
継続的な改善のためのmodulesの適切な分割単位 - NIFTY Tech Talk #23
niftycorp
PRO
0
110
Re:ゼロから始めるTerraform生活 ~IaC入門編~ - NIFTY Tech Talk #23
niftycorp
PRO
0
110
Terraformにベストプラクティスを取り入れた - NIFTY Tech Talk #23
niftycorp
PRO
0
130
AWS AppSyncを用いた GraphQL APIの開発について - NIFTY Tech Talk #22
niftycorp
PRO
0
140
「天気予報があなたに届けられるまで」 - NIFTY Tech Talk #22
niftycorp
PRO
0
170
@nifty天気予報:フルリニューアルの挑戦 - NIFTY Tech Talk #22
niftycorp
PRO
0
150
Other Decks in Programming
See All in Programming
ある日突然あなたが管理しているサーバーにDDoSが来たらどうなるでしょう?知ってるようで何も知らなかったDDoS攻撃と対策 #phpcon.2024
akase244
2
410
競技プログラミングへのお誘い@阪大BOOSTセミナー
kotamanegi
0
360
Webエンジニア主体のモバイルチームの 生産性を高く保つためにやったこと
igreenwood
0
340
Fibonacci Function Gallery - Part 1
philipschwarz
PRO
0
230
これでLambdaが不要に?!Step FunctionsのJSONata対応について
iwatatomoya
2
3.8k
わたしの星のままで一番星になる ~ 出産を機にSIerからEC事業会社に転職した話 ~
kimura_m_29
0
200
Spatial Rendering for Apple Vision Pro
warrenm
0
150
情報漏洩させないための設計
kubotak
4
830
テストコード文化を0から作り、変化し続けた組織
kazatohiei
2
1.5k
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
130
Jakarta EE meets AI
ivargrimstad
0
280
AppRouterを用いた大規模サービス開発におけるディレクトリ構成の変遷と問題点
eiganken
1
150
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
170
Adopting Sorbet at Scale
ufuk
73
9.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Embracing the Ebb and Flow
colly
84
4.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
405
66k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Faster Mobile Websites
deanohume
305
30k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.6k
Transcript
NIFTY Tech Talk #9 SvelteKitをサービスに導入してみた! By Takeroid
Hello! I am Takeroid!
Hello! I am Takeroid! My hobby is FF14
None
None
2022年11月 開発着手 2023年1月β版 2023年2月6日 リリース👏 アドクリーナー 申し込みフォーム
None
SvelteKitで できているんです!!
SvelteKitで できているんです!!
None
None
None
None
高速 楽しい 柔軟
高速 楽しい 柔軟 V1.0.0リリース
Svelteで HelloWorld! Let’s 体験
たったこれだけ <script> let name = 'world'; </script> <h1>Hello {name}!</h1>
たったこれだけ <script> let name = 'world'; </script> <h1>Hello {name}!</h1> Vue
Likeな書き方 サイコー
Vue Likeな書き方 サイコー
…
なんと Vueは Nuxt3を連れて なかまに なりたそうに こちらをみている! > はい いいえ
なんと Vueは Nuxt3を連れて なかまに なりたそうに こちらをみている! はい > いいえ
なんと Vueは Nuxt3を連れて なかまに なりたそうに こちらをみている! > はい いいえ
なんと Vueは Nuxt3を連れて なかまに なりたそうに こちらをみている! はい > いいえ
Svelteはコンパイラ
仮想DOMを使わない だからより速い
もっと手軽に もっと簡潔に もっともっともっと…
バンドルサイズが小さい コード記述量が少ない JSにビルドされ速い 状態管理は標準備え付け 学習コストが低い
選ばれたのはSvelteKitでした
すこし気になってきた?👀
HTMLを分割しやすい
コピペで分割
慣れ親しんだTemplate構文
慣れ親しんだTemplate構文
慣れ親しんだTemplate構文
慣れ親しんだTemplate構文
よくないところ
情報収集が大変
トンネルを抜けると トンネルだった
トンネルを抜けると トンネルだった ❗
公式ドキュメント and Github is 最強
まとめ
高速 楽しい 柔軟
高速 楽しい 柔軟 体験してみよう!