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
840
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
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
3
1.3k
Svelte/SvelteKitを採用した理由とその魅力
oekazuma
4
2.6k
Histoireを使ってSvelteコンポーネントを管理しよう
oekazuma
4
850
Other Decks in Programming
See All in Programming
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
40
16k
SwiftUI Viewの責務分離
elmetal
PRO
2
270
バッチを作らなきゃとなったときに考えること
irof
2
520
sappoRo.R #12 初心者セッション
kosugitti
0
280
Bedrock Agentsレスポンス解析によるAgentのOps
licux
3
920
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
140
Domain-Driven Transformation
hschwentner
2
1.9k
Ruby on cygwin 2025-02
fd0
0
180
15分で学ぶDuckDBの可愛い使い方 DuckDBの最近の更新
notrogue
3
500
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
230
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
120
Featured
See All Featured
It's Worth the Effort
3n
184
28k
KATA
mclloyd
29
14k
Fireside Chat
paigeccino
34
3.2k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Producing Creativity
orderedlist
PRO
344
40k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
How GitHub (no longer) Works
holman
314
140k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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年続く会社にすること」