Serendie Design Systemを使ってWebアプリケーションを開発してみた

2026/1/10(土) 小江戸らぐ 1月のオフな集まり(第282回) @Serendie Street 発表資料

Transcript

1. Serendie Design Systemを使って Webアプリケーションを開発してみた 2026/1/10 小江戸らぐ 1月のオフな集まり(第282回) 世良泰明
2. 自己紹介 名前: 世良泰明(せら やすあき) 職業: クラウドエンジニア(?) k8sを使って開発するお仕事 某製造業@横浜 社会人5年目 趣味: 囲碁, 散歩, etc... twitter: @y_sera15 自宅K8sクラスター Intel NUC 3台 + Synology NAS
3. • 正月から、自宅で開発し始めたwebアプリの紹介 • フロントのUIに「Serendie Desigin System」を使用 (本日の会場とのコラボを意識して) • インフラは、お馴染みの自宅k8sクラスターを使用 今日のお話
4. • 三菱電機が手掛けるOSSのデザインシステム • 多様なブランド・事業領域で、 一貫したデザイン・開発体験・品質をもたらす為のアセット • ライセンス: MIT • 主に3つの要素がある • UIコンポーネント(reactベース) • CSSアセット(デザイントークン) • アイコン集 • Figmaとの連携など、社内向けの情報もあるらしい • 使い方は後述 Serendie Design Systemとは https://serendie.design/about/
5. • 困りごと: 自宅の非常食 • 無計画な購入のため在庫実態把握できていない • 北海道旅行で買った熊肉の缶詰とか • ダンボールすら開けてないものも • 長いもので4~5年経過。そろそろローテが要りそう • そもそも何日分あるの? → 実態を管理する仕組みが欲しい 開発のきっかけ
6. • そろそろちゃんと開発して何かを作ってみたい • golangとかreactとか、チュートリアルで挫折した日々を超えたい • 自宅のk8sクラスターを有効活用したい • 充実したインフラに対し、2年経っても自作アプリ0。 • gitリポジトリ • コンテナレジストリ • 自動設定されるDNS • 自動発行されるTLS証明書 • などなど • (今後も会場使わせてもらえるよう、Serendieコラボの実績残しときたい) その他の諸事情
7. 目指すゴール • 非常食の在庫が一覧として確認できる • 賞味期限切れが確認できる • 何日分生きられるかがわかる 1/1から開発開始(本日10日目) アプリの目指す姿
8. 1/1から開発開始 1/1~1/4はほぼ終日開発 1/5からは仕事もありやや停滞気味 Serendie Design Systemは完全初見のため、公式サイトとgithubを漁りまくる バックエンド周りは、過去の勉強の残骸を有効活用(go製のAPI + DB接続) 開発状況
9. • アプリケーション • フロントエンド: • TypeScript + React + Vite + Serendie Design System • バックエンド: Golang + Gin • DB: MySQL • インフラ • 全て on Kubernetes • ソースコード管理: gitlab • CI: gitlab runner • コンテナレジストリ: Harbor • DNS: 自動設定 • TLS鍵自動発行(HTTPS通信) • 詳しくは第258回発表資料に記載 • 開発機 • MacBook Air(M3) • podman(v5.6.2) アーキテクチャ・インフラなど Frontend Backend MySQL HTTPS イメージpush ソースコード管理 + CI(Linter + ビルド) コンテナレジストリ コンテナ環境 git push
10. 開発環境とデプロイ先で、CPUアーキテクチャが異なるため、CIでコンテナビルドが必要 • 開発機: Mac book(arm64) • デプロイ先: Intel NUC(amd64) ローカル開発環境 • バックエンド: podmanでビルド + Kustomizeでマニフェストを読み込ませてデプロイ kubectl kustomize ./ | podman kube play - • フロントエンド: 開発者モードでバックエンドと接続 開発環境 + デプロイ先 イメージpush ソースコード管理 + CI(Linter + ビルド) コンテナレジストリ コンテナ環境 git push
11. CI構成 • コードの静的解析 + コンテナビルド&push(フロントエンド/バックエンドそれぞれ実施) • gitリポジトリのpush/マージがトリガー • コードテストやIntegrationテストはまだ実施できていない デプロイ先 • kustomizeで本番環境用のマニフェストを作成 + 手動デプロイ • (自宅に閉じているため、外部公開はしない) 開発環境 + デプロイ先 イメージpush ソースコード管理 + CI(Linter + ビルド) コンテナレジストリ コンテナ環境 git push
12. その他インフラ 自宅k8sクラスターへのリソースデプロイのみで、 自動でDNS設定/TLS通信できるように実装済み • DNSの自動設定: External-DNS • TLS証明書の自動発行: cert-manager + Let’s encrypt • 外部向けのロードバランサー: cilium Ingress Controller 過去資料:自宅k8s日記 冬休み編より
13. VPN経由で自宅へアクセスしデモ DEMO
14. 作ったもの(本番環境) サイドバー: それっぽいパーツがなかったので、 AIにお願いして作成(CSSだけ利用) コードが汚いので整理したい サイドバーからのリンクはまだ無い
15. 作ったもの(本番環境) 一覧表: バックエンドに問い合わせ、食糧・飲料の 一覧を出力 総カロリー・総水量も算出できている 実データはまだ入っていない 期限切れの場合をわかりやすくしたい グラフとかで内訳見たい 何日分か換算したい(割るだけ)
16. 作ったもの(ローカル開発環境のみ) 食品追加機能: バックエンドはできたが、フロントエンドは AI頼み マージしようとしたところ CIのLinterでこけたため、 一旦Linterを無効化してマージ → しようとしたが、ビルドも失敗したため、 本番では未実装 UIのクセと、Reactの理解不足の両方に苦しんでいる... 編集画面も欲しい
17. 目指すゴール(機能) • 非常食の在庫が一覧として確認できる • ただし、データはこれから入れる • 賞味期限切れが確認できる • 一覧からは確認できる。切れたら赤くなるとかしたい。 • 何日分生きられるかがわかる • 合計何カロリーかまでは算出できるようになった。あとは1日あたりの数字で割るだけ 開発環境周り • CIで自動コンテナビルドができている • 環境ごとのデプロイの自動化ができている 現在の開発進捗
18. • UIコンポーネントとデザイントークン • UIコンポーネント: コンポーネント + Serendieらしい見た目のCSSを提供 • ボタン • テーブル • チャート • などなど • デザイントークン: Serendieの見た目を体系的に整えたCSS用データセット → 色やサイズに特定の値を命名しグループ化することで、抽象的な取り扱いができる • タイポグラフィ: フォント, サイズ, 行の高さなどを役割ごとにグループ化(例: 見出し/本文用) • カラー: 用途ごとにそれぞれの色に名前が割り当てられている • カラーテーマ: 5つのカラーテーマでそれぞれの色をグループ化 Serendie Design Systemの特徴
19. UIコンポーネント例 Serendie Design System UIコンポーネント https://serendie.design/components/
20. • カラー • それぞれの用途で分類 • ユーザーが受ける全体の色: Impression • UIの背景・テキストや輪郭の色: Compornent • UIコンポーネントの状態変化を表す色: Interaction -> ボタンの活性、非活性など • 色の名前 • こんな感じで取り込む • css in js系のライブラリを使う(panda cssの場合) Serendie Design System デザイントークン sd.system.color.impression.primary 色の例 @import "@serendie/design-token/tokens.css"; h1 { font-size: var(--sd-reference-typography-scale-expanded-large); color: var(--sd-system-color-impression-primary); }
21. • カラーテーマ: 現在5つ Serendie Design System デザイントークン
22. • カラーテーマ: 現在5つ • テーマ単位でPrimary, Secondaryなどの 色の組み合わせを設定 • 使い方 • html要素の中で以下のようにテーマを指定 Serendie Design System デザイントークン <html data-panda-theme="asagi"></html>
23. • カラーテーマ: 現在5つ • テーマ単位でPrimary, Secondaryなどの 色の組み合わせを設定 • 使い方 • html要素の中で以下のようにテーマを指定 Serendie Design System デザイントークン <html data-panda-theme="asagi"></html>
24. フォント, サイズ, 行の高さなどを役割ごとにグループ化したもの • 使う場所に合わせて、それぞれセット • Display: 大きいサイズで、視覚的に印象づける • Headline: 大見出しで使用 • Title: 小見出しで使用 • Body: 本文で使用 • Label: ボタンやフォームなどの文字に使用 • 使い方 • 諸々セットアップ(右上リンク参照) • textStyleをキーに、指定したい タイポグラフィを指定 Serendie Design System タイポグラフィ // 諸々import function App() { return ( <main className={css({ h1": { textStyle: "sd.system.typography.title.large_compact"} })} > // 何かテキスト </main> 環境セットアップ手順 rootのcss設定 panda cssの導入 ... typography: { "title": { "small_compact": { "fontSize": "16px", "fontWeight": 700, "fontFamily": "inherit", "lineHeight": 1.6 },... パラメータの具体的な値: @serendie/desin-token/dist/token.jsに記載
25. まとめ Serendie Design Systemを使い、非常食管理システムを作った • 食品、飲料の在庫一覧を表示できるようになった • CIを作り、自動でビルドする環境を作った • Serendie Design Systemを使ってみて、それっぽい見た目を作ることができた • 欲しいパーツがなかったり、ドキュメントが(少なくとも外部向けには)不足感があったり、 本格的な利用はまだちょっとパワーが必要そう まとめ
26. 今後 まだまだ開発を続けて、色々充実させたい • 機能面 • 食糧追加機能の修正・マージ • 編集・削除機能を実装 • 賞味期限切れは表で赤く表示させる • 別画面の実装(ホーム画面など) • 開発面 • CIのテストを充実させたい • 自動デプロイ実装したい • ステージング環境も作りたい • 実データを入れて運用したい ソースコードは、githubにも後程公開します 今後