プロダクトエンジニアリング部の佐藤です。
今回はLIFULLの開発において実際に使われている技術スタックの一例としてLIFULL HOME’S 引越し手続きを紹介いたします。
LIFULL HOME'S 引越し手続きとは
住み替えの際、各事業者(電気・ガス・水道)の住所変更手続きを一括で申請できるサービスです。
主なシステム構成はこちらです。
- Nuxt.js
- GAE(Google App Engine)
- Firebase
今回はNuxt.jsについてどのように活用しているか見ていきます。
Nuxt.js
LIFULLでは新規でのフロントエンドの開発においてNuxt.js(Vue)での開発事例が増えてきています。 serverMiddlwareプロパティにおいて各APIのBFFとしてexpressを使うこともあります。
serverMiddleware プロパティ - NuxtJS
TypeScript
TypeScriptを採用しています。yarn dev
での開発時に素早くフィードバックを受けられて便利です。
Vue 3以前のプロジェクトではクラススタイルでNuxt Property Decoratorを使い、TypeScriptでVueファイルやVuexを記述しています。
https://github.com/nuxt-community/nuxt-property-decorator
Context
Nuxt.jsのContextではこちらの図を参照することが多いです。
Contextからstoreやredirectなどの便利なメソッドやパラメータを利用できます。
Nuxt Community
Nuxt Communityのpackageを積極的に使い、エコシステムの恩恵を受けています。
主に以下のpackageを採用しています。GTMやサイトマップなどの車輪の再発明をなくし、機能の作り込みに集中できると実感しています。
最新のNuxt.jsを使い始めれば、@nuxt/componentsや@nuxtjs/dotenvなども取り込まれており、Nuxt.jsのDX(Developer Experience)が良くなり続けていることを実感できます。
認証
認証周りでは以下のようなnpm packageを活用しています。
関連してOAuth 2.0やOpenID Connectについて知る機会もあります。
Cookieの管理ではSameSite属性を意識しています。
Nuxt 3に向けて
これからの開発では @nuxtjs/composition-apiを使用してvue 3のcomposition-apiでの開発を進めています。
Composition APIのドキュメントを参照しながら、新しい記法にも慣れていきたいですね。
まとめ
今回は実際にWebサービスを開発していて、どんな技術を意識しているのか見てきました。
LIFULLのWebエンジニアは日々技術のキャッチアップを行い、UXやDXの高いアプリケーションを開発することで、エンドユーザーや開発者などすべてのステークホルダーに取って良いWebアプリケーションの構築を進めています。
カジュアル面談もやっていますので、プロダクトエンジニアリング部のビジョンである「強い個人・最高のチームになることで、価値創造を加速させ続ける」や、LIFULLが目指している「あらゆるLIFEを、FULLに。」に興味がある方は是非お話しましょう!