LoginSignup
6
11

More than 5 years have passed since last update.

Ruby on Rails 画面表示

Posted at

Rails基礎知識

  • ルーティング(route)
  • コントローラー(controller)
  • ビュー(view)

ここでは、Railsの基礎中の基礎であるルーティングからビューまでの作成の流れを記載していきます。

RailsでWEBページを表示する

まずはじめに、シンプルなWEBページを表示するための仕組みを知りましょう。
download.png
このようにサーバーにリクエストを送り、サーバーがレスポンスを返すというような仕組みになっています。
これを踏まえてRailsでは、下記の画像の左側の流れになります。
68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f3238353131342f65326435623531342d343134372d623562352d343238352d3635353834363035663639332e706e67.png
ブラウザからアクセスすると「ルーティング」「コントローラー」「ビュー」の順を辿ってレスポンスが返っているのがわかりますね。
以下で、詳しく解説していきます。

ルーティング(route)

送られてきたリクエストに対してどの「コントローラー」のどの「アクション」を動かすのかを設定します。

ルーティングファイル

config/routes.rb
にルーティングの設定を記載します。
ここで新しいルーティングを記述したり、削除する記述をしたりします。

Rails.application.routes.draw do
  get 'tweets', to: 'tweets#index'
end

パスとアクション

get 'tweets', to: 'tweets#index'

左側の'tweets'はURLのパスで、左の'tweets#index'はコントローラー名#アクション名というような意味になります。
まだ、コントローラーがありませんので、次にコントローラーを作っていきましょう。

コントローラー(controller)

ルーティングとビューを繋ぐ役割を持っています。ブラウザからリクエストが送られて来たらルーティングが読まれ、それに対応するコントローラーが動きます。

コントローラーを生成する

現段階では、まだコントローラーのファイルがないので下記のコマンドを実行してコントローラーを生成します。

$ rails g controller コントローラ名

このコマンドだけでコントローラーに必要なファイルができました。
では、コントローラーにアクションを追加していきましょう。
app/controlers/生成したコントローラー

class TweetsController < ApplicationController
  def index
  end
end

このdefのあとがアクションになります。ルーティングのアクションと同じになっているか確認しましょう。アクションは#のあとでしたね。

get 'tweets', to: 'tweets#index'

上記はルーティングですが、indexと同じになっていることがわかります。
これで、ルーティングとコントローラーができたので最後にビューを作っていきます。

ビュー(view)

ビューは、アクセスしたときに表示されます。HTMLファイルのようなイメージをしていただければわかりやすいと思います。

ビューを作成する

app/views/生成したディレクトリ
にindex.html.erb といファイルを作りましょう。
エディタ左のディレクトリの上で右クリックすればファイルを作成することができます。
Railsでは、 html.erb というファイルを使用するので .erb のつけ忘れには注意しましょう。
作成した白紙の index.html.erb に以下を記述しましょう。

<h1>ハローワールド</h1>

これで、ルーティング、コントローラー、ビューの準備ができたのでブラウザでビューを表示させてみましょう。

ローカル環境でブラウザにアクセスしてビューを表示する

ターミナルで、Railsを起動します。

$ rails s

これで、起動できました。
それでは、URLの欄で http://localhost:3000/ と記述してアクセスしてみましょう。
images.jpg
がでていれば成功です。続いて先ほど作成したページにアクセスしていきましょう。
http://localhost:3000/tweets
上記のようにルーティングのパスを記述すればアクセスできます。

ローカル環境から抜ける

controlキー と cキー の同時押しで抜けることができます。
また、起動したい場合は、

$ rails s

で起動できます。ターミナル上で過去のコマンドを再実行したい場合は ↑キー で選択できます。

おまけ

ターミナルで、Railsを起動している場合は別のターミナルや別タブを開いたほうが使いやすいです。
ターミナル上で、下記のショートカットキーを実行してみてください。

新しいターミナルを開く

command + N

ターミナルの別タブを開く

command + T

さいごに

これで、画面を表示することだけができましたが、まだ「データ」を保存したりできません。
それでは、データベースを扱っていくのは別の章で学習していきましょう。

6
11
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
11