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 をプロダクトに導入した話
Search
Kazuma Oe
February 04, 2022
Programming
3
910
Svelte をプロダクトに導入した話
Svelte Meetupで発表した資料です!
mkin
X:
mkin
oekazuma
X:
oekazuma
GitHub:
oekazuma
Qiita:
oekazuma
Kazuma Oe
February 04, 2022
Tweet
Share
More Decks by Kazuma Oe
See All by Kazuma Oe
チーム開発を支えるSvelteKitのディレクトリ設計とコーディングルール
oekazuma
0
48
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
3
1.5k
Svelte/SvelteKitを採用した理由とその魅力
oekazuma
4
2.8k
Histoireを使ってSvelteコンポーネントを管理しよう
oekazuma
4
910
Other Decks in Programming
See All in Programming
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
150
ニーリーにおけるプロダクトエンジニア
nealle
0
950
MCPを使ってイベントソーシングのAIコーディングを効率化する / Streamlining Event Sourcing AI Coding with MCP
tomohisa
0
170
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
効率的な開発手段として VRTを活用する
ishkawa
0
160
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
570
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
730
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
GPUを計算資源として使おう!
primenumber
1
250
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
Featured
See All Featured
Visualization
eitanlees
146
16k
Building an army of robots
kneath
306
45k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
GitHub's CSS Performance
jonrohan
1031
460k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Making Projects Easy
brettharned
116
6.3k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
For a Future-Friendly Web
brad_frost
179
9.8k
A Tale of Four Properties
chriscoyier
160
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
0 株式会社エイチームライフデザイン Svelte をプロダクトに導入した話 2022. 02. 03 加藤 / 大江
1 © 2022 Ateam Inc. 1 自己紹介
• 名前:加藤 真 (かとう まこと) • 所属:エイチームライフデザイン • 業務内容: ◦ フロントエンド開発 ◦ バックエンド開発 @mkin
2 © 2022 Ateam Inc. Svelte を導入した経緯
3 © 2022 Ateam Inc. 3 •
結婚式場情報サイト「ハナユメ」の結婚指輪情報サービス ◦ https://hana-yume.net/ring/ 導入したサイト
4 © 2022 Ateam Inc. 4 •
どのフロントエンド技術も一長一短 技術選定
5 © 2022 Ateam Inc. 5 技術選定
• 学習コストが低い Svelte に決定 ◦ 自分たちの組織に一番合っているものは何か?
6 © 2022 Ateam Inc. 6 準備期間
• Svelte への心理的障壁をなくす ◦ Qiita執筆、勉強会、ステッカー配り、社内用アプリの開発
7 © 2022 Ateam Inc. 7 準備期間
• Svelte への心理的障壁をなくす ◦ Qiita執筆、勉強会、ステッカー配り、社内用アプリの開発
8 © 2022 Ateam Inc. 8 Svelte
導入の懸念点(2020年当時) • エコシステムが未成熟 ◦ デファクトスタンダードがない ◦ 保守されていない
9 © 2022 Ateam Inc. 9 •
調査コストの増大 ◦ ネット情報が少ない ◦ 日本語ドキュメントがない Svelte 導入の懸念点(2020年当時) • エコシステムが未成熟 ◦ デファクトスタンダードがない ◦ 保守されていない
10 © 2022 Ateam Inc. 10 •
爆速で翻訳作業が進んだ ◦ 2021年2月3日〜2月10日完成 ◦ https://svelte.jp/ 日本語ドキュメント
11 © 2022 Ateam Inc. 11 •
調査コストの増大 ◦ ネット情報が少ない ◦ 日本語ドキュメントがない(今はある https://svelte.jp/ ) Svelte 導入の懸念点(2020年当時) • エコシステムが未成熟 ◦ デファクトスタンダードがない ◦ 保守されていない
12 © 2022 Ateam Inc. 12 Svelte
導入の懸念点(2020年当時) • 未検証技術への不安 ◦ SSR、TypeScript、Testing tool、SEO、IE11対応...!! ◦ 自分たちのベストプラクティスが作れていない • エコシステムが未成熟 ◦ デファクトスタンダードがない ◦ 保守されていない • 調査コストの増大 ◦ ネット情報が少ない ◦ 日本語ドキュメントがない(今はある https://svelte.jp/ )
13 © 2022 Ateam Inc. 13 リードエンジニアからのアドバイス
• エコシステムは自分たちで作れ ◦ 時間が経てば成熟していく ◦ 難しいことはしていない
14 © 2022 Ateam Inc. 14 •
未検証のリスクを過大評価するな ◦ 恐れすぎない ◦ 隣の芝生は青く見える(React、Vue でも同じ) リードエンジニアからのアドバイス • エコシステムは自分たちで作れ ◦ 時間が経てば成熟していく ◦ 難しいことはしていない
15 © 2022 Ateam Inc. 15 •
未検証のリスクを過大評価するな ◦ 恐れすぎない ◦ 隣の芝生は青く見える(React、Vue でも同じ) リードエンジニアからのアドバイス • エコシステムは自分たちで作れ ◦ 時間が経てば成熟していく ◦ 難しいことはしていない • 早く試して早く失敗しろ ◦ 失敗を許容する文化 ◦ クリティカルな問題なら方向転換
16 © 2022 Ateam Inc. 16 導入サービスの決定
• 小さく始められるサービスを選択 ◦ サービスの規模、仕様の難易度、導入効果の向上の見込み 前撮りフォ ト 結婚式 準備ガイド ハナユメ フェスタ 結婚指輪 婚約指輪
17 © 2022 Ateam Inc. 17 自己紹介
• 名前:大江 和摩 (おおえ かずま) • 所属:エイチームライフデザイン • 業務内容: ◦ フロントエンド開発 ◦ バックエンド開発 @oekazuma
18 © 2022 Ateam Inc. Svelte を実際に導入してから
19 © 2022 Ateam Inc. 19 最初に作ったサイトの技術スタック
• Svelte • TypeScript • Rollup • Routify - ルーティングライブラリ • Tailwind CSS - CSSフレームワーク • Jest - テスティングツール • npm - パッケージマネージャー • rendertron - SEOやOGP対策
20 © 2022 Ateam Inc. 20 Svelte
で作ってみて辛いところ • ライブラリが充実していない😂 ◦ ライブラリを探すときは... ▪ 検索エンジンで検索する ▪ Svelte Societyで調べる ▪ Made with Svelteで調べる
21 © 2022 Ateam Inc. 21 Svelte
で作ってみて辛いところ • ないならライブラリを自作しよう! ◦ svelte-meta-tags ◦ SEO のメタタグや構造化マークアップを管理するライブラリ ◦ SvelteKit + TypeScript で構築 ◦ semantic-release を使って自動リリース
22 © 2022 Ateam Inc. 22 Svelte
で作ってみて嬉しいところ • 開発体験がとてもいい! ◦ 記述量が少なく、直感的に書ける ◦ HTML ライクで書けるから、初心者でも抵抗感なく書ける ◦ デザイナーとのコラボレーションがしやすい
23 © 2022 Ateam Inc. SvelteKit への移行
24 © 2022 Ateam Inc. 24 SvelteKit
への移行 • Svelte • TypeScript • SvelteKit • Windi CSS - CSSフレームワーク • Vitest - テスティングツール • pnpm - パッケージマネージャー
25 © 2022 Ateam Inc. 25 •
SvelteKit 移行前(スマートフォン) SvelteKit への移行 • SvelteKit 移行後(スマートフォン)
26 © 2022 Ateam Inc. 最後に
27 「みんなで幸せになれる会社にすること」 「今から100年続く会社にすること」