Ruby on Rails でToDoアプリを作ろう（2）

概要

この章ではまず、Ruby on Rails（以下Rails）が全体的にどのような構造をしているのかを学び、その後、自分で保存したタスクの一覧を表示するToDoアプリをつくることで、Railsの基本的な使い方を学習します。

Railsの全体の流れを理解する

Railsを使ってWebアプリを開発していく中で、全体のうち自分がいまどの部分の処理を編集しているのか意識することは極めて重要です。
そこでここではまず、Railsの全体の構造を説明します。

Railsは大まかに表現するとこのような流れでデータを処理しています。

まずブラウザからRailsにアクセスをするとルーターがリクエスト（URL）に応じて、あらかじめ設定しておいた対応するコントローラーを選び動かします。

コントーラーでは、ルーターによって命令されたメソッドを実行し、データベースとのやりとりをするなど色々な処理を実行します。

その後コントローラーはどのビューをブラウザ上に表示させるのかを決め、表示させます。

こうして、ブラウザ上で新しい画面が表示されることによってWebアプリ全体が動くようになります。

ここでは、

という全体的なRailsの流れが掴めいれば大丈夫です。

テスト用のフォルダを作り中身を見てみる

それでは実際にどのようなコードが内部では書かれているのか、テスト用のRailsフォルダを作って中身を見ていきましょう。

Railsフォルダの作成

まずは、自分のPC内にRailsのフォルダを作成します。
ターミナルまたはコマンドプロンプト（以下ターミナル）で任意のディレクトリに移動し、Railsフォルダを作成します。

Railsフォルダの作成の仕方は以下の通りです。

$ rails new <フォルダの名前> -d <データベースの設定>

それでは早速実行しましょう。
ここでは、テスト用のフォルダなのでtest_appという名前にし、データベースはMySQLを使用することにします。

# 任意のディレクトリに移動
$ cd ~/documents

# Railsフォルダの作成
$ rails new test_app -d mysql

#test_appフォルダに移動
$ cd test_app

#gemのインストール
$ bundle install

#データベースの作成
$ rake db:create

rails newコマンドを実行すると、Railsに付随する沢山のファイルやgemが作成されます。

これらをbundle installコマンドを実行することでインストールし、rake db:createコマンドで設定したデータベースを作成していきます。
(データベースの設定はここでは何もいじらないためデフォルトのままです。)

処理が完了したら、もう1度ドキュメントフォルダの中を確認してみてみましょう

$ ls

新しくtest_appというフォルダが増えているかと思います。
そうしましたら早速、test_appを立ち上げてみましょう。

# test_appフォルダに移動
$ cd test_app

#railsの起動
$ rails server

rails serverというコマンドでRailsは起動し、 何も設定を変えていない状態だと、Railsはlocalhost:3000という場所で起動するようになっています。
（localhostとはあなたが今使っているコンピュータに、ブラウザからアクセスをするという意味です。）

早速、localhost:3000にアクセスしてRailsが正しく起動しているか確認してみましょう。

このような画面が表示されたらRailsが正しく起動しています。

railsはターミナルでcontrol + cを押すことで終了できます。

ルーター、コントローラー、ビューを作成する

現在のtest_appの状態では、ルーター、コントローラー、ビューの中身は空っぽの状態になっています。

そこで、それぞれに簡単なファイルを作成してみます。
以下のコマンドを実行してください。

$ rails generate controller home top

これは、Railsのgenerateコマンドを使用して、homeコントローラー内にtopメソッドを作成し、同時にそれに付随するルーターとビューファイルを生成するという意味です。

generateコマンドは以下のように定義することができます。

rails generate controller <コントローラー名> <メソッド名>

ルーターを理解する

それでは、まずはルーターの中身を確認していきましょう。

ルーターはconfig/route.rbに記述されています。

Rails.application.routes.draw do
  get 'home/top'
end

このように記述されているでしょうか。
（コメントアウトされている部分は無視して構いません）

ルートは以下のように定義できます。

<HTTPメソッド> <リクエストURL> => <実行するコントローラー>#<実行するメソッド>

ただし、リクエストURLと実行するコントローラー及びメソッドの名前が一致している場合は、=>以降の記述を省略することができます。

（今回の場合だとget 'home/top' => 'home#top'と記述することも可能）

ここではhome/topにURLのリクエストが来たら、homeコントローラーのtopメソッドを実行しなさいという処理が記述されています。

それとhome/topの前についているgetとはリクエストの種類を表しています。
サーバーからのリクエストにはその目的によっていくつかの種類（HTTPメソッドといいます）に分けられます。

今回ToDoアプリに使用するHTTPメソッドにはgetの他にpostというものがもあるためここでまとめて紹介しておきます。

HTTPメソッドにはこの他にもたくさんの種類があります。 興味のある人は、自分で調べてみると良いでしょう。

コントローラーを理解する

それでは次に、ルーターによってアクセスされたhomeコントローラーのtopメソッドを実際に見てみましょう。
homeコントローラーはapp/controller/home_controller.rbに記述されています。

class HomeController < ApplicationController
  def top
  end
end

このように記述されているでしょうか。

homeコントローラー内に、topメソッドがきちんと記述されているのが確認できるかと思います。

コントローラーはそれと紐付けられているビューファイルを返します。

今回の場合はviews/home/に入っているtop.html.erbファイルをブラウザ上に返すという意味になります。

ビューを理解する

それでは早速ビューの中身を見てみましょう。
topビューはapp/views/home/top.html.erbに記述されています。

<h1>Home#top</h1>
<p>Find me in app/views/home/top.html.erb</p>

このように記述されているでしょうか。

このerbファイルはhtmlファイルにRubyの機能を持たせる事が出来ます。

これに関してはToDoアプリを作る際に必要なので、覚えておくようにしましょう。

それでは、早速topビューがきちんとブラウザ上で表示されていのか確認してみましょう。

Railsを立ち上げ、http://localhost:3000/home/topにアクセスして見ましょう。

$ rails s

#rails serverの省略
#次回からこちらのコマンドを使用します

http://localhost:3000/home/topにアクセス

このように表示されているでしょうか。

localhost:3000にhome/topというリクエストが来た時に、ルーターがhomeコントローラーのtopメソッドを実行。そしてコントローラーがtopビューをブラウザ上に表示させているという一連の流れが確認できたでしょうか。

という全体の流れが少しずつ理解できたかと思います。

ここまで理解できたら、簡単な問題を解いてより理解を深めていきましょう。

問題

• home/topビューを以下のように編集して表示させなさい。

 <h1>トップ画面を表示中！！</h1>

• http://localhost:3000/edition/topにアクセスした時に以下のように表示されるよう編集しなさい。

練習問題を解いています。

タスクを一覧表示するToDoアプリを作成する

それではいよいよタスクを一覧表示するToDoアプリを作っていきます。

###フォルダの作成 まずは、ToDoアプリ用のフォルダを作りましょう。

今回は、todo_appという名前で、データベースはMySQLを使用することにします。

# 任意のディレクトリに移動
$ cd ~/documents

# Railsフォルダの作成
$ rails new todo_app -d mysql

#test_appフォルダに移動
$ cd todo_app

#gemのインストール
$ bundle install

#データベースの作成
$ rake db:create

Railsフォルダができたら、トップページに関するファイルも用意しておきましょう。

$ rails generate controller home top

データベースの準備　

ここまで来たらいよいよToDoアプリに使うデータベースの準備をしていきます。
今回は、ユーザーの入力した「タスク」「期限」「優先度」を保管し表示するためのテーブル(モデル)をデータベースに作成します。

テーブル（モデル）の作成方法は以下の通りです。

$ rails g model <テーブル名> <カラム名>:<データ型>

gというのはgenerateの省略を意味しており、modelというのはテーブルのことです。
カラム名というのは、テーブルの値の項目のことで、エクセルでいうとこの部分のことを指します。

今回、このテーブルには

• タスクの内容を記述する「text」
• 締め切り日を記述する「deadline」
• 優先度を記述する「priority」

この３つのカラムを作成します。

そしてデータ型とは、その名の通りデータの形式を示します。 よく使うデータ型には以下のようなものがあります。

それぞれのカラムに合わせて適切なデータ型をあらかじめ選ぶ必要があります。

それでは早速今回のToDoリストに使うテーブルを作成していきましょう。

以下のコマンドを実行してください。

$ rails g model tasks text:text deadline:string priority:string

これによって、

• text型のtextというカラム
• string型のdeadlineというカラム
• string型のpriorityというカラム

を持つtasksというテーブルを作成しました。

テーブルの作成が済んだら以上の設計をデータベースに反映させるために、以下のコマンドを実行してください。

$ rake db:migrate

こちらの実行が完了したら、実際にデータベースに新しいテーブルができているか確認してみましょう。

MySQL Workbenchを立ち上げ、local instanceを開いてください。

todo_app_development内にtasksというテーブルが新しく作成されており、コラムに「text」「deadline」「priority」が入っていることが確認できるかと思います。
（デフォルトで「id」「created_at」「updated_at」は設定されています。）

テーブルにデータを入力する

それでは早速、tasksテーブルにデータを入れていきましょう。

以下のコマンドを実行してください。

$ rails console
$ task = Task.new(text:"勉強をする", deadline:"2018-11-2", priority:"high")
$ task.save

rails consoleで、コンソールモードを開けることができます。
このコンソールモードではデータの保存やRubyのプログラムを書いたりなど様々な事ができ、ここではデータを保存する処理を実行しています。

このTasksというのは先ほど作成したテーブルのことを指しており、newメソッドを使用することで、新しくそれぞれのカラムに対してデータを入れることができます。

実行が完了したらMySQLWorkbenchを使ってデータベースの中身を確認してみましょう。

このようにデータが保存されている事が確認できれば完了です。

###問題 新しく、下にあるデータを保存してください。
また、MySQLWorkbenchを使ってデータが正しく保存されているか確認してください。

text     ＝ 掃除をする
deadline = 2018-11-3
priority = low

コントローラーの編集

それではいよいよデータベースからデータを取得する処理を作成していきましょう。

コントローラーがブラウザに表示するビューファイルを選択するときに、そのコントローラーのメソッド内で変数を指定すると、その変数をビュー側で使うと言う事が出来ます。

それでは試しにコントローラーファイルとビューファイルを以下のように編集をし、正しく変数の受け渡しができているか確認してみましょう。

def top
	@task = "勉強をする"
end

<%= @task%>

erbファイルは<% %>または<%= %>を使うことで、その中にRubyのコードを記述することができます。

(通常、<% %>の方は結果を出力しない計算や繰り返し処理などのRubyコードを記述するのに使用し、<%= %>の方は文字列を出力するような処理で使用します。)

今回の場合は、コントローラーから受け取った@taskという変数をビューに表示するために使用しています。 (<% %>でRubyのコードを記述する場合は結果が文字列として出力されないので注意してください。）

実際に、http://localhost:3000/todo/topにアクセスしてみて、「勉強する」と表示されたでしょうか。

このように、コントローラーのメソッド内で値を取得したり、変数を定義したりすることによってそれをビューファイルでも使えるようにすることが可能になります。

今回のToDoアプリの場合は、データベースにある値を全て所得する必要があるので、コントローラー内を以下のように編集してください。

def
	@tasks = Task.all
end

ここではテーブル名.allを利用してtaskテーブルから全てのデータを取得し、@tasksという変数に格納しています。

それでは早速、ビューから値が所得できているのか確認したいところですが、このまま<%= @tasks%>とビューに記述しても正しく値は表示されません。

それは、取得できるデータが以下のようなハッシュ配列であり、正しく表示させるためにはビューで形を整える必要があるからです。

[ 
  {text:"勉強をする" deadline:"2018-11-2" priority:"high"},
  {text:"掃除をする" deadline:"2018-11-5" priority:"low"}
]	

ビューの作成

それではこのコントローラーで取り出したデータが正しく表示されるよう最後にビューファイルを編集していきましょう。

トップページのビューファイルを以下のように編集してください。

<%  @tasks.each do |task| %>
  <% if task[:priority] == "high" %>
    <span class="redbox">
			<%= task[:text] %>
      <span class="deadline">
        <%= task[:deadline] %>
      </span>
		</span>
  <% else %>
    <span class="graybox">
			<%= task[:text] %>
      <span class="deadline">
        <%= task[:deadline] %>
      </span>
		</span>
  <% end %>
<%  end %>

それでは、コードの中身を順を追って説明していきます。

まず、eachメソッドを使って、@tasksに格納されているデータを１つ１つtaskとして取り出しています。

eachメソッドは以下のように定義できます。
eachメソッドは今後も多くの場面で出てくるのできちんと使えるようにしておきましょう。

オブジェクト.each{|変数|
  実行する処理1
  実行する処理2
}

次に、if文を使ってtaskのpriorityの値ごとに処理を分岐させていきます。
今回は、priorityの値がhighだった場合は、classが”redbox”のspanタグ内にtaskの内容を表示させ、それ以外の場合はclassが”graybox”のspanタグ内にtaskの内容を表示させています。

次はscss(css)の編集です。

$ rails g controller home top

実はこのコマンドをした際にはscssファイルも作成されています。
それでは、こちらのscssファイルを以下のように編集してください。

.redbox{
  margin: 10px;
  padding: 5px;
  background-color: #FF0000;
  font-size: 60px;
  display: block;
}
.graybox{
  margin: 10px;
  padding: 5px;
  background-color: #b6b6b6;
  font-size: 60px;
  display: block;
}

.deadline{
  text-align: right;
  font-size: 20px;
  display: block;
}

scssの使い方等に関してはここでは説明しませんが、何かわからないことや気になることがあれば実際に、値を自分で変えて変化を確認するとよく内容が理解できるかと思います。

実際の画面を確認する

ここまでデータベース、コントローラー、ビューの編集がそれぞれ完了したら、実際にToDoアプリの一覧ページが正しくブラウザ上に表示されるか確認していきましょう。

ターミナル上でrailsを立ち上げ、localhost:3000/home/topにアクセスしてください。

このように表示されていれば完了です。

これで、データベースからデータを取り出し、それを一覧ページとして表示する機能まで完了しました。 お疲れ様でした。

ただし、このままでは、毎回コンソール画面からデータベースに直接タスクを入力する必要があったり、編集機能や削除機能が付いていなかったりとまだまだToDoアプリとして完成とは言えません。

そこで次の章では、

• 新規登録機能

• 編集機能

• 削除機能

とToDoアプリには無くてはならない機能を実際に作成をしていきます。

問題

• priorityの値がnomalの場合は、緑色のボックスに入れて表示するようしなさい。