1
/
5

Vue on Laravelというモノリスを解体してNuxtへ移行しました!

こんにちは、株式会社SCOUTERの開発部の小平(@ryotakodaira )です。

以前Twitterにてこのようなツイートをして、Nuxt移行の記事を書くと宣言してしまっていたので、書く書く詐欺で終わらないように今回の開発の背景などを含めて記事にしてみました。

弊社では、SARDINEという法人向けの業務管理ツールを提供していますが、そのアプリケーションはLaravelがベースにあり、その中でVueを使う構成で運用されていました。

今回、そのようなLaravelに依存しているVueアプリケーションからフロントエンドのみを切り出す形でLaravel API+Nuxtアプリケーションに置き換えを行いました。

この記事では、なぜNuxtに移行したのかや、その時に少し躓いた点について記していこうと思います。

なぜフロントを切り出す選択をしたのか

今回リニューアルをしたアプリケーションはリリースから1年6ヶ月程が経過しており、当然のことながら同期間立て続けにシステムの追加開発/運用を続けてきました。

当初は立ち上げから間もないサービスということもあり、スピード重視での開発体制であったため、アプリケーション構成も最小構成のLaravel(bladeテンプレート)の中でVueを使う構成で開発を進めていました。

機能追加を繰り返しコードベースの量が増えたり開発に関わるメンバーが増えたことによって以下のような問題が顕在化してきました。

ページ読み込みにかかる時間が長いことによるユーザビリティの低下

  • 前述の通り、Laravel(bladeテンプレート)の中でVueを使う構成で作られていた
  • そのためクライアント側のルーティングをLaravel(PHP)が握っている構成でアプリケーション自体が構築されておりvue-routerなども使用していなかったため、ページ遷移のたびに「JS/CSSファイルのダウンロード→Vueインスタンスの初期化」が行われてしまっていた

採用要件を高めてしまっている

  • バックエンド、フロントのコードが完全に分離出来ていないため、LaravelとVueの両方に理解がないと1つの機能開発を行うことが出来ない状態になっていた
  • 仮に両方出来たとしてもバックエンド、フロントのそれぞれの責務範囲がはっきりしていなかったためキャッチアップにも時間がかかってしまう

開発効率の低下

  • はるか昔に導入した化石のようなパッケージ群の影響範囲が分からず毎回影響範囲を調査する必要があった
  • ESLintやPretterを入れていなかったためコードスタイルが無法地帯
  • モノリシックな構成になっているためバックエンド、フロントの両方を気にかけて開発を行わないとならない
  • コードが増えるにつれてjavascriptのビルドの時間が長くなり開発中の待ち時間が増加(laravel-mix)

ということでそれらを一気に解決するために、フロントを切り出す開発に踏み切りました。

移行時に気をつけたこと

VuexStoreの設計

  • NuxtのSPAモードで開発するので、今までとは違ってページ遷移するたびにStoreが初期化されない(元々はページ遷移でどうせ初期化されるからちゃんとやってなかったw)
    • ページ遷移してもStoreは引き継がれるため遷移先の挙動に影響を及ぼさないように調整
  • コンポーネント内にdataプロパティーとして状態を持っている場合、ページ遷移でコンポーネントが破棄されると当然dataプロパティーも破棄されるので同じページに戻ってきた時に再度リクエストが走り、無駄が生じてしまう可能性がある
    • Vuexをフル活用しグローバルに状態を持つように変更して該当ページに再流入してきた時はAPIにリクエストを送らずにVuexからデータを降ろしてくるように処理を修正する

移行時に躓いたこと

驚くべきことにNuxtへの移行に大きな問題には遭遇しませんでしたが、
唯一少し躓いたところがありましたので、その部分の説明をします。

this.$router.pushの仕様

this.$router.push('hoge', {
query: {
params: ['foo', 'bar']
}
})

Nuxtで上記のようにルーティングのプッシュを行うと、デフォルトでは http://example.com?params=foo&params=barのようなURLになります。

ただ、このクエリーパラメータのフォーマット形式だと弊社のサービスにとっては問題が有りました。

Nuxtのページコンポーネントで受け取った queryのオブジェクトが意図した形では無いという問題でした。

// http://example.com?params=foo&params=bar

query = {
params: ['foo', 'bar']
}

// http://example.com?params=foo

query = {
params: 'foo'
}

👆配列で欲しいが文字列になってしまう

要件としてはparamsが一つだったとしてもパースした結果は配列として受け取りたいので、nuxt.config.jsに以下のような記述を追加してvue-routerを拡張して解決しました。

query-stringというnpmパッケージを通すことによってクエリパラメーターのフォーマットを指定できるのでその方法を採用しました。

ちなみにquery-stringを通すとURLは http://example.com?params[]=foo&params[]=bar
のようになります。

module.exports = {
router: {
parseQuery(query) {
return require('query-string').parse(query, {
arrayFormat: 'bracket',
})
},
stringifyQuery(params) {
if (Object.keys(params).length === 0) {
return ''
}
const query = require('query-string').stringify(params, {
arrayFormat: 'bracket',
})
return `?${query}`
},
},
}

まとめ

VueをNuxtへの移行は今回が初めてでしたが、移行中は大きな問題は特に発生せずNuxtはまさにかゆいところに手が届くという言葉がふさわしいなと実感しました。

弊社と同じような課題を抱えている開発チームにはぜひ取り組んでみて欲しいと思います!

今回のNuxtへの移行にはエンジニアメンバー4人で3週間かかりましたが、顕在化していた問題は無事解決されたため、リターンとしては十分で合ったと思います。

ただ、Nuxtへ移行する前のLaravel(bladeテンプレート)の中でVueを使う構成のアプリケーションが他にも存在しているためタイミングを見てそちらもNuxtに移行していきます。

次は2回目なのでもっと早く終わると信じて。

さいごに

SCOUTER社の開発チームの取り組みを紹介させていただきました!
サービスが成長していくにあたって、これからもメンバーを増やしていきたいと思っています。

興味のある方は下記から応募下さい!


フロントエンドエンジニア
最新技術で成長業界の波に乗りたいVue.jsフロントエンドエンジニア募集!
ROXXは「時代の転換点を創る」をビジョンに、2013年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHR Techサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp ) 書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、オンライン完結型リファレンスチェックサービスです。back checkでは、採用予定の職種やポジションに合わせて数十問の質問を自動生成し、オンライン上で簡単にリファレンスチェックを実施できるだけでなく、低単価(※1)での実施が可能であることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業に導入いただいています。2019年10月、正式リリース。2021年7月、累計リファレンスチェック実施人数1万人を突破。オンラインリファレンスサービスを利用した年間リファレンス実施人数No.1獲得(※2)。 ※1…従来のリファレンスチェックサービスと比べて1/10程度の価格。 ※2…商工リサーチ調べ(期間:2020年4月~2021年3月​) ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』(https://agent-bank.com/) 転職決定人数 No.1、掲載求人数 No.1、推薦人数 No.1(※1)のクラウド求人データベースです。「人材紹介会社」は、月額利用料のみで、サービス上に掲載されている約15,000件(※2)の求人に対して、自社で抱える転職希望者を掲載企業に紹介することが可能です。「求人企業」は、完全成功報酬型で募集求人を何件でも無料で掲載。『agent bank』導入中の人材紹介会社から、掲載求人に対して紹介が集まります。また、最大の特徴として、成功報酬を求人ごとに自由に設定いただけるため、従来の人材紹介よりも圧倒的に低コストで採用することが可能です。大手企業からベンチャー/スタートアップ企業まで、幅広い年収・業界・業種の求人が掲載されていることから、転職希望者に紹介できる案件を最大化できるだけでなく、過去の選考結果や業務内容に関する詳細情報が全て蓄積されており、効率だけでなく、紹介の質を大幅に向上することが可能です。 ※1…転職決定者数・推薦人数…東京商工リサーチ調べ(調査期間:2021年1月~12月) ※2…掲載求人数…調査対象に『agent bank + パーソルキャリア』掲載の求人数を含む。東京商工リサーチ調べ(調査期間:2022年4月11日〜15日)
株式会社ROXX
サーバーサイドエンジニア
Laravelでマーケット成長の波に乗りたいエンジニアを募集!
ROXXは「時代の転換点を創る」をビジョンに、2013年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHR Techサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp ) 書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、オンライン完結型リファレンスチェックサービスです。back checkでは、採用予定の職種やポジションに合わせて数十問の質問を自動生成し、オンライン上で簡単にリファレンスチェックを実施できるだけでなく、低単価(※1)での実施が可能であることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業に導入いただいています。2019年10月、正式リリース。2021年7月、累計リファレンスチェック実施人数1万人を突破。オンラインリファレンスサービスを利用した年間リファレンス実施人数No.1獲得(※2)。 ※1…従来のリファレンスチェックサービスと比べて1/10程度の価格。 ※2…商工リサーチ調べ(期間:2020年4月~2021年3月​) ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』(https://agent-bank.com/) 転職決定人数 No.1、掲載求人数 No.1、推薦人数 No.1(※1)のクラウド求人データベースです。「人材紹介会社」は、月額利用料のみで、サービス上に掲載されている約15,000件(※2)の求人に対して、自社で抱える転職希望者を掲載企業に紹介することが可能です。「求人企業」は、完全成功報酬型で募集求人を何件でも無料で掲載。『agent bank』導入中の人材紹介会社から、掲載求人に対して紹介が集まります。また、最大の特徴として、成功報酬を求人ごとに自由に設定いただけるため、従来の人材紹介よりも圧倒的に低コストで採用することが可能です。大手企業からベンチャー/スタートアップ企業まで、幅広い年収・業界・業種の求人が掲載されていることから、転職希望者に紹介できる案件を最大化できるだけでなく、過去の選考結果や業務内容に関する詳細情報が全て蓄積されており、効率だけでなく、紹介の質を大幅に向上することが可能です。 ※1…転職決定者数・推薦人数…東京商工リサーチ調べ(調査期間:2021年1月~12月) ※2…掲載求人数…調査対象に『agent bank + パーソルキャリア』掲載の求人数を含む。東京商工リサーチ調べ(調査期間:2022年4月11日〜15日)
株式会社ROXX
UI/UXデザイナー
ユーザーの行動設計を変えていく!話題のSaaSデザイナー募集!
ROXXは「時代の転換点を創る」をビジョンに、2013年に設立。この先何十年も使い続けられるような社会的意義のあるサービスを目指し、現在はHR Techサービスを展開しています。 ■月額制リファレンスチェックサービス『back check』( https://backcheck.jp ) 書類選考や面接だけでは分からない採用候補者の経歴や実績に関する情報を、候補者の上司や同僚といった一緒に働いた経験のある第三者から取得することができる、オンライン完結型リファレンスチェックサービスです。back checkでは、採用予定の職種やポジションに合わせて数十問の質問を自動生成し、オンライン上で簡単にリファレンスチェックを実施できるだけでなく、低単価(※1)での実施が可能であることから、スタートアップから大手企業まで、採用人数やポジションに関わらず、幅広い企業に導入いただいています。2019年10月、正式リリース。2021年7月、累計リファレンスチェック実施人数1万人を突破。オンラインリファレンスサービスを利用した年間リファレンス実施人数No.1獲得(※2)。 ※1…従来のリファレンスチェックサービスと比べて1/10程度の価格。 ※2…商工リサーチ調べ(期間:2020年4月~2021年3月​) ■ 採用企業と人材紹介会社を繋ぐ、求人プラットフォーム『agent bank』(https://agent-bank.com/) 転職決定人数 No.1、掲載求人数 No.1、推薦人数 No.1(※1)のクラウド求人データベースです。「人材紹介会社」は、月額利用料のみで、サービス上に掲載されている約15,000件(※2)の求人に対して、自社で抱える転職希望者を掲載企業に紹介することが可能です。「求人企業」は、完全成功報酬型で募集求人を何件でも無料で掲載。『agent bank』導入中の人材紹介会社から、掲載求人に対して紹介が集まります。また、最大の特徴として、成功報酬を求人ごとに自由に設定いただけるため、従来の人材紹介よりも圧倒的に低コストで採用することが可能です。大手企業からベンチャー/スタートアップ企業まで、幅広い年収・業界・業種の求人が掲載されていることから、転職希望者に紹介できる案件を最大化できるだけでなく、過去の選考結果や業務内容に関する詳細情報が全て蓄積されており、効率だけでなく、紹介の質を大幅に向上することが可能です。 ※1…転職決定者数・推薦人数…東京商工リサーチ調べ(調査期間:2021年1月~12月) ※2…掲載求人数…調査対象に『agent bank + パーソルキャリア』掲載の求人数を含む。東京商工リサーチ調べ(調査期間:2022年4月11日〜15日)
株式会社ROXX
株式会社ROXXでは一緒に働く仲間を募集しています
2 いいね!
2 いいね!
同じタグの記事
今週のランキング
株式会社ROXXからお誘い
この話題に共感したら、メンバーと話してみませんか?