Svelte をプロダクトに導入した話

Svelte Meetupで発表した資料です！

mkin
X: mkin

oekazuma
X: oekazuma
GitHub: oekazuma
Qiita: oekazuma

Transcript

1. 0 株式会社エイチームライフデザイン Svelte をプロダクトに導入した話 2022. 02. 03 加藤 / 大江
2. 1 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 1 自己紹介 • 名前：加藤 真　(かとう まこと) • 所属：エイチームライフデザイン • 業務内容： ◦ フロントエンド開発 ◦ バックエンド開発 @mkin
3. 2 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 Svelte を導入した経緯
4. 3 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 3 • 結婚式場情報サイト「ハナユメ」の結婚指輪情報サービス ◦ https://hana-yume.net/ring/ 導入したサイト
5. 4 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 4 • どのフロントエンド技術も一長一短 技術選定
6. 5 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 5 技術選定 • 学習コストが低い Svelte に決定 ◦ 自分たちの組織に一番合っているものは何か？
7. 6 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 6 準備期間 • Svelte への心理的障壁をなくす ◦ Qiita執筆、勉強会、ステッカー配り、社内用アプリの開発
8. 7 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 7 準備期間 • Svelte への心理的障壁をなくす ◦ Qiita執筆、勉強会、ステッカー配り、社内用アプリの開発
9. 8 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 8 Svelte 導入の懸念点（2020年当時） • エコシステムが未成熟 ◦ デファクトスタンダードがない ◦ 保守されていない
10. 9 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 9 • 調査コストの増大 ◦ ネット情報が少ない ◦ 日本語ドキュメントがない Svelte 導入の懸念点（2020年当時） • エコシステムが未成熟 ◦ デファクトスタンダードがない ◦ 保守されていない
11. 10 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 10 • 爆速で翻訳作業が進んだ ◦ 2021年2月3日〜2月10日完成 ◦ https://svelte.jp/ 日本語ドキュメント
12. 11 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 11 • 調査コストの増大 ◦ ネット情報が少ない ◦ 日本語ドキュメントがない（今はある https://svelte.jp/ ） Svelte 導入の懸念点（2020年当時） • エコシステムが未成熟 ◦ デファクトスタンダードがない ◦ 保守されていない
13. 12 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 12 Svelte 導入の懸念点（2020年当時） • 未検証技術への不安 ◦ SSR、TypeScript、Testing tool、SEO、IE11対応...!! ◦ 自分たちのベストプラクティスが作れていない • エコシステムが未成熟 ◦ デファクトスタンダードがない ◦ 保守されていない • 調査コストの増大 ◦ ネット情報が少ない ◦ 日本語ドキュメントがない（今はある https://svelte.jp/ ）
14. 13 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 13 リードエンジニアからのアドバイス • エコシステムは自分たちで作れ ◦ 時間が経てば成熟していく ◦ 難しいことはしていない
15. 14 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 14 • 未検証のリスクを過大評価するな ◦ 恐れすぎない ◦ 隣の芝生は青く見える（React、Vue でも同じ） リードエンジニアからのアドバイス • エコシステムは自分たちで作れ ◦ 時間が経てば成熟していく ◦ 難しいことはしていない
16. 15 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 15 • 未検証のリスクを過大評価するな ◦ 恐れすぎない ◦ 隣の芝生は青く見える（React、Vue でも同じ） リードエンジニアからのアドバイス • エコシステムは自分たちで作れ ◦ 時間が経てば成熟していく ◦ 難しいことはしていない • 早く試して早く失敗しろ ◦ 失敗を許容する文化 ◦ クリティカルな問題なら方向転換
17. 16 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 16 導入サービスの決定 • 小さく始められるサービスを選択 ◦ サービスの規模、仕様の難易度、導入効果の向上の見込み 前撮りフォ ト 結婚式 準備ガイド ハナユメ フェスタ 結婚指輪 婚約指輪
18. 17 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 17 自己紹介 • 名前：大江 和摩　(おおえ かずま) • 所属：エイチームライフデザイン • 業務内容： ◦ フロントエンド開発 ◦ バックエンド開発 @oekazuma
19. 18 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 Svelte を実際に導入してから
20. 19 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 19 最初に作ったサイトの技術スタック • Svelte • TypeScript • Rollup • Routify - ルーティングライブラリ • Tailwind CSS - CSSフレームワーク • Jest - テスティングツール • npm - パッケージマネージャー • rendertron - SEOやOGP対策
21. 20 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 20 Svelte で作ってみて辛いところ • ライブラリが充実していない😂 ◦ ライブラリを探すときは... ▪ 検索エンジンで検索する ▪ Svelte Societyで調べる ▪ Made with Svelteで調べる
22. 21 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 21 Svelte で作ってみて辛いところ • ないならライブラリを自作しよう！ ◦ svelte-meta-tags ◦ SEO のメタタグや構造化マークアップを管理するライブラリ ◦ SvelteKit + TypeScript で構築 ◦ semantic-release を使って自動リリース
23. 22 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 22 Svelte で作ってみて嬉しいところ • 開発体験がとてもいい！ ◦ 記述量が少なく、直感的に書ける ◦ HTML ライクで書けるから、初心者でも抵抗感なく書ける ◦ デザイナーとのコラボレーションがしやすい
24. 23 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 SvelteKit への移行
25. 24 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 24 SvelteKit への移行 • Svelte • TypeScript • SvelteKit • Windi CSS - CSSフレームワーク • Vitest - テスティングツール • pnpm - パッケージマネージャー
26. 25 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 25 • SvelteKit 移行前(スマートフォン) SvelteKit への移行 • SvelteKit 移行後(スマートフォン)
27. 26 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 最後に
28. 27 「みんなで幸せになれる会社にすること」 「今から100年続く会社にすること」