LIFULL Creators Blog

「株式会社LIFULL(ライフル)」の社員によるブログです。

LIFULL HOME'S 引越し手続きを支えるNuxt.js

プロダクトエンジニアリング部の佐藤です。

今回はLIFULLの開発において実際に使われている技術スタックの一例としてLIFULL HOME’S 引越し手続きを紹介いたします。

LIFULL HOME'S 引越し手続きとは

住み替えの際、各事業者(電気・ガス・水道)の住所変更手続きを一括で申請できるサービスです。

f:id:LIFULL-satose:20210226092202p:plain

主なシステム構成はこちらです。

  • Nuxt.js
  • GAE(Google App Engine)
  • Firebase

今回はNuxt.jsについてどのように活用しているか見ていきます。

Nuxt.js

LIFULLでは新規でのフロントエンドの開発においてNuxt.js(Vue)での開発事例が増えてきています。 serverMiddlwareプロパティにおいて各APIのBFFとしてexpressを使うこともあります。

nuxtjs.org

serverMiddleware プロパティ - NuxtJS

TypeScript

TypeScriptを採用しています。yarn dev での開発時に素早くフィードバックを受けられて便利です。

www.typescriptlang.org

Vue 3以前のプロジェクトではクラススタイルでNuxt Property Decoratorを使い、TypeScriptでVueファイルやVuexを記述しています。

https://github.com/nuxt-community/nuxt-property-decorator

Context

Nuxt.jsのContextではこちらの図を参照することが多いです。

ja.nuxtjs.org

Contextからstoreやredirectなどの便利なメソッドやパラメータを利用できます。

コンテキスト - NuxtJS

Nuxt Community

Nuxt Communityのpackageを積極的に使い、エコシステムの恩恵を受けています。

github.com

主に以下の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での開発を進めています。

github.com

Composition APIのドキュメントを参照しながら、新しい記法にも慣れていきたいですね。

Composition API | Vue.js

まとめ

今回は実際にWebサービスを開発していて、どんな技術を意識しているのか見てきました。

LIFULLのWebエンジニアは日々技術のキャッチアップを行い、UXやDXの高いアプリケーションを開発することで、エンドユーザーや開発者などすべてのステークホルダーに取って良いWebアプリケーションの構築を進めています。

カジュアル面談もやっていますので、プロダクトエンジニアリング部のビジョンである「強い個人・最高のチームになることで、価値創造を加速させ続ける」や、LIFULLが目指している「あらゆるLIFEを、FULLに。」に興味がある方は是非お話しましょう!

hrmos.co