Railsのまとめ7(ToDoアプリ作成1)

コメントを残す

TODOアプリを作ろう!

0:機能はなにがある？

新規追加機能が付いている

それぞれに編集機能と削除機能がついている

空文字を認めない(ストロングパラメーター)

5文字以上じゃないとタイトルを入力してくださいと言う文字列を返す

チェックボックスを押すと更新しなくてもサーバーと通信をして動的処理を行うAjax機能を付ける

cloud9で開発する

1:環境構築

ターミナルで以下をコマンド

ジェムをインストール(rails)
gem install rails --version="5.1.4" --no-document

バージョンチェック
rails -v

touch rails_projects

cd /home/ec2-user/environment/rails_projects/

プロジェクトの作成するよ！
rails new todo
cd todo

コントローラー作成するよ！
rails g controller Tasks

2:モデル名「Task」を作成

大文字で単数であることに注目

rails g model Task title:string done:boolean

後ろはデータベースの構造を指定している
タイトルはカラム名でStringはデータの型を指定している、
doneはタスクの完了の状態を保持するカラム、
真偽値をとるためbooleanを型としている。

db/migrate/2021***********.rbにcreate_tasksが生成される

t.boolean :done, default: false #追加

3:DBスキーマ(DBの構造)をDBに反映させる

rake db:migrate

データベースを見るとき

rails db

sqlite> .schema
CREATE TABLE "schema_migrations" ("version" varchar NOT NULL PRIMARY KEY);
CREATE TABLE "ar_internal_metadata" ("key" varchar NOT NULL PRIMARY KEY, "value" varchar, "created_at" datetime NOT NULL, "updated_at" datetime NOT NULL);
CREATE TABLE "tasks" ("id" INTEGER PRIMARY KEY AUTOINCREMENT NOT NULL, "title" varchar, "done" boolean DEFAULT 'f', "created_at" datetime NOT NULL, "updated_at" datetime NOT NULL);

↑で設定がわかる
.exitでsqliteから出る

4:初期データを作成する

rails コンソールを使うモデルの操作やデバッグに便利

rails console
Task.create(title: "test1")
Task.create(title: "test2")
exit
モデルなので大文字なことに注意しよう

5:ルーティングを設定しよう！

config/routes.rb

#↓よく使う一般的なルーティングをまとめて生成してくれる
resources :tasks
root 'tasks#index'
#↑rootURLでアクセスしたときtasksコントローラの
#インデックスアクションメソッドを実行するということ。
rake routes

Prefix    Verb   URI Pattern         Controller#Action
tasks     GET /tasks(.:format)          tasks#index
          POST /tasks(.:format)         tasks#create
new_task  GET /tasks/new(.:format)      tasks#new
edit_task GET /tasks/:id/edit(.:format) tasks#edit
task      GET /tasks/:id(.:format)      tasks#show
          PATCH /tasks/:id(.:format)    tasks#update
          PUT /tasks/:id(.:format)      tasks#update
          DELETE /tasks/:id(.:format)   tasks#destroy
root      GET    /                      tasks#index

Prefix: プログラムを書く時にパスを指定するのに使う。
URL パターン ：それぞれのURLにアクセスした時に 行われるアクション

6:一覧画面のコントローラーを開発

app/controller/tasks_controller.rb

def index
  @tasks = task.all
end

@tasksはテンプレート変数と呼ばれテンプレートファイルに埋め込める値、
つまり、ビューにはインスタンス変数を渡すために使うアクションメソッドにデータを受け渡す。
Task.all タスクステーブルからすべてのレコードを取得する。

7:一覧画面の開発

app/views/tasksフォルダ内にindex.html.erbを作成して
app/views/index.html.erbで以下の記述を追加します。

<h1>TODOアプリ</h1>
<ul>
  <% @tasks.each do |task| %>
    <li>
      #check_box_tagはHTMLのチェックボックスを作るヘルパー
      <%= check_box_tag '', '' %>
      <%= task.title %>
     </li>
  <% end %>
</ul>

ルビーが埋め込めるテンプレートで<%　%>や<%= %>で囲まれた部分にRubyを使うことができる。

@tasksは複数のデータが入っているので、それぞれeachで1個ずつ取り出しながら空のチェックボックスとデータベースのtasksテーブルのタイトルカラムのタイトルを出力

<%任意のコード%>任意のコードを実行したいときに使うよ

<%=何らかの値を返す式　%>なにか出力したいときに使うよ

rails sにて確認ブラウザで確認して↓のようになればOK！

8:新規追加画面の開発

views/tasks/index.html.erbで

link_toでハイパーリンクを追加するヘルパーで新規追加にリンク機能をつけるよ

<%= link_to ‘新規追加’, new_task_path %>
※まだリンク先を作ってないため押すとエラー

app/views/tasksにリンク先の新規ファイルnew.html.erbを作成するよ

app/views/new.html.erbに以下の記述を追加する

<h1>新規追加画面</h1>
  <%= form_for @task do |f| %>
   <p>
    <%= f.label :title %> <br>
    <%= f.text_field :title %>
   </p>
 <p>
  <%= f.submit %>
 </p>
<% end %>

ｆは変数だよ
form_forがモデルに関連したフォームを作るヘルパー
f.label: HTMLのラベルタグ相当
f.text_field: テキストボックス
f.submit: サブミットフォームを作る

新規追加画面が作成されたらOKだよ

9:新規追加機能の開発

tasks_controllerでnewアクションを追加

def new
  @task = Task.new
end

インスタンス変数@taskを定義して
new.html.erbの@taskにラベルとテキストボックスと
submitボタンを生成させるインスタンスを作る。

保存ボタンを押した時にテキストボックスに入力した値を
サーバに送信してデータベースに保存させる。

tasks_controllerに追加tasks_paramsはセキュリティ対策でやっているよ

def create
  @task = Task.new(task_params)
end

 private
  def task_params
    params[:task].permit(:title)
  end
end

#paramsにはフォームから送られたデータが入っているフォームから
#送られてきたデータのうちtitleカラムのみデータに保存するようにしている

次にtasks_controllerのcreateアクションに記述を追加するよ

def create
  @task = Task.new(task_params)
   if @task.save
     redirect_to root_path
   else render 'new'
end

@task.saveでデータベースの書き込を行う
セーブできたらルートURLに飛ばす redirect_to root_path
失敗したら新規登録画面に飛ばす render ‘new’

tasks_controllerがこうなっていればOKだよ↓

class TasksController < ApplicationController

  def index
    @tasks = Task.all
  end

  def new
    @task = Task.new
  end

  def create
    @task = Task.new(task_params)
      if @task.save
        redirect_to root_path
      else
    render 'new'
    end
   end

  private

  def task_params
    params[:task].permit(:title)
  end
end

10:バリデーションの追加

次にバリデーション(予め規定された条件や仕様になっているか検証すること。)を追加
空白や5文字以内でない時にエラーを返すのを付加するよ

app/models/task.rbで以下の記述を追加するよ

class Task < ApplicationRecord
  validates :title,
  presence: { message: 'タイトルを入力してください!'},
  length: {minimum: 5, message: '5文字以上で入力してください！'}
end

ユーザーに対してエラーメッセージを返す

app/views/tasks/new.html.rbに

<h1>新規追加画面</h1>
  <%= form_for @task do |f| %>
   <p>
    <%= f.label :タイトル %> <br>
    <%= f.text_field :title %>
     <% if @task.errors.any? %>
      <%= @task.errors.messages[:title][0] %>
     <!--エラーが2つのため[0]-->
     <% end %>
    </p>
  <p><%= f.submit %></p>
<% end %>

このようにして
if @task.errors.any?はタスクスモデルで何かしらエラーが起きていたらtask.rbのメッセージが表示されるようになる。

その8に続きます

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です