どうも エンジニアの「市場価値」を向上する をキーワードに活動している @サム です。今回は LIFULL HOME'S におけるLINEを活用した施策「LINEで新着物件通知を受け取る」を紹介したいと思います。
LIFULL HOME'S 引越し手続きを支えるNuxt.js
プロダクトエンジニアリング部の佐藤です。
今回は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に。」に興味がある方は是非お話しましょう！
短サイクルで何度も振り返りを - iOSアプリチームの輪読会
- 輪読会のテーマと題材
- なぜ輪読会か
- 学習効率を高める工夫
- 3つのパート
- 1枚プレゼンテーション
- 振り返り(気付きと疑問点)
- 簡単なクイズ
- まとめ
iOSアプリ開発チームの池田です。
iOSアプリチームでは週1回1時間という時間をとって定期的に輪読会を開催しています。こちらの輪読会の内容と、学びの効率を高めるために工夫していることについてご紹介できればと思います。
続きを読むエンジニア現場視点でのKPIを真剣に考えてみた
こんにちは。エンジニアの加藤です。 普段はLIFULL HOME'Sの注文住宅領域にてエンジニアグループのマネジメントを担当しております。
マネジメントに携わり3年目となりますが、エンジニア組織の成果を定量的に測る難しさを常に感じておりました。 そのような中、今期より全社的にKPIマネジメントが導入され、その考え方を元に自身の担当するエンジニアグループとして目指すべき指標が明確化されたため、今回はその内容を紹介したいと思います。
続きを読む「お仕事解体ワークショップ」でマネージャーの仕事を棚卸してみた
こんにちは。エンジニアの松尾です。
私がエンジニアチームのマネージャーになって1年が経過しました。日々の仕事に慣れてはきたのですが、徐々に部署内外で引き受けるタスクが増えてきたことで重要度が高いタスクの消化が難しくなってきていました。
そこで、LINE株式会社のブログで共有されていた下記の記事を参考に、ワークショップ形式で仕事の見える化と棚卸しに取り組みました。
引き継ぎのスムーズ化を図るため、LINE企画室が行った「お仕事解体ワークショップ」とは？
今回は「メンバーによる私の仕事の棚卸し」と「上司の仕事の棚卸し」の両方に取り組んでみたので、する側/される側の両面についてまとめてみたいと思います。
続きを読むプロジェクトに直接的に関わらないQAのアプローチ
QAグループの星野です。
昨年の2020年11月に公開された『LIFULLのQAの取り組みについて』にてQAグループの主だった活動について紹介されました。 本記事では、こちらで概要だけ紹介されている"リリース前リスク分析を起点としたQAのアクション"についてご紹介致します。 QAがプロジェクトメンバーとして参画していないプロジェクトを対象とした取り組みになります。 www.lifull.blog
また、今年2021年1月にはそれらの活動の中からテスト計画の作成を行う『テスト計画コンシェルジュ』について紹介がありました。 QAがプロジェクトに対して直接的にアプローチする取り組みについてはこちらの記事をご覧ください。 www.lifull.blog
続きを読む生産性・技術的負債をMetabaseで可視化した話
技術開発部の清水です。好きな食べ物は広島風お好み焼きと広島県産牡蠣と広島県産穴子です。
拡張に次ぐ拡張でサービスは便利なものに成長していく一方でソースコードは次第に複雑になっていきます。 そのまま放っておくと積み上げた技術的負債により開発コストが上がっていき、最悪の場合にはサービスの発展を停止させてしまう可能性もあります。 このような理由から、弊社では技術的負債を着実に返済していくべく生産性・技術的負債の可視化をMetabaseで行っています。 可視化する情報元はGithub API、CodeClimateQuality APIの2つのみです。
続きを読む