【全国緊急事態宣言でやることない人】Railsでフォーム送信

どうもこんにちは。

どせぜんです。

ここ2日ちょっと学校の方が立て込んでで死んでました。

どせぜん

どうも、どせぜんです。


緊急事態宣言が全国に向けて発令された、ということで、さらに在宅勤務の需要は高まり、プログラミングのスキルの需要も高まるんじゃないかと考えています。

しかし、今の僕にはスキルがまだまだないので、クラウドワークスランサーズ などのフリーランスマッチングサイトを利用して案件が獲得できるということを当面の目標にしようかな、と考えています。

プログラミングだけではなく、様々な案件があるので、気になった方は登録だけでもしてみると面白いかもしれません。


それでは、全国緊急事態宣言にも負けず、本日もSKillHacksやっていきましょう。


今日はページを開いた人に何かを入力してもらい、入力された値に対して何か処理をする、ということに関する勉強をしました。

フォームの送信と処理

<%= form_tag("/create") do %>
    <%= text_field :form_test, :age %>
    <%= submit_tag "送信" %>
<% end %>


ここで、form_tagっていうプログラムを使うと、doからendの間に、ぶち込まれてるパーツから、自動的にフォームを作ってくれます。

そしてRailsでフォームを作ると、自動的にサーバー攻撃されないようにフォームを作るみたい。すごいRails。


さらにここで form_tag で “/create” と指定することで、routes.rbにある “/create” での処理に繋げることができます。

Rails.application.routes.draw do
  get "/form_practice", to:"forms#form_test"
  post "/create", to:"forms#input_age"
end

ここで、

get はURLにアクセスされたときに何か処理をするときに使います。

post は送られたデータを処理するときに使います。


さらにここで、Rubyでやったハッシュが応用されます。

ハッシュは実は2段階構造にもできるんです。

params = {"form_test" => {"age" => 22, "country" => "japanese"}}

puts params["form_test"]["country"]


つまり、form_test の中のさらに country という指定の仕方もできるってことですね。奥が深い。


そして、ここでインスタンス変数を用いると、入力された値を表示するときに役立ちます。
そう、routes.rb からview に値をインスタンス変数にぶち込んで渡せばいいのです。便利オブ便利。

class FormsController < ApplicationController
    def form_test
        
    end
    def input_age
        @age = params["form_test"]["age"]
    end
end



そしてそして、以上の知識から、こんなフォームが作れちゃいます。

情報を入力して送信すると、


こんな感じに入力された情報を表示させることができました。

今まで学習してきたことで、簡単にこんな物が作れるだなんて、夢が広がりまくりですね。

ヘルパーの作成


さっきみたいに form_tag と入力するだけでフォームを作ってくれたりするものは、Railsが予め作ってくれてるもので、ヘルパーと呼びます。確かにめっちゃ助かるからヘルパーって名前覚えやすいわ。

そんなヘルパーを作っちゃおうって感じです。

ヘルパーを作っておくことで、繰り返す処理をまとめておけるので、コードを書くのも楽になるし、見た目も格段に見やすくなります。


例えば、
20歳以上対象のサイトで、年齢によって表示される文章を変えたいときは、helpersフォルダ内にある forms_helper.rb の中身をいじって、

module FormsHelper
    def hello(name)
        "こんにちは" + name + "さん"
    end
    def chack_age(age)
        if age.to_i >= 20
            "Welcome! Have fun!"
        else
            "このサイトは20歳以上対象です。"
        end
    end
end


formによって送信される年齢を if文にぶち込んで、20歳以上と20歳以下で表示される文章を変えてやればいいですね。

ここで注意が必要なのは、フォームで入力された値は文字として渡されるため、値を比較するには数字に変える必要があります。

そのため、age の最後に .to_i として、integer(整数)に変換しています。

そうして作成したフォームの結果がこちら。

年齢に20歳として入力すると、

無事、歓迎されました。

一方、年齢に19歳と入力して送信すると、


「このサイトは20歳以上対象です。」と表示されました。


このように、フォームに入力する値を view に渡すこと、さらに渡された値から条件分岐した処理をすることができました。

さらに、この処理をヘルパーにまとめることで、コードも見やすくなりました。

ということで、次回はこれらの知識を利用して、足し算アプリを作ります!!!


乞うご期待!!


〜Skill Hacksが気になった方〜
-Skill Hacks- 動画で学ぶWebアプリ開発講座


〜迫さんは他にも色々やられてるみたいです〜

-Design Hacks- 今日から使える実践デザイン講座

-FrontHacks- フロントエンドプログラミング

-PHP Hacks- PHPプログラミング学習講座

-DietHacks- 現役パーソナルトレーナーのオンラインダイエット講座

-Instagram Hacks- 現役法人コンサルが教えるインスタ運用術

-Blog Hacks- 完全サポート付きブログ講座

-Movie Hacks- YouTubeに特化した動画編集講座

コメントを残す

メールアドレスが公開されることはありません。