第6弾です。

Nuxt.js化計画の概要についてはvol.1を参照ください。
また、過去のシリーズも通してリンクしているのでぜひ御覧ください。

今回はリプレースではなく、新規機能に伴う新しいページをNuxt.jsで構築しました。
かんたんM&A診断という機能です。

7つの設問に答えることで売却したい会社・事業に対してマッチする買い手企業をレコメンドするという機能です。

今回はNuxt.js側では初の試みとしてABテストを行っています。
ABテストについては次の記事で紹介しています。

かんたんM&A診断のLPでデザインを異なるパターンでABテストを行います。
ちなみにこのLPはジョインして日の浅い塚原さんがコーディング・実装してくれました。即戦力！

設問は以前売却・調達情報の案件登録ページでも実装したようにSPAとしてクライアント側でスムーズに遷移します。

設問2で表示されているキーワード登録ではサジェスト機能が働いてるのがわかるかと思います。
データベースに登録されているキーワードから検索してGoogle検索窓のようにサジェストでキーワード候補を表示します。

サジェストの機能はvue-simple-suggestを利用しています。
シンプルの名の通り必要な機能（API）が一通り揃っていて使いやすく、ポリフィルも用意されているのでIE11+でも動作します。
弊社プラットフォームの利用者の性質上、まだまだIEは切り離せないのでありがたいです。

設問を完了すると結果ページが表示されます。
このページはSNSシェアされることを想定していますので、それぞれ結果に応じてOGPで利用される画像が異なります。

Nuxt.jsはユニバーサルモードで運用しているのでこのように動的なSSRが必要な機能も作れるので強力です。

最後に

M&A クラウドではエンジニアを絶賛募集中ですので、興味がありましたら是非以下からご応募ください！
Nuxt.jsで開発したい方は是非どうぞ