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
930
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
99
採用事例の少ないSvelteを選んだ理由と それを正解にするためにやっていること
oekazuma
3
1.6k
Svelte/SvelteKitを採用した理由とその魅力
oekazuma
4
2.9k
Histoireを使ってSvelteコンポーネントを管理しよう
oekazuma
4
930
Other Decks in Programming
See All in Programming
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
330
NIKKEI Tech Talk#38
cipepser
0
280
Cursorハンズオン実践!
eltociear
2
1.2k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
300
CSC305 Lecture 10
javiergs
PRO
0
290
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
440
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
geniee_inc
0
140
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.9k
Google Opalで使える37のライブラリ
mickey_kubo
3
150
Developer Joy - The New Paradigm
hollycummins
1
370
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
34k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
185
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Navigating Team Friction
lara
190
15k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
BBQ
matthewcrist
89
9.9k
Side Projects
sachag
455
43k
Embracing the Ebb and Flow
colly
88
4.9k
How GitHub (no longer) Works
holman
315
140k
For a Future-Friendly Web
brad_frost
180
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
36
6.1k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
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年続く会社にすること」