※ 本講座は、動画コンテンツが未作成です。

今回のレッスンで扱う内容

前回のレッスンでは、Rails アプリを作成し、GitHub で管理できるようになりましたね。

今回のレッスンでは、ルーティングを触りつつ、プログラミングの基礎となる「Hello, world!」を画面に表示するところまでやっていきます。

具体的には、以下の図の白塗りの部分ですね。

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

上記3つの流れを今回のレッスンでつかむことを目標に勉強していきましょう!

必要なファイル類の作成

rails generate コマンドを使う

まずは必要なファイル類を作りましょう。作り方はとても簡単で、 rails generate コマンドを使って、必要なコントローラーとビューのファイルを作っていきます。

今回作るコントローラーは、「homes_controller」という名前のコントローラーです。

rails generate は、rails g と省略して書くことができるので、こちらで実行してみます。

$ bundle exec rails g controller homes index

Running via Spring preloader in process 83136
create app/controllers/homes_controller.rb
route get 'homes/index'
invoke erb
create app/views/homes
create app/views/homes/index.html.erb
invoke test_unit
create test/controllers/homes_controller_test.rb
invoke helper
create app/helpers/homes_helper.rb
invoke test_unit
invoke assets
invoke coffee
create app/assets/javascripts/homes.coffee
invoke scss
create app/assets/stylesheets/homes.scss

いくつかのファイルが自動的に作成されました。確認しましょう。

$ git status

Your branch is ahead of 'origin/master' by 1 commit.
(use "git push" to publish your local commits)

Changes not staged for commit:
(use "git add ..." to update what will be committed)
(use "git checkout -- ..." to discard changes in working directory)

modified: config/routes.rb

Untracked files:
(use "git add ..." to include in what will be committed)

app/assets/javascripts/homes.coffee
app/assets/stylesheets/homes.scss
app/controllers/homes_controller.rb
app/helpers/homes_helper.rb
app/views/homes/
test/controllers/homes_controller_test.rb

と、1つのファイルが修正され、6つのファイルが作成されたようですね。

  • routes.rb が修正
  • javascript に関するファイルが追加
  • css に関するファイルが追加
  • コントローラーのファイルが追加
  • helper に関するファイルが追加
  • ビューに関するファイルが追加
  • テストに関するファイル

 

必要なファイルが一気に追加され、非常に便利ではあるのですが、目的のファイル以外のものが4つも追加されてしまいました。(上記の太字のものが目的のファイルです)

これらのファイルを使う予定はないので、作られないように設定をしましょう。

一旦先ほど作成したファイルをすべて元に戻したいので、今度は rails destroy コマンドを使って元に戻します。

$ bundle exec rails d controller homes index

先ほど実行したコマンドの g を d に変えるだけなので、ターミナルで「上」キーを押して編集すると楽だと思います。

不要なファイルを作らないように設定する

config/application.rb を開きましょう。以下のように修正します。

VSCode をはじめとするエディターでは、 command + P から、ファイル検索窓が開きます。便利なので普段使っていない方は覚えておきましょう。

module HelloWorldRails
  class Application < Rails::Application
    # Initialize configuration defaults for originally generated Rails version.
    config.load_defaults 5.2

    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration can go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded after loading
    # the framework and any gems in your application.

    # 以下を追記
    config.generators do |g|
      g.javascripts false
      g.stylesheets false
      g.helper false
      g.test_framework false
    end
  end
end

この設定で、generate コマンドの挙動が変わります。設定を保存したら再度コマンドを実行

$ bundle exec rails g controller homes index

Running via Spring preloader in process 17595
create app/controllers/homes_controller.rb
route get 'homes/index'
invoke erb
create app/views/homes
create app/views/homes/index.html.erb
invoke assets
invoke coffee
invoke scss
$ git add .
$ git status

中略

new file: app/controllers/homes_controller.rb
new file: app/views/homes/index.html.erb
modified: config/application.rb
modified: config/routes.rb

すべて git add して、controllers, views に新規のファイルが追加されていることと、routes.rb が更新されていることが確認できれば OK です。

application.rb は先ほど自分で修正したファイルですね。

ルーティングファイルの確認

Rails でルーティングの設定をするファイルは、 routes.rb というファイルになります。

先ほどの rails g コマンドで、routes.rb にも変更が入っていましたね。どんな変更がされたのかを確認してみます。

$ git diff config/routes.rb

git diff は差分を確認するためのコマンドですが、このあたりは tig を使って確認しても OK です。

Rails.application.routes.draw do
+   get 'homes/index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

ということで、2行目にテキストが追記されていることがわかりますね。

routes.rb の記述で作成される URL の確認

記述が追記されていることは確認できましたが、これによりどんな URL が作成され、どんな挙動になっているのかが、まだわかりませんよね。

それを確認するコマンドが以下になります。

$ bundle exec rails routes

上記のような画面が出てくると思います。
今回追記された get 'homes/index' によって追加されたのは以下の部分です。

Prefix Verb URI Pattern Controller#Action
homes_index GET /homes/index(.:format) homes#index

それぞれの意味の解説は今後のレッスンに回します。今回見るべきところは以下の部分。

rails routes の見方

赤枠の部分について

URI Pattern には、「どんな URL にアクセスすればいいのか」が表示されます。 (.:format) の部分は、どんな拡張子でも指定できるという意味で、あまり気にしないで大丈夫です。

ここでは、/homes/index にアクセスするという情報が読み取れれば OK です。

青枠の部分について

Controller#Action には、「どのコントローラーの、どのメソッドに飛ぶのか」が表示されます。

今回であれば、homes_controller の index メソッドに飛ばすことがわかるわけです。

まとめると

Rails
/homes/index にアクセスすると、homes_controller の index メソッドに飛ばすよ!
ということが読み取れるわけです。

というわけで、早速確認してみましょう。

$ bundle exec rails s

http://localhost:3000/homes/index にアクセスして、以下のような画面が出れば OK です。

controller と view の確認

さて、 routes.rb を確認し、画面が出たのはいいのですが、どういう仕組みで画面が表示されているのかをもう少し追ってみましょう。

先ほど、rails routes により、

Rails
/homes/index にアクセスすると、homes_controller の index メソッドに飛ばすよ!

 

というところまで確認しましたね。

なので、今度は controller と view についてみていきましょう。

homes_controller の確認

class HomesController < ApplicationController
  def index
  end
end

確認してみると、非常にシンプルな内容であることがわかります。

ApplicationController を継承している HomeController クラスに index というメソッドが定義されているだけで、このメソッドの中では何もしていないんですよね。

ねこくん
えっ...? 何もしないメソッドなんて意味あるの...?

と、はじめ見たときは驚くかもしれませんね。Rails の仕組みでは、ここに何も書かなくても動きます。

view の確認

さて、次に view ファイルを確認しましょう。

rails g コマンドで作られたファイルは app/views/homes/index.html.erb というファイルになります。内容はシンプルで以下の通りです。

<h1>Homes#index</h1>
<p>Find me in app/views/homes/index.html.erb</p>

 

ここで大事なのは、このファイルが置かれているディレクトリとファイル名です。

homes_controller の view ファイルは、homes ディレクトリの配下を見にいきます。
index メソッド の view ファイルは、index.html.erb といったように、index から始まるファイル名のものを見にいきます。

今回だとこのような構成ということですね。

app
├── controllers
│     └── homes_controller.rb
└── views
      └── homes
            └── index.html.erb

ちょっと図にしてみましょう。

  1. routes.rb から、homes_controller の index メソッドを参照する指定がされる。
  2. homes_controller の index メソッドを通る
  3. Rails の規約に則った view ファイルを参照する

 

このような流れですね。

今回の例は、 homes_controller の index メソッドを例にとっていますが、他のものでも基本的な仕組みは変わりません。

まとめ

今回は

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

の流れについて解説しました。

Rails の「設定より規約」という方針を、少し感じることができたのではないでしょうか?

Rails はルールを覚えて、その通りに使いこなせば誰でも Web アプリが作れるようになります。このルールばかりは、覚えるしかありません。

とはいえ、丸暗記するよりは、ベースとなるイメージを元に、少しずつその理解を広げていきましょう。

一番初めは、この図でしたよね。

今回は、その中でも、以下の白枠の部分について深掘りしました。

具体的には、各ファイルの内容と、Rails のルールにのっとったデータの流れ方を学びましたね。

今後のレッスンでも、引き続きこの MVC の図をもとに、少しずつ細かい部分も理解できるように進めていきます。少しずつイメージを膨らませていく感じです。

珍獣
全体像を把握して、それをもとに少しずつ学んでいけば、それぞれの繋がりを理解しながら進めていけるんです!

 

次回のレッスンでは、controller から view に値を渡す方法を学んでいきましょう。
お疲れ様でした!

前の記事 / 次の記事