React Native タクシーアプリ (react-native-taxi-app)

Mobile
React Native タクシーアプリ (react-native-taxi-app)

React Native タクシーアプリ (react-native-taxi-app)

React Nativeで作られた学習目的のタクシー配車アプリ。ドライバーと乗客をリアルタイムに接続するためにSocket.ioを利用し、ログインや認証、ルート管理はExpressベースのREST APIで行う設計になっています。クライアントはJavaScript（React Native）で実装され、リアルタイムのマッチングや位置情報の送受信を行うことで、実務に近い配車フローを体験できるサンプルプロジェクトです。（約300字）

https://github.com/RaminadoSolver/react-native-taxi-app

概要

react-native-taxi-app（WeTaxi）は、React Nativeで作られた学習用のタクシー配車アプリです。乗客とドライバーを結びつけるリアルタイム通信にSocket.ioを利用し、認証やユーザー管理、ルート操作にはExpressベースのREST APIを組み合わせる構成になっています。モバイルクライアントはJavaScriptで実装され、ログイン・サインアップからマッチング、位置情報の送受信、配車のフローまでを一通り体験できるため、リアルタイム通信やモバイルとバックエンド間の連携学習に向いています。

GitHub

リポジトリの統計情報

  • スター数: 16
  • フォーク数: 0
  • ウォッチャー数: 16
  • コミット数: 30
  • ファイル数: 27
  • メインの言語: JavaScript

主な特徴

  • React NativeクライアントによるモバイルUI（ドライバー／乗客の役割を切り替え）
  • Socket.ioによるリアルタイム接続（位置情報やマッチングイベントの送受信）
  • ExpressベースのREST APIでの認証・ユーザ管理（ログイン・サインアップ）
  • 学習目的のサンプル実装で、フロントエンドとバックエンドの連携学習に最適

技術的なポイント

本プロジェクトはクライアントサイド（React Native）とサーバサイド（Socket.ioサーバ、Express REST API）の協調でリアルタイム配車体験を実現しています。READMEにある通り、リアルタイム通信は別リポジトリのSocket.ioサーバを利用し、REST APIはExpressベースのバックエンドでログイン・サインアップ・認証を担います。クライアントはSocket.ioクライアントとHTTPクライアント（fetchやaxios等）を使い分け、認証周りはRESTでトークン発行→以降のSocket接続やAPI呼び出しに反映する典型的な構成が想定されます。

モバイル側では位置情報の取得（端末のGPS）や地図描画（React Native向けの地図ライブラリと組み合わせる想定）が主要な機能です。ドライバーと乗客間のマッチングでは、乗客のリクエスト送信→サーバ側で該当ドライバーを探索→該当ドライバーへ通知、というイベント駆動の流れがSocket.ioイベントで行われるため、低遅延なUXが得られます。実運用を考えると、ネットワーク切断時の再接続処理、位置情報の頻度調整、バックグラウンドでの位置送信、そして認証トークンの更新（リフレッシュ）などの運用面の実装が重要になります。

学習用のコードベースとしては、画面コンポーネント、イベントハンドラ、APIラッパーが分離されていることが想定され、実践的なモバイルアーキテクチャ（ステート管理、非同期処理、エラーハンドリング）の学習に役立ちます。また、Socket.ioとREST APIの分離はスケーラビリティの観点からも好ましく、将来的に認証やマッチングロジックを独立して拡張できる設計です。

（技術的に検討すべき点）

  • 安全なトークン管理（SecureStore / AsyncStorageの扱い）
  • ネットワーク断や背景位置取得への対応
  • マップの最適化（大量マーカーやルート描画）
  • サーバ側での負荷対策（スケールアウト、名前空間／ルーム設計）

プロジェクトの構成

主要なファイルとディレクトリ：

  • .buckconfig: file
  • .eslintrc.js: file
  • .flowconfig: file
  • .gitattributes: file
  • .gitignore: file

…他 22 ファイル

（補足） クライアントはReact Nativeプロジェクトらしく設定ファイルやLinter、Flowの設定が含まれており、静的解析や品質管理に配慮した構成になっています。実際の画面やSocketイベント実装はREADMEのスクリーンショットや関連バックエンドリポジトリを参照すると理解しやすいです。

まとめ

学習用としてリアルタイム通信と認証を組み合わせた良いサンプルで、モバイル×バックエンド連携を学ぶのに最適です。（約50字）

リポジトリ情報：

READMEの抜粋： Screenshot

WeTaxi

A React-Native App that links Taxi Drivers and Passengers. It was built for studies purposes…

It uses a Socket.io Server to connect Driver and Passenger in real time. It also uses a REST API Express Backend for login, sign up, authentication and controlling routes inside the App.

video of the application run…