Ruby on Rails基礎まとめ

備忘録

某プログラミングスクールの４ヶ月の学習を終えたので
メインで学習したRuby on Railsについて、思考を整理するために、下記で情報を整理する。

# Rubyとは？
プログラミング言語
WEBサイトアプリケーションの作成に特化した言語。

# Ruby on Railsとは？
フレームワークの名前
Rubyを動かすための一般的なフレームワーク
SNSなどのWEBアプリケーションを作成するのに長けている。

# Ruby on Rails以外にもRubyを動かす、フレームワークはある。
Sinatra・・・単純作業の繰り返しなど単純なものに特化
cuba microframework・・・シンプル構造に特化、処理が早い
Ramaze・・・複雑なコーディングではなく、シンプル構造に特化
HANAMI・・・軽量なコード量、アクセス過多を防ぐことができる
Padrino・・・Ruby on Railsによく似ている
etc...

上記の情報より
Ruby on RailsはそもそもRubyを扱うフレームワークの中では複雑なコーディングに適している方であることがわかる。

# そもそもフレームワークとは・・・？
プログラミングの「フレームワーク」とは、簡単に説明すると「Webアプリケーションやシステムを開発するために必要な機能があらかじめ用意された枠組み」のこと

# なぜフレームワークが必要・・・？
1.開発にかかる時間を削減できる
2.ミスやエラーを減らせる
3.ルールが統一される
**→つまり、フレームワークを用いることで決められたルールに従って開発を行うことができるため、効率よく開発ができる。**




# Ruby on railsの深掘り

### 原則
-DRY(Don't Repeat Yourself)
同じことを繰り返さない。変数等を利用し、編集を煩雑にしない。

-COC(Convention Over Configuration)
プログラマーの意思よりも規約(決められたルール)を優先する。
**→つまり！！ある程度開発にはルールがあり、自由度は低い。**

### MVCモデル
Model、View、Controllerの頭文字をとってMVC
Model、View、Controllerの大枠を用いて構築していくモデルを指す。

#### 1.Controller
ModelとViewの制御を担当する部分。
Modelにデータ処理の指示を出したり、Viewに画面表示の指示を出したりする。
ユーザーからのアクセスはまずControllerを通る。その後ViewやModelにアクセスされる。

つまり、ControllerにはどのViewやModelとの紐付けを行うかという記載が必要。
なぜなら、ViewやModelは同一のサイト内で、複数存在するため！！！

（ex）songs_controller.rb
 `def show`・・・songsのshowのviewページを紐付け
    `@song =  Song.find(params[:id])`・・・Songモデルとの紐付け
` end`

Viewは表示するページの数だけある。（topページ、アバウトページ、マイページなど）
Modelは扱うデータの種類の数だけある。（顧客情報・商品情報など）
Controllerも扱うデータの種類の数だけある。

*ここで１つの疑問*
Controllerが複数ある・・・？ユーザーからのアクセスは必ずControllerを通るが、Controllerが複数あると、Controllerの判別はどうするのか？
**→ユーザーのアクセスの情報はURLが持っている。URLからどのControllerで情報を捌くかが指定される。
　例えば、通販サイトの場合、商品ページのURLにアクセスした場合、商品情報を制御するControllerで情報を捌く。**



#### 2.Model
DBとデータをやり取りしたり、データの登録・更新・削除などの処理を行う。
ただ、そのデータの登録・更新・削除などの命令を記述するのはController。
イメージはDBとコントローラーの仲介役というイメージ。DBから取得したデータや処理の結果はControllerへ。

*ここで１つ疑問*
じゃあモデルには何を書けばいいのか？
**→モデルではDBから情報をやり取りするにあたっての前提条件を記述する。
　手法としてはアソシエーションやバリデーションを記述する。**

**バリデーションとは？**
登録する情報への一定のルール付け。
(ex)名前が空での登録は不可
`validates :name, presence: true`

**アソシエーションとは？**
モデル同士の関係性を登録することで、直接関連していないControllerでも異なるモデルの情報を扱うことができる。
1:Nの関係を記述する。

(ex)投稿サイトの場合
会員一人に対して、複数の投稿がある場合
user.rb(会員モデル)・・・会員に紐づいている投稿は複数
`has_many :comments, dependent: :destroy`
comment.rb(投稿モデル)・・・コメントの投稿に紐づいている人は1人
`belongs_to :user`


#### 3.View
表示や入出力などを担当する部分です。ユーザーが実際に見る画面にあたる。
コーディングとしてはHTMLを主に使用。

リクエストデータをControllerに送ったり、
Controllerからレスポンスデータを受け取って画面に表示したりする。

コントローラーを介して、Model,DBから情報のやり取りをし表示や登録することも可能。

(ex)通販サイトの商品ページ、会員登録ページなど



# アプリ作成の流れ

Ruby on Railsのアプリを作成する下準備を下記にて行う

## 実施環境
AWS cloud9
Rails 6.1.7.4
ruby 3.1.2


## 流れ
アプリ作成〜Githubのリポジトリまで行う

## Ruby on Railsのアプリケーション作成
#### Railsの雛形を作る。
新しくアプリケーションを作成する。
`rails new アプリケーション名`

##### 補足
アプリケーションを削除するには
`rm -rf アプリケーション名`

#### サーバー起動のための初期設定
`rails s`をした後に開発環境でページを開くと
`Blocked host:〜`のエラーが出る。
そのエラーページの下部に記載のある`config.hosts << "〜〜"`をコピーする。

config/environments/development.rb内に
`config.hosts << "〜〜"`を追記する。

## GitHubへの初回連携

#### GitHubって何ができる？？
コードをネット上にアップロードして保存ができる。
チーム開発や開発環境の途中保存などに使える。

それでは下記手順で進めていく。

#### 1.ローカルリポジトリを作成する
`git init`
initとは、イニシャライズの略で、意味としては「使用可能な初期状態にすること」

#### 2.GitHubでリモートリポジトリを作成する
名前は自由に設定できるが、ローカルディレクトリと同じ名前にしたほうが良い。

１、GitHubの右上の「＋」ボタンから、「New repository」
２、「Repository name」にリポジトリ名(ローカルディレクトリと同じ名前に)
３、「Initilze this repository with:」にチェックしない

#### 3.変更履歴を残す準備をする。
`git add .`

#### 4.変更履歴を保存する。
`git commit　-m "コメントの内容"`

#### 5.ローカルリポジトリとリモートリポジトリを紐づける。
`git remote add origin リモートリポジトリURL`

GitHubのサイト内にリモートリポジトリURLがある。
記載場所は、対象のリポジトリの<>Code→<>Code▼に記載ある。
SSHを選択→「git @ github.com:アカウント名/アプリ名.git」

#### 6.masterブランチをmainブランチに変更する。
`git branch -M main`

#### 7.リモートリポジトリへPushする。
`git push origin main`

## GitHubへの２回目以降連携(都度セーブのようなイメージ)
変更点が出た際には必ず、行おう！！
これをしていないとゲームのセーブしていないのと一緒。

#### 1.ローカルディレクトリの内容を変更する
ローカルディレクトリで開発を進める。

#### 2.変更履歴を残す準備をする。
`git add .`

#### 3.変更履歴を保存する。
`git commit　-m "コメントの内容"`
コメントの内容は変更点などを記載

#### 4.リモートリポジトリへPushする。
`git push origin main`

Ruby on Rails　にて
deviseのインストールを行う。

# deviseを導入してみる
Rails on Railsで使えるGem、「devise」について下記にてまとめる。

## deviseとは？
ユーザー認証を行うためのGem
砕いていうとログイン機能を実装するためのGem

参考：https://github.com/heartcombo/devise

## Gemとは？
Gem とは他の誰かが既に作ったパッケージ。
簡単に機能を実装できるツール。

## 実装手順
#### 1.Gemfileへの記載
Gemfile
`gem 'devise'`の追記

#### 2.bundle installの実行
`bundle install`

bundle installとは？
Gemfileに記述したGemをRailsアプリ内で使用できるように
インストールするコマンド


#### 3.deviseのインストール
`rails g devise:install`

#### 4.モデルの作成(namespaceの実装)
deviseを適用したモデルを作成する。
`rails g devise ~`

例：UserとAdminで分ける場合
 `rails g devise User`
 `rails g devise Admin`
deviseを使用してモデルを作成する場合、「rails g devise ~」に変わるので注意


#### 5.コントローラーの作成

`rails g devise:controllers user`
`rails g devise:controllers admin`

#### 6.ビューページの作成

`rails g devise:views users`
`rails g devise:views admins`

#### 7.ファイル名の改名と部分テンプレートの修正

```
【app/views内】ファイル名を変更
users→user
admins→admin
```

```
【app/views/admin/sessions/new.html.erb】
(変更前)
<%= render "admins/shared/links" %>
(変更後)
<%= render "admin/shared/links" %>
```

```
【app/views/user/registrations/new.html.erb】 
【app/views/user/sessions/new.html.erb】
(変更前)
<%= render "users/shared/links" %>
(変更後)
<%= render "user/shared/links" %>
```

```
【app/views/user/registrations/new.html.erb
】
(変更前)
<%= render "users/shared/error_messages", resource: resource %>
(変更後)
<%= render "user/shared/error_messages", resource: resource %>
```

#### 8.ルーティングの編集

deviseインストール時のデフォルトの記述は
`devise_for :customers`
`devise_for :admins`　となっている

記述を下記に変更する。

```
devise_for :users, skip: [:passwords], controllers: {
registrations: "user/registrations",
sessions: 'user/sessions'
}

devise_for :admin, skip: [:registrations, :passwords], controllers: {
sessions: "admin/sessions"
}
```

何をしているか？
・・・・リンクの指定(例：user/registrationsなど)と取り扱わないページの除外(skip)

#### 9.ビューファイルの記述の変更


```:app/views/user/shared/_links.html.erb
<%- if controller_name != 'sessions' %>
<%= link_to "Log in", new_session_path(resource_name) %>
<% end %>
<%- if devise_mapping.registerable? && controller_name != 'registrations' %>
<%= link_to "Sign up", new_registration_path(resource_name) %>
<% end %>
```
```:app/views/admin/shared/_links.html.erb
<%- if controller_name != 'sessions' %>
<%= link_to "Log in", new_session_path(resource_name) %>
<% end %>
```

# Bootstrapを導入してみる

## Boostrapって？
CSSのフレームワーク
表示位置や画面の分割を細かく設定できる
簡単にいうと配置レイアウトを感覚的に組める
twitter社が開発したフレームワーク

## Bootstrapを導入するメリット
・UIを考えた実装が容易にできる。
・レスポンジブ対応を行うことができる。

## 導入手順

#### 0. 実施環境(Ruby on Rails)
AWS cloud9
Rails 6.1.7.4
ruby 3.1.2

#### 1.yarnでインストール
```
yarn add jquery bootstrap@4.6.2 popper.js
```

#### 2.追記
```:config/webpack/environment.js
const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: 'popper.js'
  })
```

の追記

#### 3.ファイルの作成と追記
app/javascriptの配下にstylesheetsフォルダを作成
app/javascript/stylesheets/application.scssを作成
```
@use '~bootstrap/scss/bootstrap';
```
の追記

#### 4.追記
```
app/javascript/packs/application.jsへ
import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application"; 
```
の追記

#### 5.記載変更
```:app/views/layouts/application.html.erb
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
から
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>に変更
```