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

クラウドサインを止めずに Nuxt へ次の10年のために先に決めたこと弁護士ドットコム株式会社 Shinoda Takahiro 2026年10月24日

自己紹介篠田貴大 Shinoda Takahiro 弁護士ドットコム株式会社プロダクト開発本部クラウドサインProduct Engineering部クラウドサインでは
フロントエンドの改善を主にやってます。熊本出身です！くまのアイコンで発信してます。 X（Twitter）アカウント © 2026 Bengo4.com, inc. @tttttt_621_s 2

VISION まだないやり方で、世界を前へ。 Drive a paradigm shift for the better world.
MISSION ｢プロフェッショナル・テック｣で、次の常識をつくる。 Be the Professional-Tech Company. プロフェッショナルだからできること。専門知とテクノロジーで、社会に貢献する。 © 2026 Bengo4.com, inc. 4

OUR SERVICE クラウドサインは、弁護士ドットコムが運営するサービスです契約の締結から管理までデジタルで完結させる契約マネジメントプラットフォーム最新の法改正や実務について分かりやすく解説する日本最大級の企業法務ポータルサイト 5
日本最大級の無料法律相談ポータルサイト税理士に無料で相談・検索できる日本最大級の税務相談ポータルサイト時事問題の弁護士解説を中心としたメディア AI基盤技術「 LegalBrain 1.0」を組み込んだリーガル特化型 AIエージェント弁護士事務所、企業法務職向け人材紹介事業 © 2026 Bengo4.com, inc. 5

目次 1. クラウドサインの現状 2. 移行のゴールをどう決めたか 3. ゴールから判断と検査をどう導いたか 4. 実際の移行の取り組み 5.
おわりに © 2026 Bengo4.com, inc. 7

プロダクト: 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

組織: 汎用チームから領域別チームへ • エンジニアが増え、プロダクトが大きくなり汎用フィーチャーチームから領域別チームへ • ユーザー体験ごとに領域を分け各チームが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

人間は何に注力するべきかこれまで今探す・理解する・直す・検証する AI でそのハードルは下がった人間の時間の多くはここ © 2026 Bengo4.com,
inc. 13

「何を正解とするか」は人間が決め、守るのは CI • 新アプリは、AI エージェントが実装する前提で設計 • 実装速度が上がるほど「何を正解とするか」を決める比重が上がる © 2026 Bengo4.com,
inc. ゴール判断検査人間が決めるゴールから導く CI で守る 14

「何を正解とするか」をチームで決めたワーク 1 ワーク 2 ワーク 3 結論困りごとを出す裏返す
ゴールを探す 1つに絞る直った状態は？それは何で測る？いま、何が辛い？例: 5 ディレクトリ触る → 1 箇所で完結その指標が改善すると最後に何ができる？ 3 つの候補から、ゴールを 1 つ選ぶとしたら？ → 変更の局所性出てくるもの出てくるもの出てくるもの辛いことの一覧指標の候補ゴールの候補 3 つ © 2026 Bengo4.com, inc. 15 決まったものゴール1つ + 指標3つ

ゴールは移行の完了ではなく機能開発のリードタイムの短縮 • ワークで出た辛いことを1つずつ、理想、指標、最後に何が良くなるか、の順に考えたワークでの 1 例辛いこと理想指標その先
終点他のチームとチーム間で独立して共有ファイル数他チームの変更をリードタイムが縮むコンフリクトする開発できる（複数チームが触る数）待たずに出せるこれがゴール © 2026 Bengo4.com, inc. 16

リードタイムの中身は 4 つの作業の周回 • コードを変更する作業は、探す・理解する・直す・検証するの4つの周回 • 作業ごとにコードがどうなっていればいいかを決めた導出可能置き場所が規則から分かる
探す理解する自己説明的開いているファイルだけで分かるリードタイム機械検査可能正しいかどうかを機械が判定する © 2026 Bengo4.com, inc. 検証する直す均一直し方がどの画面でも同じ 18

4 つの性質を 8 つの約束で守る • 4 つを守る約束を 8 つ決め、個々の判断はこの 8
つから決める • 8 つとも守れているかを CI の検査で確かめ、検査できない約束は置かない 8つの約束 1 置き場所は規則で決める 3 離れた所から挙動を変えない 5 行数に上限を置く 7 テストは実装と同じフォルダに置く 2 移行状態は台帳（一覧ファイル）で持つ 4 壊せる範囲で配置を決める 6 画面のフォルダ構成は決まった形だけ 8 割に合わない検査は捨てる 4つの性質導出可能 © 2026 Bengo4.com, inc. 自己説明的均一機械検査可能 19

離れた所から挙動を変えない明示して使うもの → 使う自動で効くもの → 使わない明示的な import（composable・components） auto-import（composable・components）
definePageMeta で明示する middleware 全 route に自動で効く *.global.ts の middleware 挙動を変えない plugin 置くだけで挙動が変わる plugin assets/ に置き、css:[] で宣言したグローバル CSS scoped の無い <style> © 2026 Bengo4.com, inc.

壊せる範囲で配置を決める / team/ documents/ 今回の diff documents/ の中だけ触った diff は、
/team/documents しか壊せないレビューで読む範囲が、パスで決まる members/ components/ team/ の中だけで共有 shared/ 先に作らない © 2026 Bengo4.com, inc. members/ からも使われたら、 team/components/ へ上げる置き場所の深さが、そのまま壊せる範囲になる無関係な画面どうしで使うものだけ、 shared/ へ

URL 単位で新旧を切り替える Revel（旧）ブラウザ同じ URL で要求 OpenResty（nginx）フラグ OFF・未登録・取得失敗の
URL URL ごとのフラグで振り分ける（AWS AppConfig） Nuxt（新）フラグ ON の URL © 2026 Bengo4.com, inc. 23

移行状態は記憶ではなく台帳で持つ URL /team/documents 旧実装の場所 vue/src/pc/pages/TeamDocuments 新実装の場所 app/screens/team/documents 状態 todo ©
2026 Bengo4.com, inc. 検査（CI）実体との整合台帳の鮮度新旧の実装が台帳どおりにあるか元データから古くなっていないか

まとめ人間が先に決めたのは「何を正解とするか」。守るのは CIに任せた守る（CI）先に決める（人間）ゴールを 1 つ決めるゴールから約束を導く移行の完了ではなく
リードタイムの 4 つの性質から約束 1 つに検査 1 つ以上機能開発のリードタイムの短縮 8 つの約束移行状態は台帳で持ち照合する © 2026 Bengo4.com, inc. 守るのは CI

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

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

弁護士ドットコム

Transcript