おっさん初学者のRailsチュートリアル学習記録(2章)

プログラミング年少組のど素人が、アウトプット用に素人目線の解説を書いていきます。
自分が自分に教えていることを想像しながら進めていきます。
下記と同じような境遇の方であれば参考になるかも

- まっさらなプログラミング初学者目線
- オール独学
- 勉強は得意じゃない
- 社会人のため、1日に勉強できる量は限られる。

電子書籍のwebテキスト(第６版)を購入して使用
Progateの「Web開発パス」完走済
ドットインストールのプレミアム会員卒業

#2章#
Railsの大きな特徴である「MVC」の全体像について、scaffoldという自動でアプリを作ってくれる仕組みを使って**「なんとなく」**把握します。

#2.1 アプリケーションの計画
*1章をざーーーーーっとおさらい*

1章でやったことを一気におさらいして、2章で作成するtoy_appアプリの骨組みを生成します
＊ワークスペースを作成するところからやりましたので、RailsやHerokuのインストールも含まれます

①Railsのインストール

```
$ echo "gem: --no-document" >> ~/.gemrc
$ gem install rails -v 6.0.3
```
②Yarnのインストール

```
$ source <(curl -sL https://cdn.learnenough.com/yarn_install)
```
③toy_appの生成

```
$ Rails _6.0.3_new toy_app
```
③Gemfileの編集

```
$ cd toy_app
　ここでGemfileを編集する
$ bundle install --without production
$ bundle update
```
④Gitの設定

```
$ git init
$ git add -A
$ git commit -m “Initialize repository”
$ git remote add origin https://github.com/<Gitアカウント名>/toy_app.git
$ git push -u origin master
　コマンド送信後、GitHubを起動してリポジトリを作成
```
⑤Herokuの設定してデプロイの準備

```
　まずはコントローラーやルーティングを編集して下記を実行する
$ git commit -am "Add hello"
$ source <(curl -sL https://cdn.learnenough.com/heroku_install)
$ heroku login --interactive
$ heroku create
$ git push heroku master
```
##2.1.1 ユーザーのモデル設計
*ユーザーのデータモデルを決める*

「モデル」はMVCの「M」でデータベースとのやりとりをする役割ということでした

ユーザーという概念をデータモデルで表す方法？データモデル？いきなり何言ってるか分からんですね・・・

要は**各ユーザーのデータを表す項目や設定値のルールを決める作業**のことです。
Userモデル・・・ユーザー名やemailなどを管理します

「ユーザー(users)」のデータには、「id(個別の番号)」「name(名前)」「email(メールアドレス)」の項目があって、それぞれの設定値はの型にintegerやstringを指定します。
そして決めたもの表にしたものがデータモデルです。。。

そしてここで決めたデータモデルがそのままデータベースとなります。
usersがデータベースのテーブル名になり、「id」「name」「email」がカラム(列)になります。
##2.1.1 マイクロポストのモデル設計##
*マイクロポストのデータモデルを作成する*

マイクロポスト・・・投稿のことです。よってユーザーの時と同様に
**各投稿のデータを表す項目や設定値のルールを決める作業**を行っていきましょう。
Micropostモデル・・・投稿内容や投稿日時などを管理します

「投稿(microposts)」のデータには、「id(個別の番号)」「content(投稿文)」「user_id(投稿したユーザーのid)」の項目があって、それぞれの設定値はの型にintegerやtextを指定します。
そして同じようにデータベースにすると
micropostsがテーブル名になり、「id」「content」「user_id」がカラム(列)になります。

今回使われているデータ型
integer・・・簡単に言えば整数
string・・・簡単に言えば文字列
text・・・簡単に言えば長い文字列
#2.2 Usersリソース#
*ユーザーデータモデルを実装*

2章では、「scaffold」とかいうものを利用して、toy_appを作成します
**scaffoldとは**
2.1で作ったRailsの骨組みに組み込むことで、自動的にいろんな機能を盛り込んだアプリに仕上げてくれるというものです。
一見良さげですが、

- 素人目には分かりませんが、ひどく無駄が多い
- そもそも自動的に機能が実装されては、勉強用には使えない
- とにかく複雑

などの理由からこれを使うのは2章オンリーにするそうです。

**どうやってscaffoldをRailsに組み込むのか**
rails generate(rails gでもよい)を使用します

**rails generateとは**
めちゃくちゃ分かりやすく説明してくれているサイトがありました
👉[rails g コマンドが行なっていること](https://diveintocode.jp/blogs/Technology/RailsGenerateCommand#:~:text=rails%20g%20(generate),%E3%81%84%E3%81%8F%E3%81%9F%E3%82%81%E3%81%AE%E3%82%B3%E3%83%9E%E3%83%B3%E3%83%89%E3%81%A7%E3%81%99%E3%80%82&text=%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E3%81%8C%E8%A6%81%E3%82%89%E3%81%AA%E3%81%84%E5%A0%B4%E5%90%88,%E3%81%AB%E3%82%88%E3%81%A3%E3%81%A6%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91%E3%82%92%E3%81%97%E3%81%BE%E3%81%99%E3%80%82)
こうやって使うみたいです

```
$ rails generate 組み込みたいもの
```
今回はscaffoldを組み込みたいので

```
$ rails generate scaffold
```
となります。
これに、先ほどのユーザーのデータモデルも加えることができます

```
$ rails generate scaffold User name:string email:string
```
＊「id」が入っていないですが、Railsが勝手に追加するのでわざわざ入力しなくてもよいみたいです

モデルの設定をしましたので、データベースを更新する処理をしてあげます

```
$ rails db:migrate # これを「データベースをマイグレートする」という
```
このコマンドを送信することでデータベースの構造がモデルの設定仕様に変更されます。モデルとデータベースはマイグレーションファイルを使ってやりとりしていますので、
「実行していないマイグレーションファイルがあったら実行してください」という命令を送ります。

いきなり出てきたマイグレーションファイルについては6章で詳しく説明することになるみたいです。めっちゃ後ですね。

##2.1.1 ユーザーページを探検する##
*ローカルサーバーでtoy_appの動作を見てみる*

サイトの動きを見るだけなので特に何もありません
##2.2.2 MVCの挙動##

*「モデル」「ビュー」「コントローラー」の関係について再度説明*

1章の説明

1. 「オレ」からのリクエストが「ルーター」に到達し、どこの「コントローラー」のどのアクションを使え！と指定する
2. コントローラーは命令通りに、アクションを動かして「モデル」や「ビュー」から必要な情報を引っ張ってきて「オレ」に返す

2章の説明

1. 「オレ」はブラウザで「/users」というURLのページを見たいんだと、Railsサーバーに送信する。
2. 「ルーター」が「/users」を見るには、「Usersコントローラ」内のindexアクションを使うように指定する。
3. indexアクションが実行され、そこからユーザーのデータベースを担当するUserモデルに、「すべてのユーザーを取り出せ」（User.all）と問い合わせる。
4. Userモデルは問い合わせを受け、すべてのユーザーをユーザーのデータベースから取り出す。
5. ユーザーのデータベースから取り出したユーザーの一覧をUserモデルから「Usersコントローラ」に返す。
6. 「Usersコントローラ」は、ユーザーの一覧を変数に保存し、indexビューに渡す。
7. indexビューが起動し、渡された情報を元に表示内容に合わせて見た目を組み立てる
8. 「Usersコントローラ」は、ビューで生成されたHTMLを受け取り、ブラウザに返す

**手順1.は1章の時と同じ**

**手順2.の「ルーター」の設定方法について**
ルーターでは以下のように記入します

```routes.rb
Rails.application.routes.draw do
  resources :users
  root 'users#index'
end
```
1章でも「root 'users#index'」の部分は「root 'コントローラー名#アクション名'」
に該当するということで、理解できましたが、新しい情報が何気なく追加されているので少し掘り下げましょう
**そもそもrootとは**
root：指定したアクションで表示するページをトップページとして表示します。この場合はindexが「/」で表示されるトップページになります

また、前回は「resources :users」とかついてなかったですね。
**resourcesメソッドとは**
<font color="red">Railsで基本となる7つのアクションへのルーティングを定義する際に用います。</font>

**7つのアクションとは**
【閲覧】indexアクション、showアクション
【生成】newアクション、editアクション
【更新】createアクション、updateアクション
【削除】destroyアクション
これらはアプリケーションを構築する土台となり、RESTと呼ばれます。
ドラクエで言えば「勇者」「戦士」「魔法使い」「僧侶」みたいなもんです。
Railsを勉強していたらちょいちょい出てくる場面があるそうです。

少々ややこしくなってきたので、基本からおさらいするとルーティングはこのように書くことができます。

```
get  "URL" => "コントローラー名#アクション名"
```
これは
（「get」は置いといて）内容としては見た通りで「オレ」から「指定したURLのページを表示してくれ」というリクエストがあった場合、「ルーティング」でこの「コントローラー」のこの「アクション」を動かすように。との命令を行うという意味を表しています。

```
get  "users/new" => "users#new"
```
よってこのように書いた場合
「users/new」を表示してねとのリクエストがあった場合「usersコントローラー」の「newアクション」を動かすように！という風に指定します。

ここで7つのアクションに話を戻します。
usersコントローラーにももちろん7つのアクションがあてはまります。
それぞれ決められたルートに対し一つ一つそれに対応するルートを入力してもいいのですが、少々面倒です。
ここで登場するのが、「resources」です。

```routes.rb
Rails.application.routes.draw do
  resources :コントローラー名
end
```
こうすることで、指定したコントローラーに対する7つのアクションへのルーティングが一気に作成されます。

```
resources :users
```
よって、こちらを入力することで**「usersコントローラー」に対するルーティングを一気に作成しましたよ。**ということになります。
もちろんちゃんと作成されているのかと心配になります。
そういう時はターミナルで以下のコマンドを送信することで確認できます。

```
$ rake routes
```
まとめますと

```routes.rb
Rails.application.routes.draw do
  resources :users
  root 'users#index'
end
```
とは
①usersコントローラーに対応する7つのアクションに対するルーティングを一括入力
②トップページにはindexアクションで表示されるビューを選択
という意味を表していました。

**次に手順3.〜手順.5です**
指定したindexアクションについて少し見ていきます

```users_controller.rb
  def index
    @users = User.all
  end
```
これは、全てのユーザー一覧を取り出して、`@users`に代入します。そのままです。
userクラスの中では「all」なんてメソッドは定義していないけども使えます。
これはUsersControllerクラスがApplicationControllerクラスを継承しているためなのですが、詳しい説明は4章でします。

**手順.6~手順.8の動作について**
<font color="red">アクションはコントローラと同じ名前のビューフォルダから、アクションと同じ名前のHTMLファイルを探してブラウザに返すというデフォルトの動作があります。</font>
該当のビューフォルダはここ👉app>views
コントローラーのindexアクションにはそんなことは書いてないけど、
**indexアクション**は「app/views/users/**index**.html.erb」を返します
**showアクション**は「app/views/users/**show**.html.erb」を返します


先ほどユーザー一覧のデータを代入した`@users`はビューの中でも使えます。
手順.7の「indexビューが起動し、渡された情報を元に表示内容に合わせて見た目を組み立てる」にある「渡された情報」というのがまさに`@users`のことです。

```indes.html.erb
<% @users.each do |user| %>
```
こうすることで、一覧から一つずつ取り出して繰り返し表示させるということを行います。
ビューのHTMLが完成すると、アクションがそれを受け取りブラウザに返します。
##2.2.3 Usersリソースの欠点##
*scaffoldのでサイト作成した場合の欠点を確認する*

- 入力するデータに制限がなく、空欄やデタラメなアドレスでも通ってしまう
- ログイン、ログアウト機能がない
- テストが書かれてない
- レイアウトがダメダメ
- コードが難解

#2.3 Micropostsリソース#
*Micropostsリソース（投稿機能）について*

##2.3.1 マイクロポストを探検する##
*Usersリソースを生成時と同様にしてMicropostsリソース（投稿機能）を実装する*

まずは「rails generate scaffold」コマンドを使ってデータモデルを実装するところから。

```
$ rails generate scaffold Micropost content:text user_id:integer
$ rails db:migrate
```
これだけで、Micropostに対する様々な設定が実装されます
「ルーター」にはmicropostsコントローラーに対応するルーティングが追加されています

```routes.rb
Rails.application.routes.draw do
  resources :microposts
  resources :users
  root 'users#index'
end
```
ブラウザのURLのおしりに「/microposts/new」を付け加えることで、投稿ページが表示できるようになっています。
##2.3.2 マイクロポストをマイクロする##
*投稿に文字数を制限する機能を加える*

**各ユーザーのデータを表す項目や設定値のルールを決める作業**をモデル設計といいました。
なので、データの制限についてもモデルで決めましょう。
と、いうわけでここで設定します👉app>models>user.rb

```micropost.rb
class Micropost < ApplicationRecord
  validates :content, length: { maximum: 140 }
end
```
制限に関する、設定値は「validates」で表します。
「content」にいれる文字の長さは最大140にしましょう。という意味になります
##2.3.3 ユーザーはたくさんマイクロポストを持っている##
*ユーザーと投稿の関係性について*

ここでもう一つ**各ユーザーと投稿のデータを表す項目や設定値のルールを決める作業**を先程と同様にモデルにて行います。
投稿とユーザーの関係性についてです。
投稿のuser_idはユーザーのidと紐づいており、誰の投稿であるかの関連付けがされています。
そのために以下の設定を行います。

```user.rb
class User < ApplicationRecord
  has_many :microposts # ユーザーはたくさんの投稿をもつ
end
```
```micropost.rb
class Micropost < ApplicationRecord
  belongs_to :user # 投稿はユーザーに属する
  validates :content, length: { maximum: 140 }
end
```
こうすることで、それぞれの投稿を誰が投稿したものかが分かるようになります。
##2.3.4 継承の階層##
*クラスの継承について簡単に説明*

「継承」とはそのままの意味で機能を引き継ぐことを表します
元となるクラスを師匠クラス、継承されるクラスを弟子クラスとします
師匠から匠の技を引き継いだ弟子もまた匠の技を使うことができるようになります
プログラミングの世界も存在するこういった機能を「継承」と言います。
コードで示すと

```
class 弟子 < 師匠
```
ということになります。先程設定したuserやmicropostのモデルやコントローラーにも師匠に当てはまるApplicationRecordというクラスがあり

```app/models/user.rb
class User < ApplicationRecord
```
```app/models/micropost.rb
class Micropost < ApplicationRecord
```
といった風に表します。
ApplicationRecordにもさらにその上の「ActioveRecord: :Base」という基本クラスがあります。
こいつがすごくて、
モデルオブジェクトはデータベースにアクセスできるようになり
コントローラもモデルオブジェクトの操作や、送られてくるHTTP requestのフィルタリング、ビューをHTMLとして出力などの多彩な機能を実行することができる機能を引き継いでくれるのです
##2.3.5 アプリケーションをデプロイする##
*1章で設定したGitやHerokuを使ってみる*

入力するコマンドを一気に書くとこんな感じ

```
$ git status    #追加の前にこうやって状態を確認するのはよい習慣です
$ git add -A
$ git commit -m "Finish toy app"
$ git push
$ git push heroku
```
#2.4 最後に#
*scaffoldを使ってアプリ制作を簡単に行って学ぶ長所と短所*

長所と短所は以下のように紹介されていました。
>**良い点**
Rails全体を高度なレベルで概観できた
MVCモデルを紹介できた
RESTアーキテクチャに初めて触れた
データモデルの作成を初めて行った
データベースを背後に持つWebアプリケーションを本番環境で動かした

>**悪い点**
レイアウトもスタイルも設定されていない
“Home” や “About” のような定番の静的なページがない
ユーザーがパスワードを設定できない
ユーザーが画像を置けない
ログインの仕組みがない
セキュリティのための仕組みがまったくない
ユーザーとマイクロポストの自動関連付けが行われていない
Twitterのような「フォロワー（following）機能」や「フォロー中（followed）機能」がない
マイクロポストをフィードできない
まともなテストがない
理解が困難
出典：2[「最後に」](https://railstutorial.jp/chapters/toy_app?version=6.0#sec-toy_app_conclusion)

#2章の要約をようやく作り終えての感想#
1章では時間をかけすぎたと思っていたが、認識の甘いところをなんとなくやり過ごしてもわかってないならやる意味がない。よって3章以降も頭に落とし込めたことを確認してからじっくり進めていこうと思います。。。反省。。。