リクルートがB2Bのスマホアプリ開発でReact Nativeを採用した理由：Webフロントエンドエンジニアだけでスマホアプリ開発（1）

リクルートテクノロジーズが開発している、B2Bのスマホアプリ『Airシフト メッセージ用アプリ』。Webフロントエンドエンジニアだけで行っている開発の裏側を明かす連載。初回は、React Nativeを採用した背景などについて。

[辻健人，リクルートテクノロジーズ]

　こんにちは、リクルートテクノロジーズで『Airシフト』のフロントエンドの開発を担当している辻です。これから、連載で、『Airシフト メッセージ用アプリ』を開発した背景、さまざまな側面で工夫した点などを紹介していく予定です。楽しみにしていただけると幸いです。

『Airシフト』とは

　『Airシフト』は、シフト管理サービスです。シフト表の作成はもちろん、スタッフとのやりとりや細かな調整業務をラクにするための機能があります。直感的に操作できることを目指したシンプルな画面で、シフト表を作成できます。シフト表と一体となったチャット機能を使ってスタッフとのやりとりができるため、シフト表を作成しながら、急なシフト調整や連絡を取り合うことも可能です。

　最初に開発したWeb版の技術スタックとしては、React／Reduxをはじめ、チャット機能にWebSocketやSSR（Server Side Rendering）を、ユーザー認証やファイルダウンロードにBFF（Backends For Frontends）アーキテクチャを採用しています。

『Airシフト』Web版でReactを採用した背景

　『Airシフト』のメイン機能はシフト管理であるため、要件定義の段階当初から、UI（ユーザーインタフェース）が複雑になることが想定されました。

　実情として、複雑な表計算ソフトでシフトを管理している店舗は多く、そのソフト上できていたことをWebのUIでも再現する必要があったからです。加えて、ドラッグ＆ドロップでシフトの作成や調整ができたり、シフト表を操作しながらチャットができたりするなど、従来のWebアプリと比べて非常に多機能かつ複雑になることが予想できました。

　これらの要件から、「Single Page Application（以下、SPA）として実現する必要がある」と判断し、その中でも実装開始当初の時点でSSRの実績がある、WebフロントエンドのライブラリとしてReactを採用しました。

　またReduxの採用理由は、Fluxアーキテクチャを実現する最もポピュラーなライブラリであること、Viewを実現するライブラリと完全に切り離して扱うことができることなどです。

『Airシフト』におけるスマホアプリのニーズ

　『Airシフト』は当初、Web版しか提供しておらず、チャット機能において「通知に気付かない」「気軽にメッセージのやりとりができない」といった課題が見えてきました。

　そこで、チャット機能に焦点を当ててその課題を考えたときに、より手軽にチャットができて通知も受け取りやすいスマートフォン（スマホ）アプリ版を実装すれば、それらの課題を解決できるのではないかという仮説を立てました。その仮説を検証するためには、機能をチャットに絞ったスマホアプリ版を、高速で開発するための技術を選定する必要がありました。

React Nativeを選んだ理由