Webブラウザからリクエストを送信することで、Rails側（Webサーバ）から欲しい情報を取得することができます。
「Webブラウザ」「Webサーバ」「リクエスト」「レスポンス」などの用語が分からないという初心者の方にもWebページが表示される仕組みから学ぶことができます。
Webページが表示される仕組み
WebブラウザでWebページを閲覧するときに何が起きているのかを簡単に説明します。
Ruby on RailsでWebアプリケーション開発をする前に「Webページが表示される仕組み」を学習することで、より深く処理の流れを理解することができます。
1.Webブラウザは何をしているのか
パソコンやスマートフォンでWebページを閲覧するときは、「Google Chrome、Firefox、Microsoft Edge、Safari」などを使っていますよね。
これらは「Webブラウザ」と呼ばれるソフトウェアです。
Webブラウザは、HTMLファイルなどをダウンロードし、情報を解析して画面に表示することができます。
試しにHTMLファイルをWebブラウザにドラッグ&ドロップしてみましょう。
HTMLファイルは、こちらのリンクをクリックしてダウンロードしてください。
HTMLファイルには、以下の内容が記述されています。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>技術書一覧</title>
</head>
<body>
<h1>技術書一覧</h1>
<ol>
<li>リーダブルコード</li>
<li>体系的に学ぶ 安全なWebアプリケーションの作り方</li>
<li>Webを支える技術</li>
</ol>
</body>
</html>
以下の動画のようにダウンロードした「sample.html」をGoogle Chromeにドラッグ&ドロップしてください。
※ダウンロードしたファイルが左下に表示されない場合は、パソコンのダウンロードフォルダからドラッグ&ドロップしてください。
するとWebブラウザの画面には、HTMLファイルの情報を解釈した内容が表示されます。
このように、WebブラウザはHTMLファイルなどを解析して画面に表示（レンダリング）することができます。
今回はパソコンにあるHTMLファイル（sample.html）をWebブラウザでレンダリングさせましたが、インターネット上のWebページもHTMLファイルなどをレンダリングしています。
あなたが今見ているこのページもHTMLファイルなどがレンダリングされています。
例ではPCにあるsample.htmlをレンダリングさせたけど、インターネット上のWebページのHTMLファイルはどこにあるんだろう...。
いいところに気がついたね！
インターネット上のWebページのHTMLファイルは「Webサーバ」という場所にあるんだよ！
- あるデータを解析して画面に表示することを「レンダリング」と呼びます。
- Webブラウザは、HTMLファイルだけではなく画像ファイルもレンダリングすることができます。
2.WebブラウザとWebサーバの情報のやり取り
Webサーバは、HTMLファイルなどの情報を蓄積しています。この情報を取得して、Webブラウザでレンダリングするまでの流れを見てみましょう。
まずは、WebブラウザからWebサーバにリクエスト（要求）を送信します。
リクエストは、Webブラウザのアドレスバーに「http://~」か「https://~」から始まるURLを打ち込むことで、WebサーバとWebサーバにある欲しい情報の場所を特定できます。
そして、Webサーバはリクエストに応じたHTMLファイルなどをレスポンス（応答）としてWebブラウザに返します。
Webブラウザの画面には、HTMLファイルの情報を解釈した内容が表示されます。
Webブラウザは、Webサーバにリクエスト（要求）を送信し、Webサーバはリクエストに応じたレスポンス（応答）を返すよ
WebブラウザとWebサーバの情報のやり取りは、この流れなんだね！
HTTPプロトコル
先ほどは、Webブラウザのアドレスバーに「http://~」から始まるURLを打ち込みました。
URLの先頭にある「http」は、WebブラウザとWebサーバ間の情報のやり取りを「HTTP」というプロトコル（通信を行うための手順やルール）を使用することを宣言しています。
WebブラウザとWebサーバのやり取りは「HTTP」を使うので、リクエストもレスポンスも厳密には「HTTPリクエスト」「HTTPレスポンス」と呼びます。
HTTPには、WebブラウザとWebサーバの間で「どんな形式でデータを送るか」「どうやって受け取るか」「応答するか」などの細かいルールがあります。
URLの先頭に「http://~」が付いていたら、Webサーバとのやり取りにHTTPのルールを使っているんだ程度に覚えておこう！
- Webサーバの情報を取得するには、Webブラウザからリクエストを送信する
- Webブラウザは、受け取ったHTMLファイルなどを解釈して画面に表示できる
- WebサーバとWebブラウザのやり取りは、「HTTP」というルールが使われる
PikawakaのURLの先頭は「http」としましたが、https://pikawaka.com/のように本来は「https」です。最後の「s」は「Secure（安全）」の意味です。データが改竄されないように通信を暗号化しています。
3.Webアプリケーションの場合
Webアプリケーションの場合も、基本的にはこれまで説明してきた仕組みと変わりません。
Webサーバはリクエストに応じたHTMLファイルなどを返し、Webブラウザは受け取ったHTMLファイルを画面に表示できるように処理を行います。
ただし、Webアプリケーションの場合はmanager.htmlのように「Webサーバ上に元々置いてあるファイル」だけでなく、プログラムを実行して「リクエストごとに中身を変えたファイル」を返すこともできます。
「Webサーバ上に元々置いてあるファイル」と「リクエストごとに中身を変えたファイル」の違いがよくわからないなぁ。。。
各ファイルをレンダリングすると違いがわかるよ。次で説明するね！
静的ページと動的ページ
Webサーバ上に元々置いてあるファイルをレンダリングした場合は、誰が見ても同じ内容になるのが特徴です。このようなページを「静的ページ」と呼びます。
一方で、プログラムを実行して「リクエストごとに中身を変えたファイル」をレンダリングした場合は、利用者の状況によって内容が変わります。
このようなページを「動的ページ」と呼びます。
静的ページではリクエスト前にHTMLファイルの内容がすでに確定していましたが、動的ページではリクエスト後にHTMLファイルの内容が生成されます。
これによって、利用者の状況にそれぞれに合わせた内容を提供できるようになります。
Webアプリケーションでは、静的ページだけではなく必要に応じてプログラムを実行し、データベースからデータを取得・情報を作成するなどの動的ページを扱えます。
Railsでは、このプログラムの部分を主に開発していくよ！
- 静的ページでは、リクエスト前にHTMLファイルの内容が確定している
- 動的ページでは、リクエスト後にHTMLファイルの内容が生成される
RailsのWebアプリケーション
Railsに組み込まれているWebサーバの機能を使うことで、これまで説明した通りWebブラウザからリクエストを送信し、HTMLファイルなどの情報を受け取ることができます。
Railsに置き換わっても、Webブラウザとのやり取りは変わらないね！
それでは、Railsの具体的な処理の流れを学習していこう！
Railsの処理の流れを理解しよう
Railsでは、リクエスト送信からレスポンスが返るまでに、次の順番で処理が実行されます。
Railsアプリケーションは、主に「ルーティング」「コントローラ」「モデル」「ビュー」から構成されています。
各要素の役割は、以下の表の通りです。
| 要素 | 主な役割 |
|---|---|
| ルーティング | リクエストのURLを解析して、対応する経路に振り分ける |
| コントローラ | リクエストを処理する・モデルとビューの橋渡しをする |
| モデル | アプリケーションが扱うデータを操作する |
| ビュー | WebブラウザでレンダリングさせるためのHTMLファイルなどを生成 |
今回は、モデルを使わずに「ルーティング」「コントローラ」「ビュー」を設定して、Webブラウザからのリクエストに応じたレスポンスを返せるようにします。
- Ruby on Railsは、「MVC」という構造が取り入れられています。
- MVCは、モデル（M）・ビュー（V）・コントローラ（C）の総称です。
- これにより、コードを綺麗に保ったり、あるパターンに当てはめてコードを管理しやすくなります。
1.ルーティングを設定しよう
まずは、ルーティングの設定を行います。
ルーティングとは、リクエストされるURLに応じて適切な経路を決める仕組みのことです。
Webブラウザから送信されるリクエストのURLを解析して、ルーティングで設定している経路（コントローラのアクション）に振り分けます。
Railsのルーティングは、config/routes.rbで設定します。
1
2
3
Rails.application.routes.draw do
HTTPリクエストメソッド 'パス', to: 'コントローラ名#アクション名'
end
WebブラウザからのHTTPリクエストを「HTTPリクエストメソッド」「パス」の部分に記述し、to:以降でそのリクエストをどこに振り分けるかを設定します。
HTTPってWebブラウザとWebサーバのやり取りで使うルールだったよね
よく覚えていたね！HTTPプロトコルで学んだよね
まずは、社員情報一覧を得るためのリクエストから確認してみよう！
1-1.HTTPリクエストを確認しよう
Rails側（Webサーバ）から社員情報一覧を取得するには、最初にWebブラウザからHTTPリクエストを送信する必要があります。
リクエストは、Webブラウザのアドレスバーに「http://~」か「https://~」から始まるURLを打ち込むことで、WebサーバとWebサーバにある欲しい情報の場所を特定できましたね。
今回は、AWS Cloud9でRailsアプリケーションを作成しているので、Webサーバの場所はhttps://xxx.vfs.cloud9.ap-northeast-1.amazonaws.com/のURLで特定することができます。
そして、Webサーバの場所の後に/employeesを追記して、社員一覧情報を取得できるようにこの章全体を通して設定していきます。
Webブラウザから送信するHTTPリクエストのURLは、以下の通りです。
HTTPリクエストには、主にGETメソッド（サーバから情報を取得）とPOSTメソッド（サーバ上の情報を変更）がありますが、上記のURLではGETメソッドが使われます。
まだルーティングの設定をしていないので、以下のようにURLの末尾に/employeesを追記して検索した場合は、以下のようにエラー画面が表示されます。
それでは、ルーティングを設定していきましょう。
- HTTPリクエストのURLは、
https://xxx.vfs.cloud9.ap-northeast-1.amazonaws.com/employees（xxxの部分は各自の環境で変わる） - HTTPリクエストメソッドは、GETメソッドを使う
それでは、Cloud9の環境を開いて作業を開始しよう！
1-2.routes.rbを開いてルーティングを設定しよう
ルーティングを設定することで、Webブラウザからの「社員情報一覧が欲しい！」というリクエストをどこの経路（コントローラのアクション）で処理するか決めることができます。
まずは、ルーティングの設定ファイルである「routes.rb」を確認してみましょう。
「employee_management > config」ディレクトリ直下にある「routes.rb」をダブルクリックして、テキストエディタで開いてください。
「routes.rb」を開くと、以下の内容が最初から記述されています。
routes.rbの２行目に記述されるコメントアウトは、削除しておきましょう。
次にルーティングを設定していきます。
以下のように前半部分にWebブラウザからのHTTPリクエスト情報、to:以降でリクエストの振り分け先を指定します。
- HTTPリクエストメソッド -
get（情報を取得するGETメソッド） - パス -
/employees（サーバの場所以降のパス） - リクエストを処理する振り分け先 - 「employeesコントローラのindexアクション」
それでは、routes.rbを以下の内容に編集しましょう。
ハイライトが当たる部分のコードをコピーして２行目に貼り付けましょう。
1
2
3
Rails.application.routes.draw do
get '/employees', to: 'employees#index'
end
上記によって、Webブラウザからの「社員情報一覧が欲しい！」というリクエストは、「employeesコントローラのindexアクション」で処理するように設定できました。
1-3.設定したルーティングを確認しよう
最後に「routes.rb」に設定したルーティングを確認してみましょう。
ルーティングの確認には、rails routesコマンドを使います。
rails routesコマンドとは
rails routesコマンドとは、routes.rbで設定したルーティングをターミナルで確認することができるコマンドです。
使い方は、以下のコマンドをアプリケーションのディレクトリで実行するだけです。
1
rails routes
実際に設定したルーティングを確認してみましょう
rails routesコマンドを実行するには、アプリケーションディレクトリの直下に移動する必要があるので、employee_managementに移動します。
以下のコマンドを実行してください。
1
cd ~/environment/employee_management
続いて、employee_managementディレクトリでrails routesコマンドを実行してください。
1
rails routes
実行すると、出力結果がターミナルに表示されます。
以下の画像のように表示されていればルーティングが設定できています。
rails routesの出力結果の見方を一緒に確認していこう！
rails routesの項目
ターミナルでrails routesを実行すると、１番上に項目が表示されます。
各項目の意味は以下の通りです。（※Prefixは後のカリキュラムで説明します。）
Verb- HTTPメソッド（URI Patternのパスに対応する）URI Pattern- パス（アプリケーションのパス）Controller#Action-コントローラ名#アクション名（リクエストの振り分け先）
つまり、「routes.rb」で設定した内容が各項目で表示されているのがわかりますね。
このように「routes.rb」に設定したルーティングは、rails routesコマンドで確認することができます。
- rails routesコマンドは、アプリケーションのディレクトリで実行すること
- routes.rbで設定した内容が表示されているかを確認すること
rails routesコマンドを実行すると、「routes.rb」で設定するルーティング以外も表示されますが、これはRails6からデフォルトで追加されたものです。
1-4.ブラウザで確認してみよう
ルーティングを設定したので、ブラウザで確認してみましょう。
画像の手順でブラウザを立ち上げてください。
※ ターミナルでrails sを実行している方は、２の手順から行いましょう。
以下のようにアプリケーションにアクセスすることができるので、URLの末尾に/employeesを追記して検索します。
/employeesは、https://xxxx.vfs.cloud9.ap-northeast-1.amazonaws.comの後に追記します。URLに:8081は含めないので注意しましょう。
/employeesを追記して検索すると、以下のようにuninitialized constant EmployeesControllerというエラーメッセージが表示された画面になります。
これはルーティングの設定でリクエストを処理するコントローラを決めていましたが、まだコントローラのファイルを用意していないためエラーが発生しました。
ルーティングの設定ファイル（routes.rb）は最初から用意されていましたが、コントローラはファイルを作成する必要があります。
次はget /employeesに対応するコントローラファイルを作成しよう！
2.コントローラを作成しよう
次は、コントローラを作成していきます。
コントローラは、モデルとビューの橋渡しをする存在でリクエストを適切に処理します。
今回は、モデルを使わずに社員情報一覧ページが表示できるところまで進めていきます。
ルーティングでは、Webブラウザからの「社員情報一覧が欲しい！」というリクエストに対応する経路として「employeesコントローラのindexアクション」を設定しましたね。
employeesコントローラを作成して、indexアクションを定義していきます。
それでは、さっそくコントローラを作成してみよう！
2-1.コントローラを作成しよう
まずは、カレントディレクトリがemployee_managementであることを確認してください。
カレントディレクトリが別の場所の方は、以下のコマンドを実行しましょう。
1
cd ~/environment/employee_management
コントローラ作成には、rails generateコマンドを使います。
rails generate（rails g）コマンドとは
rails generateコマンドとは、アプリケーションに必要な関連するファイルを作成するコマンドです。
コントローラを作成する場合は、以下のような形で実行します。
1
2
rails generate controller コントローラ名
#「rails g controller コントローラ名」でも同様に作成できる
コントローラ名は「employees」のように基本的に複数形を使うよ！
それでは、rails generateコマンドでemployeesコントローラを作成します。
以下のコマンドを実行してください。
1
rails g controller employees
実行すると、以下のようにemployeesコントローラに関連するファイルが自動で作成されます。自動で作成されたファイルは、createの横に表示されています。
１番上に表示されるemployees_controller.rbがコントローラファイルです。コントローラファイルは、「コントローラ名_controller.rb」という形式で名前が付けられています。
その他のファイルについては、カリキュラムを進めながら順番に解説していきます。
- コントローラ名は、基本的には複数形を使う
- コントローラのファイル名は、「コントローラ名_controller.rb」
rails gコマンドで自動生成されたファイルは、rails dコマンドでまとめて削除することができます。
1
rails d controller コントローラ名
2-2.コントローラファイルを確認しよう
次にコントローラファイルである「employees_controller.rb」の中身を確認してみましょう。
「employee_management > app > controllers」ディレクトリ直下にある「employees_controller.rb」をダブルクリックして、テキストエディタで開いてください。
「employees_controller.rb」を開くと、以下の内容が最初から記述されています。
コントローラのクラスであるEmployeesControllerは、ファイル名「employees_controller.rb」をキャメルケース（単語の先頭を大文字）にした名前が付けられています。
※クラス名を変更してしまうと、エラーが発生するので注意しましょう。
コントローラの命名規則
Railsでは、名前付けが重要です。
コントローラの場合は、基本的に以下の命名規則に従って名前付けされます。
| 名称 | 命名規則 | 例 |
|---|---|---|
| コントローラ名 | 基本的に複数形 | employees |
| コントローラのファイル名 | コントローラ名_controller.rb | employees_controller.rb |
| コントローラのクラス名 | コントローラ名Controller | EmployeesController |
各要素の関係性は、命名規則によって紐づいているよ！
- 「EmployeesController」のように単語の先頭を大文字に書き表したものを「キャメルケース」と呼びます。
- 「employees_controller.rb」のように単語の間をアンダースコア（
_）で繋いで書き表したものを「スネークケース」と呼びます。
2-3.コントローラファイルを編集しよう
「employees_controller.rb」にアクションを定義していきます。
アクション名は、「routes.rb」で設定したindexです。
アクションとは
アクションとは、Webブラウザからのリクエストに対して必要な処理を実行するメソッドのことです。
アクションは、以下のようにコントローラクラスに定義します。
1
2
3
4
class コントローラ名Controller < ApplicationController
def アクション名
end
end
indexアクションは、「対象の情報を一覧表示したい！」というリクエストを処理するアクションなので、今回の社員情報一覧のリクエストを処理するアクションとして使います。
employees_controller.rbを編集しよう
EmployeesControllerクラスにindexアクションを定義してみましょう。
「employees_controller.rb」を以下の内容に編集しましょう。
1
2
3
4
class EmployeesController < ApplicationController
def index
end
end
上記によって、Webブラウザからの「社員情報一覧が欲しい！」というリクエストを処理する「employeesコントローラのindexアクション」を定義することができました。
2-5.ブラウザで確認してみよう
コントローラを作成し、アクションを定義したのでブラウザで確認してみましょう。
画像の手順でブラウザを立ち上げてください。
※ ターミナルでrails sを実行している方は、２の手順から行いましょう。
以下のようにアプリケーションにアクセスすることができるので、URLの末尾に/employeesを追記して検索します。
/employeesは、https://xxxx.vfs.cloud9.ap-northeast-1.amazonaws.comの後に追記します。URLに:8081は含めないので注意しましょう。
/employeesを追記して検索すると、以下のようにエラー画面が表示されます。
ルーティング設定後にブラウザで確認した時とは、違うエラーが表示されていますね。
このエラーは、employeesコントローラでリクエストを処理するindexアクションを定義しましたが、それに対応するビューファイルがないため発生しました。
コントローラファイルと同様にアクションの処理結果を渡すビューファイルを作成する必要があります。
次はindexアクションの処理結果を渡すビューファイルを作成しよう！
3.ビューを作成しよう
最後にビューを作成していきます。
ビューは、コントローラのアクションの処理結果を受け取り、WebブラウザでレンダリングさせるためのHTMLファイルなどを作成して、コントローラに渡します。
今回はデータベースからデータを取得するモデルは使わないので、単に社員情報一覧ページの「見た目」を作成していきます。
indexアクション実行後は、同じ名前のビューファイルに処理が移ります。
ビューファイルは、まだ作成していないのでこの時点ではエラー画面が表示されます。
indexアクションに対応するビューファイルを作成して、社員情報一覧ページを表示できるようにしていきましょう。
3-1.ビューファイルの格納場所を確認しよう
ビューファイルを格納するディレクトリは、app/views/配下にあるemployeesです。
app/views/employeesは、rails gコマンドでemployeesコントローラを作成した際に自動で生成されています。
3-2.ビューファイルを作成しよう
それでは、ビューファイルを作成していきます。
動画のように「app/views/employeesディレクトリ」で「右クリック > メニュー > New File」を選択し、index.html.erbという名前のビューファイルを作成してください。
これでindexアクション実行後に処理が移るビューファイルを作成することができました。
ビューファイルの命名規則
コントローラとビューは命名規則で紐づけられています。
| 名称 | 命名規則 | 例（employees#indexの場合） |
|---|---|---|
| ビューディレクトリ | app/views/コントローラ名 | app/views/employees |
| ビューファイル | アクション名.html.erb | index.html.erb |
コントローラのアクション内で特にビューファイルを指定していなければ、アクション名と同じ名前のビューファイル（アクション名.html.erb）にデフォルトで処理が移ります。
ブラウザで確認してみましょう
ファイルには何も記述していませんが、一旦ブラウザで確認してみましょう。
ブラウザで確認したページを閉じてしまった方は、こちらの手順に従って開いてください。
ブラウザを再読み込みすると、先ほどまで表示されていたエラー画面ではなくなります。
「indexアクションに対応するビューファイルがない」というエラーの原因を解消できたので、Webブラウザにレスポンスを返し、レンダリングまで成功しました。
index.html.erbは、まだ何も記述していないので、中身を記述して画面に表示できるようにしていきましょう。
3-3.ビューファイルを編集しよう
それでは、index.html.erbを編集していきます。
HTMLを記述してみよう
index.html.erbに以下のHTMLを記述してください。
1
<h1>社員情報一覧</h1>
ブラウザを再読み込みして確認してみましょう。
以下のように表示されていれば成功です。
なんでファイルの拡張子に.erbって付くんだろう
拡張子.erbが付くことでHTMLだけではなくRubyのコードも埋め込むことができるよ
Rubyのコードを記述してみよう
ビューファイルの拡張子を.html.erbとすることで、HTMLにRubyのコードを埋め込むことができます。
ビューファイルにコントローラからデータを渡して表示させてみましょう。
まずは、コントローラを編集します。
ハイライトが当たる部分のコードをコピーしてindexアクションに貼り付けましょう。
1
2
3
4
5
class EmployeesController < ApplicationController
def index
@text = 'indexアクションが実行されました'
end
end
続いて、index.html.erbにハイライトが当たる部分のコードをコピーして貼り付けましょう。
1
2
<h1>社員情報一覧</h1>
<p><%= @text %></p>
ブラウザを再読み込みして確認してみましょう。
以下のように表示されていれば成功です。
このように〇〇.html.erbのビューファイルでは、HTMLだけではなくRubyのコードを埋め込んで実行することができます。
ERBの記法については、本章の後で説明します。
以上で社員情報一覧ページを表示までの作業が終わりです。お疲れ様でした！
情報を整理しよう
最後にWebブラウザからリクエスト〜レスポンスまでの流れ、命名規則で紐づいている各要素の関係性を整理しましょう。
処理の流れと命名規則
Railsでは、リクエスト送信からレスポンスが返るまでに、次の順番で処理が実行されます。
今回は、モデルを使わずに「ルーティング」「コントローラ」「ビュー」を設定して、Webブラウザからのリクエストに応じたレスポンスを返せるようにしました。
また各要素の関係性は命名規則で紐づいています。
| 名称 | 命名規則 | 例 |
|---|---|---|
| コントローラ名 | 基本的に複数形 | employees |
| コントローラのファイル名 | コントローラ名_controller.rb | employees_controller.rb |
| コントローラのクラス名 | コントローラ名Controller | EmployeesController |
| ビューディレクトリ | app/views/コントローラ名 | app/views/employees |
| ビューファイル | アクション名.html.erb | index.html.erb |
最後に
この章では、Webページが表示される仕組みから学ぶことによって、Railsでの処理の流れをより深く理解することができました。
また、「ルーティング」「コントローラ」「ビュー」を設定し、社員情報一覧ページを表示することができました。
次回は、「モデル」に入る前に「データベース」の基礎を学びます。
この記事のまとめ
- ルーティングとは、リクエストされるURLに応じて適切な経路を決める仕組みのこと
- コントローラは、モデルとビューの橋渡しをする存在でリクエストを適切に処理する
- ビューは、コントローラのアクションの処理結果を受け取り、WebブラウザでレンダリングさせるためのHTMLファイルなどを作成して、コントローラに渡す
この記事で学んだことをTwitterに投稿して、アウトプットしよう！
Twitterの投稿画面に遷移します