”未経験からフリーランスのwebエンジニアを目指す”diary

学習内容やフリーランス活動を記事にします!

個人アプリ開発の全工程-3(ユーザ数値入力画面/結果表示画面の実装*DB保存なし)

プログラミング学習開始から:60日目
TECH::EXPERT開始から:25日目
ーーーーーーーーーーーーーーーーーー

シリーズ3回目。今回はユーザ数値入力画面と結果表示画面の実装についてです。 わざわざ、DBに保存することなく、入力値を基にその結果を表示するように実装しました。

ちなみに今のところの画面遷移イメージはこんな感じです。

gyazo.com

まずはモデル作り

DBにデータを保存しない場合でもモデルは必要になりますのでrails g model コントローラ名でモデルを作成。
そして、rails db:migrateですね。登録はしなくても、 マイグレートしないとエラーがおきます。

次はリクエスト、モデル、コントローラ、ビューに記載

リクエスト(.html.haml)
= form_for @function, url: '/functions/result' do |f|
  .field
    .field-label
      = f.label :input1
    .field-input
      = f.text_field :input1
  .field
    .field-label
      = f.label :input2
    .field-input
      = f.text_field :input2
  .actions
    = f.submit

form_forで記載しています。

モデル
  include ActiveModel::Model
  attr_accessor :input1, :input2

DBにカラムを追加していない(追加する必要がない)ため、attr_accessorでモデルで変数(input1,input2)を定義します。 ”include ActiveModel::Model”はRailsガイドによると

ActiveModel::Modelをincludeすると、以下のような機能を使えるようになります。 モデル名の調査 変換 翻訳 バリデーション

コントローラー
def show
    @number = params[:id]
    @function = Function.new
end

def result
    function = params[:function].permit(:input1, :input2)
    @function = Function.new(function)
    render functions_result_path
end

showアクションで空っぽのインスタンス変数@functionを生成します。 resultアクションでは、前述のviewのform_forで数値を受け取って(リクエスト)、@functionに再代入し、それをresultアクションへ連携します。そして結果表示画面をrenderします。

ビュー
"#{@function.input1}"
"#{@function.input2}"

これで、DBに保存することなくユーザが入力画面で入力した値を結果表示画面に表示させることができました。
次は計算アルゴリズムを考えます!

TO BE CONTINUED,,,