Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Kazuma Oe
February 04, 2022

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

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

mkin
Twitter: mkin

oekazuma
Twitter: oekazuma
GitHub: oekazuma
Qiita: oekazuma

Kazuma Oe

February 04, 2022
Tweet

More Decks by Kazuma Oe

Other Decks in Programming

Transcript

  1. 1   © 2022 Ateam Inc.                     1 自己紹介

    • 名前:加藤 真 (かとう まこと) • 所属:エイチームライフデザイン • 業務内容: ◦ フロントエンド開発 ◦ バックエンド開発 @mkin
  2. 3   © 2022 Ateam Inc.                     3 •

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

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

    • 学習コストが低い Svelte に決定 ◦ 自分たちの組織に一番合っているものは何か?
  5. 6   © 2022 Ateam Inc.                     6 準備期間

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

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

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

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

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

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

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

    • エコシステムは自分たちで作れ ◦ 時間が経てば成熟していく ◦ 難しいことはしていない
  13. 14   © 2022 Ateam Inc.                     14 •

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

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

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

    • 名前:大江 和摩 (おおえ かずま) • 所属:エイチームライフデザイン • 業務内容: ◦ フロントエンド開発 ◦ バックエンド開発 @oekazuma
  17. 19   © 2022 Ateam Inc.                     19 最初に作ったサイトの技術スタック

    • Svelte • TypeScript • Rollup • Routify - ルーティングライブラリ • Tailwind CSS - CSSフレームワーク • Jest - テスティングツール • npm - パッケージマネージャー • rendertron - SEOやOGP対策
  18. 20   © 2022 Ateam Inc.                     20 Svelte

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

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

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

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

    SvelteKit 移行前(スマートフォン) SvelteKit への移行 • SvelteKit 移行後(スマートフォン)