【Ruby】レイアウトテンプレート
今回はレイアウトテンプレートという機能について
まとめていきたいと思います。
レイアウトテンプレートとは何か。
それはページごとにビューを作成すると思うのですが、
全てのページに共通して表示されるものってありますよね。
ヘッダーとかフッダーとか。
そういった部分に関しては全てのビューファイルに記載していたら
とっっっても面倒くさいので、一つのファイルにまとめようっていうものです。
Railsの場合どこに記載するかというと、
application.html.erbというファイルに記載しましょう。
こちらがレイアウトテンプレートに該当するファイルで、
app/views/layoutディレクトリに配置されています。
ちなみにこのファイルをレイアウトファイルとも呼びます。
このファイルを開いてみると、
ありがたいことにすでにhead要素やbody要素がすでに記載されているんです。
そしてbody要素に書いてある
<%= yield %>
について説明しましょう。
これはyieldメソッドといいます。
何かというと各ファイルに展開するためのメソッドです。
つまりindexアクションが実行されたら、index.html.erbの内容が、
newアクションが実行されたら、new.html.erbの内容が、
この<%= yield %>の部分に展開されるようになっています。
なので全てのビューファイルが
このレイアウトファイルに集約されているイメージです。
便利ですね！！！！
なのであとはレイアウトファイルのbody要素の中の
headerやfooterを編集しておけばOKです！
そして二つの間に<%= yield %>を忘れずに！
学んでおきましょう。
どうやらレイアウトテンプレートのhead要素をみてみると、
<%= stylesheet_link_tag ' application ' , media : ' all ' , ' date-turbolinks-track' : ' reload' %>
という記載があります。
まずはstylesheet_link_tagメソッドを理解していきましょう。
これは読み込むCSSを指定できるヘルパーメソッドです。
CSSファイルはapp/assets/stylesheets/ディレクトリにあります。
このコードの場合、
stylesheet_link_tag ' application '
と引数に application と書いてあるため、
これはapplication.cssを読み込むよーっていってます。
application.css
こちらの方はRailsに初めから用意されている
CSSファイルをまとめるためのファイルです。
通用マニフェストファイルです。
開いてみると色々と書いてありますが、
注目すべきは *= require_tree . という記述です。
require.treeとはなんぞとのことですが、
アルファベット順に全て読み込むよ！という機能を持ってます。
今回の引数はお分かりでしょうか？見えてますか？
. です！これ . !
このドットは、カレントディレクトリを表しています。
つまり
app/assets/stylesheets/
このディレクトリです。
なのでこの require.tree. の記載によって、
application.cssファイルに読み込まれることになります。
ではこれを踏まえてこのディレクトリに
style.cssファイルを作成しましょう。
また画像ファイルを配置したい場合は
app/assets/imagesディレクトリに配置します。
以上が、レイアウトテンプレートをはじめとする
見た目を整えるためのお話でした！
【Ruby】データの保存（パラメーター）
今回はフォームから送信されたデータを
テーブルに保存する方法を学びましょう。
まずは今までと同じ、ルーティングから。
routes.rbに追記します。
今回HTTPメソッドは何を使うべきでしょうか。
作成して送信を行います。
そう、POSTですね。
なのでルーティングは以下の通りになります。
post 'posts' , to : '' posts#create "
今回はpostsコントローラーのcreateアクションを実行したい、ということです。
このcreateは、保存してレコードを作成する処理を行います。
そして一つ前の記事で記載したformのコードをみてみましょう。
<%= form_with url : "/posts" , method : post , local : true do | form | %>
<% end %>
パスとHTTPメソッドに注目してみましょう。
同じですよね！
このようにフォームのルーティングと繋げているのです。
このことでフォームに入力されたデータがcreateアクションによって処理されて、
テーブルに保存されるようになっています。
ではそのcreateアクションを定義しましょう。
postsコントローラーのファイルに記載します。
def create
end
とりあえず空のcreateアクションを。
そしてあとはこのcreateアクションに対応するビューですね。
「投稿が完了しました！・トップページに戻る」
的なページが欲しいですね。
create.html.erbというファイルを作成しましょう。
<h1>投稿が完了しました！</h1>
<%= link_to 'トップページに戻る' , '/posts' %>
/posts はトップページへのパスですね。
これでビューは完成です。
次に保存機能を実装しましょう。
まだデータを保存する機能がないので、実際には投稿内容は表示されません。
まずは流れから。
ユーザーがフォームを送信した時、
サーバーへのリクエストにはパラメーターを含ませることができます。
パラメーターとは、サーバー外部から渡される情報。データのことです。
そしてRailsのコントローラーにたどり着くパラメーターは
paramsという箱に格納されて届けられます。
今回、フォームの構造は以下の通りでしたよね。
<%= form.text_field : content %>
<%= form.submit '投稿する' %>
このtext_fieldのキーである :content でparamsに格納されます。
つまり、params(:content)という形でコントローラーに送られるということですね。
では実際にこの処理を書きましょう。
この時使用するのがcreateメソッドです。
こちらもActiveRecordメソッドの一つで、引数に処理を記述し実行すれば
保存をしてくれる便利なものです。
今回はcontentカラムにparams(:content)の情報を保存します。
これはフォームに入力されたデータが入っている箱だからです、
その場合はこのように記述します。
Post . create ( content : params[ : content ] )
まずこのcreateメソッドはモデルが使用できるActiveRecordメソッドなので、
モデル名を記載します。
そのあとのcontentはテーブルのカラム名、
params[ : content ]はいうまでもなく送られてきたデータですね。
なので、これはなんて言ってるのかというと
テーブルのcontentカラムにparams[ : content ]を保存して！と言ってます。
これをコントローラーのcreateアクションに記述します。
でないとcreateアクションが実行されても保存されないからです。
def create
Post.create( content : params[ :content] )
end
これでOKです。
以上で一通りのアプリケーションの仕組みの解説は終わりです。
【Ruby】フォームの実装（ヘルパーメソッド/form_withメソッド/link_toメソッド）
まずはフォームを実装する前に、
そのフォームが実装されている新規投稿ページを作成する前に、
新規投稿ページに”アクセスする”部分から実装します。
少し前にルーティングの説明をした時に、
トップページ（indexアクション）へのルーティングを行いましたので、
同じような感じでやっていきます。
●ルーティングの設定
routes.rbに記載します。
get 'posts', to: 'posts#index' ←トップページのルーティング
get 'posts/new', to 'posts#new' ←こちら新規投稿ページ（newアクション）のルーティングです。
通訳すると、
get :表示して！
posts/new : 新規投稿ページのパスやで！ここへ行って！
posts/new : postsコントローラーのnewアクションの処理を実行して！
というております。
●アクションの定義
次は覚えてますか？
コントローラーのところで出てきました。
newアクションの定義をします。
つまりどんな処理を行うか記載します。
def new
end
え、終わり？
はい、newアクションは新規投稿ページを表示させるだけなので。
●ビューを作成
ようやく表示させる新規投稿ページを作成します。
new.html.erbというファイルを用意しましょう。
viewsディレクトリのコントローラー名ディレクトリの中に作ります。
これでnewアクションが定義されているので、
このnew.html.erbの中身が表示されます。
今はもちろん真っ白なページが表示されます。
そしてこれからフォームを作成していく中で、
Railsではヘルパーメソッドというものを使います。
これは主にビューでHTMLタグを出現させたり、
テキストを加工するためのものです。
Rubyとして扱われるので、<%= %>で囲んで使用します。
今回はその中でも、
form_withメソッドとlink_toメソッドを学びましょう。
■form_withメソッド
HTMLで使用したformタグの代わりに使用できます。
文法はこちら。
<%= form_with url : "/posts" , method : : post , local : true do | form | %>
<%= form. text_field : content %>
<%= form. submit '投稿する' %>
<% end %>
はい、通訳しましょう。
まずdoからendまでの間がフォームの記述です。
こんなフォームにしてねって指示します。
まず一行目。
<%= form_with url : "/posts" , method : : post , local : true do | form | %＞
url : "/posts" → リクエストを送るパスを示してます。ここに行けえ！っていうてます。
method : : post → これは送信するHTTPメソッドを指定してます。
ルーティングの設定でで保存の処理はPOSTに設定するので、 : postを使ってます。
初期値でもあるので省略可能です。
local : true →
| form | → ブロック変数ですね。このブロック変数とヘルパーメソッドを組み合わせることで、フォームを追加できます
そして２−３行目
まずブロック変数がしっかり使われてますね。
このための変数ちゃんです。
<%= form. text_field : content %> ：contentを入力する１行のフォームだよ！
<%= form. submit '投稿する' %> ：投稿すると書かれた送信ボタンだよ！
って指示してます。
ちなみに他にもヘルパーメソッドには
password_field
check_box （複数選択可）
radio_button （一つしか選択できない）
などがあります。
さあ、これで新規投稿のフォームの完成です！
じゃあこのページへどうやっていくのか？
さすがにトップページからいきたいよね？
ということでトップページにこの新規投稿ページのリンクを用意してあげます。
そこで使うのがこちら。
■link_toメソッド
これもHTMLの<a>タグの代わりに使用します。
トップページにリンクを作りたいのでindex.html.erbに記載しましょう。
<%= link_to '新規投稿' , '/posts/new' %>
form_withの時と順序が逆やないかい。パスが後なんかい！
なんでかはわからないけど、このまま覚えました。
これは通訳せずともわかりますね！
こんな感じで新規投稿ページの作成と、
トップページにおけるリンクの作成が完了しました！
次回は実際にフォームに入力したものを保存・表示させましょう。
【Ruby】テーブルからデータを取得する方法（ActiveRecordメソッド）
ここではデータを取得し、ビューに表示させる仕組みを
書いていこうと思います。
まずモデルを利用して、テーブルからデータを取得するために必要となるのが
ActiveRecordメソッドです。
all（テーブルの全てのデータを取得）
find（テーブルのレコードのうち、ある１つのデータを取得）
new（クラスのインスタンス（レコード）を生成する）
save（クラスのインスタンス（レコード）を保存する）
例えば、Post.all
はPostモデル（postsテーブル）の全てのデータを取得するという意味です。
Postモデルの全データが表示されます。
また、Post.find(2)
だとPostモデル（postsテーブル）の２番目のデータを取得するという意味になります。（単一レコードの取得）
該当するデータが表示されます。
このようにActiveRecordメソッドとはモデルがデーブル操作に関して
使用できるメソッドでした。
次はビューにフォームを実装して、ブラウザ（自分のPC画面など）から
データを送信できるようにします。
【Ruby】テーブルへのデータの追加方法
データの追加方法は２パターンあって、
１つはSequel Proから直接入力します。
もう１つはコンソールを使って入力します。
今回はコンソールを使って入力する方法を学びます。
rails c でコンソールを起動させ、
モデルのインスタンス.save
と入力します。
なので実際はモデルのインスタンスにデータを追加した後に
saveメソッドを使用します。
まずはnewメソッドを使ってモデルのインスタンスを生成します。
model = Model.new
次にインスタンスにデータを追加します。
model.text = "こんにちは"
そしてテーブルに保存します。
model.save
このようにsaveメソッドはモデルが使用できるメソッドであり、
テーブルにレコードを保存するために使用します。
以上がデータの追加方法でした。
次回はデータの取得方法を書いていこうと思います。
【Ruby】モデル/データベースの役割
アプリケーションにはデータを保管する必要があります。
そこでどういった形でサーバーではデータの保管ややりとりが行われているのでしょうか。
まずデータベースに保存をするためには、
種類ごとに保存をするテーブルを用意します。
ここでは表形式でデータが収納されていきます。
種類ごとにというのは、ユーザー情報のテーブル、商品のテーブル、チャットでのやりとりのテーブルなど分けて収納していくということです。
ではどのようにテーブルからデータを取得したり保存したりするのか。
その役割を担うのがモデルです。
このモデルを介してコントローラーでデータを取得して画面に表示します。
コマンドで
rails g model モデル名（単数形）
を実行することで「モデル名.rb」というファイルができます。
またそれと同時に作成されるのが
マイグレーションファイルです。
これは何のためのファイルか。
一言でいえばテーブルの設計書・仕様書です。
このファイルを記述して、テーブルの情報を反映させます。
先ほどpostモデルを作成した時に同時にできたので、
このマイグレーションファイルには最初から
def change
create_table :posts do |t|
end
end
と書いてあり、postsテーブルを作成しようという仕様になってます。
ではテーブルにnameカラムとmemoカラムを追加した場合にどう記載するかみてみましょう。
def change
create_table :posts do |t|
t.string :name
t.text :memo
end
end
となります。
t.string :name
を解読すると、
t.に続くのが「カラムの型」、その右にシンボルで記載されるのがカラム名
になります。
カラムの型とは何か、ですが
そこにはどんなデータが入るのが指定する必要があり、それが型になります。
stringは短文、textは長文になります。
他にはintegerと指定すれば数値が入れられます。
ではテーブルの設計図ができたらそれをデータベースに適用させましょう。
その時に実行するコマンドが
rails db:migrate
です。この動作を「マーグレートする」といいます。
またマイグレートが実行済みが確認することができます。
そういった場合は以下のコマンドを実行しましょう。
rails db:migrate:status
この時コマンドでは実行済の場合は up、
実行されていない場合はdownで表示されます。
また、rails db:rollbackで差し戻すことができ、
この時ステータスはdownになります。
この状態で編集が可能なので、
完了したらまたマイグレートを行いましょう。
以上が、モデルとデータベースの役割と仕組みでした。
次はこのテーブルにデータを保存させる方法を書きます。
【Ruby】ビューの役割
ビューは見た目を作る役割を持っています。
ではまずどのようにしてコントローラーから情報を受け取るのでしょうか。
コントローラー内で、インスタンス変数を定義しておくことで、その情報をもつ変数を使用できるようになります。
このインスタンス変数、結構私は理解するのが難しかったです。
でもここを理解するとだいぶコードが読めるようになってくると思います。
簡単に説明すると、
先ほどindexアクションを定義したcontroller.rbで
@post = "インスタンス変数です"
と記載し、
ビューファイル（index.html.erb）で
<%= posts %>
と記載すれば表示されるのです。
ここでのポイントは、コントローラーで定義したインスタンス変数は対応しているビューで使えることです。
今回はindexアクションでインスタンス変数を定義したので、
index.html.erbのビューで使えることができました。
こうしてビューはコントローラーに見た目を送り返して、コントローラーからクライアントにレスポンスが返されます。
ここまではデータベースを必要としない場合の一連の流れでした。
今度はデータベースにデータを保存する、あるいはデータを引っ張ってくる必要がある時の流れをまとめたいと思います。
