こんにちは、M&Aクラウドの久保田です。 現在弊社ではPHPのフレームワークであるLaravelで作られたWebサイトをJavaScriptフレームワークのNuxt.jsへのリプレースを実施中です。 全てのページをNuxt.jsに置き換えるかどうかは現時点では未定ですが、多くのページで置き換えが行われる想定です。
移行経緯
まずは移行経緯についてお話したいと思います。 弊社のサービスでは3つの種類のユーザーがいます。
- 会社や事業を買ってもらいたい、もしくは資金調達したいユーザー
- 会社や事業を買いたい、もしくは出資したいユーザー
- 弊社の管理者ユーザー
これらのユーザーが一つのアプリケーションを利用している状態です。 現在の利用を考慮すると一つのアプリケーションのままでも問題有りませんが、将来的により多くの要望を答えるためにはアプリケーションの肥大化は避けられません。 おそらくはマイクロサービスアーキテクチャなどを導入して利用者（アクター）毎に独立したアプリケーションを作成することが望まれるかもしれません。 また、UIと機能も密接に関わりすぎるとロジックが複雑化するなどが考えられます。
そして、よりリッチなユーザー体験を行えるようにするためにはSPAなどの導入も必要になってきます。 今回弊社ではその第一歩としてUIと機能の分離を行うために画面の生成処理をNuxt.jsで行い、ロジックはLaravelのHTTP APIで行うようにリニューアル・リプレースを進めています。
現在ではトップページと資料請求ページがNuxt.js化が完了しています。
開発技術
今回のリプレースでは以下の技術を利用しています。
- TypeScript
- Nuxt.js
- Vue Composition API
- Vuex
型安全の恩恵を受けるためTypeScriptによる開発を行っています。 また、Vue.js version3で導入されるComposition APIはTypeScriptによる型システムとの親和性が良いことから先行で導入しています。 これに関してはRoppongi.vue #5にてお話させていただきましたのでそちらを御覧ください。
弊社津崎・久保田がYoutube配信のオンライン勉強会で登壇しました。 - M&Aクラウド開発者ブログ
今後について
リプレース完了したページに関しては本ブログで紹介するようシリーズ化したいと思います。 また、別稿ではサーバーアーキテクチャやHTTP APIの設計などについても紹介できればと思います。
