クラウドサインを止めずに Nuxt へ 次の10年のために先に決めたこと

Vue Fes Japan 2026 における、プロダクト開発本部 クラウドサインProduct Engineering部 SWE 篠田 貴大による登壇資料です。

【Vue Fes Japan 2026】
https://vuefes.jp/2026/

■ 弁護士ドットコム株式会社 CompanyDeck for Engineers
https://speakerdeck.com/bengo4com/2026-companydeck-for-engineers

■ 採用情報
https://hrmos.co/pages/bengo4/jobs

■ テックブログ：弁護士ドットコム CREATORS’ BLOG
https://creators.bengo4.com/

■ X(Twitter)：弁護士ドットコム CREATORS
https://x.com/bengo4_creators

Transcript

1. クラウドサインを止めずに Nuxt へ 次の10年のために先に決めたこと 弁護士ドットコム株式会社 Shinoda Takahiro 2026年10月24日
2. 自己紹介 篠田 貴大 Shinoda Takahiro 弁護士ドットコム株式会社 プロダクト開発本部 クラウドサインProduct Engineering部 クラウドサインでは フロントエンドの改善を主にやってます。 熊本出身です！くまのアイコンで発信してます。 X（Twitter）アカウント © 2026 Bengo4.com, inc. @tttttt_621_s 2
3. 会社紹介 © 2026 Bengo4.com, inc. 3
4. VISION まだないやり方で、世界を前へ。 Drive a paradigm shift for the better world. MISSION ｢プロフェッショナル・テック ｣で、 次の常識をつくる。 Be the Professional-Tech Company. プロフェッショナルだからできること。 専門知とテクノロジーで、社会に貢献する。 © 2026 Bengo4.com, inc. 4
5. OUR SERVICE クラウドサイン は、弁護士ドットコム が運営するサービスです 契約の締結から管理までデジタルで完結させる 契約マネジメントプラットフォーム 最新の法改正や実務について分かりやすく解説する 日本最大級の企業法務ポータルサイト 5 日本最大級の無料法律相談ポータルサイト 税理士に無料で相談・検索できる日本最大級の 税務相談ポータルサイト 時事問題の弁護士解説を中心としたメディア AI基盤技術「 LegalBrain 1.0」を組み込んだ リーガル特化型 AIエージェント 弁護士事務所、企業法務職向け人材紹介事業 © 2026 Bengo4.com, inc. 5
6. 契約締結から契約書管理まで可能な クラウド型の電子契約 サービス 契約交渉が済んだ完成済の契約書をアップロードし、相手方が承認するだけで契約を締結することができます 書類の受信者はクラウドサインに登録する必要がありません © 2026 Bengo4.com, inc. 6
7. 目次 1. クラウドサインの現状 2. 移行のゴールをどう決めたか 3. ゴールから判断と検査をどう導いたか 4. 実際の移行の取り組み 5. おわりに © 2026 Bengo4.com, inc. 7
8. クラウドサインの現状 © 2026 Bengo4.com, inc. 8
9. プロダクト: 10年もののフロントエンド • 2015 年から続くコードベース • 画面ごとに Revel（Go の Web フレームワーク）+ jQuery / Revel + Vue（一部）/ Revel + Vue（全部）が混在 • 800 以上の Vue コンポーネント • 400 以上の Revel テンプレート jQuery Vue jQuery Vue Revel + jQuery © 2026 Bengo4.com, inc. Revel + Vue（一部） Revel + Vue（全部） 9
10. 組織: 汎用チームから領域別チームへ • エンジニアが増え、プロダクトが大きくなり汎用フィーチャーチームから領域別チームへ • ユーザー体験ごとに領域を分け各チームが1つの領域を一貫して担当 汎用フィーチャーチーム 領域別チーム プロダクト全体のバックログ、空いたチームが上から取る バックログ A バックログ B バックログ C バックログ D チーム 1 チーム 2 チーム 3 チーム 4 領域 A チーム 領域 B チーム 領域 C チーム 領域 D チーム 領域 A 領域 B 領域 C 領域 D 領域 A 領域 B 領域 C 領域 D © 2026 Bengo4.com, inc. 10
11. サービスは止められない • 契約業務における社会インフラであるため移行中も止めるわけにいかない • 時間は有限。最初から作り直すのは難しいので既存の資産はできるだけ活かす © 2026 Bengo4.com, inc. 11
12. 移行のゴールをどう決めたか © 2026 Bengo4.com, inc. 12
13. 人間は何に注力するべきか これまで 今 探す・理解する・直す・検証する AI でそのハードルは下がった 人間の時間の多くはここ © 2026 Bengo4.com, inc. 13
14. 「何を正解とするか」は人間が決め、守るのは CI • 新アプリは、AI エージェントが実装する前提で設計 • 実装速度が上がるほど「何を正解とするか」を決める比重が上がる © 2026 Bengo4.com, inc. ゴール 判断 検査 人間が決める ゴールから導く CI で守る 14
15. 「何を正解とするか」をチームで決めた ワーク 1 ワーク 2 ワーク 3 結論 困りごとを出す 裏返す ゴールを探す 1つに絞る 直った状態は？ それは何で測る？ いま、何が辛い？ 例: 5 ディレクトリ触る → 1 箇所で完結 その指標が改善すると 最後に何ができる？ 3 つの候補から、 ゴールを 1 つ 選ぶとしたら？ → 変更の局所性 出てくるもの 出てくるもの 出てくるもの 辛いことの一覧 指標の候補 ゴールの候補 3 つ © 2026 Bengo4.com, inc. 15 決まったもの ゴール1つ + 指標3つ
16. ゴールは移行の完了ではなく機能開発のリードタイムの短縮 • ワークで出た辛いことを1つずつ、理想、指標、最後に何が良くなるか、の順に考えた ワークでの 1 例 辛いこと 理想 指標 その先 終点 他のチームと チーム間で独立して 共有ファイル数 他チームの変更を リードタイムが縮む コンフリクトする 開発できる （複数チームが触る数） 待たずに出せる これがゴール © 2026 Bengo4.com, inc. 16
17. ゴールから判断と検査をどう導いたか © 2026 Bengo4.com, inc. 17
18. リードタイムの中身は 4 つの作業の周回 • コードを変更する作業は、探す・理解する・直す・検証する の4つの周回 • 作業ごとにコードがどうなっていればいいかを決めた 導出可能 置き場所が規則から分かる 探す 理解する 自己説明的 開いているファイルだけで分かる リードタイム 機械検査可能 正しいかどうかを機械が判定する © 2026 Bengo4.com, inc. 検証する 直す 均一 直し方がどの画面でも同じ 18
19. 4 つの性質を 8 つの約束で守る • 4 つを守る約束を 8 つ決め、個々の判断はこの 8 つから決める • 8 つとも守れているかを CI の検査で確かめ、検査できない約束は置かない 8つの約束 1 置き場所は規則で決める 3 離れた所から挙動を 変えない 5 行数に上限を置く 7 テストは実装と同じ フォルダに置く 2 移行状態は台帳 （一覧ファイル）で持つ 4 壊せる範囲で配置を 決める 6 画面のフォルダ構成は 決まった形だけ 8 割に合わない検査は 捨てる 4つの性質 導出可能 © 2026 Bengo4.com, inc. 自己説明的 均一 機械検査可能 19
20. 離れた所から挙動を変えない 明示して使うもの → 使う 自動で効くもの → 使わない 明示的な import（composable・components） auto-import（composable・components） definePageMeta で明示する middleware 全 route に自動で効く *.global.ts の middleware 挙動を変えない plugin 置くだけで挙動が変わる plugin assets/ に置き、css:[] で宣言したグローバル CSS scoped の無い <style> © 2026 Bengo4.com, inc.
21. 壊せる範囲で配置を決める / team/ documents/ 今回の diff documents/ の中だけ触った diff は、 /team/documents しか壊せない レビューで読む範囲が、パスで決まる members/ components/ team/ の中だけで共有 shared/ 先に作らない © 2026 Bengo4.com, inc. members/ からも使われたら、 team/components/ へ上げる 置き場所の深さが、そのまま壊せる範囲になる 無関係な画面どうしで使うものだけ、 shared/ へ
22. 実際の移行の取り組み © 2026 Bengo4.com, inc. 22
23. URL 単位で新旧を切り替える Revel（旧） ブラウザ 同じ URL で要求 OpenResty（nginx） フラグ OFF・未登録・取得失敗の URL URL ごとのフラグで振り分ける （AWS AppConfig） Nuxt（新） フラグ ON の URL © 2026 Bengo4.com, inc. 23
24. 移行状態は記憶ではなく台帳で持つ URL /team/documents 旧実装の場所 vue/src/pc/pages/TeamDocuments 新実装の場所 app/screens/team/documents 状態 todo © 2026 Bengo4.com, inc. 検査 （CI） 実体との整合 台帳の鮮度 新旧の実装が台帳どおりにあるか 元データから古くなっていないか
25. おわりに © 2026 Bengo4.com, inc. 25
26. まとめ 人間が先に決めたのは「何を正解とするか」。守るのは CIに任せた 守る（CI） 先に決める（人間） ゴールを 1 つ決める ゴールから約束を導く 移行の完了ではなく リードタイムの 4 つの性質から 約束 1 つに検査 1 つ以上 機能開発のリードタイムの短縮 8 つの約束 移行状態は台帳で持ち照合する © 2026 Bengo4.com, inc. 守るのは CI
27. 弁護士ドットコム クリエイターズブログ更新しています。 ぜひご覧ください。 https://creators.bengo4.com/ © 2026 Bengo4.com, inc. 27
28. We are Hiring クルー 仲間を 募集中 ブースにも遊びにきてね © 2026 Bengo4.com, inc. 28