🕸️
【イベントレポート】Muddy Web #11 ~Special Edition~ 【ゲスト: Cybozu】
公開
2025-04-03
更新
2025-04-03
文章量
約3913字
Yard 編集部
Yardの編集部が、テック業界の最新トレンドや知見について発信します。
2025年3月21日、「Muddy Web #11 ~Special Edition~ 【ゲスト: Cybozu】」がハイブリッド形式（渋谷スクランブルスクエア＋YouTube Live）で開催されました。本イベント「Muddy Web」は、その名のとおり “泥臭い” Webフロントエンドの現場にフォーカスし、実際に遭遇したトラブルシュートやケーススタディなどから学びを得ることを目的としています。今回はサイボウズのエンジニアをゲストに迎え、ノーコードツール「kintone」をはじめとしたフロントエンドの泥臭い現場知見が多く共有されました。以下では各発表の概要を追いながら、質疑応答で挙がったポイントもご紹介します。
オープニング
今回の「Muddy Web #11」はオンライン・オフラインのハイブリッド開催となりました。冒頭で司会のサイバーエージェント・池田さんより、イベントの注意事項や進行が説明され、過去のアーカイブやPodcastの紹介などがありました。また、セッション終了後にオフライン参加者向けの懇親会が予定されており、さらにカジュアルに技術談義できる空気が醸成されていました。
セッション1：爆速スッキリ！Rspack移行の成果と道のり（どら）
発表概要
最初の登壇者は、竹内 実（どら）さん（WINTICKET Web所属）。長くWebpack＋Babelを使っていたフロントエンドを 「Rspack＋SWC」 に移行した事例を紹介しました。
ポイント
WINTICKET Web 競輪・オートレース投票サービスのWebアプリ。サービスインから6年弱経過し、大規模コードベース（TS/TSXファイル約7000、コード50万行超）になっていた。
移行の動機
ローカル開発のビルド・起動時間（約50秒）の遅さ
Babelプラグイン等のレガシー設定が増加
具体的な移行手順
Webpack の設定を Rspack 対応へ置き換え
Babel → SWC への移行
ローカル開発のみ先行テスト → 本番環境へ段階移行
成果
ローカルサーバー起動が50秒→20秒に短縮
本番ビルドは1分半→16秒と劇的に向上
設定は概ねWebPack互換で、移行コスト自体は少なめだが「Babelプラグインの精査」が最も大変だった
質疑応答
Q：リファクタ的な移行は大事だが、どうやって工数を確保？ A：週に2回ほど新技術検証の時間を設ける「Mプロ」文化があり、そこからPoCを進めた。最終的に開発チーム内で正式工数として確保して移行。
Q：ほかのビルドツール（Viteなど）との比較は？ A：Viteを導入するにはSSRや既存構成（isomorphicなReactアプリ）を大幅に変えなければならず、設定差分が大きい。一方、RspackはWebpack互換でセットアップが比較的楽だった。
全体的に「ラスト製バンドラーの恩恵が大きく、今後のバージョンアップでさらに高速化を期待できる」という熱い報告でした。
セッション2：ノーコードツール「kintone」のリストビュー画面UX改善の振り返り（プロテインもち）
発表概要
次に登壇したのは、Daichi Igarashi（プロテインもち）さん。サイボウズ株式会社でノーコードツール「kintone」のフロントエンドを担当し、リストビュー画面のUX改善に取り組んだ話を共有しました。
ポイント
kintoneのリストビュー画面 いわゆる「アプリ一覧画面」。データが横スクロールすると重要なボタン等が隠れてしまう課題があり、テーブル表示のUXが悪化していた。
検討したアプローチ
スクロール対象をテーブル本体に変更 → 横スクロールバーの位置が分かりづらい
外側に偽のスクロールを作り、同期させる → 実装が複雑でデグレの懸念大
テーブル以外をビューポートに固定 → 採用
スクロールバーによる幅のズレ問題
100vwで指定すると、縦スクロールバーが出現した分だけ幅が食い込み、デザインが崩れるdvwも既存のVWと挙動が同じで、スクロールバーを考慮しないパーセンテージでも親要素に影響されてうまくいかない最終解決策 リサイズオブザーバーAPI（ResizeObserver）で要素サイズの変化を監視し、JSで
widthを動的に調整する仕組みを導入。これによりスクロールバーによるズレを克服。
質疑応答
Q：デザイン側の見直しでシンプルに解決できなかった？ A：コストとリソースの都合で「実装だけで対処」というスコープだったため、デザイン変更は見送り。
kintoneのちょっとしたUI改善にも多くの泥臭い知見が凝縮されていると感じさせる内容でした。
セッション3：ReactFlow への移行で実現するユーザー体験と開発体験の向上（吉田純基）
発表概要
続いてはサイバーエージェント株式会社AI Shift所属の吉田純基さんが、AIエージェント構築プラットフォーム「AIワーカー」において、ノードベースのワークフロー画面を Reaflow（LeadJS）→ReactFlow へ移行した話を紹介しました。
ポイント
AIワーカーのワークフロー機能 社内でのみ使われる想定だったが、事業方針の変化で対顧客にも提供することに。より滑らかなUXが必須となった。
LeadJSの課題
ピンチズーム・マウスホイール操作の精度が低い
プラグイン依存やUI拡張の難しさで要望に応えづらい
ReactFlowに移行した理由
既にいくつかの有名プロダクトでの利用実績
ピンチズーム等のデフォルトUXが快適
カスタムフックや豊富な組み込みコンポーネントが魅力
移行計画
UIを再実装（カーソルのエージェントモードで効率化）
データ構造をマイグレーション（古いJSONを新フォーマットに変換）
フィーチャーフラグ管理ツールを用いて段階的にリリース
結果 約2週間で移行完了。ミニマップ等の追加も容易になり、ユーザー体験が大幅に向上。
質疑応答
Q：LeadJSからReactFlow移行を円滑にするため事前にやっておくべきことは？ A：マイグレーションスクリプトをあらかじめテスト含め書いておくとよかった。
短期間でのリプレースにもかかわらず段階的リリースが成功したのは、フィーチャーフラグ活用やカーソルエージェントモードの効率化が大きかったとのことでした。
セッション4：ノーコードツールの裏側につきまとう「20分岐」との戦い（おぐえもん）
発表概要
最後はサイボウズ株式会社のおぐえもん（Daichi Igarashi）さんが登壇。ノーコードツール「kintone」の核機能であるフォーム（アプリ）にまつわるフロントエンド実装を取り上げ、「大量の条件分岐」と向き合う泥臭い現場を語りました。
ポイント
kintoneアプリ機能 フォーム作成＋レコード編集がコア。実際には20～30種類のフィールドが存在し、それぞれ挙動もデータ構造も大きく異なる。
条件分岐と型の激増
フィールド種別ごとに描画・更新処理をスイッチ分で分岐すると、常に20～30タックのケースが出現
テーブルフィールドや関連レコード一覧フィールドなど“フィールドの中にフィールド”があるものも追加の分岐を生む
型管理も30近いフィールドに対応しようとするとユニオン型が大量に必要
対策
スイッチ分の
caseをアルファベット順に並べるESLintプラグインを自作導入 → 検索性UPスイッチ分ではなくオブジェクトマッピングで分岐する
判別可能なユニオン型やジェネリクス型を活用して、フィールド種別に応じた型を動的に絞り込む
アサーション関数を作り、エラー時点で型を特定する仕組みを整える
質疑応答
Q：テストケースが膨大になりそうだが対策は？ A：どうしてもフィールド別に細かくテストを書く必要があり、頑張っている。
Q：フィールドの数は今後も増える？ A：今のフォーム機能は十分成熟しており、新規フィールド追加はないと信じたい。
ノーコードツールの“便利さ”を支える裏側に、膨大な分岐処理と型管理の苦労が潜んでいる様子がリアルに伝わりました。
全体を踏まえた感想：それぞれの“泥臭さ”から見えるフロントエンドの未来
今回の「Muddy Web #11」は、ビルドツール移行・ノーコードツールのUI改善・ワークフローエディタのリプレースなど、まさに“現場の最前線”ならではの工夫と試行錯誤が詰まったセッションばかりでした。どの発表にも共通していたのは、「既存の枠組みを壊さずにどこまで高速化・高機能化を実現できるか」 という泥臭いテーマです。
Rspackへの移行のように、速度面の大幅向上と安定運用を両立するために実践したテクニック。ReactFlow移行で顕著になったUX向上の重要性。そして、kintoneの内部で広がる無数の条件分岐をじりじりと制御する姿勢など、いずれも 「現場を動かす」 ための実装ノウハウが溢れていました。
フロントエンドの技術は日進月歩ですが、イベントタイトル通り「泥臭さ」の中にこそ、業務アプリやノーコードツールなどのコア機能を地に足つけて運用する知恵が隠されていると再認識できる内容でした。今後もMuddy Webのような場で、手触り感ある具体的な手法が共有され続けることを期待しています。
以上、Muddy Web #11のレポートでした。ご登壇・ご参加の皆様、ありがとうございました。今後もフロントエンド現場のリアルな知見に触れたい方は、ぜひMuddy Webに注目してみてください。
Yardでは、テック領域に特化したスポット相談サービスを提供しています。
興味がある方は、初回の無料スポット相談をお申し込みください。
また、資料請求やお問い合わせもお待ちしております。テック領域の知見を獲得し、事業成長を一緒に実現していきましょう。
