Railsプロジェクト作成からMVCまで

# この記事の目的
現在学習中のRailsについての理解とアウトプット、振り返り用
Railsプロジェクト立ち上げからCRUD機能実装までのフローについて記載

# 前提条件
下記のインストールが完了していること
- Homebrewのインストール
- rbenvのインストール
- Rubyのインストール
- Bundlerのインストール

こちらについては[別記事](https://qiita.com/pikimaru/items/77514478c8874aff1dc4)で記載しています。

# Railsプロジェクト立ち上げ
### ①プロジェクト用のディレクトリ作成（作成場所はどこでも）
```
$ mkdir ディレクトリ名
```
### ②作成したディレクトリに移動
```
$ cd ディレクトリ名
```
### ③Gemfileが作成
gemをインストールするため各種インストールしたいgemを列挙したGememfileを作成するためのコマンドです。
```
$ bundle init
```
### ④Gemfileを編集
作成したままだと使用できないので以下のように編集する
```
# frozen_string_literal: true

source "https://rubygems.org"

git_source(:github) {|repo_name| "https://github.com/#{repo_name}" }

gem "rails"　　←コメントアウトを外す
```
### ⑤bundle install
bundle installは作成されたGemfileをもとにgemをインストールするコマンドになります。
bundle installをする場合は`--path vendor/bundle`を付けてプロジェクトごとにgemを管理する。
こちらの`--path=vendor/bundle`についてはつけてもつけなくても良いみたいです。
[つけるかつけないかの参考記事](https://qiita.com/jnchito/items/99b1dbea1767a5095d85)
```
$ bundle install --path=vendor/bundle
```
因みに`--path vendor/bundle`オプションを付けることで、プロジェクトの`vendor/bundle`以下にgemが格納されます。
プロジェクトごとに管理することでプロジェクトごとのgemのバージョンの違いを気にすることがなくなります。

### ⑥Railsのバージョン確認
```
$ bundle exec rails -v
Rails 7.0.4.2
```

### ⑦Railsプロジェクトを作成
```
$ bundle exec rails new . -B　--skip-test
```
.（ドット）にすると現在のディレクトリにRailsプロジェクトが生成されます。
作成したいプロジェクトに沿って下記のようなコマンドを追加していきます。

| オプション | 効果 |
|:-----------|:------------|
| -d, --database=DATABASE | 指定したデータベースに変更する（railsのデフォルトのDBはsqlite3）<br>例）-d mysql |
| --skip-turbolinks | turbolinksをオフにする　|
| --skip-test | railsのデフォルトのminitestというテストを使わない時に付ける。RSpecなどほかのテストフレームワークを利用したい時に使うと良い |
| ｰB, --skip-bundle | Railsプロジェクト作成時にbundle installを行わないようにする |

### ⑧サーバー起動
```
$ rails server
```
これでサーバー起動が完了したのでhttp://localhost:3000/ へアクセスします。
下の画像のようにRailsの画面が表示されれば、成功です！！
![Rails.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/f17d6f84-bac5-ddeb-20c4-b386305cff49.png)


# MVC作成
### コントローラー作成
`users`はコントローラ名になるので、お好きな名前で問題ないです。
```
$ rails generate controller users index
// generateは省略可能なのでどちらでもOK
$ rails g controller users index
```
因みにこちらのコマンド実行時点でviewファイルも作成されています。
### ルーティング
①ルーティングの設定の確認
```
$ rails routes
下記のように出るかと思います
users_index GET    /users/index(.:format)   users#index
```
因みにルーティング記載ファイルは`config/routes.rb`になります。

### モデル作成
`User`はモデル名になるので、お好きな名前で問題ないです。
`name:string age:integer`はカラム名とデータ型の指定になります。
```
$ rails g model User name:string age:integer
```
作成モデルファイルは`app/models/user.rb`
マイグレーションファイル（データベースの構造に変更を加えることのできるファイル）は`db/migrate/20230219150517_create_users.rb`
`20230219150517`はコマンド実行時のタイムスタンプが記載されます。
#### 番外
こちらはリレーションを行う場合の例なので今回の流れでは無視して良いです。
こちらでは、Userに紐づくTodoのテーブルを作成したい際にUserテーブルとリレーションを行う際のモデル作成コマンドを記載しています。

```
// モデル名(小文字):referencesとする
$ rails g model Todo title:string content:text user:references
```
上記のコマンドを実行すると下記の２点が行われる
- reference型を指定したカラム名は テーブル名_id となる。（user:reference であれば、 user_id というカラムが生成される）
- referencesを指定したことで、生成されたモデルファイルにbelongs_to :userが追加される。

### マイグレーション実行（マイグレーションファイル記載内容でテーブルの作成）
```
$ rails db:migrate
```
一応テーブル構造確認
```
// 下記コマンドでDB内の操作可能モードになる(デフォルトだとsqlite)
$ rails dbconsole
// テーブル一覧確認
sqlite> .tables
// テーブル構造確認
sqlite> .schema テーブル名
```

### 簡易的なデータ操作
```
$ rails console
// テーブル情報全て取得
> User.all
// 操作対象テーブル指定
> user = User.new
// 追加ユーザー情報指定
> user.name = 'Tarou Satou" 
> user.age = 20
// ユーザーDB保存
> user.save
// ユーザー取得
> User.all
```
## 画面にユーザー情報出力
userテーブルを作成しユーザも追加したので、追加したユーザー情報をルーティングしている　`http://localhost:3000/users/index`
に出力していきます。
### コントローラー編集
userテーブルから全ユーザー情報取得
```app/controllers/questions_controller.rb
class UsersController < ApplicationController
  def index
    @users = User.all
  end
end
```

### ビュー編集
コントローラー作成時に実行した`$ rails generate controller users index`コマンドで`app/views/users/index.html.erb`ファイルができているので下記のように編集。
取得したユーザー情報を`each`で取り出して出力しています。
```app/views/users/index.html.erb
<h1>Users#index</h1>
<p>Find me in app/views/users/index.html.erb</p>
<ul>
    <% @users.each do |user| %>
        <li>
            <%= user.id %>,<%= user.name %>,<%= user.age %>
        </li>
    <% end %>
</ul>
```

### 画面確認
ブラウザでを下記のURLを叩く。
サーバー落ちている方は再度`$ rails server`を実行
```http://localhost:3000/users/index```
上記実行すると下の画像のような画面が表示されるかと思います。ユーザー情報は追加したユーザーが表示されているかと思いますので人によって異なると思います。
![user_index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/462658/799c06c8-7efc-4b11-e211-f3b2e07f488e.png)


次回はCRUD機能作成までまとめたい、、