存在感が薄い?!意外とがんばってるさくらインターネットFEチーム / Frontend Conference 2024

【イベント】
2024-08-24(Sat.) 10:00-18:00 Frontend Conference HOKKAIDO
https://fortee.jp/frontend-conf-hokkaido-2024/proposal/4d7a646e-c481-4d41-8123-366a14b2230f

【概要】
さくらインターネットって「サーバー」の会社ですよね？
え、フロントエンドエンジニアいるんですか？！

そんな存在感の薄いさくらインターネット フロントエンドチームだが、実は持てる知識とスキルを駆使してビジネスに貢献し社内では存在感を示していたのだった。
政府クラウドや生成AI向けサービスなどで注目を集める中、フロントエンドチームが力を入れてきた3つの取り組みと成果についてご紹介します。

1. 得意分野を活かしたデザインシステムの共創
2. 次の10年を戦うためのソフトウェア設計戦略
3. 互いに高め合う社内勉強会と成功へ導く秘訣

【関連スライド・記事】
■ フロントエンドの複雑さに立ち向かう / Tackling Complexity of Front-end Software with DDD and Clean Architecture
https://speakerdeck.com/bcrikko/tackling-complexity-of-front-end-software-with-ddd-and-clean-architecture

■ 「フロントエンドのモデル駆動設計」の見解（場外編） | Black Everyday Company
https://kuroeveryday.blogspot.com/2024/02/frontend-for-backend-engineer.html

■ 社内勉強会やっていきガイド / Tips for Sustainable Study Groups
https://speakerdeck.com/bcrikko/tips-for-sustainable-study-groups

■ 加速するコンポーネント設計入門 / Component Design as an Accelerator
https://speakerdeck.com/bcrikko/component-design-as-an-accelerator

Transcript

1. ダーシノ / @bc_rikko フロントエンドカンファレンス北海道2024 スポンサーセッション 意外とがんばってる さくらインターネット FEチーム 存在感が薄い?!
2. フロントエンドエンジニア ダーシノ / @bc_rikko NES.css ファミコン風CSSフレームワーク GitHub 20,000+ stars さくらの INFRA WARS エイプリルフール企画のブラウザゲーム 企画、ゲームデザイン、開発、サウンドデザイン 仮想DOM実践入門 AMBI（旧エンジニアHub）に寄稿 フレームワークを実装しながら仮想DOMを学ぶ記事 嫌いな技術に好きを見つける レバテックラボのインタビュー記事 嫌いだったCSSをどのように克服したか
3. さくらインターネットって “サーバー”の会社でしょ？ フロントエンドエンジニア いるんですか?!
4. 意外とがんばってます!!
5. フロントエンドチームで 力を入れて取り組んだことを 3つ紹介します
6. 1 得意分野を活かした デザインシステムの共創
7. 課題が共有されない 社内下請け構造 得意分野を活かした デザインシステムの共創 エンジニア デザイナー エンジニア デザイナー 発注 納品 デザインエンジニア デザインシステムを用いた コラボレーション 完全分業
8. 解決の幅が広がる What（作業依頼）ではなくWhy（課題）を共有することで、 要望に対し的確なアクションを起こせるようになる エンジニアもUIデザインに貢献 技術的視点（アクセシビリティやパフォーマンス、データ構造など）から 意見を共有することで、使いやすいだけでなく実装しやすいUIになる
9. 次の10年を戦うための ソフトウェア設計戦略 2
10. さくらのクラウド UIの歴史 サービス開始 「さくらのクラウド」を提供開始 サーバー、ストレージ、ネットワークの３機能のみ 2011 2013 UIリニューアル コントロールパネルをリニューアル 機能拡張しやすいUIに変更 2026 政府クラウド本認定（仮） 2025年度末までに技術要件を満たす 2024 現在 ２０１３年時点のUIを拡張・メンテして使っている 提供サービスは４０以上、複雑なUIになっている
11. なぜリニューアルできなかったか ライブラリ依存症 • 依存をばらまくライブラリが多数ある • 古い独自UIライブラリが剥がせない • IE対応で導入したライブラリの数々 • 削除したけど影響範囲がわからない • バージョンを上げると壊れる • 複雑なビルド処理を移行できない • 改修が大規模になってしまう • …… 歪なソフトウェア設計 • プレゼンテーションとビジネスロジック、 外部通信が密結合して単体テストが書けない • トランザクションスクリプトで可読性が悪い • ドメイン知識が散らかっている • グローバル変数で状態管理をしている • 存在し得ないデータ型が許容されている • 型付けできないオブジェクトが多数ある • ……
12. 課題解決のためにやったこと フロントエンドの複雑さに立ち向かう フロントエンドの設計方法をDDDやClean Architectureの視点から共通認識を作る https://speakerdeck.com/bcrikko/tackling-complexity-of-front-end- software-with-ddd-and-clean-architecture 自分でやった設計ひとり反省会 さくらに入社してからずっと改善を続けていたUIで、自分がやってしまった失敗の分析と共有 https://speakerdeck.com/bcrikko/evaluation-of-my-architecture フロントエンドのモデル駆動設計 他社のフロントエンドエンジニアとドメインモデリングについて意見交換 https://kuroeveryday.blogspot.com/2024/02/frontend-for-backend- engineer.html
13. ドメインモデリングと関心の分離 曖昧な状態を排除し、ドメイン知識をドメイン層に集約する 関心を分離し、可読性とテスト容易性を確保する 入れ替え・パージしやすい設計 ライブラリ依存を局所化し、振り回されないようにする バージョンアップに耐えられない場合は即パージできる仕組みをつくる
14. 互いに高め合う 社内勉強会 3
15. 社内勉強会の例 Design Weekly デザイナーグループ主催の雑談スタイルの勉強会 デザインやWeb制作に関するさまざまなネタを共有する フロントエンド交流会※ 仲良くなることを目的とした雑談スタイルの交流会 フロントエンドにとどまらず、デザイン関連や仕事の相談を共有する バックエンド交流会 仲良くなることを目的とした雑談スタイルの交流会 フロントエンド交流会の姉妹勉強会でバックエンドを中心に共有する DDD読書会・モデリング勉強会※ エリック・エヴァンス著「ドメイン駆動設計」を読み解く会 本から学んだことを実際の開発現場を想定してモデリングを行う勉強会 CSS・コンポーネント設計勉強会※ デザイナーとフロントエンドエンジニアの共通認識を作る会 NES.css開発で培ったCSS設計、コンポーネント設計を共有する and more... ※は主催した勉強会
16. 共通認識の形成とスキルアップ 共通認識を大切にし、メンバー全員が同じ方向を向いて仕事をする メンバーのスキルを底上げし、全員が対等な立場で議論をする 勉強会の種類が豊富 デザイナー〜インフラエンジニア（物理）までいるので勉強会の幅が広い マーケティングや法律、人事、経理、財務などの勉強会もある
17. さくら　採用 検索 社会を支える パブリッククラウドを 一緒に作りませんか？ https://www.sakura.ad.jp/recruit/
18. “懇親会ぼっち”なので 一緒にお話しませんか？ （こっちのほうが重要）