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
470
サービスにSvelteを採用した経緯とその理由 - レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会
ニフティ株式会社
PRO
July 21, 2023
Tweet
Share
Resources
レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会
https://nifty.connpass.com/event/288706/
More Decks by ニフティ株式会社
See All by ニフティ株式会社
会員管理基盤をオンプレからクラウド移行した時に起きた障害たち - asken tech talk vol.13
niftycorp
PRO
0
2.5k
モニタリング統一への道のり - 分散モニタリングツール統合のためのオブザーバビリティプロジェクト
niftycorp
PRO
1
810
2025-07-08 InnerSource Commons Japan Meetup #14 【OST】チームの壁、ぶっ壊そ!壁の乗り越え方、一緒に考えよう!
niftycorp
PRO
0
83
2025-04-25 NIFTY's InnerSource Activites
niftycorp
PRO
0
270
外コミュニティ活動や登壇活動が技術 広報として大事だよ、と改めて周囲に伝 えられた件 - EM Oasis 特別会
niftycorp
PRO
0
180
Dify触ってみた。
niftycorp
PRO
1
260
Amazon Bedrockを使用して、 運用対応を楽にしてみた
niftycorp
PRO
1
270
自社製CMSからの脱却:10件のWebサイト再構築に学ぶ運用重視の技術選定 - NIFTY Tech Day 2025
niftycorp
PRO
0
130
エンジニアの殻を破る:インナーソースと社外活動がもたらした成長 - NIFTY Tech Day 2025
niftycorp
PRO
0
98
Other Decks in Programming
See All in Programming
MLH State of the League: 2026 Season
theycallmeswift
0
210
AIでLINEスタンプを作ってみた
eycjur
1
220
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
220
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
11
3k
TDD 実践ミニトーク
contour_gara
1
270
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
150
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
230
複雑なドメインに挑む.pdf
yukisakai1225
4
840
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
1
200
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
3
300
AI時代に学習する意味はあるのか?
tomoyakamaji
0
100
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
11
1.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Done Done
chrislema
185
16k
Practical Orchestrator
shlominoach
190
11k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Typedesign – Prime Four
hannesfritz
42
2.8k
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へ