Ruby on Railsを使って新しウェブページを作る

概要

Ruby on Railsを使って新しウェブページを生成する方法についてみてみようかと思います。

このブログポストはシリーズで作成されてます。詳しく内容は下記のリンクを参考してください。

ここで使ったソースコードはGithubで確認できます。

Github ソースコード

Ruby on Railsも他の言語のフレームワークと同じにMVCパタン(Model-View-Controllerパタン)を持っています。したがって、新しウェブページを作成するためには基本的ViewとControllerを作成する必要があります。

Controller

まず、下記のコマンドを使ってControllerを生成します。

# cd StudyRails
bundle exec rails generate controller home

generateのコマンドを下記のように簡単にgで使うこともできます。

bundle exec rails g controller home

Controller生成エラー

上のコマンドを実行しても、何も動作しない場合、実行したコマンドを停止して、下記のコマンドを実行します。

rake app:update:bin

そしたら下記のようなメッセージを確認することができます。Yを入力して進めます。

/StudyRails/bin/rails? (enter "h" for help) [Ynaqdhm]
/StudyRails/bin/rake? (enter "h" for help) [Ynaqdhm]

そして、まだ、下記のコマンドでControllerを生成します。

# cd StudyRails
bundle exec rails generate controller home

また、下記のようなメッセージが表示されて、Controllerが生成されない時は、

error Couldn't find an integrity file
error Found 1 errors.


========================================
  Your Yarn packages are out of date!
  Please run `yarn install --check-files` to update.
========================================


To disable this check, please change `check_yarn_integrity`
to `false` in your webpacker config file (config/webpacker.yml).

上の説明にもありますが、下記のコマンドを実行します。

yarn install --check-files

そして、また、下記のコマンドを使ってControllerを生成します。

# cd StudyRails
bundle exec rails generate controller home
# bundle exec rails g controller home

問題なく生成されたら、下記のようなメッセージが確認されます。

create  app/controllers/home_controller.rb
invoke  erb
create    app/views/home
invoke  test_unit
create    test/controllers/home_controller_test.rb
invoke  helper
create    app/helpers/home_helper.rb
invoke    test_unit
invoke  assets
invoke    scss
create      app/assets/stylesheets/home.scss

Controller生成ファイル

RailsのコマンドでControllerを生成した場合は下記のようなファイルが生成されます。

├── app
│   ├── assets
│   │   ├── stylesheets
│   │   │   ├── home.scss
│   ├── controllers
│   │   ├── home_controller.rb
│   ├── helpers
│   │   ├── home_helper.rb
│   ├── views
│   │   ├── home
├── test
│   ├── controllers
│   │   ├── home_controller_test.rb

このようなファイル中で、app/controllers/home_controller.rbを使って、ほとんどの処理を作ります。

ControllerへActionを追加

上ので生成されたapp/controllers/home_controller.rbファイルを開いて下記のように修正します。

class HomeController < ApplicationController
    def index
    end
end

ここではhome_controllerへindex関数を追加しました。RailsではControllerへ追加した関数をActionと表現します。

View

Railsのコマンドを使ってControllerを生成したら、下記のようなフォルダが確認できます。

├── app
│   ├── views
│   │   ├── home

Railsのコマンドで生成されたhomeフォルダへhome_controller.rbに必要なViewファイルを生成して連結する予定です。

homeフォルダの中へindex.erbファイルを生成して下記のように修正します。

Hello Rails!!

ControllerとViewを連結

ControllerとViewを連結するためには特にすることがないです。ControllerのAction名(関数名 - def index)とViewファイルのファイル名(index.erb)を一致させると、Railsは他に設定しなくても、自動的に該当するViewファイルを連結します。

Routes

RailsでRoutesはURLとControllerを連結する役割をします。上で作ったControllerを連結するためconfig/routes.rbファイルを開いて下記のように修正します。

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

上のように修正すると、/のURLにGETのリクエストが来ると、home_controllerのindexアクション（関数）が実行されます。このように実行されあたindexアクションは同じ名前であるhome/index.erbファイルを探して画面に表示します。

確認

これで新しページを表示する準備は終わりました。下記のコマンドでRailsサーバーを起動します。

rails server

または、簡単に下記のコマンドを使うこともできます。

rails s

そしてブラウザを開いてhttp://127.0.0.1:3000/へ接続すると下記のように私たちが作った画面が確認されます。

完了

これでRuby on Railsを使って新しページを生成する方法について確認しました。

Controllerを生成してController中にアクション（関数）を作って、アクション名（関数名）と同じ名前のViewファイルを作って、最後にRouteへURLとControllerを連結することで新しいページを表示することができました。

じゃ、一旦ページを作ることはできましたので、次はデータを使う方法について調べてみましょう！

参考

このブログポストはシリーズで作成されてます。詳しく内容は下記のリンクを参考してください。

ここで使ったソースコードはGithubで確認できます。

Github ソースコード

Github Sponsor

Buy me a coffee

私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

Ruby on Railsを使って新しウェブページを作る