こんにちは。@mottei_0702と申します。ハローでは、世界中のレストランを予約できる予約代行サービスAutoReserveのバックエンド開発を行っています。 RDBMSを使って開発しているバックエンドエンジニアの方ならば、 EXPLAIN (ANALYZE) などを活用しながら、クエリのパフォーマンスを常に意識して開発しているのではないでしょうか。私達はPostgreSQLを利用していますが、PostgreSQLのクエリプランナは優秀なため特にこちらで設定を変えなくとも基本的には理想的に動作してくれます。 しかし最近、私は使ってほしいインデックスが利用されないケースに遭遇しました。PostgreSQLのソースコードまで踏み込んで調査してみたところ、PostgreSQLのコスト計算ロジックの一端を知ることができ大変興味深かったので、読者の皆さんに共有したいと思い記事にしました。 クエリ

酒井です。ハローでは、プロダクトのローンチ前からAutoReserveの開発に関わっています。 この記事では、Next.jsアプリケーションであるautoreserve.comをVercelからCloudflareに移行し、月額コストを約90%削減した背景と実装の詳細を共有します。 Next.jsは比較的セルフホスティングが難しいフレームワークとして知られており、Vercelへのベンダーロックインが懸念されることがあります。Next.js 16でBuild Adapters APIが導入されるなど、セルフホスティングのハードルは徐々に下がっていますが、実運用では課題が多いのが現状です。 VercelからOpenNext + Cloudflare Workersの構成に本番環境を移行したため、現場でのNext.jsのセルフホスティングの実際について紹介できればと思います。 背景 AutoRe

株式会社ハローで飲食店向け業務支援サービス「Respo」の開発をしている ysirman です。 主に、Ruby on Rails を使ったバックエンドの開発を担当しています。 プロダクトを継続的に開発していると、いつの間にか「もう使われていなさそうなコード」が増えていきます。 いわゆるデッドコードです。 Respo は「おいしい料理を作る。それ以外は全部、おまかせください。」というコンセプトのもと、予約管理から POS レジまで幅広い機能を提供しています。 その分、過去の仕様や一時的な対応がそのまま残り、結果としてデッドコードになっている箇所も少なくありません。 私は既存プロダクトに対する機能追加・仕様変更を繰り返す中で、 「これ、もう使われていない前提で実装していいんだっけ？」 「消したいけど、影響範囲が分からなくて怖い」 という場面に何度も遭遇してきました。 デッドコードの存在に気づ

1. はじめに 1.1 記事の目的 私はハローでカスタマーサポート向けAIサービス「HelloX」 の開発を担当しています。入社後に電話領域を学び始めましたが、知れば知るほど奥が深く、技術的にも面白い分野だと実感しています。 その電話技術の面白さを紹介するために、この記事では、 Twilio と Asterisk を組み合わせ、いわゆる“固定電話”のように Twilio番号で外線の発着信 と 着信時の同時呼び出し を行える最小構成のIP電話を作ろうと思います。 1.1.1 HelloX とは？ HelloX は、電話の応対から後処理（ACW）までを自動化 するカスタマーサポート向けAIサービスです。既存ツール／社内データと連携し、従来は人手が必要だった後処理まで自動化します。 ユースケースの例としては以下のようなものがあります: 未収督促・債権回収：顧客データと同期し、督促プロセスを自動化

はじめに 株式会社ハローでは、一般ユーザー向けの予約代行サービス「AutoReserve」に加えて、レストラン向けのオールインワン SaaS「Respo」を Web・iOS・Android の各プラットフォーム向けに開発しています。 本記事では、複数のプラットフォームに対応した開発を効率的に進めるための技術的アプローチについて紹介します。 過去に AutoReserve 側での取り組みをこちらの記事で紹介しているので合わせてご覧ください。 課題 レストラン向けサービスの開発においては、現場のオペレーションが複雑かつ多様であり、店舗ごとの運用方法も大きく異なるという課題があります。 例えば、複数店舗を運営しているレストラングループなどでは、現場ではタブレットを使用し、バックオフィス側はPCで作業できるようWebにも対応する必要があります。 こういった状況にも対応し、より多くのレストランにご利

ハローの@satoakickです。 普段はRespoという飲食店向け業務支援Saasのバックエンドを担当しています。 Respoは、予約管理、セルフオーダー、POSレジ、テイクアウト対応など、飲食店の業務効率化を支援する多機能なプラットフォームです。 PostgreSQLなどのRDBMSを使ってサービスを運用していると、思いもよらないクエリのパフォーマンス劣化に遭遇することがあります。 今回はその中でも「LEFT JOIN + IS NULL」構文の落とし穴と、 NOT EXISTSによる劇的な改善事例を紹介します。 DBの監視 ハローではDBの状態をGCPのアラートポリシーで異常検知や隔週でQuery Insights状況のリマインドをSlackに通知されるように設定し、日頃からパフォーマンスには目を光らせるようにしており、何か異常があればオンコール担当者がGCPのQuery Insig

グローバルなレストラン予約サービス、AutoReserveの開発をしているjavascripterです。 今回は、ハローでのautoreserve.comのアーキテクチャの変遷についてお話しします。 概要 AutoReserveは最初Next.jsで構築され、その後SPAに移行し、最終的に再びNext.jsに戻るという珍しい技術選択をしています。 この記事では、各アーキテクチャの移行の背景と、大規模アプリケーションの段階的移行の実践について解説します。 AutoReserveについて AutoReserveは世界中のレストランの予約が可能なグローバルサービスです。iOS・Android・Webの3プラットフォームで展開しており、各アプリ100ページ近くある大規模なアプリケーションです。 モバイルアプリはReact Native (Expo)で開発しており、当初のWeb版はNext.jsで構

2024年も特に変わらず「世界中のレストランを予約できるようにする」を仕事のテーマとして取り組んでいる。 uiuret.hatenablog.com 目指す方向は特に変わらないのだけど、今年はこれまでより、より深く関わるようになったような気はする。 数値としては日本語・英語・中国語など7言語の検索ダッシュボードを毎週のように細かく見ているし、1ユーザーとしては海外に旅にでるたびにチャンスがあれば作っているサービスを使っている。 ドッグフーディング ドッグフーディングという言葉が好きだ。自分達で作っているものを自分達で使う。 すごく当たり前のようなことだけど、意外にもこんな単純なことができている現場は少ない。ドッグフーディングの現実はタフだ。休日の夜に自分が作っている機能を触っていて、うまく動かなくてもどかしいような不具合を見つけてしまったとき、しょっぱくて乾燥したドッグフードを噛んでいるよ

javascripter です。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 今回は、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、社内で継続的に技術Tipsやガイドラインの整備・蓄積を行っています。 チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 新メンバーのオンボーディング支援 今回紹介するドキュメント 今回は、その中から「reac

社員インタビュー第6弾 「Goodbye past, Hello future.」をミッションに株式会社Helloで働くメンバーのリアルな声をお届けします。 今回は、社員第1号であり、現在は取締役CTOを務める杉本風斗さんにお話しを聞きました。 2024年6月20日に7期目を迎えた株式会社Hello。立ち上げ当時からの想いが詰まった熱きインタビューをぜひご覧ください。 1992年生まれ。京都大学在学中にアプリを売却後、Gyazoを運営するNota Inc.に参加し、リードエンジニアとして開発を率いる。転職後、クックパッドでは機械学習を活用したサービスの開発に携わる。フロントエンド、バックエンド、機械学習を全てハイレベルにできるフルスタックエンジニア。2022年より取締役CTOに就任。 - 現在の仕事内容について、教えてください。株式会社Helloの取締役兼CTOを務めています。社員一号とし

大変ご無沙汰しております、今年度もあと少しです。この記事ではAutoReserveでのCLS改善についてお話します。 Web高速化シリーズ第2弾となります、第1弾「メンバーを巻き込み、分析基盤を整える」も併せてご覧ください。 CLSはきちんと改善を行えば必ず満点の25点を取ることができる、Page Speed Insightsの中でもある意味特別な指標です。CLS以外の指標は「~するまでの”時間”」を示しますが、CLSだけは「1画面のなかでコンテンツがずれた”総量”」を示しているためです。秒数を削るのはある程度限界がありますが、「コンテンツがずれないようにする」のはほぼ完璧に対応することができます。 Page Speed Insightsが登場してすぐの頃はCLSは5点しか持っていませんでした。 5点にしてはUXへの影響が大きいなあと思っていたら、バージョン8で15点、現在のバージョン10

javascripter です。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 ハローでは、開発効率の最大化のため継続的に新しい技術を取り入れています。 今回は、AutoReserveのReact Native製アプリにExpo Routerという、Next.jsのファイルベースのルーティングに似たルーターのライブラリを導入した事例を紹介します。 作業時点でのExpo Routerの最新版stableがv1だったため、解説もv1についてになります。現在はExpo Routerはv2がリリースされているため、最新版では一部、記事での解説と異なる可能性があります。 AutoReserveアプリの技術スタック AutoReserveのネイティブアプリはReact Nativeで書かれており、またウェブ版は、Reactで書かれています。 今回はReact N

uiu です。 株式会社ハローでは AutoReserve を運営していますが、サービスの裏側で飲食店やユーザーのサポートのためコールセンターを運用しています。直近では日本語だけでなく英語等多言語でのカスタマーサポートを提供しています。 昨年、カスタマーサポートが利用するコールシステムを、外部のIP電話サービス(MiiTel) から Twilio Flex を使った内製のコールセンターシステムに切り替えました。 Twilio Flex 製システムを運営し始めてから半年以上経つなかで、カスタマイズの知見などが見えてきたので、今回紹介しようと思います。 背景 カスタマーサポートではIP電話サービスを利用していましたが、当時以下のような課題がありました。 サポートの品質向上のため、ダッシュボードでの可視化や分析をしたいができることが限られていた 社内CRMとの連携や自動化をしたいがカスタマイズ性

はじめに はじめまして、株式会社ハローで業務委託として開発をしている@0906kokiです。 今回の記事では、React Nativeで開発されているRespo by AutoReserveで、Expoを最大限に活かしたE2Eテストの導入実装について書きたいと思います。 背景 飲食店向けにセルフオーダーや予約台帳の機能を提供するRespo by AutoReserveは、React Nativeで開発されております。 今回、RespoにE2Eを導入した目的に関しては、以下のような点が挙げられます。 手動テストの場合、テストをスキップ or 見逃していたケースがあったので、毎回網羅的にテストできるようにし、QAの質を上げたい 頻繁に本番デプロイできるようにする コミットごとにテストできるようにすることで、QAを待たず事前にデグレを検知できる (今後) ライブラリのアップデートなど、全てのテス

javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。今回の記事では、AutoReserveでおこなっているコード共通化の取り組みについて紹介します。 背景 AutoReserveのネイティブアプリはReact Nativeで書かれており、またウェブ版は、Reactで書かれています。 ウェブ版では、React Native for Webという、React上でReact NativeのコンポネントのAPIを使えるようにするライブラリを使用しています。 React Native for Webを採用したことで、ハローでは現在、エンジニア1人でiOS、Android、ウェブの全てのプラットフォームに同時展開できるようになりました。 また、不具合修正やデザインの修正も、一箇所を修正するだけで同時にできるようになりました。それぞれのプラ

こんにちは！ 株式会社ハロー、マーケティングチームです。日頃は、サービス全体の設計やAutoReserveの問い合わせ数増加施策などグロース全般を担当しています。 2022年2月頃からハローでは、開発職以外の希望するメンバーがSQLを勉強することになりました。実際に学んだ過程や学んだ感想について今回はご紹介したいと思います。 知らない人のために...「SQL」とは？ データベース言語の１つで、データを検索・挿入する際に利用します。GoogleAnalyticsではアクセスデータを確認することができますが、SQLを活用することでサービスが保有しているデータを確認することができます。 例えば、 ユーザーの月次登録数 ユーザーのアカウントが保有している情報一覧 ユーザーのうち、日本人以外のユーザー一覧 レストランの都道府県ごとの登録数 店舗向けに販売してるSaasの都道府県ごとの利用数 などをチ

javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 突然ですが、Reactを使用する際、コンポネントのロジックや状態が増えてきたとき、みなさんはどうされてるでしょうか。 関数コンポネントでは、一般にcustom hooksとしてまとめて切り出すことが多く行われていると思います。 今回の記事では、useState/useRef + custom hooksという単位で切り出すのではなく、 クロージャを使いロジックや状態をコンポネントの外に持たせるようにリファクタリングすることで、コードの見通しが良くなる、という事例を紹介します。 JavaScriptにおけるクロージャとは、関数が外側のスコープの変数などへの参照を保持できる機能のことです。ここではクロージャとして実装しましたが、同等のことはclassを使っても実装できます。 A

uiu です。 前回の記事 『なぜ Next.js をやめたのか？』 では、Reactベースのウェブフロントエンドで、サーバーサイドレンダリング(SSR)をしない選択をすることで、アーキテクチャをシンプルに保っているという話を紹介しました。 アーキテクチャをシンプルに保つ工夫のおかげで、ウェブとアプリのコード共通化が簡単になり、1人のエンジニアが最小限の労力で複数プラットフォームに変更を入れることが可能になっています。 Dynamic Rendering はスケールしないのでは？メンテが大変なんでは？ という質問があったので、今回は実際どのように Dynamic Rendering を運用しているかについて紹介したいと思います。 結論を簡単に言うと、キャッシュが効くためサーバーコストは高くなく、またサーバーレス環境で動いてるため運用のメンテナンスコストも低いです。 サーバーコストは当然 S

javascripterです。ハローでは、プロダクトのローンチ前からAutoReserve の開発に関わっています。 この記事では、AutoReserveウェブ版が、Next.jsを一度採用したがやめ、その後create-react-app + react-routerの構成に移行した経緯を書きます。 ウェブ版開発の背景 AutoReserve はAIが電話予約を代行してくれる飲食店向け予約グルメアプリで、現在はiOS / Android / ウェブにサービスを展開しています。 元々はReact Native製のネイティブアプリのみ展開していましたが、ユーザ獲得の面でウェブ版が必要となったため、 追加でウェブ版を実装し、現在の3プラットフォームでの展開に至ります。 最初の技術選定 ウェブ版の最初のバージョンでは、フレームワークとしてNext.jsを採用しました。Reactで書け、SEOのた

はじめまして！ 株式会社ハロー、マーケティングチームです。日頃は、サービス全体の設計やAutoReserveの問い合わせ数増加施策などグロース全般を担当しています。 4月は新社会人や転職してこれからマーケターとしてやっていくという方がいると思います、そういう方に向けて「Webマーケティングって何をすればいいの？」という質問に自分なりに回答をしてみたいと思います。合わせて各トピックにおいて参考となりそうな本についても紹介します。 Webマーケティング戦略を考える前に大事にしたいこと いきなり残酷な話ですが世の中のほとんどのサービスは、思った通りには伸びません。 これを読んでいる方も 「こういうサービスを作ったら絶対売れる」 「○○の悩みを解決したら確実に成功する」 と思ったことはないでしょうか？ 私も同じように、幾度となく同じようなことを考えたことがあります。例えば、「寝坊する人が多いから、