フロントエンド
はじめに 基本知識・用語の確認 1. なぜ移行をしたのか 1.1 テストの実行時間がとにかく長い 1.2 Nuxt3移行に伴うビルド＆テスト環境の統一 1.3 テストコードの見直しが必要 2. Vitest を選んだ理由 2.1 手軽 2.2 フロントエンドロードマップの Testing に変…
はじめに Recoilからの移行先について Jotai について 移行の方針 1. MiiTel Phoneにおいて使用されているRecoilのAPIを一通り洗い出して、それぞれのAPIにおけるJotaiへの移行方法を調査する 2. 依存関係としてjotaiパッケージを追加する 3. MiiTel Phoneに…
はじめに こんにちは！ RevComm のフロントエンドエンジニアの楽桑です。 私たちのコールセンターシステムでは、GraphQL を使用してデータを管理しており、これまではRecoil を使ってローカルステートを管理していました。 最近では、Recoil の代わりにApoll…
はじめまして。 RevComm でフロントエンドエンジニアをしている大石と申します。 私の所属しているチームでは、Lean スタートアップの考えを基にプロダクト開発に取り組んでおり、エンジニアが機能を実装してリリースして終わりではなく、そのリリースした機…
はじめに RevComm のフロントエンドエンジニアの上川です。MiiTel Call Centerというプロダクトの開発を担当しています。 これまで、ロードマップ機能の開発では、バックエンドとフロントエンドの担当者が完全に分かれていました。 今回は、フロントエンドを…
はじめに vinxi はフルスタックアプリケーションやメタフレームワークの構築が可能なパッケージです。 開発サーバーとバンドラーに Vite を、本番サーバーには Nitro を使用しています。 SolidStart や TanstackStart で採用されています。 今回は vinxi を…
はじめに 最近、ReactにuseEffectEventという実験的APIが存在することを知りました。 弊社で提供しているMiiTel Phoneにおいては、WebSocketやWebRTCなどによってさまざまなタイミングや箇所で非同期的にイベントが発生します。 その関係もあってuseEffectを…
はじめに Rules of Reactという安全で効果的なReactアプリケーションを記述するためのルールがReact公式から公開されました。 Writing idiomatic React code can help you write well organized, safe, and composable applications. These properties make …
はじめに こんにちは。ここ最近、React v19が注目を集めているように感じます。 最近ではついにReact v19のRCバージョンもリリースされました。 Just published React 19.0.0-rc.0. This is the exact build we'll release as 19.0, unless an issue is repo…
はじめに こんにちは！RevCommでフロントエンドエンジニアをしている田中です。 最近、MiiTel Phone Webというプロダクトにopenapi-typescriptとRedoclyというツールを使用してOpenAPIドキュメントからTypeScriptの型定義の管理を効率化する仕組みを導入しま…
はじめに RevCommのフロントエンドエンジニアの上川康太です。MiiTel Call Centerというプロダクトの開発を担当しています。 私たちは2023年の6月にMiiTel Call Centerを正式リリースしてから、スピード感を持って新機能の開発を進めてきました。 開発スピー…
はじめに RevComm, Front-end team の熊谷です。今回は vue-facing-decorator を使って Vue2/Nuxt2 のクラスコンポーネントを Vue3/Nuxt3 に移行した話をします。 各コンポーネントでは既存のソースコードを活かせるところも多かったですが、個別に書き換え…
こんにちは！ RevCommのフロントエンドエンジニアの楽桑です。 フロントエンドパフォーマンスチューニングを経験した方ならご存じのとおり、レンダリング効率は常に重要です。データをスピーディかつ効率的に画面に表示することは、フロントエンド最適化の核…
この記事は RevComm Advent Calendar 2023 18 日目の記事です。 はじめに フロントエンドでの正規化のメリット GraphQL クライアントでの正規化 RESTful API での正規化 おわりに 参考 はじめに 2023 年 12 月現在、フロントエンド GraphQL クライアントの多…
こんにちは！ RevComm のフロントエンドエンジニアの小山功二です。 私が RevComm に入社する前に担当した開発案件は、どれも国内のユーザーにしか使われていないものばかりでした。一方で、RevComm の提供する MiiTel は、日本はもちろんインドネシアやアメ…
この記事は、RevComm Advent Calender 16 日目の記事です。 フロントエンドチームに所属する関口です。フロントエンドエンジニアとして活動するかたわら、MiiTel の一部の製品のプロジェクトマネージャーを兼任しています。 なぜこのタイミングで Chrome 拡…
RevComm Advent Calender 10日目の記事です。フロントエンドチーム所属の小山です。今回は ApolloLink で Recoil のフックを使った際に起きたエラーについて、「ペア設計」を通して解決した話を紹介します。
チーム開発などにおいて運用しやすくなる、エンジニアのための「より綺麗なCSSの書き方」を紹介します。
はじめに：アップデートできていますか？ 作ったきりで一度もライブラリをアップデートしていない、そんなプロダクトも多いのではないでしょうか。新規ライブラリの利用が古いライブラリへの依存により実現しないことなど、損失が発生するケースは多々ありま…
こんにちは！ RevComm に2022年1月に入社したフロントエンドエンジニアの小山 (koji-koji) です。 RevComm では、 React を採用しているサービスの状態管理に Recoil を使っています。今回は Recoil の理解をより深めるために Context と比較してみました。
