10000hの技術メモ

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

Ruby on Rails Ⅲ ２章 scaffoldのコードに近付けよう(1)〜resources

Progate Ruby on Rails

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

目次

railsⅡで書いたコードをscaffoldに近づけていく。自動生成されたコードはお手本になるので、意味を１つずつ確認していく。

resources

resourcesを使うと、７つのルーティングが自動生成される＝getやpostを使って一つずつ書かなくともよい

使い方はroutes.rbで

resources :コントローラ名

この状態でrake routesすると

※コピペだと綺麗に表示できなかったので、画像で済ます。

あとは、元々railsⅡで作っていたときとパスが変わっているので、現状に合うように書き換える。 ・・・この辺手間なので、普通に開発してて「変えたい」と思った時のために、少ない手間でさっと修正できるような仕組みはなんだろうか。何かのIDEがやってくれる？

今回の勉強時間：21分 累計勉強時間：7時間43分

Ruby on Rails Ⅲ １章 scaffoldとは？

Progate Ruby on Rails

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

章の目次

  • scaffoldとは？
    • CRUDとscaffold

このレッスンでは、RailsⅡで書いたコードをよりよいコードにしたり、リファクタリングを行ったりしていきます。 また、RailsⅡで作成したような機能を簡単に作ることのできるコマンドを身につけていきます。

→本とかだといきなりscaffold使っての説明だったりするので、一度便利機能を使わずやってから「面倒だよね？実は簡単にする方法があるんですー」のほうが身につく気がする。コレは良い。

CRUDとscaffold

CRUDとは・・・Create, Read, Update, Delete。（ここは一般教養）

RailsⅡでは自分で作っていたようなCRUDの機能は、scaffoldを使うと自動生成してくれる。

rails g scaffold モデル名 カラム:データ型 (カラム:データ型 ...)

scaffoldで生成されるもの

  • コントローラ
  • モデル
  • ビュー 上記に加えてルーティングも設定される（resourcesというのを使う）

sampleをつくる

rails new sample
rails g scaffold Note title:string content:text
rake db:migrate
rails s

とここまでやってlocalhost:3000/notesにアクセスすると、自分ではまだ何もしていないけど、Notesページが出来上がってる。 しかもNew Noteリンクまであって、ノートが作れるし、一覧表示もされる。

前に本で読んだscaffoldの便利さが今ならわかる・・・。

今日は残業で遅かったからここまで！

今回の勉強時間：12分 累計勉強時間：7時間22分

Ruby on RailsⅡ（道場コース）１章　投稿機能を作ろう〜投稿データを更新しよう・投稿の削除機能を追加しよう

Ruby on Rails Progate

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

目次

投稿データを更新しよう・投稿の削除機能を追加しよう

編集ボタンを押してeditページに行くところまで前回作った。 今回はフォームの内容を変更したのち、保存ボタンを押下して更新するところまで。

やったことはそのまんまRuby on RailsⅡ３章　投稿を編集、削除しよう（その２） - 10000hの技術メモを。

だんだんnotes_controller.rbでやってる意味が分かってきた。

ここまでで道場コースの２を完了。 完了とは言いつつも、まだ前のスライドやメモ記事を見ながら写してる部分も多くて、たぶんあと何回かやらないと本当に完了とは言えないかな。

とはいえ、何度でも見返せるのがProgateの良いところなので、お金払ってる分最大限に使う姿勢で。

今回の勉強時間：24分 累計勉強時間：7時間10分

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

Progate Ruby on Rails

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

目次

投稿の編集ページを作ろう

個別の投稿ページに「編集」ボタンを付けて、そこから編集ページに飛べるようにする。 編集ページにはフォームが２つあって、初期値に現在の投稿が入っている状態。あとは保存ボタン。

routes.rbに

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

を追加。

編集ボタンの追加はRuby on RailsⅡ３章　投稿を編集、削除しよう - 10000hの技術メモ参照。

edit.html.erbの中で、フォームの初期値としてタイトルとコンテンツを設定するやり方を忘れていた。

  • text_field_tag
  • text_area_tag

だった。 Ruby on RailsⅡ３章　投稿を編集、削除しよう - 10000hの技術メモ

あとはeditアクション等作って、確認。

・・・したらFailした。 どうもフォームに適切なクラス名を付けていなかったらしい。 上記で引用した学習メモの時点で付けていなかったので、前のレッスンではクラス無しでも通ってしまっていた模様。

text_field_tagでクラスを指定

参考：text_field_tag - リファレンス - - Railsドキュメント

text_field_tag(要素名 [, 値, オプション])

のように使う。

たとえば

<%= text_field_tag :title, @note.title, class:'form-control title-field' %>

ここを設定してあげて、やっとformに初期値を出せた。

まだまだcontrollerとviewとの間での値の受け渡しが理解できていなさそう。

今回の勉強時間：50分 累計勉強時間：6時間46分

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分