Tweet
Tweet

Slide 1

Slide 1 text

0 株式会社エイチームライフデザイン Svelte をプロダクトに導入した話 2022. 02. 03 加藤 / 大江

Slide 2

Slide 2 text

1 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 1 自己紹介 ● 名前：加藤 真　(かとう まこと) ● 所属：エイチームライフデザイン ● 業務内容： ○ フロントエンド開発 ○ バックエンド開発 @mkin

Slide 3

Slide 3 text

2 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 Svelte を導入した経緯

Slide 4

Slide 4 text

3 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 3 ● 結婚式場情報サイト「ハナユメ」の結婚指輪情報サービス ○ https://hana-yume.net/ring/ 導入したサイト

Slide 5

Slide 5 text

4 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 4 ● どのフロントエンド技術も一長一短 技術選定

Slide 6

Slide 6 text

5 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 5 技術選定 ● 学習コストが低い Svelte に決定 ○ 自分たちの組織に一番合っているものは何か？

Slide 7

Slide 7 text

6 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 6 準備期間 ● Svelte への心理的障壁をなくす ○ Qiita執筆、勉強会、ステッカー配り、社内用アプリの開発

Slide 8

Slide 8 text

7 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 7 準備期間 ● Svelte への心理的障壁をなくす ○ Qiita執筆、勉強会、ステッカー配り、社内用アプリの開発

Slide 9

Slide 9 text

8 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 8 Svelte 導入の懸念点（2020年当時） ● エコシステムが未成熟 ○ デファクトスタンダードがない ○ 保守されていない

Slide 10

Slide 10 text

9 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 9 ● 調査コストの増大 ○ ネット情報が少ない ○ 日本語ドキュメントがない Svelte 導入の懸念点（2020年当時） ● エコシステムが未成熟 ○ デファクトスタンダードがない ○ 保守されていない

Slide 11

Slide 11 text

10 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 10 ● 爆速で翻訳作業が進んだ ○ 2021年2月3日〜2月10日完成 ○ https://svelte.jp/ 日本語ドキュメント

Slide 12

Slide 12 text

11 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 11 ● 調査コストの増大 ○ ネット情報が少ない ○ 日本語ドキュメントがない（今はある https://svelte.jp/ ） Svelte 導入の懸念点（2020年当時） ● エコシステムが未成熟 ○ デファクトスタンダードがない ○ 保守されていない

Slide 13

Slide 13 text

12 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 12 Svelte 導入の懸念点（2020年当時） ● 未検証技術への不安 ○ SSR、TypeScript、Testing tool、SEO、IE11対応...!! ○ 自分たちのベストプラクティスが作れていない ● エコシステムが未成熟 ○ デファクトスタンダードがない ○ 保守されていない ● 調査コストの増大 ○ ネット情報が少ない ○ 日本語ドキュメントがない（今はある https://svelte.jp/ ）

Slide 14

Slide 14 text

13 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 13 リードエンジニアからのアドバイス ● エコシステムは自分たちで作れ ○ 時間が経てば成熟していく ○ 難しいことはしていない

Slide 15

Slide 15 text

14 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 14 ● 未検証のリスクを過大評価するな ○ 恐れすぎない ○ 隣の芝生は青く見える（React、Vue でも同じ） リードエンジニアからのアドバイス ● エコシステムは自分たちで作れ ○ 時間が経てば成熟していく ○ 難しいことはしていない

Slide 16

Slide 16 text

15 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 15 ● 未検証のリスクを過大評価するな ○ 恐れすぎない ○ 隣の芝生は青く見える（React、Vue でも同じ） リードエンジニアからのアドバイス ● エコシステムは自分たちで作れ ○ 時間が経てば成熟していく ○ 難しいことはしていない ● 早く試して早く失敗しろ ○ 失敗を許容する文化 ○ クリティカルな問題なら方向転換

Slide 17

Slide 17 text

16 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 16 導入サービスの決定 ● 小さく始められるサービスを選択 ○ サービスの規模、仕様の難易度、導入効果の向上の見込み 前撮りフォ ト 結婚式 準備ガイド ハナユメ フェスタ 結婚指輪 婚約指輪

Slide 18

Slide 18 text

17 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 17 自己紹介 ● 名前：大江 和摩　(おおえ かずま) ● 所属：エイチームライフデザイン ● 業務内容： ○ フロントエンド開発 ○ バックエンド開発 @oekazuma

Slide 19

Slide 19 text

18 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 Svelte を実際に導入してから

Slide 20

Slide 20 text

19 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 19 最初に作ったサイトの技術スタック ● Svelte ● TypeScript ● Rollup ● Routify - ルーティングライブラリ ● Tailwind CSS - CSSフレームワーク ● Jest - テスティングツール ● npm - パッケージマネージャー ● rendertron - SEOやOGP対策

Slide 21

Slide 21 text

20 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 20 Svelte で作ってみて辛いところ ● ライブラリが充実していない😂 ○ ライブラリを探すときは... ■ 検索エンジンで検索する ■ Svelte Societyで調べる ■ Made with Svelteで調べる

Slide 22

Slide 22 text

21 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 21 Svelte で作ってみて辛いところ ● ないならライブラリを自作しよう！ ○ svelte-meta-tags ○ SEO のメタタグや構造化マークアップを管理するライブラリ ○ SvelteKit + TypeScript で構築 ○ semantic-release を使って自動リリース

Slide 23

Slide 23 text

22 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 22 Svelte で作ってみて嬉しいところ ● 開発体験がとてもいい！ ○ 記述量が少なく、直感的に書ける ○ HTML ライクで書けるから、初心者でも抵抗感なく書ける ○ デザイナーとのコラボレーションがしやすい

Slide 24

Slide 24 text

23 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 SvelteKit への移行

Slide 25

Slide 25 text

24 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 24 SvelteKit への移行 ● Svelte ● TypeScript ● SvelteKit ● Windi CSS - CSSフレームワーク ● Vitest - テスティングツール ● pnpm - パッケージマネージャー

Slide 26

Slide 26 text

25 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 25 ● SvelteKit 移行前(スマートフォン) SvelteKit への移行 ● SvelteKit 移行後(スマートフォン)

Slide 27

Slide 27 text

26 　 © 2022 Ateam Inc. 　　　　　　　　　　　　　　　　 　　 最後に

Slide 28

Slide 28 text

27 「みんなで幸せになれる会社にすること」 「今から100年続く会社にすること」