(cache)ビューについて【Ruby on Rails5】 - さらなる高みへ -higher ground -

ここでは

ビューの役割
ビューにデータを渡す方法

について学んでいく。

ビューとは

ビューの役割は、ユーザーが見るためのHTMLを組み立てることある。結果が目に見えやすいため、比較的理解しやすい機能である。

ビューの動作の仕組み

Railsのビューでは、データベースから取得したデータを表示させる必要がある。
しかし、HTMLで学んだようなHTMLだけでは毎回同じ内容を表示させることしかできない。
そのため用意されているのがERBという仕組みである。

ERBとは

ERBはEmbedded Rubyの略で、簡単にいうとHTMLにRubyのコードや変数を埋め込める仕組みである。

以下の手順で、データベースの内容をブラウザで表示させることができる。

ビューファイルに、「固定で表示させる文字」と「データベースの内容を埋め込む位置」を指定する。
コントローラーのファイルで、ビューに表示させたいデータベースの内容を変数に格納する。

これだけでは少しイメージしにくいため、あとで実際にコードを書きながら確認する。

ビューファイルが呼ばれる仕組み

コントローラーのアクションが実行されると、その後に対応するビューファイルを自動で呼び出す仕組みになっている。
この対応関係は、ファイルの「名前」によって紐づいている。

実行されるコントローラー名	アクション名	呼ばれるビューファイル
tweetsコントローラー	index	views/tweets/index.html.erb
tweetsコントローラー	new	views/tweets/new.html.erb
commentsコントローラー	create	views/comments/create.html.erb

例として、上の表の1番上であるが、tweetsコントローラーのindexアクションが実行されると、そのあとにtweetsフォルダのindex.html.erbが読み込まれる、というように名前でつながっている。

ビューファイルの作成

index.html.erbというファイルを以下のディレクトリに作成する。ファイルにはまだ何も記述しなくてOK。

app/views/tweets/index.html.erb

ビューファイルを編集する

ビューファイルを作成したが、今の状態だとビューファイルの中身が白紙なので、真っ白のページしか表示されない。
これからビューファイルを編集していく。

app/views/tweets/ index.html.erb

<p>Hello World!</p>

ここまでの結果を確認する

ここまでで、ルーティング、コントローラー、ビューの設定をした。
正しく動作するか確認してみる。

・ターミナル

$ pwd
# 「/home/ec2-user/environment/pictweet」にいることを確認

$ rails s 
# サーバの起動

pwdを実行して、カレントディレクトリがpictweetでなかった場合は、以下のコマンドを実行する。

$ cd ~/environment/pictweet

仮想サーバーが正しく起動できていれば、以下の様な出力結果が表示される。

=> Booting Puma
=> Rails 5.2.1 application starting in development 
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.0 (ruby 2.5.1-p57), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:8080
Use Ctrl-C to stop

rails s コマンド

アプリケーションを動かすためにはサーバーを立ち上げる必要がある。
「rails s」コマンドはアプリケーションを動かすための「仮想サーバー」を起動するためのコマンドである。
rails sのsとはserverを省略したもの。

仮想サーバーとは、物理的には存在しないサーバーをソフトウェア上でシミュレートするプログラムである。
Railsアプリを動かすにはサーバーが必要となるが、仮想サーバーを利用すれば「rails s」とコマンドを打つだけで動作を試すことができ便利である。

トップページを確認する

サーバーを立ち上げたら、メニューの「Preview」->「Previwe Running Application」をクリック。
下記のアイコンをクリックすると別ウィンドウでアプリを確認することができる。

これは、あるべきデータベースが見つからないというエラーである。データベース自体はまだ使わないが、先に作ってしまう。詳しい内容は後述する。

新しいターミナルを開く

データベースの作成は、ターミナルでコマンドを入力する必要がある。
しかし、先ほど仮想サーバーを起動しているため、この状態でキーの入力をすることはできない。

そのため、もう一つターミナルを開いてそこで入力を行うのである。

これからも、仮想サーバーの起動中にコマンド入力が必要なことが多くあるためターミナルを２つ開いておくと作業効率がよくなる。
なお、最初ターミナルを開いたときはカレントディレクトリがホームディレクトリになっている。必ず使用中のアプリに移動する。

データベースの作成をする

続いてデータベース作成のコマンドを入力する。

$ rails db:create
Created database 'pictweet_development'
Created database 'pictweet_test'

次に該当するURLを指定する。
以下の手順を行なって、エンターキーを押す。

①アプリが表示されているURLから、「？」以降を削除する。
②代わりに「tweets」と入力する。

「https://e7031262303f4fae946cd15d8c709acc.vfs.cloud9.ap-southeast-1.amazonaws.com/tweets」
URLがこのような表記になればOKでエンターキーを押す。

仮想サーバーの終了

rails sコマンドで立ち上げたサーバーは「control + c」でシャットダウンできる。
サーバーを立ち上げたままだとコマンド入力などはできないので、仮想サーバーでの確認作業が終わったらシャットダウンする。

例

^C[201X-XX-XX XX:XX:XX] INFO  going to shutdown ...
[201X-XX-XX XX:XX:XX] INFO  WEBrick::HTTPServer#start done.
Exiting

要点チェック

ビューの役割は、ユーザーが見るためのHTMLを組み立てること。ERBはEmbedded Rubyの略で、これを使うとビューにRubyのコードや変数を埋め込むことができる。「rails s」コマンドで仮想サーバーを起動することができる。複数のターミナルを起動しておくと、仮想サーバーが起動している時でもコマンド入力ができる。