10000hの技術メモ

この先生きのこるための勉強内容＆時間記録

Ruby on RailsⅡ（道場コース）１章　投稿機能を作ろう〜投稿一覧ページを作ろう

Progate Ruby on Rails

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

目次

投稿一覧ページを作ろう

  • indexを作る。

application.html.erbに

<li><%= link_to "Index", index_path %></li>

を追加して、ヘッダにindexへのリンクを作成。

routes.tbに

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

を追加。

一覧ページで、Note.allに対してforで表示していたはずだけど、やり方を忘れたので復習。

notes_controller.rbに

  def index
    @notes = Note.all
  end

を追加。これで今あるnoteが@notes配列に入る。

あとはinde.html.erbで

  <% @notes.each do |note| %>
    <li>
      <p>タイトル</p>
      <span class="content">
        <!-- ここでタイトルを表示してください -->
        <%= note.title %>
      </span>
    </li>
  <% end %>

※関係ないけど、この辺で判定があまり動かなくなって、何度かリロード＆判定を繰り返した。が、その時間は勉強時間にカウントしないである。

今回の勉強時間：16分 累計勉強時間：5時間56分

Ruby on RailsⅡ（道場コース）１章　投稿機能を作ろう〜モデルを作ろう・投稿の表示と保存

Progate Ruby on Rails

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

目次

モデルを作ろう

モデルの作り方（復習）

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

モデルをデータベースに反映させるために

rake db:migrate

を実行。

マイグレーションって何？というところが曖昧なので、ちょっと調べる。 マイグレーション機能とは - Ruby on Rails入門によると、

マイグレーションという機能は一見すると面倒に見えますが、この機能を使うことで特定のデータベースの文法に依存せずにテーブルへ行なう操作を記述でき、変更を実施したり元に戻すといった作業が簡単に行なえるようになります。

なるほどあまりよくわからん。 db:migrateするとcommitされる、のかと思っていたけれども↑見ると違う感じ。

投稿の表示と保存

やることが多いので手が止まる・・・。 レッスン時のスライドとコードを見ながら埋めていく感じで進めたものの、自分のモノになっている気がしない・・・。

整理

必要だったこと

  • リダイレクト。「投稿する」ボタン押下後に表示されるページを、/notes/:idのページにする。
    • showアクションとビューを作成
  • createアクションを作成
  • 新規作成時のフォームの内容を受け渡せるよう、フォームのinputとtextareaにname属性を指定。

まだ弱い

  • ルーティング
  • 値の受け渡し
  • MVCの関係

上記のポイント、他の本などで補いつつ、手は動かし続けるしかないのでは。 全然まだだし、わからないとすぐ腐りそうになるけど、なんとか保つ。

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

Ruby on RailsⅡ（道場コース）１章　投稿機能を作ろう〜フォームを作ろう

Progate Ruby on Rails

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

目次

フォームを作ろう

newページを作成する。

まずはrails generate controller notes newを実行。

この辺のURL設計というか、どういう構成で作るかみたいなのは事前に考えておくものなんだろうな・・・。 書きながら考える、だと絶対汚くなる。 「rails URL設計」でググると色々出てきたけど、今自分が考えてる内容と若干違う気もした。 - RailsにおけるRESTfulなURL設計勉強会 - ルーティングを理解してみる - なんちゃってウェブ系エンジニアの備忘録

routes.rbでルーティングを設定。

get 'notes/new' => 'notes#new'

を追加。

次にapp/views/notes/new.html.erbに指定された通りに作っていく。 ここでform_tagの使い方をあんまり覚えてなかったので、過去のレッスンの資料を見返しつつ書く。

眠気も相まって、何も見ないで書いてある通りのものが実現出来ないのがなかなか辛いしフラストレーションが溜まるけれども、 ここで投げ出すとRailsどころか何も身につかないので、こうやってブログ書きながら我慢。

以下、new.html.erbの内容。

<h1>新規投稿する</h1>
<%= form_tag do %>
  タイトル
  <input type="text" class="form-control title-field">
  内容
  <textarea class="form-control content-field"></textarea>
  <input type="submit" value="投稿する" class="btn primary-btn">
<% end %>

次にapplication.html.erbのヘッダメニュー部分に

<li><%= link_to "New", notes_new_path %></li>

を追加。

これだけだけど大分消耗・・・。

ここまでにして少し他の本読んで復習しよう。

今回の勉強時間：23分 累計勉強時間：4時間32分

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

Progate 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Ⅱ３章　投稿を編集、削除しよう（その２）

Progate 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Ⅱ３章　投稿を編集、削除しよう

Progate 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'

やったこと

  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分