Railsでオリジナルのトップページを表示する

Railsを起動し、オリジナルのトップページが表示できるようにします。

Railsを起動する

前回の手順通りに、Railsプロジェクトを立ち上げることに成功していれば、
下記のような画面が表示されるはずです。
“http://localhost:3000″とブラウザのアドレスバーに入力してみます。

localhost3000

下記のような画面が表示された時は、WEBrick(アプリサーバー)が起動していません。

404notfound

プロジェクトルートに移動して、下記のコマンドを入力してください。

    # プロジェクトルートに移動する
    $ cd ~/dev/rails/myapp

    # WEBrickを起動するコマンド
    $ bin/rails server
  

下記のような感じで表示が出てくれば成功

    => Booting WEBrick
    => Rails 4.2.5 application starting in development on http://localhost:3000
    => Run `rails server -h` for more startup options
    => Ctrl-C to shutdown server
    [2015-11-16 11:08:00] INFO  WEBrick 1.3.1
    [2015-11-16 11:08:00] INFO  ruby 2.2.3 (2015-08-18) [x86_64-darwin14]
    [2015-11-16 11:08:00] INFO  WEBrick::HTTPServer#start: pid=32810 port=3000
  

「Ctrl-C」(controlとCを同時押し)と入力すれば、サーバーを停止できると書かれています。
覚えておきましょう。
WEBrickを再起動すると書かれていた場合は、

    $ Ctrl + C
    $ bin/rails s
  

と順番に入力してくださいという意味になります。

今、WEBrickの起動コマンドを、「bin/rails s」と書きました。
これは、「bin/rails server」の短縮形です。
「bin/rails s」は開発中に何度も入力することになるので、
覚えておくとよいと思います。

RootControllerを作成する

それでは、オリジナルのトップページを表示するために、
「RootController」を作成してみます。

ターミナルを開き、generateコマンドを叩きます。
Railsは目的に応じて、様々なコマンドを用意してくれています。
今回はコントローラーを作成するコマンドというものを使います。
なお、コマンドは原則としてプロジェクトルート(~/dev/rails/myapp/)で入力するものとします。

    $ bin/rails generate controller root index
  

このコマンドの意味は、「indexアクションを持つrootという名前のコントローラーを作成する」ということです。
下記のようなディレクトリとファイルが自動的に作られたと思います。

      create  app/controllers/root_controller.rb
       route  get 'root/index'
      invoke  erb
      create    app/views/root
      create    app/views/root/index.html.erb
      invoke  helper
      create    app/helpers/root_helper.rb
      invoke  assets
      invoke    coffee
      create      app/assets/javascripts/root.coffee
      invoke    scss
      create      app/assets/stylesheets/root.scss
  

コントローラーを作成すると、ビューファイルも自動的に作成されます。
「app/views/root/index.html.erb」というのがそれです。
「config/routes.rb」を見てみると、

    Rails.application.routes.draw do
      get 'root/index'
      ...
    end
  

「get ‘root/index’」という1文が追加れされています。
この1行により、「htttp://localhost:3000/root/index」というURLが有効となります。
では、実際にURLにアクセスしてみましょう。

root_index

オリジナルのトップページに変更する

先ほどの「config/routes.rb」を修正します。

    Rails.application.routes.draw do
      get 'root/index'

      root to: 'root#index'
      ...
    end
  

rootメソッドのtoオプションにrootコントローラーのindexアクションを渡しています。
こうすることで、「http://localhost:3000」にアクセスした時、
「htttp://localhost:3000/root/index」と同じ画面が表示されるようになりました。

表示内容も変更してみます。
修正するファイルは「app/views/root/index/html.erb」です。

    <h1>My First RailsApp</h1>
    <p>Welcome to My First RailsApp!!</p>
  

ブラウザにアクセスしてみましょう。
my_first_railsapp

ファイルの変更をコミットし、GitHubにプッシュしてみましょう。

    $ git add .
    $ git commit -m "add root controller"
    $ git push origin master
  

お疲れ様でした。
以上で、オリジナルのトップページの表示がされました。

Pocket

宮田真也

Webプログラマー。
1982年京都府城陽市生まれ。東京都練馬区在住。社会学系の大学・大学院を卒業後、会社員として約6年勤務。退職後、プログラミングを学び、畑違いのWebプログラマーとして独立し、現在に至る。