hiyoko-programingの日記

プログラミングを勉強したてのひよっ子。　　　エンジニア目指して勉強中。

ルーティングの設定

プログラミング・テキスト

 リクエストとレスポンス

ユーザーがPCやスマートフォンを使ってウェブサイトにアクセスした時、PCからはリクエストというものが送信される。それに対して、リクエストを受け取ったサーバーはリクエストに対して適切なレスポンスを返す。これが基本的なウェブサイトの仕組み。

リクエストとレスポンス

 

ルーティング、コントローラ、ビュー

Railsは行う処理の違いによっていくつかのパートが存在している。リクエストに対してレスポンスを返す際には、ルーティング、コントローラ、ビューという3つのパートがそれぞれ異なる役割を持って処理を行う。
また、その処理はルーティング→コントローラ→ビューという順番で行われる。

 ルーティング

ルーティングには、送られてきたリクエストに対してどのコントローラのどのアクションを動かすのかを設定しておく。

【例】

レビューを投稿するためのリクエスト　→　レビューのコントローラの投稿アクション

レビューを削除するためのリクエスト　→　レビューのコントローラの削除アクション

ユーザーの登録情報編集のリクエスト　→　ユーザーのコントローラの編集アクション

 routes.rb

Railsではルーティングをconfig/routes.rbに記述する。このファイルを編集していくことで、新しいルーティングを設定したり、ルーティングを削除したりすることが出来る。

  •  config
    •  routes.rb

 routes.rbを以下のように編集する

 routes.rbに最初から書かれている記述はroutes.rbの記述方法のサンプルなので、全て削除して、何も書かれていない状態にしてから編集を始める。

1
2
3
 
  Rails.application.routes.draw do
    get 'tweets' => 'tweets#index'
  end

 

作業チェック


ルーティングはRails.application.routes.draw doとendで挟まれた中の部分が重要な意味を持つ。
今新たに記述したget 'tweets' => 'tweets#index'を見ると、
まず、get 'tweets'の部分は、パソコンから次のようなURLでサイトにアクセスした場合をイメージ。

 

パス

localhost:3000の部分はホスト名と呼ばれる部分で環境によって変わるので今は気にしなくて大丈夫。ここで重要なのはパスと呼ばれる/tweetsの部分。ルーティングはパスに対応してどのコントローラのアクションを動かすかを設定する。

次に'tweets#index'の部分。

ルーティング

tweetsの部分はコントローラ名、#の後のindexの部分はアクションを指す。

 

要点チェック

 

コントローラの作成

 コントローラ

コントローラはルーティングとビューをつなぐ役割を持つ。リクエストが送られてきた際にルーティングが読まれると、それに対応するコントローラが動く。コントローラでの処理が終わると、そのコントローラから指定したビューが読みこまれる。このようにコントローラはルーティングからビューへと処理を受け渡す役割を持っている。

 rails g controller コマンド

コントローラを作成するためにはrails g controllerコマンドというものを使用。このコマンドを使用することによってコントローラに関するファイルを自動で作成してくれる。実際に使用する際には「rails g controller コントローラ名」というように作成したいコントローラの名前を後ろに付けて実行する。

ターミナル
1
2
 
  $ rails g controller コントローラ名
  # コントローラを作成

※ ちなみに、rails g controllerのgとは「generate」を省略したもの。

ターミナル
1
2
3
4
5
6
7
 
  # pictweetディレクトリに移動
  $ cd ~/projects/pictweet
  # pictweetディレクトリにいることを確認
  $ pwd
  => /Users/ユーザー名/projects/pictweet
  # コントローラを作成
  $ rails g controller tweets

正しく作成できれば以下の様な出力結果が表示される。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 
  create  app/controllers/tweets_controller.rb
  invoke  erb
  create    app/views/tweets
  invoke  test_unit
  create    test/controllers/tweets_controller_test.rb
  invoke  helper
  create    app/helpers/tweets_helper.rb
  invoke    test_unit
  create      test/helpers/tweets_helper_test.rb
  invoke  assets
  invoke    coffee
  create      app/assets/javascripts/tweets.js.coffee
  invoke    scss
  create      app/assets/stylesheets/tweets.css.scss

 コントローラファイル

コマンドを正しく実行出来ると、出力結果が表示される。この出力結果の一番最初の行に注目。

1
 
create  app/controllers/tweets_controller.rb
これはcreate以下のファイルを新しく作成したことを意味している。作成されたファイルはapp/controllers/tweets_controller.rbとなっているので、app/controllersというディレクトリにtweets_controller.rbというコントローラファイルが作成されたことを意味している。
  •  app
    •  controllers
      •  tweets_controller.rb

さきほどコマンドを実行する際に、rails g controllerのあとにtweetsと付けて実行したことを思い出すと、このtweetsはコントローラ名を表しているので、その結果tweets_controller.rbというコントローラファイルが作成される。

 rails d controller コマンド

コントローラを作成する際に「rails g controller」コマンドを使用して作成を行なった。この時にコントローラ名を間違えて作成してしまった場合、「rails d controller」コマンドを使用してコントローラファイルを削除することが出来る。

ターミナル
1
2
 
  $ rails d controller コントローラ名
   # 作成したコントローラを削除

※ ちなみに、rails d controllerのdとは「destroy」を省略したもの。

このコマンドを使用する際には間違えて作成したコントローラ名を後ろにつけて実行する。このコマンドで削除を実行すると、コントローラを作成した際に自動的に作られた関連ファイルも同時に削除されるので非常に便利。

 

要点チェック

 

コントローラファイルを編集

さきほどの作業によってコントローラファイルが作成された。しかし、作成されたのはコントローラのひな形のみで、ページを表示させるのに必要なアクションは書かれていない。そこで、コントローラファイルを編集してアクションを追加していく。

 tweets_controller.rbを以下のように編集する

app/controlers/tweets_controller.rb
1
2
3
4
5
6
 
  class TweetsController < ApplicationController

    def index
    end

  end

  

 コントローラのクラス

tweets_controller.rbの一番最初の行にTweetsControllerと記述してあるのは、コントローラにおけるクラスを示している。コントローラクラスはコントローラのファイル名(tweets_controller.rb)から、単語の先頭を大文字にしてアンダーバーを取った名前(TweetsController)になる。Railsにおいて名前は重要な意味を持っているので、クラス名が違ったりすると正常に動かなくなる。

 アクション

アクションとはコントローラに存在するインスタンスメソッドのことを指す。
さきほどの編集でTweetsControllerクラスにindexというインスタンスメソッドを作成した。つまりこれはindexというアクションを作成したことを意味する。コントローラは複数のアクションを持つことが可能なので、index以外のアクションを追加することが可能。

https://tech-master.s3.amazonaws.com/uploads/curriculums//86a145626482049c4f2e89f863fbc68b.jpeg

 ルーティングからコントローラまでの流れ

下の図でリクエスト→ルーティング→コントローラの流れを今一度、整理してみる。

ルーティングからコントローラまでの流れ

 

要点チェック

 

ビューの作成

ビューはウェブページにおいて見た目を担当する部分。

ビューファイルを作成しよう

 index.html.erbというファイルを以下のディレクトリに作成する。

テキストエディタで「tweets」を右クリックして「New File」を押すことで新規ファイルを作成することができる。
https://tech-master.s3.amazonaws.com/uploads/curriculums//65dce26c7f4a8a377d8cca2481fea92e.gif

  •  app
    •  views
      •  tweets
        •  index.html.erb

 ビューファイル

ビューファイルはウェブサイトにおける見た目の部分を担当していて、レスポンスとして返されるのがビューファイルのデータ。ビューファイルの拡張子はhtml.erb。

 erb

erbとは、現時点ではRubyのコードを書くことができるHTMLファイルという理解で問題ない。

ビューのきまり

ビューファイルはコントローラのメソッドひとつにつき、ひとつ存在。今回作成したビューファイルは「tweets」ディレクトリの中に「index.html.erb」という名前で作成した。つまりこれは「tweets」コントローラの「index」アクションのビューファイルであることを示している。このようにビューファイルは「コントローラと同じ名前のフォルダ」内にある「アクション名と同じファイル名」のものが適用されるというrailsの決まりがある。

ビューのきまり

 

要点チェック

 

ビューファイルを編集

ビューファイルを作成したので、ウェブページを表示するために必要なものは完成したが、現在の状態だとビューファイルの中身が白紙なので、真っ白のページしか表示されない。そのため、今からビューファイルを編集していk。

 index.html.erbを以下のように編集

  •  app
    •  views
      •  tweets
        •  index.html.erb
app/views/tweets/index.html.erb
1
 
  <p>Hello World!</p>

 

 レイアウトファイル

app/views/layouts以下にあるファイルはレイアウトファイルと呼ばれるビューファイル。レイアウトファイルは、それぞれのビューファイルが読み込まれる前に読み込まれる。つまり、このファイルにそれぞれのビューの共通部分(ヘッダーやフッターなど)を定義しておくことで、同じコードを省略することができる。

  •  app
    •  views
      •  layouts
        •  レイアウトファイル

 application.html.erbというファイルを開いて内容を確認

  •  app
    •  views
      •  layouts
        •  application.html.erb
app/views/layouts/application.html.erb
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
 
  <!DOCTYPE html>
  <html>
    <head>
      <title>PicTweet</title>
      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
      <%= csrf_meta_tags %>
    </head>
    <body>

    <%= yield %>

    </body>
  </html>

application.html.erbの11行目の<%= yield %>という部分はこの部分をそれぞれのビューファイルに置き換えるということを示している。つまり、今回の場合、index.html.erbに<p>Hello World!</p>と記述しただけで、index.html.erbを以下のように編集するのと同じことになる。

【例】
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
 
<!-- app/views/tweets/index.html.erb -->
<!-- yieldの部分がそれぞれのビューファイルに置き換わる -->

  <!DOCTYPE html>
  <html>
    <head>
      <title>PicTweet</title>
      <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
      <%= csrf_meta_tags %>
    </head>
    <body>

    <p>Hello World!</p>

    </body>
  </html>

  

この編集によってindex.html.erbが使用された際に、「Hello World!」と表示されるようになったので、今度は実際にウェブページが表示されるのかを確認する。

ターミナル
1
2
3
4
5
 
  # アプリケーションのあるディレクトリに移動
  $ cd ~/projects/pictweet

  # テストサーバーを起動
  $ rails s

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

1
2
3
4
5
6
7
8
9
 
=> 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.3.1-p112), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://0.0.0.0:3000
Use Ctrl-C to stop

もし、上記のような出力結果にならなかった場合、bundle updateを実行したのち、もう一度rails sを実行。

 
1
2
3
 
$ bundle update
# 省略
$ rails s
 

 rails s コマンド

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

テストサーバーが起動したので、アプリケーションが正しく動いているかを確認する。テストサーバーでアプリケーションを立ち上げる場合のURLはパスの前にhttp://localhost:3000がついたものになる。

 ブラウザで下記のURLにアクセス

http://localhost:3000/tweets

Hello_World

 

 参考書参照

「プロになるためのWeb技術入門」p44 ~, 項3.1, 項3.2, 項3.3

 control c コマンド

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

ターミナル
1
2
3
 
^C[2014-10-30 10:00:16] INFO  going to shutdown ...
[2014-10-30 10:00:16] INFO  WEBrick::HTTPServer#start done.
Exiting

 

要点チェック

 

 ターミナルのタブを切り替えて作業する

「control + c」を打って「rails s」で立ち上げたサーバーをシャットダウンした場合、再度「rails s」を実行しなければブラウザ上で表示を確認することが出来ない。
そこで、ブラウザで複数のタブを使用するようにターミナルでも「タブ」を活用してみる。

「command + t」を押してみる。下記のようにターミナルの上部にタブが表示される。
タブをクリックすることでタブを切り替えることが出来る。

https://tech-master.s3.amazonaws.com/uploads/curriculums//958cba09c2dc48bde36ed46917ddef4b.png

今後、片方のタブで「rails s」を行い、もう片方のタブで作業すると、確認の度に「rails s」を打たなくても作業が進められる。