AI時代のリアーキテクチャ戦略 / Re-architecture Strategy in the AI Era

Transcript

1. AI時代のリアーキテクチャ戦略 2025-05-15 “AI x フロントエンド開発のリアル ” PRESENTATION SLIDES [ ver.01 2025.05 ] © MOSH Inc. MOSH develops and operates a platform that supports independent creators in selling their services online.
2. Ryo Adachi Webフロントエンドエンジニア at MOSH株式会社 PRESENTATION SLIDES © MOSH Inc. Productivity Team 基盤の改善、開発生産性の向上、などが主業務。 プロダクト開発を円滑に進めるための開発。 技術広報 企業ポッドキャスト、技術ブログ、勉強会の企画・運営。 趣味：料理、公園 最近は魚が好き。
3. PRESENTATION SLIDES © MOSH Inc. INDEX 01 会社概要 02 背景・前提 03 AIとの開発の進め方 04 まとめ
4. MOSHのミッション 一人の情熱が育まれ、だれかに伝播し、また新しい情熱が生まれる。 そんなふうに「情熱がめぐる」世界をつくることが私たちのミッションです。 PRESENTATION SLIDES © MOSH Inc.
5. MOSHのプロダクト MOSHは専門性を持った個人・クリエイター向けのサービス販売＆経営拡大プラットフォームです。 オールインワンプロダクトとしてクリエイターの事業拡大を支援します。 PRESENTATION SLIDES © MOSH Inc.
6. 背景・前提 PRESENTATION SLIDES © MOSH Inc.
7. Angular@17.x → React Router@7.x MOSH創業時から続いてきたAngularアプリケーションをReactへ書き換えることに。 PRESENTATION SLIDES © MOSH Inc. 開発者への負荷 開発体験の悪化、コードの複雑化など。 変更容易性の低さ 機能変更による不具合の発生率が上昇。 プロダクト開発が思うように進まない状態になる。 Reactへの乗り換え AngularよりもReactの方が経験があるというメンバーが増えてきた。 コミュニティが活発で他ライブラリとの親和性も高い。
8. PRESENTATION SLIDES © MOSH Inc. 開発者への負荷 • 8年分のコードの中にある使ってないけど消してないコー ド、テストコードがない、etc… • 機能同士が複雑に絡まっていて入社後最初にぶち当たる 壁になっている • ビルド時間が長い、開発サーバーのメモリ消費量など開 発体験が著しく低下している
9. PRESENTATION SLIDES © MOSH Inc. 変更容易性が低い • 歴史の中で処理は複雑化してしまっていて、何かを変更 すると何かしら不具合が起きる • これを改善するためには相当なリソースを割く必要がある が、その改善すらも不具合を起こす
10. PRESENTATION SLIDES © MOSH Inc. Reactにすることの利点 • MOSHに来る前までReactを書いていたというメンバーが 複数名おり、移行すること自体に抵抗はない • 情報量やコミュニティの活発さ、ライブラリの充実度などが 魅力的である
11. 一度にまとめて移行するのは非現実的かつ疲弊するので少しずつ移行・リリースできる仕組みを整える。 また、自動化できる部分は積極的に自動化していく。 段階的な移行を進めるために PRESENTATION SLIDES © MOSH Inc. リバースプロキシで画面ごとに振り分ける mosh.jpへのリクエストをAngular / Reactのどちらに処理させるか判定。 認証処理の共通化 AWS Cognito, Amplifyを使って認証基盤を共通化。 API Clientの再利用 Orvalを採用し、クライアント以外にもzodやMSWのスキーマ生成も対応。
12. PRESENTATION SLIDES © MOSH Inc. リバースプロキシで 画面ごとに振り分ける • アプリケーションの前にnginxを置き、パス単位でどちらの アプリケーションにリクエストを通すか決定する (デフォル トはAngular) • Reactへの書き換えが完了したら向き先を変更、Angular の使わなくなったコードを削除という運用 AWS ECS S3 Cloudflare Pages /page/a /page/b
13. PRESENTATION SLIDES © MOSH Inc. 認証処理の共通化 • もともと利用していたAWS Cognitoを引き続き利用、ユー ザープールや認証を共通で利用可能 • パス単位でアプリケーションの振り分けをしているのでドメ インは一緒、認証も引き継がれユーザーは意識せずアプ リ間を行き来可能 • 今回のようなケースを想定して使っていたわけではないも のの、移行のハードルを大きく下げることが出来た AWS Cloudflare Cognito S3 Pages
14. PRESENTATION SLIDES © MOSH Inc. API Clientの再利用 • API Clientはすべてopenapi.ymlから生成する • 生成ツールはOrvalを利用、API Clientだけでなくzod schemaやMSWのモック生成などにも対応
15. AIとの開発の進め方 PRESENTATION SLIDES © MOSH Inc.
16. AI agentを活用するためのセットアップ ストレスなくAIに任せられる環境づくりをしていく。 AIだから特別これをしなければならない、というものは特に無い。 PRESENTATION SLIDES © MOSH Inc. オンボーディング KnowledgeやMemory Bankといった仕組みを活用して精度を上げる。 Issueの作成 Issueは細かく、目的はなるべく単純に。
17. PRESENTATION SLIDES © MOSH Inc. オンボーディング • 全てのタスクで守るべきルールや専門用語の説明などを まとめておく • 指示の仕方で成果物の品質が大きく変わってしまうことを 防ぎたい • もしドキュメントがなければここから更にドキュメントを作る ことも可能
18. PRESENTATION SLIDES © MOSH Inc. Issueの作成 • やること、制約や守ってほしいことを記載 • 複数のタスクをまとめてやろうとすると脱線しがちなので Issueを分割できるならする
19. Devin 複数リポジトリの参照、異なるライブラリへの書き換えを実現する。 PRESENTATION SLIDES © MOSH Inc. AngularからReactへ 正しさはテストで保証 PRで上がってきたものをチェックし、問題なければマージしていく。 元のコードにはテストがほぼないのでこのタイミングで整える。 テストが仕様である状態になることで実装者は迷わず開発ができる。
20. PRESENTATION SLIDES © MOSH Inc. AngularからReactへ • Reactの書き方については何も指示していないが、Hooks 使ったりReactぽいコードに書き換わっている • UI周りはだいぶ厳しい、修正指示を何回もすることになっ たため諦めた
21. PRESENTATION SLIDES © MOSH Inc. 正しさはテストで保証 • 仕様をIssueに書き実装前にテストを書いておく、それを満 たすように移行するなどの工夫が必要 • TDDライクに「通らないテスト」を書いて、それが通るよう にDevinにコードを書いてもらう • リファクタリングはPRのレビューコメントでやるか、PRごと 引き取って手元で修正する
22. MCP AIエディタにMCPサーバーを接続し、できることを増やす。 PRESENTATION SLIDES © MOSH Inc. Figma MCP 初回のデザインの反映コストを削減。 Playwright MCP E2Eシナリオの作成やスクリーンショットの自動化。
23. PRESENTATION SLIDES © MOSH Inc. Figma MCP • UIのスタイリングが可能になる • 新規UIの実装、shadcn/uiで生成したコンポーネントに Figma上のデザインを当てて利用するなど
24. PRESENTATION SLIDES © MOSH Inc. Playwright MCP • 自然言語で書かれている仕様や受け入れ条件などから E2Eテストのシナリオを生成 • Before / Afterの比較を視覚的に伝えるためのスクリーン ショット撮影
25. まとめ PRESENTATION SLIDES © MOSH Inc.
26. AI使えば開発速くなるは本当、だが 仕込みが重要なのでとりあえず使えば速くなるわけじゃない。 PRESENTATION SLIDES © MOSH Inc. 使いながら得意・不得意を理解していく 迷わないためのドキュメンテーション コードの移植やデザインを当てる作業ではなく、何が仕様で何が正しいをしっかりと定義すること に時間を割く。これからの開発で過去の失敗を繰り返さないようにする。 人間には出せないようなパフォーマンスも出せる一方で自分でやった方が良いなと感じる部分も ある。そういった癖みたいなものがあるという前提で向き合う。