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
サービスにSvelteを採用した経緯とその理由 - レバレジーズ x ココナラ x ニフティ ...
Search
ニフティ株式会社
PRO
July 21, 2023
Resources
Programming
0
400
サービスにSvelteを採用した経緯とその理由 - レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会
ニフティ株式会社
PRO
July 21, 2023
Tweet
Share
Resources
レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会
https://nifty.connpass.com/event/288706/
More Decks by ニフティ株式会社
See All by ニフティ株式会社
Dify触ってみた。
niftycorp
PRO
1
130
Amazon Bedrockを使用して、 運用対応を楽にしてみた
niftycorp
PRO
1
110
自社製CMSからの脱却:10件のWebサイト再構築に学ぶ運用重視の技術選定 - NIFTY Tech Day 2025
niftycorp
PRO
0
60
エンジニアの殻を破る:インナーソースと社外活動がもたらした成長 - NIFTY Tech Day 2025
niftycorp
PRO
0
36
システム全体像把握の超高速化〜システム関連図を使い倒そう (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
35
Rust で生成 AI の社内 chatbot をメンテしている話 (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
34
メタバースは仕事に使える?〜100日間でバーチャルオフィスへの挑戦〜 (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
25
AWSでもOracleしたい!DB移行指南:マネージドサービス活用して属人化も解消 - NIFTY Tech Day 2025
niftycorp
PRO
0
33
スクラムマスター入門者のための学習マップ 効果的な学びと実践 - NIFTY Tech Day 2025
niftycorp
PRO
0
43
Other Decks in Programming
See All in Programming
WordPress Playground for Developers
iambherulal
0
110
AIレビュー導入によるCIツールとの共存と最適化
kamo26sima
1
1.5k
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
0
1.2k
Functional APIから再考するLangGraphを使う理由
os1ma
4
610
令和トラベルにおけるコンテンツ生成AIアプリケーション開発の実践
ippo012
1
220
AWS CDKにおけるL2 Constructの仕組み / aws-cdk-l2-construct
gotok365
4
880
Identifying and Analyzing Fake OSS with Malware - fukuoka.go#21
rhykw
0
420
SLI/SLOの設定を進めるその前に アラート品質の改善に取り組んだ話
tanden
2
330
Compose Navigation実装の見通しを良くする
hiroaki404
0
120
DenoでOpenTelemetryに入門する
yotahada3
2
260
Node.js, Deno, Bun 最新動向とその所感について
yosuke_furukawa
PRO
5
2.9k
爆速スッキリ! Rspack 移行の成果と道のり - Muddy Web #11
dora1998
0
110
Featured
See All Featured
Speed Design
sergeychernyshev
28
840
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
116
51k
Why Our Code Smells
bkeepers
PRO
336
57k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
290
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
134
33k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
101
18k
Practical Orchestrator
shlominoach
186
10k
Designing for humans not robots
tammielis
250
25k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
サービスにSvelteを 採用した経緯とその理由 三社合同フロントエンド勉強会 By たけろいど
Hello!
ニフティからきました たけろいどです
お客様に最も近く、 感動されるISPへ
None
None
None
None
Svelteとは? コンポーネントをコンパイルすることで、 パフォーマンスの向上とコードのサイズを 小さくしている。 直感的かつシンプルな構文が特徴で、学 習曲線が緩やか。
早速開発!
FlaskとJinja2がたちはだかった! > たたかう にげる
FlaskとJinja2がたちはだかった! > たたかう にげる
FlaskとJinja2がたちはだかった! > たたかう にげる
FlaskとJinja2がたちはだかった! > たたかう にげる
FlaskとJinja2がたちはだかった! > たたかう にげる
FlaskとJinja2がたちはだかった! > たたかう にげる
FlaskとJinja2がたちはだかった! > たたかう にげる
FlaskとJinja2がたちはだかった! > たたかう にげる
お客様への 価値提供スピード低下
よりよいUXを提供するために よりよいUIが求められる
WEB開発へのコストは 増加傾向
Jinja2はPythonでつかえる テンプレートエンジン
一方で WEB開発の王道は JavaScript
エコシステムが使えないため 開発者の負担増加
加えて Flask+Jinja2は コンポーネント指向でない
E2Eテストが増え テストに対するコストが増加
提供価値を良くしていくには 時間がかかる エコシステムやテストを使い スピード・品質を向上
FlaskとJinja2がたちはだかった! > たたかう にげる モダンフロントエンドで 価値提供スピードをあげる
なぜSvelte なのか
お客様に最も近く、 感動されるISPへ
お客様に寄り添い わかりやすいUIを提供する
Svelteのモットーは シンプルであること
Svelteのモットーは シンプルであること
Jinja2(テンプレートのみ抜粋) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello, {{
name }}!</title> </head> <body> <main> <h1>Hello, {{ name }}!</h1> <main> </body> </html>
Svelte <script> let name = 'World'; </script> <main> <h1>Hello {name}!</h1>
</main>
React import React, { useState } from 'react'; function CounterButton()
{ const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); } return ( <button onClick={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button> ); } export default CounterButton;
Svelte <script> let count = 0; function handleClick() { count
+= 1; } </script> <button on:click={handleClick}> Clicked {count} {count === 1 ? 'time' : 'times'} </button>
関わる全員に 優しいフレームワーク と感じた
関わる全員に 優しいフレームワーク と感じた
課題
JavaScript だれが作るの問題
デザイナー エンジニア
デザインシステムを みんなで学ぶ会
お客様に最も近く、 感動されるISPへ