[Ruby on Rails5]Progate 学習メモ 1


あくまでメモ。とっ散らかっている内容は後でまとめます。

Ruby on Rails5 : Lesten 1 振り返り

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

ターミナルで、

ターミナル
$ rails new アプリ名

配下にapp, config, db, ... が生成される。
サーバ起動を起動する際は、

ターミナル
$ rails server

これでブラウザでアクセスできるようになる。

Webブラウザ
http://localhost:3000

このコマンドを実行したターミナルは実行したままになるので、操作したい場合は別のターミナルを立ち上げる。

ページの自動生成

ターミナル
$ rails generate controller コントローラ名 アクション名

app/view配下にコントローラ名の「フォルダ」、その配下にアクション名の「ページ名.html.erb」が生成される。

ディレクトリ構成
root/
 ├ app/
  │ ├ view/
  │ │ └ ページ名.html.erb
  ...

コントローラファイル

この時点からlocalhost:3000/フォルダ/ページ にアクセスできるようになる。
生成時点のビューファイル(htmlのbody部分)は、h1タグとpタグしかない。
※コントローラ名でフォルダが生成されるので、同じコントローラ名でこのコマンドは実行できない。

app/controller配下に「フォルダ_contoroller.rb」が生成される。
ページ名メソッドが記載されている。記載内容はアクションという。
アクションはブラウザに返すビューを指定する。

ルートファイル

app/config配下にroutes.rbというルーティングファイルが生成される。

ディレクトリ構成
root/
 ├ app/
  │ ├ config/
  │ │ └ routes.rb
  ...

ルーティングは、フォルダ(コントローラ名)/erbファイル(ページ名)
コントローラのアクションを呼び出す…となっている。

routes.rb
get URL => コントローラ名#アクション名

デフォルトは、「コントローラ名/アクション名」となっているが、「アクション名」のみにすることもできる。

スタイルシート

app/asset/stylesheet配下に「アクション名.scss」が生成される。

ディレクトリ構成
root/
 ├ app/
  │ ├ asset/
  │ │ └ stylesheet
  │ │   └ アクション名.scss
  ...

これは自動的にコントラーラ配下のアクションのビューに適用される。

ページが表示されるまでの仕組み

  1. ブラウザ(表示前)
  2. [【M】ルーティング → 【C】コントローラ → 【V】ビュー]
  3. ブラウザ(表示後) となっている。


この仕組みを、MVCモデルという
Model View Controller - Wikipedia

画面に表示される共通のレイアウトについて

ディレクトリ構成
root/
 ├ app/
  │ ├ view/
  │ │ └ layout
  │ │   └ application.html.erb
  ...

app/views/layout配下のapplication.html.erbはビューファイルの共通のレイアウトを記載できる。
サイト全体に影響するheaderタグやbodyタグなどが多い。

application.html.erb
<%= yield %>

ビューファイルで記載されているタグがここに代入される

画像について

scssに適用する画像はapp/public配下に配置する

ディレクトリ構成
root/
 ├ app/
  │ ├ asset/
  │ │ └ stylesheet
  │ │   └ アクション名.scss
  │ ├ public/
  │ │ └ 画像ファイル名.xxx
  ...

そうすると、erbもscssも/直下に存在するかのように指定することができる。
注意事項としては、そちらも頭に「/」を付けることは忘れずに。

ハイパーリンクについて

HTMLとルーティングでは下記のような違いがある。

HTML
<a href="URL">テキスト</a>
route.rb
get "URL" => コントローラ名#アクション名

Ruby on Rails5 : Lesten 2 振り返り

DBを使うためにマイグレーションファイルを作成する

マイグレーションファイルは下記の通りに入力する

ターミナル(本来の構文)
$ rails generate model モデル名 カラム名:データ型
ターミナル(省略した構文)
$ rails g model モデル名 カラム名:データ型

ポイント
・「generate」は「g」と省略することが可能
・長い文字列のデータ型は「text」
・テーブル名は単数形
・複数のデータを持たせるのには、「カラム名:データ型 カラム名:データ型」のように半角スペースで区切って引数にする

app/db/migrate配下に「年月日時分秒createテーブル名.rb」が生成される。

ディレクトリ構成
root/
 ├ app/
  │ ├ db/
  │ │ └ 年月日時分秒_create_テーブル名.rb
  ...

マイグレーションファイル編集後に設定を反映させるには下記を入力する

ターミナル
$ rails db:migrate

指定したカラム名以外にid, create_at(作成日), update_at(更新日)のカラムが生成される。

app/models配下に「テーブル名.rb」が生成される。
(ファイル名は単数形となる)

ディレクトリ構成
root/
 ├ app/
  │ ├ model/
  │ │ └ テーブル名.rb
  ...

中身は、単数形のクラスにApplicationRecordを継承するよう記載されている。

変数への代入

・ビューファイルでの変数の定義

xxx.html.erb
<% 変数名= "値" %>

・アクションでの変数の定義

xxx_controller.rb
def アクション名
 @変数名= "値"
end

※アクションで変数宣言するときは「@」が必要になる

・代入内容を反映させる

xxx.html.erb
<% 変数名 %>

→代入内容を表示しない

xxx.html.erb
<%= 変数名 %>

→代入内容を表示する

※アクションで宣言した場合は「@変数」で指定する必要がある

変数の定義はRailsではビュー(xxx.html.erb)ではなく、
アクション(xxx_controller.rb)で定義するのが一般的である。

ループ文

Rubyのeach文を使用する

配列の定義をする

xxx.html.erb
<% 配列 = ["値1","値2",...] %>
xxx_controller.rb
def アクション名
 @配列名 = ["値1", "値2",...]
end

※アクションで変数宣言するときは「@」が必要になる

配列を変数に格納してループで表示

<% 配列.each do |変数| %>
 ...
 <%= 変数 %>
 ...
<% end %>

コンソールの操作

起動するときは、

ターミナル
$ rails console

終わるときは、

ターミナル
$ quit

カラムに値を代入する

変数 = テーブル名.new(カラム名:"値")
変数.save
数字 符号 数字
変数 = "値"
変数 + 文字列

rbファイルで継承されているのでsaveメソッドが利用できる

▼カラム情報の取得
1番最初(id=1)のデータの取り出し

変数 = テーブル名.first

すべてのデータの取り出し

変数 = テーブル名.all

指定したデータの取り出し

テーブル名.all[n]

更に表示させる場合は

テーブル名.all[n].content

取り出したデータの表示

変数.content

とか

変数[n]

コントロールには、

@配列 = テーブル名.all

ビューファイルに、

<% @配列.each do |変数| %>
 ...
 <%= 変数 %>
 ...
<% end %>

特定のカラムを取り出すときは、
コンソール上で、

変数 = テーブル名.find_by(カラム名:"値")
変数.カラム名

※1行目でidを指定して、そのidの別のカラムの内容を指定する事ができる

▼リンクを貼る
application.html.erbでは下記のように記載

<% link_to("表示文字列", "リンク先のパス") %>

※第一引数がDBから引用するならダブルクオーテーションは不要。
HTMLになると下記のように変換される。

<a href ="リンク先のパス">表示文字列</a>

▼URLにidを含める
下記のページがあるとする

localhost:3000/アクション/1
localhost:3000/アクション/2

route.rbにて、

get "アクション/:id" => "アクション#コントローラ"

アクション_controller.rbにて、

def コントローラ
    @id = params[:id]
end

とすることでどちらにも行ける。
(idの数だけ記載する必要がなくなる)

※ルーティングは合致するURLを上から順に参照していく為、下の文字列にマッチしてしまうURLは該当する行の下以降に記載する必要があるので注意。

ビューファイル(xxx.html.erb)には下記のように記載する

<%= @id %>

▼各idごとに別のページを表示させる
合わせ技が必要になる
①find_byメソッドで特定のカラムを取り出す
②URLにidを入れる

アクション_controller.rbにて、

def コントローラ
@変数 = テーブル名.find_by(id: params[:id])
end

※第一引数と第二引数の間に「:」を忘れずに。
これはidカラムが、配列[:id]であるデータを取得していることになる。

表示先のビューファイル(xxx.html.erb)には下記のように記載する

<%= @変数.カラム名 %>

idごとのページのリンクを貼るときは、

<%= link_to(変数.カラム名, "/コントローラ名/#{変数.id}") %>

▼変数展開
ダブルクオーテーションで囲まれた文字列(それに相当する文字列)の中には式を記述することが出来ます。これを文字列展開といいます。

#{式}

変数を展開する場合はこうなります。

#{変数.カラム名}

▼投稿してDBに格納する
①投稿
準備としてroute.rbでは、フォームの値を受け取る為に「get」ではなく「post」を指定する。

post "コントローラ/アクション" => "コントローラ#アクション"

ビューファイル(xxx.html.erb)にてform_tagメソッドを用いる。

<%= form_tag("送信先のURL") do %>
...
textareaタグとかinputタグを用いたフォーム
...
<% end %>

このフォームでsubmitされると、データが送信される。

②データベースに保存
xxx.controller.rbにて、ビューの代わりにリダイレクトを記載

def アクション
redirect_to("転送先のURL")
end

ビューファイル(xxx.html.erb)にてform_tagメソッドを用いる。

<%= form_tag("送信先のURL") do %>
...
<textarea name="代入するカラム名"></textarea>
...
<% end %>

submitされると、name属性(カラム名)の値をキーとしたハッシュ(「カラム名:値」)がRails側に送信される。

xxx.controller.rbにて、受け取る記述を記載

def create
params[:カラム名]
end

name属性に設定された文字列をキーとしたハッシュになっている。
受け取る記述からデータベースに書き込む記述と送信先を追記する

def create
@変数 = テーブル名.new(カラム名: params[:カラム名])
@変数.save
redirect_to("送信先のURL")
end

▼入力データを変数で受け取る2つの方法

get "posts/:カラム名" => 〜

<textarea name="カラム名"></textarea>

どちらもparams[:カラム名]で取得できる

▼データの並び替え(orderメソッド)
xxx.controller.rbにて、下記を記載

def アクション名
@変数 = テーブル名.all.order(対象カラム名: :昇降順)
end

allですべてのデータを対象とし、orderでソートする。
ソートについては昇順(:asc)と降順(:desc)を指定する。