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

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

|手順|記事|
|---|---|
|#1|[Rails の開発環境構築](https://qiita.com/to3izo/items/5d06243998192513bed9)|
|#2|**コントローラ・ビューの基本**（今回）|
|#3|[モデルとマイグレーションの基本](https://qiita.com/to3izo/items/a17a6ce61e0002fd8f5c)|
|#4|[DB のデータを画面に表示する](https://qiita.com/to3izo/items/422e06724f360e1d0d19)|
|#5|[画面から DB にデータを登録する](https://qiita.com/to3izo/items/7d3c5a532e129bfd3a0a)|
|#6|[画面から DB のデータをの更新・削除する](https://qiita.com/to3izo/items/a8001c1bbf7919d137ed)|

### 対象

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

### 前提
:::note warn
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 開発における、主要な思想や哲学は以下の通り。

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

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

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

![rails_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/b5d4d3b7-5082-e2ed-05d5-0fce3041d8aa.png)
👉 Rails の場合は、MVC に加えて「ルーター（ルーティング）」「アクション」「ヘルパー」等のしくみが加わる（後述）。

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

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

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

## 手順（トップページを作る）
とりあえず、テキトーなページを１つ作ってみましょう🙋‍♂️

### ルーティングを追加
ルーティングとは、「どんなURLで、どんな風にリクエストされたら、どのコントローラが受け付けるか」の対応関係のこと。Rails での基本的な書き方は以下。
```
HTTPメソッド "パス", to: "コントローラ名#アクション名"
```

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

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

```diff_ruby: 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 のジェネレートコマンドで、コントローラを自動生成できる。
```zsh
# コントローラ追加コマンド
rails generate controller {コントローラ名} {アクション名}

# または短縮系
rails g controller {コントローラ名} {アクション名}
```
👉 これを実行すると、実は「ルーティング追加」「コントローラ生成」「ビュー生成」を自動でやってくれる。

今回は、先にルーティングを追記しているので、オプションをつけてルーティング追加だけスキップする
```zsh
rails generate controller Top index --skip-routes
```

すると、app 配下にファイル等が自動生成される。
```diff_shell
プロジェクトディレクトリ/
  ├ app
  │ ├ controllers/
+ │ │  └ top_controller.rb # コントローラ
  │ ├ views/
  │ | └ top/
+ │ |   └  index.html.erb # アクション名のビュー（画面部分）
  │ └ helpers/
+ |  └ top_helper.rb # ビューヘルパー
  └ test/
    └ controllers/
+     └ top_controller_test.rb # コントローラの単体テストファイル
```
※ 「ヘルパー（ビューヘルパー）」「テスト（単体テスト）」については、また別の機会に解説するので、今回は割愛（"開発をより便利にするもの" くらいに思っておいてください）。

末尾が `_controller.rb` となっているのがコントローラ。
```diff_shell
 app
  └ controllers/
+    └ top_controller.rb # コントローラ
```

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

```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テンプレート」** という。

```erb: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/3fd3fb50-0732-c3fb-65cd-48f67fffeec1.png)
👉 `localhost:3000` へのアクセスは、`localhost:3000/` と同じ扱いになり、`/` のルーティングが働いて `Top` コントローラ → `index` アクション → `index` テンプレート（ビュー）が呼ばれた。

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

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

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

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

次に、画面テンプレートで、設定した変数を呼び出す。
```diff_erb: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/a8191582-6052-5225-3bef-d47ecc8324d0.png)
👉 もちろん、コントローラの変数の値を変えれば、表示内容も変えてくれる。

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

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

イコール無し `<%` の使い方の例。まずは、コントローラにもう一つ変数を用意する。
```diff_ruby:app/controllers/top_controller.rb
class TopController < ApplicationController
  def index
    @name = "佐藤"
+   @age = 10      # 年齢を表す変数を追加
  end
end
```

次に、テンプレートに、追加した変数を判定する Ruby の if 文を追記。
```diff_erb: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](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/787582/6070eece-5c46-df6f-5986-139e278b0097.png)
👉 当然、コントローラの `@age` を 18 以上の数値に変えれば、「成人しています。」と表示される。

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

## まとめ

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