はじめに Rules of Reactという安全で効果的なReactアプリケーションを記述するためのルールがReact公式から公開されました。 Writing idiomatic React code can help you write well organized, safe, and composable applications. These properties make your app more resilient to changes and makes it easier to work with other developers, libraries, and tools. These rules are known as the Rules of React. https://github.com/reactjs/react.dev/blob/40d73490733a

はじめに こんにちは。ここ最近、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 reported that requires a breaking change. Thank you to everyone who helped us get the release into shape!— Andrew Clark (@acdlite) 2024年6月3日 そう遠くないうちにReact v19がリリースされる可能性もありそうです。そこで、React v19のリリースによる周辺ライブラリへの影響などについて、弊社で採

2月7日（水）19:00よりオンラインにて開催されるイベント「DevRel/Tokyo #89 〜テックブログ運営〜」に、RevComm シニアリサーチエンジニアの加藤集平が登壇します。 DevRelとは Amazon、Google、Facebook、Evernote、GitHub…多数の企業が実践しているマーケティング手法がDevRel（Developer Relations）です。外部の開発者とのつながりを形成し、製品やサービスを知ってもらうこと、さらに彼らの声を聞くことでサービスの改善や機能追加に活かしていく活動になります。 日本でもエバンジェリストやデベロッパーアドボケイトと呼ばれる方が増えており、製品やサービスを紹介しています。DevRel Meetup ではそうしたエバンジェリスト、DevRel活動を行っている方が集まり、知見を共有したり情報交換をする場にしたいと考えています。

はじめに RevCommのフロントエンドエンジニアの上川康太です。MiiTel Call Centerというプロダクトの開発を担当しています。 私たちは2023年の6月にMiiTel Call Centerを正式リリースしてから、スピード感を持って新機能の開発を進めてきました。 開発スピードを維持するためにも自動テストを増やして、デグレを防ぐことが重要だと考えています。そのため、PlaywrightによるE2Eテストを充実させてきました。 その中で得られたPlaywrightのコツについて共有したいと思います。 想定読者 Playwrightを使用したE2Eテストの作成に興味がある開発者 実践的なテストコーディングのコツや、より効率的なデバッグ方法について学びたい方 Playwrightとは PlaywrightとはE2Eテストを実行できるOSSのツールです。 複数のブラウザ（Chromi

はじめに RevCommの宇佐美です。最近スタンディングデスクを買って、立ったり座ったりしながら仕事をしています。 RevCommでは、音声解析AI電話「MiiTel（ミーテル）」やAI搭載オンライン会議解析ツール「MiiTel Meetings」などを開発・提供しています。私は今年10月までMiiTelの認証基盤 (MiiTel Account) 開発プロジェクトで、Project Manager兼Sortware Engineerとして活動していました。 直近では希望によりプロジェクト異動をして、コールセンター機能とリアルタイム通信基盤を開発するチームに参加しています。今まで扱っていたものとは全く異なる技術を触っているので、日々わからないことだらけでエキサイティングです。 過去記事: MiiTel AccountのSLO: 測定と継続的な最適化の方法 Cognito user pool

はじめに RevComm, Front-end team の熊谷です。今回は vue-facing-decorator を使って Vue2/Nuxt2 のクラスコンポーネントを Vue3/Nuxt3 に移行した話をします。 各コンポーネントでは既存のソースコードを活かせるところも多かったですが、個別に書き換えが必要なところもありましたのでまとめたいと思います。 なぜ vue-facing-decorator を使用したか 弊社の Vue2/Nuxt2 環境では、 nuxt-property-decorator と、vue-property-decorator を使用したクラスコンポーネントを採用していました。nuxt-property-decorator が Nuxt3 への対応をしないことを決定したため、nuxt-property-decorator が推奨している vue-facing

こんにちは！ RevCommのフロントエンドエンジニアの楽桑です。 フロントエンドパフォーマンスチューニングを経験した方ならご存じのとおり、レンダリング効率は常に重要です。データをスピーディかつ効率的に画面に表示することは、フロントエンド最適化の核心です。 本記事では、すでにリリースされているプロジェクトにおいて、コードの変更を最小限に抑えつつ、効果的なテーブルパフォーマンスチューニングをどのように実施するかをご紹介します。 背景 僕が担当しているプロジェクトでは、システム内に配置された2つのインタラクティブなテーブルがあります。 これらのテーブルは、ユーザーが操作するディバイダーによって高さが調整される設計になっています このような設計は、ユーザーによりよいコントロールを提供する一方で、データ量が増加するとパフォーマンスに影響を与える可能性があります。特に、ディバイダーの動きがスムーズで

こんにちは！ RevComm のフロントエンドエンジニアの小山功二です。 私が RevComm に入社する前に担当した開発案件は、どれも国内のユーザーにしか使われていないものばかりでした。一方で、RevComm の提供する MiiTel は、日本はもちろんインドネシアやアメリカでも使われています。 私の担当する MiiTel CallCenter というプロダクトは今年リリースしたのですが、こちらもリリース当初から海外で利用できることが求められていました。 開発時からタイムゾーンを扱うのは大変そうだよねというのは感じていたのですが、想定よりも大変でした。 そこで今回はタイムゾーン周りの理解を深めるために、Day.js のタイムゾーンを変更する関数である tz という関数について整理していきたいと思います。 似たような4種の書き方ができる Day.js の tz 関数 まず tz 関数を使え

この記事はRevComm Advent Calendar 2023 6日目の記事です。 はじめに RevCommのバックエンドエンジニアの中島です。 前回はPyCon APAC 2023への参加レポートを寄稿しました。今回もイベント参加のレポートになります。 今回は 2023年11月25日(土) に開催された ISUCON13 に、弊社内でフロントエンドエンジニア1名＋バックエンドエンジニア2名、計3名のチームで参加しました。 isucon.net 私はISUCONには過去数回参加したことがありますが他の2名は参加なしという経験値で、結果としては最終スコア 7,749点、参加チーム数 694組中 314位でした。 なんとも言い難い順位ですが、参加レポートという形で忘備録として未来の参加者に知見を残せればと思います。 キックオフ 中島は8月入社ですが、8月下旬に社内のエンジニアが全員入ってい

RevComm Research Dept. Development Groupの高橋典生です。先日開催された、NIKKEI Tech Talkの【日経×コドモン×RevComm】サービスの安定性、信頼性を高めるDevOps/SREの取り組み に登壇しましたので、紹介させていただきます。 NIKKEI Tech Talkとは NIKKEI Tech Talkとは、日本経済新聞社 CDIO室が開催する技術勉強会です。毎回テーマを変えて様々なトピックで開催されています。私が登壇したのは以下の回でした。 nikkei.connpass.com これ以後も、 nikkei.connpass.com nikkei.connpass.com と興味深いラインナップで続いてますので、興味があればぜひご参加ください。 発表内容の概要 Feature Flagを私のチームで導入した経験を踏まえて、どのように

※この記事はバックエンドエンジニアRaman Yachiによる記事『E2E Testing system for Miitel Account』を翻訳したものです。 はじめに こんにちは、バックエンドエンジニアの谷地ラマンです。 RevCommではマイクロサービスアーキテクチャを採用しており、私はその中で認証/認可の機能を提供するAccountチームに所属しています。 ユーザーのログイン認証を処理する重要な部分であり、ここに障害が発生するとユーザーがサービスにログインできなくなる可能性があるため、可能な限り防ぎたいです。 そのための対策としては、第一に全ての機能に対応する単体テストを実装することです。 私のチームではテストフレームワークであるpytestを使用し、Pull Requestにおいて単体テストが実行されるためコミットごとの機能を保証し、あるいはバグを検出することができます。 単

この記事は RevComm Advent Calendar 2022 の 25 日目の記事です。 はじめに 株式会社 RevComm 執行役員 CTO の平村 健勝 (@hiratake55) です。2022 年は、AI 搭載 IP 電話 MiiTel の機能改善から大規模なシステム移行、セキュリティ面での改善、さらにインドネシアをはじめとする海外事業の拡大、AI 搭載オンライン商談解析ツール MiiTel for Zoom の正式リリースなど、社会やビジネスにおけるさまざまな課題を解決する製品をリリース・改良してまいりました。 この記事では、このような急速な発展を遂げるために、技術的な挑戦だけでなく、私やほかのエンジニアリングマネージャー陣が実践している、あまり触れられないユニークな工夫について紹介したいと思います。 エンジニア出身ではないCEOの良いところ すべての会社は「エンジニア出

この記事は RevComm Advent Calendar 2022 の 24 日目の記事です。 はじめに クリアすべき 4 つのステップ 1. 個人のモチベーション向上 Will Can Need まとめ 2. パフォーマンス向上 条件 1: 強い意志 条件 2: リラックス 条件 3: 手順の明確なイメージ 条件 4: フィードバック 条件 5: ちょっとした混乱（緊張感） まとめ ３．企業の業績向上 まとめ 4. 社会への価値創造 まとめ 最後に はじめに 2022 年 10 月に RevComm にシニアエンジニアリングマネージャーとして入社した樋沼です。前職ではエンジニア組織と兼務でビジネス組織の責任者をしていました。 エンジニア組織を内側と外側から見てきましたが、「エンジニアがイキイキしていないと IT 企業は成長しない」という当たり前のことを改めて痛感しています。そして、企業

この記事は RevComm Advent Calendar 2022 の 17 日目の記事です。 こんにちは大谷（@sara_ohtani_mt2）です。 今年 10 月に RevComm に入社してバックエンドエンジニアをしています。 今年もあっという間にアドベントカレンダーの季節がきてしまいましたね。 不確実性と闘う皆さん、今年も一年お疲れさまでした！ 『THE 有頂天ホテル』という大晦日のホテルを舞台にした映画の中の「年が変われば、いいこともあるわ」という台詞が大好きです。年末になるといつも思い出します。 新年を迎えるというのはただ年がインクリメントされるだけのことのようにも考えられますが、自分の頭と心を整理整頓してまた新しく始めるには、やはりぴったりの機会です。 そこで今日はセルフメンテナンスの基本と 2022 年最新ニュース、そして私がセルフメンテナンスのために行っているオリジナ

TL;DR🤩 音声認識器Whisperの認識精度と認識速度について調査 認識精度 英語では論文同様の結果 日本語の認識精度はドメインに依存 baseモデルの推論がドメインにより不安定 ビームサーチの利用により、推論の頑健性が向上 largeモデルのCERはbaseモデルの半分程度 認識速度 baseモデルのRTFはGPUで0.104　largeのRTFは0.408 バッチサイズなどを最適化することで改善 こんにちは。RevCommのリサーチチームでインターンをしている中田亘です。 2022年9月21日にOpenAIからWhisperと呼ばれる音声認識器が一般に公開されました。今回は、Whisperの性能に関して調査を行ったので紹介します。 TL;DR🤩 Whisperとは 実験と結果 実験条件 認識精度 英語でのWER LibriSpeech test-clean test-other

今回は、チーム開発などにおいて運用しやすくなる、エンジニアのための「より綺麗なCSSの書き方」を紹介します。 !important を使わない 余分な div は書かない CSS セレクタを深くしない HTML に style を直接指定しない 自分より外のコンポーネントに margin の情報を持たせない まとめ !important を使わない 例えば、以下のようなHTMLがあったとします。 <style> p { color: red !important; } </style> <p>青色のテキスト</p> <p>緑色のテキスト</p> ここで要件として「文字色が赤なのをそれぞれに合った色にしたい」とします。 そこで blue、green というクラスで色を変更してみます。 修正は以下の通りです。 <style> p { color: red !important; } + .bl

RevComm の木村です。 所属チームはInfrastructure（インフラチーム）です。 今回は、RevCommの全社オフサイトに関する記事の第3弾になります。 第1弾：【レポート】年に1度の全社オフサイトミーティングを開催しました！ 第2弾：RevCommインハウスデザインナーが取り組んだ「イベントデザイン」の制作裏話 オフラインでの開催予定だった会が急遽オンラインイベントとなり、第1部はZoom開催、第2部の懇親会はGatherでの開催となりました。 Gatherとは、2D RPGのような雰囲気でアバターを操作して会話や画面共有をしながらビデオチャットを行うことができるバーチャルスペースです。 本記事では、Gatherを利用した参加者160人超のオンラインイベントを実現する上で発生した課題と解決策に関して触れていきたいと思います。 記事の構成は以下のとおりです。 第1章 - バー

RevCommで音声処理の研究開発を担当している加藤集平です。皆さんは電話の通話相手が屋外やカフェなどの雑音環境下にいるために、相手の声が聞こえづらくて苦労した経験はありませんか？本記事では、物理的な音量はそのままに雑音環境下の聞こえ（音声了解度）を改善するモデルであるNELE-GANを用いた、通話相手が雑音環境下にいても聞き取りやすい電話の実現に向けた実験を紹介します。弊社のサービスであるMiiTel（ミーテル）の大量の通話音声を用いてモデルを学習することで、ベースラインよりも大幅に性能を改善することに成功しました。 ※本記事の内容は、筆者らが日本音響学会2022年春季研究発表会で発表した内容（加藤 & 橋本, 2022）に基づいています。 要約 背景 本手法で強調した音声の例 強調前 強調後 手法 音声了解度を表す客観指標 音声品質を表す客観指標 実験 音声データおよび雑音データ モデ

こんにちは。はじめまして。PBX チーム所属の山崎です。 はじめに さてみなさま、夏休みはいかがお過ごしでしょうか。 夏休みで子どもがずっと家にいると、WEB 会議に乱入してくる可能性が高くなります *1。 「おとーさーん！おとーーさーーん！あれ〜いないの〜〜？」「ちょっと静かにしててー💢」みたいなご経験、ないでしょうか。 もちろん乱入してきたからといってどうということはなく、同僚のそんな様子はむしろ和むのでウェルカムですが、自分がその立場になるとやはり気まずいものがあります。 そんな折、同僚が ON AIR ライト を買っていて、良さそうだったので自分も買ってみました。 しかしながら、日に数回とはいえ都度付け消しするのは面倒です。そこで、自動で on/off するようにしてみました。 前書きが長くなりましたが、今回の記事は MacBook のヘッドセットの接続/切断イベントを契機に、

はじめまして。RevComm の渋谷です。MiiTel Phone Mobile のバックエンドや E2E テストなどを主に担当しています。2021 年 6 月に入社し、在籍がちょうど 1 年経過したところです。 それとは別に、TechTalk （エンジニア主体の技術共有の場） 運営にも 2021 年 8 月頃から参加しております。 今回は RevComm における TechTalk の立ち位置や意義、どのような発表が行われてきたか、そして続けていくコツなどをお話してみたいと思います。 RevComm における TechTalk とは RevComm では毎週水曜日に 15:30 〜 16:00 の 30 分枠で TechTalk を開催しています。 エンジニアの発表体験を増やす場 エンジニアの技術スキルを底上げする場 プロダクトに関する技術共有・相談の場 エンジニア個人の技術的（に限らな