docker-compose+Rails7+Ruby3の環境に新たにControllerを追加する

はじめに

以前の投稿で作成したRails7+Ruby3のdocker環境に、新たにControllerを追加してみたいと思います。環境構築からしてみたいという方はぜひ↓の記事を参考にしてみてください。コピペだけでdocker-compose+Rails7+Ruby3+MySQLの環境を作ることができます。

筆者の環境

  • M1 Mac BigSur 11.4
  • docker-compose 1.29.2
  • Docker 20.10.7
  • 前提

    基本的にはホストPCにはRubyやRailsが存在しないということを前提にしています。

    そのため、Railsコマンドなんかは全てdocker環境内で実行する形となります。

    やりたいこと

    ブラウザで http://localhost:3000 と入力して任意のページを表示する

    やること

    • コントローラ作成(sample_controller.rb)
    • ルーティング設定
    • コントローラ修正
    • ビューファイル修正
    • ブラウザアクセスしてみて挙動確認

    コントローラ作成

    もちろん手動でファイル作成もできますが、モダンなウェブフレームワークらしくここはコマンドで作成してみましょう。以下のコマンドを実行することでコントローラやビューなどのファイルが自動で生成されます。

    # docker環境に入る $ docker-compose exec app bash # docker環境内で以下のコマンドを実行する root@66608e8b1148:/app# rails g controller sample_controller index create app/controllers/sample_controller.rb route get 'sample/index' invoke erb create app/views/sample create app/views/sample/index.html.erb invoke test_unit create test/controllers/sample_controller_test.rb invoke helper create app/helpers/sample_helper.rb invoke test_unit
    Code language: PHP (php)

    色々できましたね。

    今回この中で使うのは sample_controller.rbapp/views/sample配下のファイルのみになります。

    ルーティング設定

    Railsプロジェクトに最初から自動生成されている config/routes.rbを修正していきます。

    今回はホストのルートにアクセスした時に sample_controller.rbの処理を通るようにやっていきましょう。

    以下をconfig/routes.rbに追記してください。

    root "sample#index"
    Code language: JavaScript (javascript)

    これだけでOK

    コントローラ修正

    routes.rbで sample#indexを指定しているので、indexメソッドを追加します。

    こんな感じです。

    class SampleController < ApplicationController def index @greeting = 'hello' end end
    Code language: JavaScript (javascript)

    @greeting = 'hello'helloという文字列が格納されたgreetingという変数をフロントに持っていきます、ということになります。

    ここでは明示的に指定しなくても、views/sample/index.html.erbを見るという設定になっています。

    ではビューを作っていきましょう。

    ビューファイル修正

    ブラウザにレンダリングされるビューのファイルをいじっていきます。

    views/sample/index.html.erbです

    <h1>Sample#index</h1> <p>Find me in app/views/sample/index.html.erb</p> <br> <p><%= @greeting %></p>
    Code language: HTML, XML (xml)

    下の2行を追記しました。

    これで準備OKですね。ブラウザでアクセスしてみましょう。

    ブラウザアクセスして挙動確認

    localhost:3000にアクセスしてみましょう。↓のように表示されたら成功です。

    Railsがみるみる上達する上質書籍を紹介

    Related Posts