React×Railsの計算アプリで、裏でPythonに計算してもらう。

タイトルの通り、裏でpythonに計算してもらうWebアプリを作る準備です。
pythonでバックエンドを書けば楽に実装できますが、Railsを使ってみたかったので、こうしました。

実装方法さえわかればいいと思うので、簡単な整数の足し算とその結果を画面に出力するための準備をします。

プログラム

フォームコンポーネント

CalclationForm.tsx

import React, { useState } from "react";

export const CalclationForm = () => {
  const [value1, setValue1] = useState("");
  const [value2, setValue2] = useState("");
  const [result, setResult] = useState("");

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    try {
      const response = await fetch("/calculation", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({ value1, value2 }),
      });
      
      if (!response.ok) {
        throw new Error("Calculation failed.");
      }
      
      const data = await response.json();
      setResult(data.result);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="number"
          value={value1}
          onChange={(e) => setValue1(e.target.value)}
        />
        <input
          type="number"
          value={value2}
          onChange={(e) => setValue2(e.target.value)}
        />
        <button type="submit">Calculate</button>
      </form>
      {result && <p>Result: {result}</p>}
    </div>
  );
};

コントローラ

CalculationsController

require 'open3'

class CalculationsController < ApplicationController
  protect_from_forgery with: :null_session
  
  def calculation
    value1 = params[:value1].to_i
    value2 = params[:value2].to_i

    command = "python app/python/Calculation.py #{value1} #{value2}"
    stdout, stderr, status = Open3.capture3(command)

    if status.success?
      result = stdout.to_i
      render json: { result: result }
    else
      render json: { error: stderr }, status: :internal_server_error
    end
  end
end

Python

Calculation.py

import sys

value1 = int(sys.argv[1])
value2 = int(sys.argv[2])
sum = value1 + value2
print(sum)

補足

CalclationForm.tsx は単純なフォームで、足し算するvalue1とvalue２を入力します。
body: JSON.stringify({ value1, value2 })で送信した2つの数値を

    value1 = params[:value1].to_i
    value2 = params[:value2].to_i

で2つの変数に格納し、

command = "python app/python/Calculation.py #{value1} #{value2}"

でpythonを呼び出して、値を渡しています。app/python/Calculation.py は計算するpythonスクリプトのパスです。

重要なのはこの

require 'open3'

を呼び出している部分で、rubyの、外部プログラムを実行し、その入力・出力・エラー出力を制御するための機能を提供する標準ライブラリです。pythonを呼び出すのに必要になります。

以上