開発部の横溝です。
昨年、弊社ANDPADの機能「施工管理」をNuxt化するプロジェクトが始動し、停止しました。
「停止」というと残念な感じがするので、充電期間に入ったと言い直しておきます。
「Nuxt化するプロジェクト」とは？
2020年3月~2020年11月に実施した、レガシーコードをリプレイスするプロジェクトです。
前述の「施工管理」は、社内でも特に昔からある機能なのですが、フロントエンドに、主にRuby on Rails（slimテンプレート）+ AngularJSを利用しています。それを、Amplify上のNuxt.js（SPA）アプリケーションから、RailsのAPIにリクエストする形に移行しようとしました。
（似たような話は、あちこちで耳にしますよね）
背景
現状に問題があったため実施したわけですが、
プロジェクトを始めるに至った問題を一言で言えば、これです。
- 改善・機能追加をしていくにあたり、スピード感を持って取り組めない
その原因は、チームのメンバー構成と技術的な構成とがマッチしなかったことですが、その中身は以下です。
- バックエンドとフロントエンドの分業がしにくい
- 社内に、AngularJSに対応できるエンジニアが少ない
当初は、逆にRails+AngularJSの構成によって、少数のメンバーでスピード感を持った開発ができたのだと思います。しかし、組織・プロダクト両方の規模拡大に伴い、少しずつ状況が変わってきました。
例えば、開発の規模が大きくなってきた場合に、バックエンドはWebAPI開発、フロントエンドはUI開発に集中できる体制にして生産性を上げようとすることは一般的かと思います。今のANDPADでも、そうした区分けでの分業を行っているチームが主です。
しかし、Railsのslimテンプレート上に、データや処理を埋め込んでいく構成では、バックエンドとフロントエンドが分離されておらず、チームの体制と合わなくなっていました。
また、ここ数年、ANDPADの新機能では、Vue.js（Nuxt.js）を利用する例が多いため、AngularJSについて、社内ではマイナー、かつ、対応できるエンジニアが少ない状況ができてしまっていました。
このままでは困るので、開発（分業）のしやすさ・チーム内のエンジニアの対応のしやすさを考え、Nuxt.jsを利用した構成へ移行することにしました。
改めて、この記事について
この記事では、「施工管理をNuxt化するプロジェクト」がどのように始動し、停止したか、そして、何を得られたかを文章化し、共有することを目的とします。
Nuxt化が始動して、停止した話
まず、エンジニアがそれを「やりたかった」
2020年3月、Nuxt化プロジェクトが始動しました。
そもそも、Nuxt化したい、という話は以前からあったようです。
背景は前述の通りで、特にエンジニアに強いモチベーションがありました。
そこに、すぐに着手できる開発案件がない、という状況が重なりました。数ヶ月かかる規模の開発予定がいくつかありつつも、どれも「要件定義中」「仕様検討中」でした。
もちろん、細かな不具合修正などは常にチケットが山積みです。しかし、それらへの対応も「Rails + AngularJS」のまま行うのではなく、「Nuxt化」してから修正した方が良いと判断しました。
と言っても、始動の決め手は、細かなpros・consの比較ではなく、エンジニアの「やりたいという気持ち」でした。
Nuxt化のはじまり
以下のメンバー構成で、Nuxt化がスタートしました。
- フロントエンド: 3名
- バックエンド: 2名
直後、4~5月にはバックエンドが2名増え、「2名 → 4名」になりました。
そして、2020年5月、最初のNuxt化ページをリリースしました。
初めにNuxt化したページは、トップページでした。このページを選んだ理由は、一番簡単だったからです。種々の情報を表示し、リンクを設置するのみでよく、他ページに比べ、細かな仕様・ユーザーアクションへの考慮が少なく済むと判断しました。
その後、いくつかのページの機能追加・不具合修正をする際に、Nuxt化と並行での改修を行った上で、2020年8月、「施工管理」の主要なページのNuxt化に取り掛かっていきました。
停止
そんな中、2020年10月中旬、「施工管理」に機能追加をするための、新プロジェクトが立ち上がりました。
その新プロジェクトには、そのときのNuxt化の主要メンバーが取り組むことになりました。他にも、兼任していた別プロジェクトに専念することになったメンバーもいたりと、結果として、Nuxt化のチームからエンジニアがいなくなりました。
そして、2020年11月、取り掛かっていた「施工管理」の主要なページのNuxt化で、最初のページをリリースした後、プロジェクトが停止しました。
参考：ここまでの道のり
| 時期 | できごと |
|---|---|
| 3月下旬 | Nuxt化に着手 |
| 5月 | 最初のページをリリース |
| （中略） | （いくつかのページをリリース） |
| 11月 | 主要なページ + 新規ページをリリース |
| 11月下旬 | プロジェクト中断 |
開発の優先順位、開発リソース（人員配置）を考えた結果、プロジェクトとしては一時中断となりましたが、得られたものも多くありました。それらについて、この後の文章で紹介します。
いま、Nuxt化のリポジトリはどうなっているか
現在、Nuxt化のリポジトリは、2020年11月からの新プロジェクトや、他プロジェクトで追加されたページの改修で使われています。
既存ページをNuxt化するプロジェクトは一時停止しましたが、今後は「施工管理」にページ追加をする場合、迷いなく、このNuxt.jsのリポジトリを使うことができます。Nuxt化プロジェクトによって、「施工管理」にページ追加・機能追加をする下地を整えることができました。
プロジェクトの恩恵
ちなみに、このプロジェクトで得られたものは、上記の環境だけではありませんでした。
また別の機会に、詳しく紹介できればと思いますが、以下に列挙します。
Nuxt化した箇所について
- 🎉 快適なフロントエンド開発環境
- 🎉 TypeScriptによる静的型付け
- 🎉 フロントエンドのテストコード作成
- 🎉 ビジュアルリグレッションテストの導入
フロントエンドのNuxt.js側について
- 🎉 当時、数時間かかっていたリリース作業が10分に
- 🎉 当時、2週間に1度だったリリース頻度が、週に2度に
※ 現在は、Rails（+AngularJS）側も、1週間に1度のリリース頻度
残された課題
部分的に恩恵はありつつ、もちろん、課題も多く残っています。以下がその例ですが、なんとか解消に向けて動きたいと考えています。
- ✖︎ Rails+AngularJS のページがまだ残っている
- ✖︎ グローバルヘッダーのようなページ共通UIの二重管理
- ✖︎ リポジトリごとのリリースタイミングがずれる場合への考慮
- ✖︎ 1つの機能をいじるだけでも、複数リポジトリの作業が必要な場面がある
さいごに
アンドパッドでは、一緒に建設業界の課題解決に取り組んでくれる仲間を探しています！
engineer.andpad.co.jp
エンジニアのやりたい気持ちから、色々なことに挑戦できる環境です。
少しでも興味をお持ちの方は、ぜひ気軽にご応募ください！
※ ちなみに、ANDPADの他の多くの機能開発では、フロントエンドにVue.js / Nuxt.jsを利用しています。
追記(2021.03.12)
タイトルと内容が合っていないというコメントを何件かいただいたのでタイトルを「Rails+AngularJS の Nuxt.js化が、始動して、停止した話」から「AngularJSからVueへの置き換えを8ヶ月やってみて得られたこと」に訂正させていただきました。
記事中でもありましたが、施工管理のNuxt化自体はすべて停止した訳ではなく、プロジェクトとしては解体されましたが、現在も随時進行しております。またプロジェクトで得られた知見は最後の「いま、Nuxt化のリポジトリはどうなっているか」でも記載されている通り、新プロジェクトなどで活かされています。
