2021/06/07

【初心者向け】Ruby on Rails で四則演算を処理をしてみた！

Ruby on Railsでアプリを作成していると、どうやって計算を実行するのだろう？と不思議に思ったことはありませんか。Ruby については計算はできるし、ググればいくらでも関連資料は見つかるのですが、Ruby on Railsで計算をするとなると、とたんに手が止まるのではないでしょうか。

折角のアプリが計算できないだけで、料理メニューなどは作成できずボツになってしまいます。

この記事を読むことで、四則演算ができるようになり、アプリ開発に奥行きができるでしょう。

結論から言いますと、controllerで計算し、viewへ結果を送って表示させます。

では実際に、作成してみましょう。

今回は、初心者が作る定番のblogアプリの記事投稿欄に数字を２つ投入し、いったんmodelのデータベースに格納し、その２つの数字をデータベースから読み出し、変数に格納して計算します。

完成はこんな感じです。

ＴＯＰページを作成しよう

その前に、MVCについて確認しておきましょう。アプリを作成するのに大切なアーキテクチャとなります。

Ruby on railesのMVCとモデルの役割を知ろう!

まずはトップページを作りましょう。計算をクリックすると二つの数字を投入する画面に遷移します。アプリ名をkeisanとします。

>rails new keisan

ディレクトリーをkeisanに移動し、 bundle install を実行します。

>cd keisan

 >bundle install

keisan>config>routes.rb

まず、routesを書きます。loalhost:3000をたたくとtopページになるようroot “welcome#index”を追加します。

 get 'welcome/index'
root "welcome#index"

welcome というコントローラを作ります。アクションはindexとしましょう。

>rails g controller welcome index

>rails g controller keisans

index 　アクションを作成しましょう。

KeisanController < ApplicationController 
  def index
  end
end

このままでは、viewがないとエラーがでるので作ります。

app>views>welcome>index.html.erb

とりあえず、このようにしておきましょう。

計算にリンクをつけて投入画面に飛ぶようにします。

<div class ="top">

　　<h2>Welcome 四則演算へ</h2>

　　<%= link_to "計算", new_keisan_path %>」
</div>

数字の投入画面を作ってみよう

ここからが本番です。２つの数字をデータベースへ格納するためにviewに数字を入力できるようにフォームを作成します。

まずroutesへ追加します。

keisan>config>routes.rb

resources :keisans

controllerの作成

次はcontrollerでしたね。

>rails g controller keisans

new アクションを作ります。

keisans controller にnew アクションを作ります。

def new

end

viewの作成

newアクションでview　に飛ぶのでviewを作ります。

app>view>keisans>new.html.erb

ではどのように書くのでしょうか。

form for というデータを飛ばす型があります。これで行先を指定することで投入したデータを目的先まで飛ばしてくれます。

それと、数字を投入するためのnumber_fieldで数字を投入できるようになります。text_fieldは文字ですので気を付けてください。

<p>計算をするので数字を入力してください。</p> 
<%= form_for :keisan,url: keisans_path do |f| %> 
<p> 

 <%= f.label :number1 %><br>
 <%= f.number_field :number1 %>

</p>
<p><%= f.label :number2 %><br> 

<%= f.number_field :number2 %><>
</p>
<p> 
<%= f.submit %>
</p>
<% end %>

TOPページの計算ボタンを押してみましょう。

create の作成

データの飛び先は、create になりますので、

Controllerにcreate アクションを作成します。

index、newの下に書きます。

class KeisansController < ApplicationController
 def index 
 end 
 def new 
 end 
 def create
 end
end

modelの作成

投入画面で投入した数字を一旦、データベースに格納します。そのためには、データを格納するmodelを作ります。ブログのように、テキストでないので、変数の型はintegerとなります。

>rails g model keisan number1:integer number2:integer

データベースを作成します。

>rake db:migrate

これでデータベースの準備ができましたので数字が保存できます。

コードを確認しておきましょう。Controllerのnewの下に次のように書きます。

def index
end

def new
end

def create
  @keisan = Keisan.new(keisan_params)
  @keisan.save
  redirect_to keisan_path(@keisan) 
end

 def keisan_params 
    params.require(:keisan).permit(:number1, :number2) 
 end

投入した数字は保存され、redirect_to で計算を行うcontrollerのshowアクションに渡されます。そして計算を行います。

この図の赤線の左にある、keisanに_path　をつけることで赤線の右にあるKeisans＃showへ飛ぶことができるのです。コマンドプロンプトの　＞rake routes で確認できます。

それでは、Controllerにshowアクションを作成しましょう。

結果を画面に表示しよう

@number1に投入画面でnumber1に投入した数字、@number2に投入画面でnumber2に投入した数字をデータベースから代入します。@tashizanは足し算、@hikizanは引き算、@kakezanは掛け算、 @warizanに割り算の計算した結果を代入します。

def show
 @keisan = Keisan.find params[:id] @number1 = @keisan["number1"] 
 @number2 = @keisan["number2"] 
 @tashizan = @number1 + @number2
 @hikizan = @number1 - @number2
 @kakezan = @number1 * @number2 
 @warizan = @number1 / @number2
end

そして@tashizan@hikizan@kakezan @warizanをviewに表示します。割り算は０で割れないので、@number2が０の時は、分岐するよう工夫してみましょう。

また、割り算で@number1 % number2 とすると余りを表示することができます。

＾はべき乗の計算をするときに使います。計算する内容に合わせて変更すればいいでしょう。

app>views>keisans

<p>結果</p>

 <%= @keisan.number1 %> +  <%= @keisan.number2 %> =   <%= @tashizan %> <BR> 
 <%= @keisan.number1 %> -  <%= @keisan.number2 %>  =  <%= @hikizan %> <BR>
 <%= @keisan.number1 %> *  <%= @keisan.number2 %> = <%= @kakezan %> <BR>
 <%= @keisan.number1 %> /  <%= @keisan.number2 %> = <%= @warizan %> <BR>

計算結果がviewに表示されました。

まとめ

TOPページの作成しよう
数字の投入画面を作ってみよう　（controller、view、modelの作成）
結果を画面に表示しよう

いかがでしょうか。ブログを作るような感覚で計算ができるようになりました。これで料理の注文が取れたり、日々の体重を記録して平均を出すアプリが作成できることでしょう。

compute