LoginSignup
0
0

Ruby on Rails基礎まとめ

Last updated at Posted at 2023-08-04

備忘録

某プログラミングスクールの4ヶ月の学習を終えたので
メインで学習した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も扱うデータの種類の数だけある。

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

2.Model

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

ここで1つ疑問
じゃあモデルには何を書けばいいのか?
→モデルでは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でリモートリポジトリを作成する

名前は自由に設定できるが、ローカルディレクトリと同じ名前にしたほうが良い。

1、GitHubの右上の「+」ボタンから、「New repository」
2、「Repository name」にリポジトリ名(ローカルディレクトリと同じ名前に)
3、「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への2回目以降連携(都度セーブのようなイメージ)

変更点が出た際には必ず、行おう!!
これをしていないとゲームのセーブしていないのと一緒。

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' %>に変更
0
0
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
0
0