Ruby on RailsⅠ（道場コース）１章 復習しよう

20170215@home Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

目次

Ruby on Railsを始めよう

まずは$ rails new gatebookでプロジェクトを作成。

別ターミナルでrails serverもしくはrails sを入力して起動。

Topページを作ろう

rails generate controller コントローラ名 アクション名

出来たviewファイル（app/views/home/top.html.erb）に指定された内容を貼り付ける。

ルーティングを理解しよう

routes.rbの一部を

get 'top' => 'home#top'

に書き換え。 これだけだと「ルーティングを理解」とはとても言い難いので、この先もルーティングは意識する。

Aboutページの作成

• home_controller.rbに、aboutアクションを追加。
• about.html.erbを作成し、指定された内容をコピー
• routes.erbでhome#aboutへのルーティング設定

CSSを適用しよう

ここあんまり覚えてなかった。 app/assets/stylesheets/home.scssに指定されたCSSをコピペ。

リンクを作ろう

ルートをroutes.rbで設定。

root  'コントローラ名#アクション名'

そしてlink_toの使い方を復習。

<%= link_to "表示するテキスト", "URL" %>

なんだけど、"URL"の部分はabout_pathなどの名前付きルートで設定できる。

ここまでで、道場コースの１つ目が終了。

けっこう忘れているところ、資料を見返さないと書けないところがあったので、この道場コースをやるのはものすごく大事そう。

今回の勉強時間：38分 累計勉強時間：4時間9分

Ruby on RailsⅡ３章 投稿を編集、削除しよう（その２）

20170215@home Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

目次

投稿データの更新

前回は更新ページを作ったので、今回は更新＆DBに反映を行う。

• 更新はupdateアクションで行う
• ルーティング設定はpatch
• showアクションにリダイレクトするのでビューは用意しない
• form_tagヘルパーではmethodを指定できて、デフォルトだとpostになる。今回はpatchを指定。

やったこと

routes.rbに

patch '/notes/:id' => 'notes#update', as: 'update_note'

を追加。

notes_controller.rbに

  def update
    @note = Note.find(params[:id])
    @note.title = params[:title]
    @note.content = params[:content]
    @note.save
    redirect_to note_path(@note.id)
  end

を追加。

あれ、これってcreateアクションとほとんど一緒だよね？

edit.html.erbを

<%= form_tag update_note_path(@note.id), method:'patch' do %>

に。

投稿の削除

• 投稿の削除はdestroyアクションで行う

やったこと

routes.rbに

delete '/notes/:id' => 'notes#destroy', as: 'destroy_note'

を追加。

notes_controller.rbにdestroyアクションを追加。

  def destroy
    @note = Note.find(params[:id])
    @note.destroy
    redirect_to notes_path
  end

show.html.erbに

<%= link_to "削除", destroy_note_path(@note.id), method: "delete", class: "btn destroy-btn", "data-confirm" => "本当に削除しますか？" %>

を追加。

これでRuby on RailsⅡのレッスンをクリア！ 次からはRuby on RailsⅠの復習を兼ねた道場コースに突入。

今回の勉強時間：27分 累計勉強時間：3時間31分

Ruby on RailsⅡ３章 投稿を編集、削除しよう

20170214@home Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

章の目次

• 投稿を編集、削除しよう
  • 投稿編集ページの準備
  • 投稿編集フォームの作成　←　今回はここまで
  • 投稿データの更新
  • 投稿の削除

記事目次

投稿編集ページの準備

投稿編集ページを作る。 最初からフォームタイトルとコンテンツが入っている状態。

• editアクションを用意
  • routes.rbに追加
  • notes_controller.rbにeditアクションを追加

やったこと

routes.rbに

get '/notes/:id/edit' => 'notes#edit', as: 'edit_note'

を追加。

notes_controller.rbに

def edit
  @note = Note.find(params[:id])
end

を追加。

app/views/notes/edit.html.erbを作成。

show.html.erbに追加するところで詰まった。 ヒントによると

<%= link_to "表示するテキスト", 名前付きルート(@変数名.id), class: "class名" %>

と書くらしいので、

<%= link_to "編集", edit_note_path(@note.id), class: "btn edit-btn" %>

を追加。

ここまでで編集ボタンが表示され、押下するとeditページに飛ぶようになった。 まだeditページの中身を作成していないので空のページが表示される。

投稿編集フォームの作成

投稿フォームに初期値を入れたい件

ヘルパーを使って投稿フォームに初期値を入れる

• text_field_tag
• text_area_tag

edit.html.erbの記述

ハマった。

<h1>投稿を編集する</h1>
<%= form_tag do %>
  <%= text_field_tag :title, @note.title %>
  <%= text_area_tag :content, @note.content %>
  <%= submit_tag'保存' %>
<% end %>

の中で、最初

<%= text_field_tag:title, @note.title %>

のように、コロンの前に半角スペース無しで動かそうとしていたところ

unexpected tLABEL

等のエラーが出た。

スライドだと:titleが四角で囲ってあるおかげで分かりづらかった・・・。

今回の勉強時間：40分 累計勉強時間：3時間4分

Ruby on RailsⅡ２章 投稿を表示させよう

20170213@home Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

章の目次

• 投稿を表示させよう
  • 投稿一覧ページの作成
  • Verb
  • 投稿詳細ページの作成
  • リダイレクト

記事目次

投稿一覧ページの作成

一覧ページはindexアクションを作って表示する。 Note.allで@notes配列に入れる。

やったこと

1. ルーティング
2. アクション
3. ビュー の設定。

まずroutes.rbに

get '/notes' => 'notes#index'

を追加。

次にnotes_controller.rbに

  def index
    @notes = Note.all
  end

を追加。

app/views/notes/new.html.erbを作成。

Verb

• 投稿一覧ページへのリンクを作る。

Verbとは

POST / GET / PATCH / DELETEの4種類。（それぞれCRUDに対応） 参考：Rails のルーティング | Rails ガイド

RailsではURLとVerbの組み合わせで、どのコントローラのどのアクションを実行するのかが決まります。

投稿詳細ページの作成

• 投稿の詳細を表示する
• 投稿ごとにnoteのidが入るようにしたいが、これまでとはルーティングの仕方が異なる（名前付きルート）

詳細ページへのルーティング

get '/notes/:id' => 'notes#show', as:'note'

• ルーティングのURL部分に:idを付けて指定
• as:名前で、自分で名付けもできる 参考：Rails のルーティング | Rails ガイド

やったこと

1. ルーティング
2. アクション
3. ビュー の設定。

routes.rbに

get '/notes/:id' => 'notes#show', as:'note'

を追加。

notes_controller.rbに

  def show
    
  end

を追加。

app/views/notes/show.html.erbを作成。

index.html.erbにshowアクションへのリンクを追加。

routes.rbを元に'notes#show'→notes_controller.rbのshowアクション→変数@noteに指定したidの記事が入り、 show.html.erbでtitleとcontentを呼ばれる・・・？ まだRoR全体の動きがわかりきっていない・・・。

リダイレクト

• createアクションをリダイレクトする。
  • 新規投稿の後、create.html.erbでなくshow.html.erbを表示する。
  • create.html.erbが不要に

リダイレクトの書き方

アクションの最後に

redirect_to 転送先のURL

※URLに名前付けていじり始めてからわけが分からなくなってきた。noteとか、多分「全く別物だけど似たような名前を付けてる」箇所が混乱の元になってる気がする。 プレフィックスつけるとかでもっと上手に説明して欲しい。

今回の勉強時間：47分 累計勉強時間：2時間24分

Ruby on RailsⅡ１章 投稿機能を作ろう 〜投稿データの保存・データベースの構造

20170213@home Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

目次

投稿データの保存

• モデルとテーブルは対応関係
• モデルはクラスにあたるもの

セッターとゲッター

セッターとゲッターはコントローラやビューから自由に呼び出せる。

→Ruby上級編に説明があるらしいので、後で見る

noteテーブルにデータを保存する。

1. Noteインスタンスを生成
2. セッターで値をセット
3. saveメソッドを呼び出す

データベースの構造

console機能

モデルを操作してDBの中身を見られる。

rails console

gemのインストール

突然のgem

hirbというgemを入れると、rails consoleが見やすくなる。 （手順どおりにやったら”入れないとどのくらい見づらいか”を見る前にhirbを入れたので、見やすかった・・・）

今回の勉強時間：13分 累計勉強時間：1時間50分

Ruby on RailsⅡ１章 投稿機能を作ろう 〜モデルとデータベース

20170212@home Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

目次

データを保存したい

ここまで作ったものでは、投稿内容は保存されていないのですぐ消えてしまう。 それではWebアプリとしては意味が無いので、当然データは保存しないといけない。

データを保存するためには、モデルとデータベースが必要。

モデルは何をする？

コントローラから指示を受けて、データベースへのデータ保存・データ取り出しを行う。

モデルとデータベースの作りかた

rails generate model モデル名 カラム名:データ型

実行すると、app/models/モデル名.rbが作成される。

rake db:migrate

データベース生成。

ここまでで準備が出来た。 次は、今回作ったDBにデータを保存する部分。

今回の勉強時間：8分 累計勉強時間：1時間37分

Ruby on RailsⅡ１章 投稿機能を作ろう 〜投稿の表示

20170212@home Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

目次

投稿を表示する

一つ前のレッスンでは終わりが釈然としなかったものの、今度こそ自分が投稿したものを表示できるはず。

フォームの入力値に名前をつける

inputタグにname属性をつける。

入力値を受け取る

def create
    @title = params[:title]
end

変数titleに、name=titleの要素の値を代入している、でOKなのかな？

疑問：nameが重複していたらどうなる？

やったこと

notes_controller.rb のcreateアクションで@title, @contentに投稿画面でユーザが入力した内容を渡して、 それをcreate.html.erbで受け取って表示させた。

で、正しく動いた。

ここまでで、無料会員で受けられるレッスンが終了。

今回の勉強時間：8分 累計勉強時間：1時間29分