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
450
サービスにSvelteを採用した経緯とその理由 - レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会
ニフティ株式会社
PRO
July 21, 2023
Tweet
Share
Resources
レバレジーズ x ココナラ x ニフティ 合同フロントエンド勉強会
https://nifty.connpass.com/event/288706/
More Decks by ニフティ株式会社
See All by ニフティ株式会社
2025-04-25 NIFTY's InnerSource Activites
niftycorp
PRO
0
220
外コミュニティ活動や登壇活動が技術 広報として大事だよ、と改めて周囲に伝 えられた件 - EM Oasis 特別会
niftycorp
PRO
0
96
Dify触ってみた。
niftycorp
PRO
1
220
Amazon Bedrockを使用して、 運用対応を楽にしてみた
niftycorp
PRO
1
230
自社製CMSからの脱却:10件のWebサイト再構築に学ぶ運用重視の技術選定 - NIFTY Tech Day 2025
niftycorp
PRO
0
110
エンジニアの殻を破る:インナーソースと社外活動がもたらした成長 - NIFTY Tech Day 2025
niftycorp
PRO
0
73
システム全体像把握の超高速化〜システム関連図を使い倒そう (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
74
Rust で生成 AI の社内 chatbot をメンテしている話 (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
79
メタバースは仕事に使える?〜100日間でバーチャルオフィスへの挑戦〜 (LT) - NIFTY Tech Day 2025
niftycorp
PRO
0
70
Other Decks in Programming
See All in Programming
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
210
エラーって何種類あるの?
kajitack
5
330
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
280
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
0
320
Create a website using Spatial Web
akkeylab
0
310
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
850
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
2
240
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.8k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
610
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
420
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
How GitHub (no longer) Works
holman
314
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Being A Developer After 40
akosma
90
590k
The Cult of Friendly URLs
andyhume
79
6.5k
The Invisible Side of Design
smashingmag
300
51k
Become a Pro
speakerdeck
PRO
28
5.4k
The Pragmatic Product Professional
lauravandoore
35
6.7k
A Tale of Four Properties
chriscoyier
160
23k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
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へ