RevComm Tech Blog

コミュニケーションを再発明し 人が人を想う社会を創る

フロントエンド

openapi-typescriptとRedocly CLIを活用してOpenAPIドキュメントと型定義の同期を効率化する

はじめに こんにちは!RevCommでフロントエンドエンジニアをしている田中です。 最近、MiiTel Phone Webというプロダクトにopenapi-typescriptとRedoclyというツールを使用してOpenAPIドキュメントからTypeScriptの型定義の管理を効率化する仕組みを導入しま…

Playwrightを活用した本番稼働を支えるE2Eテスト実践のコツ

はじめに RevCommのフロントエンドエンジニアの上川康太です。MiiTel Call Centerというプロダクトの開発を担当しています。 私たちは2023年の6月にMiiTel Call Centerを正式リリースしてから、スピード感を持って新機能の開発を進めてきました。 開発スピー…

Vue3へのアップデートにvue-facing-decoratorを利用した話

はじめに RevComm, Front-end team の熊谷です。今回は vue-facing-decorator を使って Vue2/Nuxt2 のクラスコンポーネントを Vue3/Nuxt3 に移行した話をします。 各コンポーネントでは既存のソースコードを活かせるところも多かったですが、個別に書き換え…

React-Virtualを活用したフロントエンドパフォーマンスチューニングの話

こんにちは! RevCommのフロントエンドエンジニアの楽桑です。 フロントエンドパフォーマンスチューニングを経験した方ならご存じのとおり、レンダリング効率は常に重要です。データをスピーディかつ効率的に画面に表示することは、フロントエンド最適化の核…

GraphQLならライブラリがキャッシュを正規化して扱える

この記事は RevComm Advent Calendar 2023 18 日目の記事です。 はじめに フロントエンドでの正規化のメリット GraphQL クライアントでの正規化 RESTful API での正規化 おわりに 参考 はじめに 2023 年 12 月現在、フロントエンド GraphQL クライアントの多…

Day.jsのタイムゾーンを扱う関数 tz のドキュメントにない注意点を整理

こんにちは! RevComm のフロントエンドエンジニアの小山功二です。 私が RevComm に入社する前に担当した開発案件は、どれも国内のユーザーにしか使われていないものばかりでした。一方で、RevComm の提供する MiiTel は、日本はもちろんインドネシアやアメ…

TypeScript で Chrome 拡張機能を開発する

この記事は、RevComm Advent Calender 16 日目の記事です。 フロントエンドチームに所属する関口です。フロントエンドエンジニアとして活動するかたわら、MiiTel の一部の製品のプロジェクトマネージャーを兼任しています。 なぜこのタイミングで Chrome 拡…

Apollo Client の ApolloLink で Recoil のフックを使う

RevComm Advent Calender 10日目の記事です。フロントエンドチーム所属の小山です。今回は ApolloLink で Recoil のフックを使った際に起きたエラーについて、「ペア設計」を通して解決した話を紹介します。

より綺麗な CSS を書くためには

チーム開発などにおいて運用しやすくなる、エンジニアのための「より綺麗なCSSの書き方」を紹介します。

祈らないライブラリアップデート(フロントエンド編)

はじめに:アップデートできていますか? 作ったきりで一度もライブラリをアップデートしていない、そんなプロダクトも多いのではないでしょうか。新規ライブラリの利用が古いライブラリへの依存により実現しないことなど、損失が発生するケースは多々ありま…

【Recoil】RecoilRoot をネストした状態管理

こんにちは! RevComm に2022年1月に入社したフロントエンドエンジニアの小山 (koji-koji) です。 RevComm では、 React を採用しているサービスの状態管理に Recoil を使っています。今回は Recoil の理解をより深めるために Context と比較してみました。