hamablog

プログラミング学習についてのアウトプットと日記です

Progate Ruby on Rails学習(レッスン5まで)

内容

レッスン1

・アプリケーションの作成

 $ rails new アプリケーション名

 これを実行することで入力したアプリケーション名とそのフォルダが作成される。

 アプリケーションには開発に必要なファイルやフォルダが用意されている。

 

・サーバーの立ち上げ

 開発中のアプリケーションをブラウザで表示するためにはサーバーを起動する必要がある。

 $ rails server で起動。

 

・トップページの自動生成

 $ rails generate controller home top

 このコマンドを実行すると新しいWebページが自動で作られ localhost:3000/home/top というURLにアクセスできるようになる。

 

 〇コマンドだけでページができる理由

  コマンドを実行すると、ページを表示するのに必要なファイルが作られていた。

 railsでページを表示するためのファイル

  ビュー、コントローラ、ルーディング

 

 ・ビュー べージの見た目をつくるためのHTMLファイル。

   中身 $ rails generate controller home topのコマンドだと、後ろ二つのhomeフォルダとtop.html.erbというファイルが作成される。このファイルの中身は普通のHTMLのコードがある。よってページの見た目はここで変更できる。

 

 ・コントローラ

   ページを表示するときの経由地点。

   $ rails generate controller home top が実行されると、home_controller.rbというファイルのなかに topメソッドが追加される。このメソッドをアクションという。

 

  アクションの役割 

ブラウザに返すビュー(見た目)をviewsフォルダのなかから見つけだす。

コントローラと同じ名前のビューフォルダ(ここではhomeフォルダ)からアクションと同じ名前のHTMLファイル(ここではtop.html.erb)を探してブラウザに返す。

 

 ・ルーディング

   ブラウザとコントローラをつなぐ。

   送信されたURLに対して「どのコントローラのどのアクション」で処理するかを決める対応表。

  

  ルーディング設定ファイルの中身

localhost:3000/home/topというURLが送信されたとき

    Rails.application.routes.draw do

        get ”home/top” => “home#top”

    end

   homeコントローラのtopアクションで処理。

   getのあとの”home/top” を変更するとそれに応じてURLが変更される。

      “home#top” がかわらない限りhomeフォルダのtopアクションに対応するファイル(top.html.erb)の内容がブラウザに返される。

 

 まとめ

  $ rails generate controller home top実行

  →homeフォルダとtop.html.erbファイルを作成。

  →home_controller.rbというファイルのなかにtopメソッドが追加される。

  →ルーティングファイルがhomeフォルダのtopアクションで処理すると決める

  →このアクションがhomeフォルダからtop.html.erbというファイルを探す。

  →作成されたtop.html.erbをブラウザに返す。

 

・ルーティングとアクションの追加

 ルーティング

 Rails.application.routes.draw do

        get ”home/top” => “home#top”

     get ” home/about” => “home#about”

    end

 コントローラ

 def about

  end

 

 これでabout.html.erbというファイルをつくってもOK

 

CSSファイルはcss/assets/stylesheetsフォルダに入っている

 このフォルダに保存されているCSSをファイルにコードを書けばすべてのビューにCSSが適応される。

 

・画像はpublic フォルダに配置しておくと、画像名を指定するだけで表示できる。

 

・リンクのつくり方

 ビューファイル(HTML)のaタグのhref=” ” のURLとルーディングのURL部分を同じにする。

 

レッスン2

・データベース

 データを保存しておく場所

 

・投稿一覧ページの作成

 「投稿」に関するページをつくるためにpostコントローラをつくる。homeコントローラでもつくれるが目的に合わせて分けた方が良い。(homeコントローラはトップページなどに関したコントローラ)

 

・HTMLファイルのなかにRubyのコードを打ち込むときは<% %>で囲む。変数など。

 今まででてきたerb Embedded Ruby(埋め込みRuby)の略。

 埋め込むRubyコードをブラウザに表示したいときは<%= %>。変数の値など実際にページ内に表示したいときに使う。

 

・アクションのなかに変数定義する。

 def アクション名 end のなかに@変数を定義することで、それをHTMLファイルでも使える。(コントローラがビューに変数を渡す)

 変数の前に@をつけるのを忘れない。

 

・データベースはテーブルと呼ばれる表で管理されている。

 表の縦(列)のことをカラム、横(行)のことをレコードと呼ぶ。

 

・postsテーブルの作成

 データベースにデータを保存するためにテーブルをつくる。

 Step1

  マイグレーションファイルと呼ばれるデータベースに変更を指示するためのファイルを作成。

 $ rails g model Post content:text

  Postsという名前のテーブル(コマンドは単数形)のcontentという名前のカラムに長い文字列(text)のようなデータが入る。

 Step2

  データベースに変更を更新

 $ ralis db:migrate

  このコマンドを入力すると、id, criated_at, updated_atというカラムも自動生成される。

 

・テーブルを操作するためには、モデルと呼ばれるクラスを用いる。

 rails g modelというコマンドですでにPostモデルというクラスが定義された post.rbが生成されている。

 

 $ rails g model Post content:text

 このコマンドでは、テーブルを操作するpostモデルの定義されたルビーファイルと、データベースに変更を指示するマイグレーションファイルふたつが生成される。

 

rails console

 ターミナルで実行することによってコンソールを起動することができる。quitで終了。

  変数の定義もできる。

 

・postテーブルにデータを追加

 Post.newとnewメソッドでPostモデルのインスタンスを作成

 →post.saveとsaveメソッドでpostインスタンスをpostsテーブルに保存

 

・postテーブルのデータを利用

 post = Post.first postテーブルにある最初のデータを取得しpostに代入

 post.content 取得したデータから投稿内容を取得

 

 posts = Post.all postテーブルにあるすべてのデータを取得。

配列で取得できるので、最初のデータを取得するときは、Post.all[0]

 

・取得したデータをビューに表示

 コントローラのアクション内に取得したデータを変数に代入。

  @posts = Post.all

 ビュー(HTML)でその変数を表示。

    Post.content

 

・views/layouts/application.html.erb に共通のHTMLを書いておくことができる。

 ここに指定した変数に、各ファイルで違った値を代入すると、各ページごとに値は違うがレイアウトは揃えることができる。

 

・link_to aタグを生成するメソッド

  <%= link_to(“表示する文字”, “/URL”) %>

  →<a href=”URL”>表示する文字</a>

 

 

レッスン3

・idカラム データベースに保存されるときに数字が1から自動で入る。

 

・created_atカラム、updated_atカラム 

 保存された時刻が自動で入る。updated_atカラムはデータ更新時にも時刻が更新される。

 

・find_by 特定の条件に合致するデータを取得するためのメソッド。

 モデル名.find_by(カラム名:値)

 

 post = Post.find_by(id:3)

 post.content

  idが3のデータを取得し、表示

 

・ルーディングのURL部分にpost/:〇〇 と書くと「/posts/〇〇」のようなすべてのURLが該当する。

 

・params

 ルーディングで設定したURL「:id」の値を取得することができる。その値がこの変数にハッシュ(複数の要素をまとめて管理)としてはいっている。コントローラのアクション内で実行。

 

def show

  @id = params[:id]    params(ハッシュ)のなかのidの値

 end

 

・idカラムの値がprams[:id]と等しい投稿をデータベースから取得し、表示。

 def show

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

  end

 

 <%=@post.content %>

  <%= @post.created_at %>

 

・投稿一覧ページに各投稿の詳細ページへのリンクを作成

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

  post.contentの内容で表示されたリンクをクリックすると、そのid番号へと飛ぶ。

 index(一覧ページの名前)→post(詳細ページの名前)

 

・新規投稿ページの作成

 ルーディングでURLを作成。コントローラにアクションを作成。ビューファイルを作成。

 get “posts.new” => “posts#new”

 

 def new

  end

 

・投稿ボタンが押されrails側に送信されたデータをデータベースに保存

 createアクションを用紙してその処理を行う。

 フォームの値を受け取るときは、ルーディングを「get」でなく「post」にする。

 

・form_tag 

フォームに入力されたデータを送信するメソッド。

form_tag(送信先のURL) do

 

・redirect_to ほかのURLに転送(リダイレクト)するメソッド

 Redirect_to(転送先のURL)

 

・投稿内容の保存

 <textarea>タグにname属性を指定すると入力データを送信できるようになり、name属性の値をキーとしたハッシュがrails側に送られる。

 <textarea name=”content”>入力内容</textarea>

  {content:”入力内容”}というハッシュがcreateアクションへ送られる。

def create

 params[:content]    paramsの中身が{content:”入力内容”}なので、入力内容を取得

end

 

 実際の保存

  def create

    @post = Post.new(content:params[:content])

  @post.save

  end

 Postクラスにcontentが入力内容のインスタンス変数をいれ、@postに代入し保存。

 つまり、入力内容が@postに代入されそれが保存される。

 

・paramsのまとめ

 get “post/:〇〇”

 <textarea name =”〇〇”>

  このふたつをparams[:〇〇]で取得できる。

 

・order 

投稿一覧を並び替えるメソッド。asc:昇順、desc:降順

@post = Post.all.order(created_at: :desc) 

 

 

レッスン4

・投稿データを編集して保存するとupdated_atカラムの時刻が更新される。

 

・destroy データベースから削除するメソッド

 

・投稿編集ページの作成

 ルーディング どの投稿の編集かわかるようにURLにidを入れる

  get “posts/:id/edit” => “posts#edit”

 コントローラ

  def edit end

  ビュー

edit.html.erbの作成

 

・フォームに初期値を用意する

 <textarea>タグに初期値を入れることで設定できる

 

・編集内容を保存

 updateアクションを用意。そのなかに、フォーム内容の保存、投稿一覧画面への転送機能をつける。

 このアクションはフォーム値を受け取るので、ルーディングはpostにする。

 

・投稿内容の更新

 URLに含まれるidを用いてデータベースから投稿データを取得。

 →フォームから編集内容を受け取り、投稿データを更新。

 ビュー

  <%=form_tag(“/posts/#{@post.id}/update)do%>    updateアクションにidを飛ばす

   <textarea name=”content”>入力内容</textarea> 入力内容をハッシュにする

 コントローラ

  def update

    @post = Post.find_by(id:params[:id])   URLからidを取り出す

    @post.content = params[:content]    入力内容を上書き

   @post.save              保存

 

・削除機能

 destoryアクション。機能:投稿を削除。投稿一覧画面への転送

 ルーディングはpost。

 

・ルーディング

 get データベースを変更しないアクション

 post データベースを変更するアクション

 

・ルーディングpost用のリンク

 第三引数に{method:”post”}を追加。

 

レッスン5

・バリテーション

 不正なデータがデータベースに保存されないようにデータをチェックする仕組み。

 モデルで設定。

 class Post < ApplicationRecord

   validates :検証するカラム名, {検証する内容}

  validates :content, {presence:true}  contentカラムの空の投稿を防ぐ

  validates :content, {length:{maximum:140}} contentカラムの長さ制限を140文字に

 

 検証内容の複数設定 validates :content,{検証内容1, 検証内容2, …}

 

・saveメソッドは保存に成功した場合はtrue、失敗した場合はfalseを戻り値として返すようになっている。

 

・render

 別のアクションを経由せずに、直接ビューを表示できる。

 Render(“フォルダ名/ファイル名”)のように表示したいビューを設定。

 redirect_toと違いそのアクションの中で定義した@定数をそのままビューで表示できる。

 

・エラーメッセージ

 saveメソッドを呼び出した際にバリデーションに失敗すると、railsでは自動的にエラーメッセージが生成されるようになっている。

 @post.errors.full_messagesの中にエラー内容が配列で入る。

 

・フラッシュ

 ページ上に一度だけ表示されるメッセージ。ページを更新したり、別のページを移動すると表示されなくなる。

 Flash[:notice] = “表示したい文字列”

 

 

 

 

 

感想

レッスン1

今までの言語とは違い、サーバーやブラウザなどインターネットの構造を知っていないといけない。

コマンドによって動く仕組みを学習した。

 

レッスン2

所要時間2時間

 Rubyで学習する内容が出てくるのでそちらを先にやらないとできない。

 中間は作業というか、新しいことを学んで実際にそうなっているかの確認が続く。

 たくさんのファイルにそれぞれの操作をするので、正直なにをするためにどのファイルでなにをすればいいのかを把握しきれいていない。

 ひとつひとつの説明を理解するのに時間がかかる。まだ完全な理解には及んでいない。

 

レッスン3

 所要時間 2時間20分

 ハッシュとかキーとかをしっかり覚えておかないと説明の意味がわからなくなる。

 ちょくちょくRubyで学習したことがでてくる(newメソッドとか)ので、この辺をしっかり理解しておくと、さらに全体像が見えやすくなる。

 ここにきてようやくビューとコントローラとルーディングの役割がわかった。

 

レッスン4

 所要時間1時間30分

 railsの仕組みに慣れてきた感じがある。積み重ね学習ゆえ適度にレッスン3の復習にもなってよい。

 ただ、転送が増えたので、インターネットのなかでどういう振る舞いをしているのか気になる。これはこのレッスンからではわからない気がする。なにかいい書籍はないか。

 

レッスン5

所要時間 1時間20分

 暗記事項(新しく学ぶこと)は少な目。

 今までことが理解できているとスムーズに進むかんじ。

 アクションを経由したり、素通りしたりすることで、アクションが変化するので、その流れを抑えることが重要。クリックするボタンによって流れが変わり、それによって表示されることも異なってくるのでひとつひとつのボタンの意味をはっきりさせておく必要がある。