はじめに

今回はチーム開発で取り組んだFXシミュレーションアプリ「Trade Rush」の振り返りをまとめます。
自分は初めてフロントエンドとバックエンドを分けて開発したことで、学びも多く、今後の開発にも活かせる気づきがありました。

アプリ概要

アプリ名：「Trade Rush」

機能

APIによるリアルタイム為替レートの取得
アプリ内の仮想通貨を使ったFXのシミュレーション体験
他のユーザーとの資産比較とランキング表示

使用技術

Next.js
React
axios
Rails API
MySQL
Docker
Tailwind CSS

実装のポイント(API一部抜粋)

ユーザの資産情報の取得

 def capital
    authenticate_user
    render json: { capital: @current_user.found }
  end

資格情報の取得(axios)

  static fetchCapital() {
    const token = localStorage.getItem('token')
    return axios.get('http://localhost:3000/api/v1/trade',{
      headers: { Authorization: token }
    })
      .then((res) => {
        return res.data.capital;
      })
      .catch((err) => {
      alert('資産の取得に失敗しました。');
      console.error(err);
    });
  };

上記のように、axiosがGET /api/v1/trade にリクエストを送り、Rails側の capital アクションがfoundの値をJSONで返します。
JWT認証を使用しているため、トークンをヘッダーに含める必要があります。
これによりユーザの資産状況を取得できます

取引履歴の保存と資産反映（バックエンド）

def create
    trade_log = current_user.trade_logs.new(trade_params)

    if trade_log.save
      current_user.found += trade_log.profitloss
      current_user.save

      render json: { capital: current_user.found}, status: :ok
    else
      render json: { errors: trade_log.errors.full_messages }, status: :unprocessable_entity
    end
  end

end

取引履歴の保存（axios）

  static tradelog() {
    const token = localStorage.getItem('token')
    return axios.post('http://localhost:3000/api/v1/trade_logs', 
      { profitloss: profitLoss }, 
      { headers: 
        {
          Authorization: token
        }
      }
    )
      .then((res)=> {
        return res.data;
      })
      .catch((err)=> {
        alert('取引履歴の保存に失敗しました。');
        console.error(err);
      });
  };

取引ごとに profitloss（損益）を計算し、それを現在のfound（資産）に加算して更新します。これにより、擬似的なFX取引が成立する仕組みになっています。
Railsでの開発経験があったため、APIモードの構築にも比較的早く対応できたと感じました。

よかったこと

テーマを早期に決定できた
コア機能となるAPIの必要性を初期段階で把握し、すぐに実装に着手できた
設計・仕様決めなどを早めに行い、前回の開発より余裕を持って進められた
フロントエンドとバックエンドの役割分担が明確だった
Railsに慣れていたため、APIモードでもスムーズに実装できた

反省点・改善点

フロントエンド（Next.js）とバックエンド（Rails API）の分離開発は初めてだったため、理解に時間がかかり、フロント実装・デザインへの貢献が少なかった
API設計とフロント側との連携仕様を事前に擦り合わせるべきだった
→ エンドポイント一覧、レスポンス形式、JWT認証フローなどをNotionなどで共有しておくべきだったと感じました
タスクスケジューリングについても、Notionでの管理をもっと活用し、ガントチャートやカンバン形式にしておけば、全体の進捗把握がしやすかったと思います

今後活かせそうな事

タスク管理の精度を上げる（開始前にスケジュール・進捗管理方法を明確にしておく）
使用予定の技術のドキュメントやエラーパターンを事前にリサーチしておく
→使用したAPI(為替取得)が土日は動かなかった
技術の「全体像」を掴む意識を持つと、キャッチアップが早くなると実感した
実装に入る前の設計と共有の重要性を痛感した
→ よい設計があれば、実装中の迷いが少なくなり、品質も保ちやすいと気づけた

フロントエンドとバックエンドを分けた開発の学び

今回は初めて、フロントエンド（Next.js）とバックエンド（Rails API）を分離した構成で開発を行いました。
最初は、データの流れやそれぞれの責務を理解するのに時間がかかりましたが、慣れてくるとその利点がはっきりと見えてきました。

特に感じたのは、責務が明確に分かれることで、コード全体の構造が非常にわかりやすくなるという点です。
UIの構築に集中したい場合はReact側、ロジックやデータ処理はRails側、と役割を分けることで、機能追加や修正もスムーズになりました。

React・axiosを通しての気づき

Reactは最初自由すぎて逆に難しいと感じました。
どこからどこまでをコンポーネント化するかなど、正解が一つではないため悩むことも多かったです。
しかし、慣れてくると柔軟性が高く、どのみちJavaScriptを使うのであれば、Reactのようなフレームワークを使うメリットは大きいと感じました。

また、API通信に使うaxiosも初学者には少し難しかったです。
axiosの役割は何かといった疑問がありましたが、エラーハンドリングやヘッダー設定のしやすさなど、実践で使ってみて便利さを実感できました。

最後に

今回のチーム開発では、今までの自己学習だけでは得られなかった他者と連携しながら開発する力やフロントとバックエンドを分けての開発を体験することができました。
得られた技術的な学びはもちろん、チームで何を共有し、どこを決めるべきかといったコミュニケーション面での気づきも多く、また共同で開発する機会があればこれらのことを意識して開発をしたいと思います。