Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@y-kidainCLINKS株式会社

【Ruby on Rails】初学者向け－開発の流れについて②　Gem・DB設定とルーティング編

Last updated at Posted at 2024-10-24

本記事については簡易的なタスク管理アプリを作成することを前提に、
下記流れのもと、Railsの開発について言及して行きたいと思います。

Rails開発の流れについて

・Railsプロジェクトの作成とDockerの設定
【Ruby on Rails】初学者向け－開発の流れについて①　プロジェクトの作成編

・Gem・DB設定とルーティング（今回学習するのはこちら）
・Bootstrapの導入
・一覧、新規作成、参照、更新、削除画面機能の追加
・検索機能の追加
・DBやモデル周りの整備
・バリデーション機能追加
・ユーザー認証機能追加

（※ 他追加機能があれば随時記事にしていく予定です）

前提
・Docker
・Ruby on Rails 7
・Mysql
・BootStrap
・VSCode

まず、ここからは下記の記事の続きなのですが、「ルーティングとは何ぞや」だけ知りたい方は、この部分を飛ばしていただいても問題ありません◎
その場合は見出しの「ルーティング」から記事を読んで下さい。

【前回】
【Ruby on Rails】初学者向け－開発の流れについて①　プロジェクトの作成編

前回のおさらいと環境構築の続き

・Railsアプリの土台となるファイルをコマンドで作成
・Dockerfileとdocker-compose.ymlを作成してコンテナの立ち上げ準備

前回の続きから
まずターミナルを開いてコンテナを起動します。

terminal
C:\programs2024\task-practice> docker compose up

[+] Running 2/0
 ✔ Container task-practice-db-1   Created                                                                                0.0s 
 ✔ Container task-practice-web-1  Created                                                                                0.0s 
Attaching to db-1, web-1
db-1   | 2024-10-23 07:40:51+00:00 [Note] [Entrypoint]: Entrypoint script for MySQL Server 8.0.39-1.el9 started.

# ~省略~

次に、新しくターミナルを開いて、起動したコンテナの状態を確認します。
STATUS列を確認して「Up」という記述があれば起動しています。

terminal
PS C:\programs2024\task-practice> docker compose ps
NAME                  IMAGE               COMMAND                   SERVICE   CREATED       STATUS          PORTS
task-practice-db-1    mysql:8.0           "docker-entrypoint.s…"   db        4 hours ago   Up 22 minutes   3306/tcp, 33060/tcp
task-practice-web-1   task-practice-web   "sh -c 'rm -f tmp/pi…"   web       4 hours ago   Up 22 minutes   0.0.0.0:3000->3000/tcp

コンテナの状態が確認出来たら次はGemfileについて説明していきます。

Gemfile
…一言で、Railsの開発を行う上で必要な拡張機能をインストールするためのリストのこと。
　その中で必要なライブラリやパッケージ（これらをGemという）を指定し、
　bundle installというコマンドを実行すればそれらをインストールすることができる。
　
※Gemは数多くあり、ものによっては使用できないバージョンや
　バージョンの組み合わせがあるのでもしbundle installで躓いたときは
　素直にエラー内容を検索してどのGemのバージョンを指定すれば良いかを
　確認するのが良いです。

現在のDockerfileの状態だと各Gemの最新バージョンを自動的に持ってきて
インストールされてしまうため、Dockerfileに「Gemfile.lock .」を追記し、
「docker compose build」を実行したときにインストールされるバージョンを固定します。

Dockerfile
# ~~~~省略~~~~
COPY Gemfile .
COPY Gemfile.lock .
# ~~~~省略~~~~

次にdatabase.ymlというファイルについて説明していきます。

database.yml
…その名の通りDBの設定ファイル。
　ここにrailsのアプリケーションからDBに接続するために必要な情報を記載する。

database.yml
# （記載例）
# 今回はdevelopment環境を使用するが、特にproduction(本番)環境と切り替えない前提のため
# defaultのブロック内に記載する。

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root # 設定によって変わる
  password: password # 設定によって変わる
  host: db # 設定によって変わる
# ~~~~省略~~~~

このdatabase.ymlが設定されていないアプリ・DB間でのデータのやり取りができないので注意してください。

次に、DBを作成しておかなければlocalhost:3000に接続した際、
ActiveRecord::NoDatabaseErrorが発生するので、下記コマンドを使用してDBを作成します。

terminal
PS C:\programs2024\task-practice> docker compose exec web rails db:create 
Created database 'app_development'
Created database 'app_test'

「localhost:3000」のURLをブラウザで打ち込んで画面確認を行います。
ようやくこんな画面が出てくるはずです。やったー。
image.png
以下、ようやくルーティングについて記載しています。

ルーティング

ルーティング
…Railsにおいて欠かせない機能であるルーティングは、URLと処理を結びつける仕組みである。
　アプリケーションに対する外部からのリクエスト（URL）を解析し、
　それに対応するコントローラーとアクションを呼び出す動作をする。
　（その名の通り、画面の情報やデータなどを送信して、処理が行えるように道を作るという認識）

基本的なルーティングの書き方（Rails 7）
ルーティングの書き方は何通りかありますが、そのうちの２つを紹介します。
まず１つ目は処理ごとに記載していくやり方です。

routes.rb
Rails.application.routes.draw do
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html
  # Defines the root path route ("/")
  # root <コントローラー名>#<アクション名>
   root "tasks#index"
end

root
…localhost:3000（ルート）をURLに入力した際、表示される画面を指定する

<コントローラー名>#<アクション名>
…どのコントローラーのどのアクションかを指定する

アクション
…ユーザからのリクエストを受け取り、必要なデータをモデルから取得し、それをビューに渡して表示するもの
　また、ビューのレンダリング、JSONデータを返す等HTTPレスポンスを生成するもの

よく使用されるアクション名の例
アクション名 説明
index リソースの一覧を表示する。　　　　　　　　　　　　　　　　　　　　基本的にすべてのレコードを取得してビューに渡す。主に一覧画面で使用される。
show 特定のリソースの詳細を表示する。IDをもとに1件のデータを取得する。　　　　　　　　　　　主に参照画面で使用される。
new 新しいリソースを作成するためのフォームを表示する。　　　　　　　　　　　　　新しいオブジェクトのインスタンスを作成する。新規作成画面で使用される。
create 新しいリソースをデータベースに保存する。　　　　　　　　　　　　フォームから送信されたデータをもとにオブジェクトを生成し、保存処理を行う。新規作成したものを登録する処理として使用される。
edit 特定のリソースを編集するためのフォームを表示する。　　　　　　　　　　　　既存のオブジェクトを取得してビューに渡す。　　　　　　　　　　　　主に編集画面で使用される。
update 特定のリソースを更新する。編集フォームから送信されたデータをもとに既存のオブジェクトを更新する。
destroy 特定のリソースを削除する。指定されたIDのレコードをデータベースから削除する。

ルーティングを記載したら、次はコントローラーを記載していきます。

コントローラー（Controller）
…リクエストを受け取り、処理を実行するファイル。
　モデルにデータ操作の依頼・計算・ビュー（後述）のレンダリング等様々な処理をここに記載します。

app/controllers/配下にファイルを追加し、今回は簡易的に記載します。
rails特有の命名規則に沿って記載しなければならないため、
ファイル名と、ファイル内のクラス名を記載する際は注意してください。

tasks_controller.rb
class TasksController < ApplicationController
    # 先ほどroutes.rbで指定したアクションのブロックを記載
    def index
    end
end

コントローラーを記載したので次はビューを記載していきます。

ビュー
…HTMLなど、画面の内容を記載するもの。基本的に下記の場所に記載します。
　app\views<コントローラー名に沿った名前>\<アクション名>.html.erb
今回の例だと「app\views\tasks\index.html.erb」にビューの内容を簡易的に書きます。

index.html.erb
<h1>タスク管理アプリ</h1>

ここまででルーティング・コントローラー・ビューの記載が終わったので、
一度画面を確認してみましょう。
image.png

正しくルーティングできて画面が表示できたらいったん本記事はここまでとします。
ルーティング・コントローラー・ビューにまつわる詳細な説明は、
今後の各機能の説明とともに書いていこうと思います。

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?