チーム開発を支えるSvelteKitのディレクトリ設計とコーディングルール

2025/07/18に開催された「Svelte Japan Offline Meetup #4」で発表した資料です。

https://svelte-jp.connpass.com/event/358769/

発表者：oekazuma
X: oekazuma
GitHub: oekazuma
Qiita: oekazuma

Transcript

1. © 2025 Ateam Holdings Co., Ltd.
 チーム開発を⽀えるSvelteKitの ディレクトリ設計とコーディングルール 2025/7/18 Svelte Japan Offline Meetup #4 株式会社エイチームライフデザイン シニアエンジニア oe kazuma
2. © 2025 Ateam Holdings Co., Ltd. 株式会社エイチームライフデザイン シニアエンジニア oe kazuma 2 ⾃⼰紹介 @oekazuma
3. © 2022 Ateam Inc. 3 会社説明 🏢
4. © 2025 Ateam Holdings Co., Ltd.
 4
 事業領域
 インターネット を軸に多様な事業を展開する IT企業として、 
 テクノロジー ×デジタルマーケティング を強みに様々なソリューションを展開 
 エンターテインメント 
 D2C
 メディア・ソリューション ゲーム開発
 送客・集客
 法人支援
 ネット販売
 世界中の人々にゲーム 
 アプリ等を提供､オリジナル IP と協業案件を開発
 比較サイト・情報サイト 
 など様々なWebサービス
 の企画・開発・運営
 法人向けにデジタル集客 
 や業務効率化支援に関する 
 ソリューションを提供 
 複数の商材のD2C｡定期
 購入型のビジネスモデル 
 で継続顧客を獲得
 メディア ソリューション
5. © 2025 Ateam Holdings Co., Ltd.
 5
 主要サービス
 エンターテインメント メディア・ソリューション D2C
 引越し比較・ 
 予約サイト 結婚式場
 情報サイト エンジニア向け 
 情報共有サイト 
 Webサイト
 作成・管理ツール 
 ヴァルキリーコネクト ユニゾンリーグ ダークサマナー 三国大戦スマッシュ！ ダービーインパクト 化粧品・スキンケアブランド ドッグフードブランド 車査定・
 車買取サイト
6. © 2022 Ateam Inc. 6 なぜこのテーマについて話すのか💡
7. © 2022 Ateam Inc. 7 ディレクトリ設計 📁
8. © 2025 Ateam Holdings Co., Ltd. 8 ディレクトリ設計
9. © 2025 Ateam Holdings Co., Ltd. 9 ディレクトリ設計 lib/features • ドメインに紐づくロジックやコンポーネントを置く。 • サービス固有の概念や機能に関わらない抽象的なロジックやコ ンポーネントはlib/componentsやpackages/site-kitに置く。 lib/components • アプリケーション全体で使⽤するコンポーネントで、そのアプ リケーションでしか使⽤しないコンポーネントを置く。 • 他のアプリケーションでも使うコンポーネントやactionや関数 などはpackages/site-kitに置く。
10. © 2025 Ateam Holdings Co., Ltd. 10 ディレクトリ構成 lib/api • 外部APIとの通信を⾏う関数を置く。 • fetch関数やAPIレスポンスの型定義などを置く。 lib/db • データベース関連のロジックやスキーマ定義を置く。 /routes • そのページ以下でしか使⽤しないコンポーネントがある場合、 routes/page-name/components/にディレクトリを作成し、コ ンポーネントを置く。
11. © 2022 Ateam Inc. 11 コロケーション設計📝
12. © 2025 Ateam Holdings Co., Ltd. 12 コロケーション設計
13. © 2022 Ateam Inc. 13 ESLintで設計を守る🛡
14. © 2025 Ateam Holdings Co., Ltd. 14 ESLintで設計を守る (eslint-plugin-check-file)
15. © 2025 Ateam Holdings Co., Ltd. 15 ESLintで設計を守る (eslint-plugin-svelte)
16. © 2022 Ateam Inc. 16 コンポーネントカタログを⾃作する🎨 ✍
17. © 2022 Ateam Inc. 17 もともとStorybookを使っていましたが、 今はやめて ⾃作のコンポーネントカタログを使っています
18. © 2025 Ateam Holdings Co., Ltd. 18 コンポーネントカタログを⾃作する なぜStorybookを辞めたのか • 少⼈数のチームで開発をしているのでアップデートしたり、 新しい記法や機能をキャッチアップする時間が惜しかったか ら。 • Storybookはテスティングツールとしても使われるが、もともと vitestやplaywrightを使ってテストを書いていたのでテスティン グ機能が必要なかったから。 • コンポーネントを管理して使い⽅などが確認できるコンポーネ ントカタログとしての機能があればよかったので⾃分たちには オーバースペックだと感じたから。
19. © 2025 Ateam Holdings Co., Ltd. 19 コンポーネントカタログを⾃作する styleGuide/*.styleGuide.svelte • 各コンポーネントの使⽤例やバリエーションを⽰すスタイルガ イド⽤のSvelteコンポーネント • *.styleGuide.svelteというファイル名で検索して反映するのでこ のファイルを作れば⾃動的にコンポーネントカタログに反映さ れる styleGuide/Document.md • コンポーネントの使い⽅、仕様、注意点などを記述したマーク ダウン形式のドキュメントファイル
20. © 2025 Ateam Holdings Co., Ltd. 20 コンポーネントカタログを⾃作する
21. © 2025 Ateam Holdings Co., Ltd. 21 コンポーネントカタログを⾃作する
22. © 2025 Ateam Holdings Co., Ltd. 22 コンポーネントカタログを⾃作する
23. © 2022 Ateam Inc. 23 おまけ 🎁
24. © 2022 Ateam Inc. 24 pnpm catalog 📖
25. © 2025 Ateam Holdings Co., Ltd. 25 pnpm catalog(pnpm-workspace.yaml) Renovateにも対応
26. © 2022 Ateam Inc. 26 さいごに