【Ruby on Rails】ToDoアプリを簡単に作ってみる　～ その1. index new create ～

Ruby

RailsでのHello Worldが終わりました。

Railsのチュートリアルも一応登り切りました。

ここで、もう一度チュートリアルを登ってみてもいいのですが、もう少し簡易な基礎練みたいなものを作って、短いサイクルで反復するのもいいのかなと思い立ち、ToDoアプリを作ってみることにしました。

このアプリの要件（ゴール）

  • 0から始めて数時間で作り終わるもの
  • 基本的なCRUDが全部揃っていること（index, new, create, show, edit, update, destroy）

これだけとしました。検索やユーザー認証、閲覧権限とかはまた別の基礎練としたいと思います。

要するにはscaffoldを自分で全部実装することを基礎練にするということですね。

ではでは、アプリを作っていきます。

プロジェクトの作成

ここを参考にして、作成してください。

プロジェクト名は「todoApp」としました。

modelの作成

modelは単数形で作成します。ToDoアプリなので、タスクを以下のようにモデリングしました。

  • モデル名：task
    • title：string
    • description：text

それを、generateコマンドで生成します。

$ rails generate model task title:string description:text

では、マイグレーションします。

$ rails db:migrate

controllerの作成

controllerはmodelの複数形で作成します。generateコマンドで一発です。

$ rails generate controller tasks

indexアクションの定義

それでは、まずはトップ画面へアクセスしたときに発生するindexアクションを app/controllers/tasks_controller.rb で定義します。indexではすべてのタスクを Task.all で取得しています。

app/controllers/tasks_controller.rb

class TasksController < ApplicationController
  def index
    @tasks = Task.all
  end
end

viewの作成

すべてのタスクが格納された@tasks変数をview上で表示します。現状ではviewのファイルは生成されていないので、以下のコマンドで作成しておきます。（ファイル名は、[アクション名].html.erb）

$ touch app/views/tasks/index.html.erb

生成したファイルに以下のコードを書いておきます。

app/views/tasks/index.html.erb

<h1>タスク一覧</h1>

<table>
  <thead>
    <tr>
      <th>タスク名</th>
      <th>説明</th>
    </tr>
  </thead>

  <tbody>
    <% @tasks.each do |task| %>
    <tr>
      <td><%= task.title %></td>
      <td><%= task.description %></td>
    </tr>
    <% end %>
  </tbody>
</table>

ルーティングの設定

ルーティングはconfig/routes.rbにて設定します。

config/routes.rb

Rails.application.routes.draw do
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  resources :tasks
end

resource :tasksとすることで、ルーティングの設定がなされます。
設定したルーティングを確認してみます。rails routesとコマンドを入力することで現在のルーティングを確認できます。

$ rails 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

必要なアクションと、それに対応するURIパターンがREST形式で定義されます。たった一行でここまでやってくれるのすごいですねRails。

とりあえず作成したViewを見てみる

RailsではpumaというWebサーバーがデフォルトで使えるので、ちょっと検証したいという時に利用すると便利です。
以下のコマンドでWebサーバーを立ち上げることができます。

$ rails server

その後、localhost:3000/tasksにアクセスすると、作成したviewを見ることができます。今のところはまだタスクも0個ですし、タスクを作るためのアクションも定義していないので、非常に殺風景ですね。

new createアクションを定義

次に、タスクを作成するアクションnewとcreateを作成します。
まずはcontrollerにアクションを定義します。

app/controllers/tasks_controller.rb

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 tasks_path
    else
      render 'new'
    end
  end

  private
  def task_params
    params.require(:task).permit(:title, :description)
  end
end

strong parameterについて

許可するパラメータをホワイトリスト形式で準備しておき、それを基に検証を行うことができます。

def task_params
  params.require(:task).permit(:title, :description)
end

上記コードは、「params が :task というキーを持ち、params[:task] は :title 及び :description というキーを持つハッシュであること」を検証します。
定義したホワイトリストをTask.new(task_params)とnewするときに引数で指定してやることで、悪意のあるパラメータが含まれたリクエストが送信されたとしても、安全に処理することができます。

新規タスクを登録するviewを作成する

新規タスクを登録するviewを作成します。先ほどのように、以下のコマンドにてファイルを作成し、中身を記述します。

$ touch app/views/tasks/new.html.erb

app/views/tasks/new.html.erb

<h1>新規タスク</h1>

<%= form_for(@task) do |f| %>
<div class="field">
  <%= f.label :title %><br>
  <%= f.text_field :title %>
</div>
<div class="field">
  <%= f.label :description %><br>
  <%= f.text_field :description %>
</div>
<div class="actions">
  <%= f.submit %>
</div>
<% end %>

<%= link_to 'Back', tasks_path %>

@taskはnewアクションにて@task = Task.newで生成されており、それによって生成されたフォームは、submitはメソッドがPOSTで、createアクションを叩くことになります。

さて、先ほど$ rails routesのコマンドにてルーティングを確認した際、newアクションへのリンクが表示されているので、それを参照し、indexのページに新規作成へのリンクを貼ります。（new_task_pathです）

app/views/tasks/index.html.erb

<h1>タスク一覧</h1>

<table>
  <thead>
    <tr>
      <th>タスク名</th>
      <th>説明</th>
    </tr>
  </thead>

  <tbody>
    <% @tasks.each do |task| %>
    <tr>
      <td><%= task.title %></td>
      <td><%= task.description %></td>
    </tr>
    <% end %>
  </tbody>
</table>

<%= link_to 'New', new_task_path %>

タスク新規登録の動作確認

先ほどと同じように、Webサーバーを立ち上げて、実際の動作を見てみましょう。
localhost:3000/tasksにアクセスすると、「New」へのリンクがあります。

「New」をおすと、新規タスクの登録画面へと移動します。必要事項を入力し、「Create Task」を押すと、

無事タスクを登録することができました。

ここまでで、index、new、createの実装が終わりました。
その他のアクションについては、次回へ続きます。

コメント

タイトルとURLをコピーしました