Edited at

【Ruby/Ruby on Rails】頭に入れておきたいスキームまとめ【プログラミング学習開始135日目】


はじめに

明日、志望しているWeb系企業の実技面接があります。

実技面接にてどのようなことを問われるのかは分かりませんが、初学者でも最低限これだけは説明できるのが望ましいのではないかというWeb制作におけるスキームなどを抜粋し、まとめを作成してみました。

面接にて要点を説明できるようにすることがこの記事の目的です。


Railsを用いたWeb制作について頭に入れておきたいスキーム


Railsのインストール~アプリの雛型作成までの流れ


Railsのインストール

(Homebrew, rbenv, ruby等はインストール済であるとして)

$ gem install rails
$ rails -v # railsのバージョン確認


新規Railsアプリケーションの作成

(cdコマンドで対象ディレクトリに移動した後)

$ rails new  アプリ名


gemのインストール

(Gemfileを編集した後)

$ bundle install

(本番環境用のgemをローカルの環境にはインストールしたくない場合は)
$ bundle install --without production



Railsサーバーの起動

$ rails s

この後、ブラウザにて localhost:3000 にアクセス

image.png


ブラウザにWebサイトが表示するようになるまでの流れ(モデル、コントローラの生成、ルーティングの設定、ビューの編集)


コントローラの生成

$ rails g controller StaticPages home    # この場合はstatic_pagesコントローラとhomeアクションを生成



app/controllers/static_pages_controller.rb

# homeアクションが生成されていることを確認 

class StaticPagesController < ApplicationController
def home
end
end



config/routes.rb

# ルーティングの設定(書き方は色々あるので場面に応じて適当なものを選択)

# パターン(1) root_pathとして設定したい場合
root 'static_pages#home'

# パターン(2) 個別にルーティングを設定したい場合
get '/', to: 'static_pages#home'

# パターン(3) resourcesメソッドを使ってpathを一気に指定したい場合
resources :static_pages # 「, only: :home」のように必要なものだけ選ぶことも可能



app/views/static_pages/home.html.erb

<!-- ビューファイルの編集 -->

<!-- ビューファイルを生成していない場合はtouchコマンド等でビューファイルを作成する -->

<h1>StaticPages#home</h1>
<p>例えば、ここに"Hello, World!"とか書いてみる</p>



Railsサーバーの起動・ブラウザでの確認

$ rails s

localhost:3000 にアクセス

image.png


マイグレーションファイルの生成、属性の追加


モデルの生成

(name属性とemail属性を有するUserモデルを生成したい場合)

$ rails g model User name:string email:string


app/models/user.rb

# モデルが生成できているか確認

class User < ApplicationRecord
end


db/migrate/20190108120018_create_users.rb

# マイグレーションファイルが問題なく生成されているか確認

class CreateUsers < ActiveRecord::Migration[5.2]
def change
create_table :users do |t|
t.string :name
t.string :email

t.timestamps
end
end
end



マイグレーションの適用

$ rails db:migrate

db/development.sqlite3 というファイルが生成される & usersテーブルにname属性とemail属性が追加される


モデルの関連付けの流れ

例えば、下図のようにUserモデルとMicropostモデルが1対多の関係の場合を想定する。

image.png

(出典:Railsチュートリアル13章1.3節)

まず、belongs_to :userを用いてマイクロポストは1人のユーザーに紐付いていることを明示する。


app/models/micropost.rb

class Micropost < ApplicationRecord

belongs_to :user # マイクロポストは1人のユーザーに紐付いている



end

次に、has_many :micropostsを用いてユーザーは複数のマイクロポストを有していてもOKであることを明示する。

また、dependent: :destroyを追記することでユーザーを削除したらマイクロポストも削除されるように設定する。


app/models/user.rb

class User < ApplicationRecord

# ユーザーは複数のマイクロポストを有していてもOK、且つ、ユーザーを削除したらマイクロポストも削除されるように設定
has_many :microposts, dependent: :destroy
.
.
.
end

すると、例えばmicropostsコントローラのcreateアクションにて@user.books.buildのような形でユーザーに紐付いたマイクロポストの投稿が可能となる。


app/controllers/microposts_controller.rb

 class MicropostsController < ApplicationController




def create
@user = User.find_by(id: params[:id])
@micropost = @user.microposts.build(micropost_params) # ユーザーに紐付いたマイクロポストを投稿



private

def micropost_params
params.require(:micropost).permit(:content)
end
end



Gitによるバージョン管理の流れ


アプリ作成後、初プッシュを想定

(名前・メールアドレスの登録、GitHubにて新規リポジトリの作成などは完了しているとして、)

$ git init # Gitのリポジトリの新規作成
$ git add -A # 共有したいファイルの選択(-Aとすると修正ファイルを自動で全てステージングエリアへ移動)
$ git commit -m "メッセージ" # 選択したいファイルの記録
$ git remote add origin リモートのURL # リモートの登録
$ git push origin master # ファイルのアップロード


アプリ制作時のバージョン管理の流れ

$ git checkout -b ブランチ名    # ブランチを切る

〜 アプリ制作・ファイルの編集 〜

(一段落着いた後、)
$ git add -A
$ git commit -m "何をしたか伝わるようなメッセージを記入"
$ git push origin ブランチ名

〜 GitHubに行ってプルリク申請・共同開発者とやり取り 〜

(納得したものが出来たら)
$ git checkout master # masterブランチだったり、developブランチだったりする
$ git merge ブランチ名 # ファイルのマージ
$ git push origin master # ファイルのアップロード



rails generateのやり直し

$ rails destroy controller StaticPages home

$ rails destroy model StaticPages


rails db:migrateのやり直し

$ rails db:rollback    # 1つ前の状態に戻す

$ rails db:migrate VERSION=0 # 最初の状態に戻す


bundle installとbundle updateの違い

簡単に言えば、



  • bundle installは元々あったgem自体には手を加えずにgemfile.lockを更新


  • bundle updateは必要であれば元々あったgemも含めてgemfile.lockを更新


埋め込みRuby、<%= %>と<% %>の違い



  • <% ・・・ %>とするとテンプレートには反映されない状態で埋め込まれる(=検証ツールでは確認できない)


    • if文やeachメソッドの記述の際に利用される




  • <%= ・・・ %>とするとテンプレートに反映される状態で埋め込まれる(=検証ツールではHTMLのタグとして確認できる)


    • link_toヘルパーなどの記述で利用される




Railsでリンク付き画像を埋め込む方法


リンク付き画像を埋め込む方法

<%= link_to "https://~", target: "_blank" do %>

<%= image_tag "画像の名前.jpg" %>
<% end %>


デバッグの方法

byebug gemを用いたデバッグを想定、gemはインストール済とする

<使い方>

- デバッグをしたいところ(エラーが起きてそうなところ)にdebuggerメソッドを挿入する

- debuggerメソッドを挿入したら、ブラウザから目的のURLにアクセス

- Railsサーバーを立ち上げたターミナルを確認

- byebugプロンプトが表示されており、アプリケーションのdebuggerが呼び出された瞬間の状態を確認可能

<具体例>

debuggerメソッドを挿入


app/controllers/users_controller.rb

class UsersController < ApplicationController




def show
@user = User.find(params[:id])
@books = @user.books.page(params[:page]).per(5)
debugger
redirect_to root_url and return unless @user.activated?
end



end

ブラウザでlocalhost:3000/users/1 にアクセス

その後、Railsサーバーを立ち上げたターミナルを確認


Railsサーバー

   13:

14: def show
15: @user = User.find(params[:id])
16: @books = @user.books.page(params[:page]).per(5)
17: debugger
=> 18: redirect_to root_url and return unless @user.activated?
19: end
20:
21: def create
22: @user = User.new(user_params)
(byebug)

例えば、(byebug)のところに@userと入れると以下のように@userに関する情報が表示される


Railsサーバー

(byebug) #<User id: 1, name: "Example User", email: "example@railstutorial.org", created_at: "2019-01-05 09:47:17", updated_at: "2019-01-05 09:47:17", password_digest: "$2a$10$TTFabWl2Ym00v18ZpSnydOaTs7/udrO.CVbru3FOuHH...", remember_digest: nil, admin: true, activation_digest: "$2a$10$hE7gx6bTvnEPhF2VTwL4I./tjR1iHC.TkfvBroqpTpp...", activated: true, activated_at: "2019-01-05 09:47:17", reset_digest: nil, reset_sent_at: nil>



まとめ


  • 実技面接に向けて、初学者でも最低限これだけは説明できるのが望ましいのではないかというWeb制作におけるスキームなどを抜粋し、まとめを作成した。。

  • 何も見ずにすらすらと記述できるところもあれば、意外と迷うところもあり、知識の定着していない箇所について改めて把握することができた。

  • 他にも押さえておくべきスキームは沢山あると思うので、適宜更新していきたい。


参考URL