グローバルなレストラン予約サービス、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で開発されているAutoReserve for Restaurantsで、Expoを最大限に活かしたE2Eテストの導入実装について書きたいと思います。 背景 飲食店向けにセルフオーダーや予約台帳の機能を提供するAutoReserve for Restaurantsは、React Nativeで開発されております。 今回、AutoReserve for Restaurantsに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マーケティング戦略を考える前に大事にしたいこと いきなり残酷な話ですが世の中のほとんどのサービスは、思った通りには伸びません。 これを読んでいる方も 「こういうサービスを作ったら絶対売れる」 「○○の悩みを解決したら確実に成功する」 と思ったことはないでしょうか？ 私も同じように、幾度となく同じようなことを考えたことがあります。例えば、「寝坊する人が多いから、

uiu です。ハローには創業時に入社し、エンジニアとしてAutoReserveの開発にゼロから関わってきました。現在はバックエンドをメインに担当していますが、領域横断的に開発することを得意としています。 2022年の初めに AutoReserve にあるWebフロントエンドをすべて Vercel に移行しました。 Vercel に移行するのと同時に Turborepo を導入しました。現在、4サービスのWebフロントエンドを monorepo として運用しています。 AutoReserve は、AIが代わりに電話してくれる飲食店向け予約グルメアプリです。iOS / Android アプリ、 Web アプリを提供しています。 また、セルフオーダーシステム AutoReserve Order を提供しており、レストランすべての業務をサポートできるプラットフォームを目指しています。 背景 Aut

京都大学工学部情報学科中退。在学中に開発したアプリを事業売却。Gyazoを開発する Nota Inc.でリードエンジニアとして開発をリード。クックパッドでは機械学習をフルに活用したサービス開発に携わる。現在は、飲食店AI予約アプリ AutoReserve のソフトウェアエンジニアとして活躍。 時代の変化に合ったスキルが身につく ──サイバー大学では、仕事の現場で習得できるスキルを学ぶことができるそうですが、そういった学びの場へ通うことの意義について、お二人はどう考えていますか？ ウイウ：正直あまり意義はないと思っていて。仕事で役に立つスキルは、これまで独学で習得してきました。最近は分かりやすい技術書なども出ているので、業務上で必要になってくる新しい知識もカバーできると感じています。 藤田：そう言われてしまうかな…と心構えはしていました（笑）。僕の考える意義を話す前にウイウさんへ質問しても良

紅白出場歌手が発表されるとか、街中のキャンペーンがクリスマス仕様になっているとか、もう年の瀬を感じさせる時期というところで、 2019年という1年をかけて、IT業界にいる自分が感心した「令和にふさわしい革新的Webサービス6選」をお届けしようと思う。 これらのサービスは過去にも類似したサービスがあったり、逆に全てが斬新だったりするものがあるが、令和という時代の流れにサービスの見せ方が非常に合致していると感じるものばかりだ。 広告収入が得られる短縮URL作成サービス「tobe（トゥービー）」https://to0.be/ 「URLをシェアするだけで簡単に収益化できるサービス」 Twitterでは長いURLのせいで文字制限に引っかかるケースがある。 これを短くしたり見栄えを良くするためにあるのが短縮URLである。既存だとbit.lyとか。 それに加えて、発行した短縮URLに広告を載せて収益化を

チャイは、Twitterでポイントを気軽に送り合えるサービスです。ポイントはAmazonギフト券と交換できます。

2018年2月14日、約6年間在職したはてなへの最終出社を終えました。しばらくの有給消化期間の後、3月に正式な退職日を迎える予定です。 はてなには2012年の4月に入社し、はてなブックマークやPresso、またカクヨムやPINGAなど数多くのサービスにディレクターとして携わってきました。Web開発のバックグラウンドが皆無という状況で新卒入社しましたが、同僚や上司に恵まれこれまで育てていただきました。お世話になった同僚・上司のみなさま、本当にありがとうございました。 思い出 いくつかのサービスは立ち上げから参加することができました。特に入社後、初めて立ち上げに関わった「Presso」カドカワさまと共働開発した「カクヨム」については、サービスの魅力をどう組み上げていくかという点で最初から工夫・検討の余地が大きいプロジェクトでした。ディレクターとしてやりがいを実感しやすかったので、大変ではあった