Vue・React マルチプロダクト開発を支える Vite

小泉 佑太郎 Zenn: ykoizumi0903
2025 年 8 月 25 日

〜フロントエンドカンファレンス東京 x Vue Fes Japan コラボイベント

ANDPAD のフロントエンドでは、 Vue と React をプロダクトごとに選択して開発を行っています。 チームで Vue と React 両方の開発を担当している中で、 Vite の導入によって開発を効率化した事例を紹介します。

Transcript

1. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 Vue・React マルチプロダクト開発を支える Vite 株式会社 アンドパッド 開発本部 Tech Lead 小泉佑太郎 2025.08.25 #vuefes_fec_tokyo
2. © 2024 ANDPAD All Rights Reserved. Confidential Yutaro Koizumi (@ykoizumi0903) • 2019年 アンドパッドに入社 • ERP（引合粗利管理）フロントエンドチーム テックリード • Vue Fes Japan 2024 で LT 登壇（Nuxt × Vue Router の 力を最大限に引き出す機能を紹介 - Speaker Deck） Zenn や ANDPAD TECH BLOG で記事を書いています • 祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力 • UnJS にどんなツールがあるのか、上位30件すべて紹介してみた • 新規プロダクトの開発に Nuxt 3 を採用して良かったこと • GitHub Copilot Agent の力を借りて Next.js から React Router に移行しました 自己紹介
3. © 2024 ANDPAD All Rights Reserved. Confidential ANDPAD とは スマホで撮影した写真、 チャットで共有された 資料や各現場の図面 ANDPADは現場の効率化から経営改善まで一元管理できる クラウド型建設プロジェクト管理サービスです ※ データ 入力 データ 活用 データを活用して、 ・資料作成 ・検査報告書作成 ・帳票作成 ・データ資産... 検査 受発注 引合粗利 図面 チャット 工程表 報告 写真 クラウド上で最新の情報を共有 ※『建設業マネジメントクラウドサービス市場の動向とベンダシェア（ミックITリポート 2024年12月号）』（デロイト トーマツ ミック経済研究所調べ）
4. © 2024 ANDPAD All Rights Reserved. Confidential のプロダクト おうちノート アプリ マーケット 入退場管理 早受取 検査 引合粗利管理 施工管理 ボード 請求管理 黒板 資料承認 (設定) 受発注 チャット … 一部コンポーネントで Svelte を利用 図面 資料承認 BIM ※ここに載っていないものや、未発表のプロダクトもあります Tsukuri (社内デザインシステム) ANDPAD のフロントエンド 施工管理 引合粗利管理 （一部のページ） and more...
5. © 2024 ANDPAD All Rights Reserved. Confidential なぜ Vue と React のプロダクトが存在するのか？ • アンドパッドの方針としては、チームごとに自由な技術選定をしてもらいたい ◦ メンバーが得意な技術を採用して、どんどん開発してもらうのが一番良い ◦ Vue と React であればどちらも将来性・持続性の不安はない ◦ メンバー単位では Vue / React のどちらかしか担当しないことがほとんど • 社内に両方のチームが混在するメリットもある ◦ それぞれに詳しい人が社内にいるので、会社内で情報交換ができる ◦ 採用面で、どちらの技術を持った方でも経験を活かしてもらえる ◦ メンバーのチャレンジ機会の確保
6. © 2024 ANDPAD All Rights Reserved. Confidential 自分が現在担当しているプロダクト （※React Router に全面移行中） 引合粗利管理 資料承認 (設定) 資料承認 未発表 プロダクト
7. © 2024 ANDPAD All Rights Reserved. Confidential Vue と React の両方を担当している経緯 • 個人的には、技術的な制約が特になければ Vue を選択しています ◦ 詳しくは以下の記事で語っています Vue Fes Japan 2024 開催直前！ ykoizumi0903 が語る Vue 推しの理由 | ANDPAD_Engineers • 特別な事情があって React も使うことになった ◦ 資料承認（Next.js プロジェクト）は他のメンバーが担当していたが、 チーム異動などの関係で引き継いで担当することになった ◦ 未発表プロダクト（React Router）を新しく立ち上げる際に、 React でしか提供されていない UI コンポーネントを使う必要があった ※両方使っているメンバーは社内でも少ないです
8. © 2024 ANDPAD All Rights Reserved. Confidential Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 Vue と React 同時開発で 何が大変なのか
9. © 2024 ANDPAD All Rights Reserved. Confidential 前提：同時開発していて困ることはそんなに多くない • Vue と React の「どちらかでしかできないこと」はほとんどない ◦ React Hooks と Vue Composition API は、 内部の仕組みはともかく書き方は非常に似ている ◦ 自分は Vue に慣れているので、書いていて「React に最適化しきれていない…」と 思うことはあるが、書けないことはない • 最近は生成 AI で React ⇔ Vue コードの変換も高精度に行えるようになってきたので、 ますます差分を吸収しやすくなった
10. © 2024 ANDPAD All Rights Reserved. Confidential 困るのはライブラリ固有の知識が求められる場面 • 技術的なトラブルや、ライブラリに特有のテクニック ◦ VSCode や Lint・テストツールの設定 ◦ Tailwind、SCSS、Sentry、Analytics … などのライブラリの導入 ◦ 環境変数の設定・アクセス方法 ◦ CJS/ESM どちらかでしか動かない場合の回避 • バージョンアップ時の悩み ◦ Nuxt、Next、それぞれの新機能や非推奨になった機能の把握 ◦ 関連ライブラリの追従状況や、乗り換えの必要性の有無 ◦ アップデート時に起こるマイナーなトラブル これらの問題に遭遇すると、Vue と React で解決法が全く異なるので、時間がかかりやすい
11. © 2024 ANDPAD All Rights Reserved. Confidential 困るのはライブラリ固有の知識が求められる場面 • 技術的なトラブルや、ライブラリに特有のテクニック ◦ VSCode や Lint・テストツールの推奨設定 ◦ Tailwind、SCSS、Sentry、Analytics … などのライブラリの導入 ◦ 環境変数の設定・アクセス方法 ◦ CJS/ESM どちらかでしか動かない場合の回避 • バージョンアップ時の悩み ◦ Nuxt、Next、それぞれの新機能や非推奨になった機能の把握 ◦ 関連ライブラリの追従状況や、乗り換えの必要性の有無 ◦ アップデート時に起こるマイナーなトラブル これらの問題に遭遇すると、Vue と React で解決法が全く異なるので、時間がかかりやすい 苦労しているのは Vue と React の違いではなく、 Vite と Webpack の違いでは？
12. © 2024 ANDPAD All Rights Reserved. Confidential React プロジェクトを React Router に統一 • 2024年に立ち上げた React プロジェクトでは、当時話題になっていた Remix (SPA) を選択 • ここで Vite を使えるメリットが大きかったことから、資料承認でも Next.js から React Router への移行を決断 → 自分が関わっている React・Vue の全プロジェクトで Vite を採用！ ※社内では Next.js を使っているチームもたくさんあります
13. © 2024 ANDPAD All Rights Reserved. Confidential Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. Proprietary & Confidential 無断転載・無断複製の禁止 共通基盤として Vite を採用することで得られるメリット
14. © 2024 ANDPAD All Rights Reserved. Confidential 事例1：プラグイン・ツール導入 • プラグインシステムを共通化できる ◦ 例えば @tailwindcss/vite を使うことで、Nuxt でも React Router でも同じ設定で Tailwind を導入することができる • Vitest を採用する際に、テストツールの設定を別で行う必要がなくなる → 同じ方法でツールを導入できるので、設定方法を別々に覚えなくて良い
15. © 2024 ANDPAD All Rights Reserved. Confidential 事例2：環境変数設定 • 環境変数に import.meta.env でアクセスできる • envPrefix を変更することで、クライアント側で公開される変数の命名ルールを変更できる • クライアントからアクセスできる環境変数の型補完を効かせられる ◦ https://ja.vite.dev/guide/env-and-mode.html#typescript-用の自動補完 ◦ .envファイルから型定義を自動生成するスクリプトを自作し、 各プロジェクトで使い回している → これらの Vite の仕様が共通なので、Nuxt でも React Router でも迷わず使える
16. © 2024 ANDPAD All Rights Reserved. Confidential 事例3：ビルド設定 • CJS で提供されているライブラリの UI コンポーネントをどうしても使う必要があったが、 Next.js で上手く扱う方法がわからなかった • Vite であれば optimizeDeps や noExternal を使えば良いという知識があったので、 大きく時間をかけることなく問題を解決できた → ビルド時に問題が起きるのはどのフレームワークでもたまにあるが、 　 Vite に詳しくなれば Nuxt も React Router も同じ知識で解決できるメリットに気づいた
17. © 2024 ANDPAD All Rights Reserved. Confidential まとめ • Vite を採用することで、Vue ⇔ React の開発環境の差異を最小限に抑えながら、 技術選定の選択肢も広く確保できる　というメリットがある • Vue と React で同時開発するなら Vite はかなり良い選択肢 • ANDPAD では今後も Vue も React も使っていくので、 どちらに強いエンジニアも、両方使ってみたいエンジニアも Welcome です！
18. Copyright © 2020 Present ANDPAD Inc. This information is confidential and was prepared by ANDPAD Inc. for the use of our client. It is not to be relied on by and 3rd party. 無断転載・無断複製の禁止 Confidential 幸せを築く人を、幸せに。 住まいをつくる。ビルや施設をつくる。街をつくる。 生活を豊かにする建築・建設業は、幸せづくりと例えられます。 私たちは、その幸せづくりをする人たちをテクノロジーの力で 後押ししていきたい。心からそう考えてます。 我々はこれからもお客様の声をサービスに反映して、 建設業界及び建設業従事者様の業務効率化、 DX化を支援してまいります。 Mission We are hiring !! カジュアル面談 応募フォーム 開発部公式 X アカウント @andpad_dev エンジニア採用ページ