Railsの基本

◆アプリケーション開発の流れ

Twitterのような文字列の投稿、閲覧機能を有する「Sample_App」アプリケーションの構築を行う流れについて、簡単に整理。

・環境面の設定など

$ rails new Sample_App
Railsアプリケーションの準備。
開発に必要なフォルダ、ファイル等を自動で作成する。
（app, config, db フォルダ等）

$ rails server
サーバーの立ち上げコマンド。
成功すると
URL: localhost:3000 に接続し、「Yay! You're on Rails!」 の画面が表示される。

・topページの構築

$ rails generate controller home top
- home：　コントローラー名
- top：　アクション名
webページ（/home/top） が作成される。
※併せて、home.scss も作成される。

・投稿一覧ページの構築

$ rails generate controller posts index
- posts：　コントローラー名
- index：　アクション名
post用のコントローラー等が作成される。
（route, controller, view が自動作成される）

（データベース関連)

$ rails g model Post content:text
- g: (=generate)
- Post: モデル名（単数形にする）
- content: カラム名
- text: データ型
下記フォルダにマイグレーションファイルを作成する。
Sample_App/db/migrate/

$ rails db:migrate
作成（変更）されたマイグレーションファイルをデータベースに反映させる。

・投稿詳細ページの構築

- [ルーティング]

get "posts/:id" => "posts#show"

※注：「index」 用のルーティングより下に記述する必要あり。

- [コントローラー]

def show
  @post = Post.find_by(id: params[:id])
end

一覧画面で選択されたデータのidを指定（params[:id]）して取得したデータを@postに格納する。

- [ビュー]

<%= link_to(post.content, "/posts/#{post.id}") %>

showアクションにiｄ情報を渡すための記述を加える。

・新規投稿ページの構築①（ページ遷移）

- [ルーティング]

get "posts/new" => "posts#new"

新規投稿ページへの遷移用。

- [コントローラー]

def new
end

- [ビュー]

<textarea></textarea>
<input type="submit" value="投稿">

入力フォーム（入力欄）と、投稿ボタンを設置。

・新規投稿ページの構築②（createアクション：データ保存）

- [ルーティング]

post "posts/create" => "posts#create"

- [コントローラー]

def create
  redirect_to("/posts/index")
end

データ保存処理後に、投稿一覧ページに遷移させる。（リダイレクト）

- [ビュー]

<%= form_tag("/posts/create") do %>
  .....
<% end %>

• "/posts/create": フォームの送信先を指定
• <% %> ではく、<%= %> である点に注意

Q: form_tag におけるdo とは（要確認）

（データ保存： createアクションの続き）

ここまで修正を行った上で、「投稿の保存」を行うためには更に修正が必要となる。

①投稿をcreateアクションに送信する。

- [ビュー]

<textarea name="content"></textarea>
<input type="submit" value="投稿">

textareaにname属性を指定。
※name属性をキーとしたハッシュがRails側に送られる。

②送信された内容を取得し、データベースに保存する。

- [コントローラー]

def create
  @post = Post.new(content: params[:content])   #paramsで取得した情報でインスタンスを作成
  @post.save     #データベースに保存
  redirect_to("/posts/index")
end

◆その他

・ルーティングにつて

URL	コントローラ	アクション	route.rb の記述
home/top	home	top	get "/" => "home#top"
home/about	home	about	get "about" => "home#about"

・table作成

1. マイグレーションファイルの作成
   $ rails g model Post content:text

2. DBへの反映
   $ rails db:migrate

※変更されたマイグレーションファイルがDBに反映されていない状態で動かそうとすると、マイグレーションエラーが発生する。

・共通部品をまとめる

ヘッダー部分の「共通部品」については、application.html.erb にまとめる。
各ページ用に作成するビューは、<%= yield %> 部分に代入され表示される。

・~html.erb内で変数の使用方法

• <% %>：　変数の定義などに利用（非表示）
• <%= %>：　値の出力に使用

・cssファイル

下記フォルダのcss ファイルが使用される。
SampleApp/app/assets/stylesheets/home.scss

・画像の格納場所

画像ファイルは下記フォルダ配下に格納する。
SampleApp/public/

・リンクの貼り方

<%= %> の記述を利用して記述する。

application.html

<a href="/about"> About</a>

application.html.erb

<%= link_to("About", "/about") %>

※リンクの貼り方について、QA（補足等の提示は後日。。）
Q: link_toのカッコ()は無くても動作する？
A: 引数はカッコ()で囲まないでも動作する。

Q: 第二引数のスラッシュは必須？
A: スラッシュが無くても動作するが、あった方がよい。（Herokuに上げた際の動作を要確認）

・データのソート

コントローラー内でデータを取得する際、下記記載を行うことによりソート指定ができる。
@posts = Post.all.order(content: :desc)
- contentをキーに降順

・変数params について

paramsの使い方は下記2パターンある。

①「:◯◯」を使った、ルーティングのURLから値を取得する。

route.rb

get "posts/:○○" => ....

②name属性が付いたフォームの入力内容を受け取る。

~.html.erb

<textarea name="○○"></textarea>