LoginSignup
0
1

More than 1 year has passed since last update.

@to3izo(とみぞー @HackTube)

【初心者向け🔰】Ruby on Rails チュートリアル 入門（簡単なトップページを作って処理の流れを知る）

Last updated at Posted at 2023-03-23

概要

初めて Ruby on Rails で Web アプリ開発するための、入門編の記事。
Rails の基礎部分をなるべく絞って解説する。

手順 記事
#1 Rails の開発環境構築
#2 コントローラ・ビューの基本（今回）
#3 モデルとマイグレーションの基本
#4 DB のデータを画面に表示する
#5 画面から DB にデータを登録する
#6 画面から DB のデータをの更新・削除する

対象

  • Ruby on Rails で開発をしてみたい（しなければならない状況になった）方
  • HTML/CSS で簡単な Web ページを書いたことがある方
  • 「DB」「SQL」という言葉の意味を何となく理解できる方
  • 「REST API」や「GET」「POST」などを聞いたことがある方
  • Ruby もしくは、その他のオブジェクト指向のプログラミング言語に触れた方
    • 変数、四則演算、if 文、for 文、などは書いたことある
    • クラス、メソッド、インスタンス、などは聞いたことある

前提

macOS で作業する前提で書いてます。Windows の方は適宜、読み替えてください🙏

  • OS： macOS 13.12.1 "Ventura"
  • CPU： Intel
  • Ruby： v3.1.3
  • SQLite3： v3.39.5
  • Bundler： v2.4.9
  • Rails： v7.0.4

Rails の基本思想とアーキテクチャ

Rails は「MVC アーキテクチャ」というものをベースに開発するように設計されています。

Rails の基本思想

Rails 開発における、主要な思想や哲学は以下の通り。

思想 略称 意味
繰り返しを避けよ
（Don't Repeat Yourself）		 DRY DRYの原則とは、「システムを構成するあらゆる部品は、常に単一であり、明確であり、信頼できる形で表現すべきである」 という、ソフトウェア開発上の考え方。
同じコードを繰り返し書くことを徹底的に避けることで、メンテナンス性と拡張性を向上し、バグも減らせると考えられている。
設定より規約が優先
（Convention Over Configuration）		 CoC CoC とは、「開発者の決定すべきことを減らし、単純にするが柔軟性は失わせない」 という考え方。
CoC の本質は、「開発者が決定すべきは、アプリケーションの慣例に従わない部分のみ」 という点であり、Rails の場合は、Webアプリの各種設定については従来の経験や慣習を元に、あらゆるデフォルト値が定められている。そのため、開発者は大量の設定ファイルを設定せずに済むようになっている。

MVC アーキテクチャとは

以下のようなソフトウェアの構成のこと（「MVC モデル」と言う人もいる）。「MVC」は以下の３つの頭文字で、これらの構成をベースに作られたアプリケーションに使われます。

  • Model（モデル）：DB周りの処理（データ検索/データ登録・更新 など）を担当する領域。Rails なら .rb ファイルで書く
  • View（ビュー）：画面表示の処理を担当する領域。Rails なら .erb ファイルで書き、ビューにあたるファイルを 「Template（テンプレート）」 と表現する
  • Controller（コントローラ）：ユーザ操作など外部からのリクエスト（要求）とレスポンス（応答）を担当する領域。Rails なら .rb ファイルで書く

rails_01.png
👉 Rails の場合は、MVC に加えて「ルーター（ルーティング）」「アクション」「ヘルパー」等のしくみが加わる（後述）。

※ コントローラにもモデルにもビューにも該当しない処理はどこに書くのか？というと、それは現場や個人によって変わる。モデルやコントローラに書く人もいれば、自動生成される「lib」配下に書いたり、「ビジネス」「サービス」などと別領域を定義して使う人もいる。

命名規約

Rails というより Ruby の命名規約。名前をつけるときに、記法に一定の（マナーに近い）ルールがある。

対象 記法 例
クラス名 アッパーキャメルケース
（パスカルケース）		 MyClassName
モジュール名 MyModule
メソッド名（真偽値 返却時のみ） スネークケース
※ ただし、末尾に `?` をつける
※ 先頭に `is` や `has` をつけない		 clicked?
invalid_type?
メソッド名（上記以外） スネークケース my_func_name
ファイル名 （基本は）スネークケース my_file.rb
変数名 スネークケース my_variable
定数名 アッパースネークケース
（コンスタントケース）		 CONST_VALUE

手順（トップページを作る）

とりあえず、テキトーなページを１つ作ってみましょう🙋‍♂️

ルーティングを追加

ルーティングとは、「どんなURLで、どんな風にリクエストされたら、どのコントローラが受け付けるか」の対応関係のこと。Rails での基本的な書き方は以下。

HTTPメソッド "パス", to: "コントローラ名#アクション名"
  • HTTPメソッド： get や post など
  • パス（Path）： https://example.com/xxxxx の /xxxxx 部分
    • パスがない場合は / とする
  • あるパスにアクセスされたら、どのコントローラの、どのアクションを呼び出すのかを定義

Rails のルーティング管理ファイルは config/routes.rb なので、ここにルーティングを追加する。

config/routes.rb
Rails.application.routes.draw do
+ get "/", to: "top#index"
  # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html

  # Defines the root path route ("/")
  # root "articles#index"
end

👉 今回は、『単純にドメイン（example.com とか）のみが呼ばれたら、"Top" コントローラの中の "index" アクションを実行する』という意味になる。
次に「コントローラ」と「アクション」を説明します。

コントローラ作成

コントローラは、ルーティングから呼ばれる処理を管理する箱（ハコ）。その中に値（フィールド）や関数（メソッド）を持っている。

Rails のジェネレートコマンドで、コントローラを自動生成できる。

# コントローラ追加コマンド
rails generate controller {コントローラ名} {アクション名}

# または短縮系
rails g controller {コントローラ名} {アクション名}

👉 これを実行すると、実は「ルーティング追加」「コントローラ生成」「ビュー生成」を自動でやってくれる。

今回は、先にルーティングを追記しているので、オプションをつけてルーティング追加だけスキップする

rails generate controller Top index --skip-routes

すると、app 配下にファイル等が自動生成される。

プロジェクトディレクトリ/
  ├ app
  │ ├ controllers/
+ │ │  └ top_controller.rb # コントローラ
  │ ├ views/
  │ | └ top/
+ │ |   └  index.html.erb # アクション名のビュー（画面部分）
  │ └ helpers/
+ |  └ top_helper.rb # ビューヘルパー
  └ test/
    └ controllers/
+     └ top_controller_test.rb # コントローラの単体テストファイル

※ 「ヘルパー（ビューヘルパー）」「テスト（単体テスト）」については、また別の機会に解説するので、今回は割愛（"開発をより便利にするもの" くらいに思っておいてください）。

末尾が _controller.rb となっているのがコントローラ。

 app
  └ controllers/
+    └ top_controller.rb # コントローラ

アクションとは

アクションとは、コントローラクラス内のメソッドの中で、ルーティングから呼ばれる処理のこと。

app/controllers/top_controller.rb
class TopController < ApplicationController
  # index アクション（まだ中身は空）
  def index
  end

end

👉 基本的にすべてのコントローラは、既に用意されている便利機能を利用するために ApplicationController を継承する（「CoC（設定より規約）」の具体例）。
👉 アクションは、処理の中で明示的にレンダリングするビューを指定できる（＝ 表示する画面を views の中から選べる）。ただし、アクションの中身が空の場合、Rails は「コントローラ名」と同じディレクトリ内の「アクション名」と同じ .html.erb ファイルを自動的にレンダリングする（「CoC（設定より規約）」の具体例）。

今回の場合、アクションが空なので、ルーティングで top#index が呼ばれると、app/views/top/index.html.erb が画面表示されることになる。

ビューの画面表示

ビューは、MVC モデルにおける画面表示の部分。Rails では、ビューにあたるのファイルを 「Template（テンプレート）」 と言う。
「〇〇テンプレート」というものは一般に幅広く存在し、今回の様に HTML（画面）のテンプレートに該当するものは 「HTMLテンプレート」 という。

app/views/top/index.html.erb
<h1>Top#index</h1>
<p>Find me in app/views/top/index.html.erb</p>

👉 Template のファイル名は xxx.html 形式で、ファイル拡張子は .erb。
ERBファイルは HTMLテンプレートであり、HTML の中に Ruby が埋め込めるようになっているファイル形式。もちろん、HTML の書き方だけでも動く。

Rails サーバを起動して、ブラウザで localhost:3000 にアクセスする。
rails_02.png
👉 localhost:3000 へのアクセスは、localhost:3000/ と同じ扱いになり、/ のルーティングが働いて Top コントローラ → index アクション → index テンプレート（ビュー）が呼ばれた。

※ Rails サーバは、動かしたままでも開発を続けられるため、サーバ停止せずにこのまま後続作業を続ける。

変数を画面に表示する

Rails は、簡単に変数を使った動的な画面を作れる。まずは、コントローラで変数を宣言する。

app/controllers/top_controller.rb
class TopController < ApplicationController
  def index
+   @name = "佐藤"
  end
end

👉 @name が変数。いきなり @ から始めて、任意の名前をつければ OK（厳密には 「インスタンス変数」 というが、詳しい解説は今回割愛する）。

次に、画面テンプレートで、設定した変数を呼び出す。

app/views/top/index.html.erb
  <h1>Top#index</h1>
  <p>Find me in app/views/top/index.html.erb</p>
+ <div>
+   私の名前は<%= @name %>です
+ </div>

👉 呼び出し方は <%= @変数名 %> 。erb ファイルは <%= 〜 %> の間を Ruby と判断してる。これによって、画面で変数の中身を表示できる。

では、再度ブラウザで画面更新して表示を確認。
rails_03.png
👉 もちろん、コントローラの変数の値を変えれば、表示内容も変えてくれる。

erbタグとは

.erb ファイルで Ruby が書け erbタグ には、書き方が２種類あります。
❶ 先頭にイコールをつけた <%= 〜 %>
❷ 先頭にイコールがない <% 〜 %>

この２つの違いは、「Ruby の処理結果を画面表示するか/しないか」。イコール付き <%= の場合は、中身の結果を画面に表示し、イコール無し <% の場合は、表示をしない。

イコール無し <% の使い方の例。まずは、コントローラにもう一つ変数を用意する。

app/controllers/top_controller.rb
class TopController < ApplicationController
  def index
    @name = "佐藤"
+   @age = 10      # 年齢を表す変数を追加
  end
end

次に、テンプレートに、追加した変数を判定する Ruby の if 文を追記。

app/views/top/index.html.erb
  <h1>Top#index</h1>
  <p>Find me in app/views/top/index.html.erb</p>
  <div>
    私の名前は<%= @name %>です
  </div>

+ <div>
+   <% if @age < 18 %>
+     未成年です。
+   <% else %>
+     成人しています。
+   <% end%>
+ </div>

👉 上記のように、画面内で if や for などの Ruby の処理を書く場合に、画面に表示する必要が無いものには <% 〜 %> を使う。

結果は、以下のとおり。
rails_04.png
👉 当然、コントローラの @age を 18 以上の数値に変えれば、「成人しています。」と表示される。

erb タグは適切なものに使う

「if」や「else」など表示するものが元々ないもの（できないもの）に無理矢理 <%= を使うと以下の様にエラーになる。
スクリーンショット 2023-03-24 0.19.24.png
👉 Rails は異常が発生すると、ブラウザ表示がエラー画面に変わり、何のエラーか？どこがおかしいか？などを表示してくれる（ただし英語表記なので慣れましょう）。
👉 今回の場合、「ActionView（ビューのレンダリング）で、SyntaxError In Template（画面テンプレートの構文エラー ＝ 書き方エラー）が、TopController#index のアクション実行に発生している」とタイトルに書いてあり、具体的な箇所が下部に表示されている。

まとめ

  • Rails の思想
    • DRY（繰り返しを避けよ）
    • CoC（設定より規約が優先）
  • アーキテクチャ
    • MVC アーキテクチャがベース
    • 更に、ルーティング、アクション、ヘルパー などがある
  • 命名規約がある
    • クラス名・モジュール名は「アッパーキャメルケース（パスカルケース）」
    • 定数は「アッパースネークケース（コンスタントケース）」
    • 上記以外は、基本的に「スネークケース」
  • Rails ジェネレートコマンドを使うと、自動でファイル生成してくれる
  • ルーティング
    • 「パス」と「コントローラ#アクション」の関係を管理する
  • コントローラ
    • ルーティングの呼び出しを受け付け、「アクション」というメソッドを用意する
    • アクションに明示的なビュー指定がなければ、アクション名と同じビューを自動で表示する
  • ビュー
    • 表示画面を作る部分
    • 「Template（テンプレート）」と呼ばれる
    • HTML の中に、erb タグで Ruby が書ける
    • erb タグは「イコール付き：表示」「イコール無し：非表示」の２種類ある
0
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
0
1