Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@kohki_takatama(Kohki Takatama)

Progate +α メモず【Ruby on Rails ②③】

Last updated at Posted at 2024-01-14

はじめに

今回はデータベース周りが主軸……と思ったけど、結果的にいろいろと。
なんかいつの間にRails②を終えて③に入ってました。怖。
なのでまとめて投稿します。

今回も、気になる見出しがあれば見ていただけると嬉しいです！

メモず

@変数：Controllerとviewからアクセスできる

なんで@つけると参照できるの？別ファイルじゃないの？
→個人的にはhtmlとscriptの関係性に置き換えて納得しました。

RUNTEQだと htmlとcssの関係がわかりやすいでしょうか。

  • htmlの中にcssがある（stylesheet = css）
  • htmlでclassやidをつけることで、cssからもアクセスできる
    （cssの場合はより広く、より深くアクセスできますが）
  • @をつけてない変数とは、cssでいうところのclassもidもないhtml要素のイメージ
    （繰り返しになりますが、cssだとタグでもアクセスできる。まあイメージということで）

マイグレーションファイルの作成：rails g model Post content:text name:string

ここはProgateそのままになりますが

  1. railsコマンドで、gつまりgenerateする。何を？
  2. model。クラス名はPost。そして……
  3. Postの集合体＝データベースのpostsデータベースと、postsマイグレーションファイルを作成。
  4. postsの中身（構造）として、contentという名前のカラムで、その中の型はtextだよ。

マイグレーションファイルって？

前回記事にも書きましたが、
"Migration"：移行・遷移という意味。データベースの設計図のこと。
データベースという建物の構造を遷移させるファイル、というイメージ。

ファイルの場所

post.rb：app/models/post.rb
xxx_create_posts.rb：db/migrate/xxx_create_posts.rb

作成されたファイルの解説

Progateには「理解しなくていいよ！」って言われたけど・・・気になる・・・

class CreatePosts < ActiveRecord::Migration[5.0]
  def change
    create_table :posts do |t|
      t.text :content

      t.timestamps
    end
  end
end
  • class CreatePosts < ActiveRecord::Migration[5.0]
    新しいクラスCreatePostsを定義。ActiveRecord::Migrationを継承する。
    5.0は、Rails 5.0のマイグレーションに準拠ということ。
  • def change
    メソッドchangeを定義。マイグレーションファイルが実行された時と、ロールバックの時に呼び出される。
    changeメソッドの利点は、単一のメソッドでマイグレーションの「進行」と「ロールバック」の両方の振る舞いを定義できること。

    ただし、Railsが自動的に逆操作を推測できない複雑な変更を行う場合は、代わりにupメソッドとdownメソッドを使用して、それぞれの操作を明示的に定義する必要があります。

  • create_table :posts do |t|
    新しいテーブルpostsを作成。:はシンボルであるということ。識別子として優れている。
    シンボルについて詳しくは前々回の記事
  • t.text :content
    postsテーブルにcontentという名前のtext型のカラムを追加。

    このカラムは、記事の本文など、長い文字列を格納するために使用されることが一般的です。

  • t.timestamps

    2つのカラム、created_atとupdated_atをテーブルに追加します。これらはそれぞれ、レコードが作成された日時と最後に更新された日時を自動的に記録します。

rails db:migrateマイグレーションファイルの実行

changeメソッドの実行を行う。
この時、create_tableメソッドで、自動的にidカラムも追加される。
無いと思うが、何らかの理由でidカラムを追加したくない場合は

class CreatePosts < ActiveRecord::Migration[5.0]
  def change
    create_table :posts, id: false do |t|
      t.text :content
      t.timestamps
    end
  end
end

と、id: falseオプションでidカラムの追加をしないようにできる。
また、create_tableメソッドで、すでに作成されたテーブル名を指定した場合、エラーが起こる。
同名のテーブルが存在しないときのみテーブルを作成する：`if_not_exists: true:オプション

class CreatePosts < ActiveRecord::Migration[5.0]
  def change
    create_table :posts, if_not_exists: true do |t|
      t.text :content
      t.timestamps
    end
  end
end

今更ながら…Ctrl+Shift+Vで貼り付け

ターミナルの話。どうも慣れなくて、Ctrl+Cで貼り付けしてProgateに怒られてます。

Rails console の起動rails console

一般的なコンソールではない。

  • Rails環境へのアクセス。MVC、クラス、メソッドのすべてにアクセス可能
  • Rubyコードを入力し、リアルタイムで実行可能。テスト・データベース操作・アプリケーション動作確認が簡単に行える。

なお、ここで定義した変数は、consoleを終了するまで有効。
quitコマンドでコンソールを終了。

データベースへの追加

ここまでの例postを使うと、

変数(postが一般的)=Post.new(content:"勉強なう")
変数.save

をconsole内で行う。

<% %>と<%= %>の違い

  1. <% %>:
    - この構文は、Rubyのコードを実行しますが、その結果をビューに出力しません。
    - コントロールフローのコード（例: if、for、eachなどのループや条件分岐）に使われることが一般的です。
    - 例: <% if user_signed_in? %>や<% @users.each do |user| %>
  2. <%= %>:
    - この構文は、Rubyのコードを実行し、その結果をビューに出力します。
    - 変数の値やメソッドの戻り値をHTMLテンプレートに表示したい場合に使います。
    - 例: <%= @user.name %>や<%= link_to 'Home', root_path %>

application.html.erb：ビューの共通部分

ヘッダー・フッター・ナビゲーションバーなど、全ページに共通するHTML構造を記述する。
これは、デフォルトでレイアウトファイル（app/viws/layouts）を読み込むよう設定されているため。

Railsでページがレンダリングされるプロセス

  1. URLに基づいたアクションの実行: まず、ユーザーがアクセスするURLに基づいて、適切なコントローラーとアクションが特定されます。このアクションは、ビューをレンダリングするために必要なデータを準備します。
  1. ビューファイルの決定: 次に、特定されたアクションに対応するビューファイル（例えば show.html.erb など）が決定されます。このファイルには、ページの具体的なHTMLコンテンツが含まれています。
  1. レイアウトファイル（通常は application.html.erb）の適用: ビューファイルの内容をレンダリングする前に、Railsはレイアウトファイル（デフォルトでは application.html.erb）を読み込みます。このレイアウトファイルは、サイト全体で共通のHTML構造（ヘッダー、フッターなど）を定義します。
  1. ビューファイルの内容をレイアウトに挿入: ビューファイルの内容は、レイアウトファイル内の <%= yield %> の位置に挿入されます。これにより、ビューの内容が共通のレイアウトの中に組み込まれた最終的なHTMLページが生成されます。

もし、<header>が両方のファイルに存在していたら？

application.html.erb

    <header>
      <div class="header-logo">
        <a href="/">TweetApp</a>
      </div>
      <ul class="header-menus">
        <li><a href="/about">TweetAppとは</a></li>
      </ul>
    </header>

top.html.erb

<header>
  <div class="header-logo">
    <a href="/">Facebook</a>
  </div>
  <ul class="header-menus">
    <li>
      <a href="/about">TweetAppとは</a>
    </li>
  </ul>
</header>

結果は・・・
重なりました！！（画像撮り忘れ←）
両方表示されるってことですね。

link_toメソッド：aタグ

html.erbにおいて、以下の2つは等価
<a href="/top">TopPage</a> / <%= link_to("TopPage", "/top)>
さらに、link_toは

  • 自動でセキュリティ機能を提供する
  • ブロックを受け取り、複数のHTML要素を簡単に含めることができる
  • Rialsヘルパー（いずれやるであろう概念）を使用できる。
    といった利点がある。

post/:id：:idによるルーティング

get "post/1" => "posts#show"
get "post/2" => "posts#show"
get "post/3" => "posts#show"
#...

と書くよりも、

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

と書いた方がスマート！ただし、

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

の順になってしまうと、post/:idが優先されてしまい、
post/indexへのアクセスを:id = indexだと処理してしまう。
よって、

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

と、適切な順番で書こう。

でも、どうやって:idをControllerに渡すの？

実は、paramsパラメータに入っている。よって、

def show
	@id = params[:id]
end

で取得できる。ほかにも、http://example.com/posts?category=newsというリクエストでは、params[:category]は"news"となるなどの使い道がある。

サーバー・データベースの変更：Post

GetとPostの違い

  1. GETメソッド:
    - GETは主にデータの取得や表示のために使用されます。
    - これは安全な操作であるとされており、データベースやサーバーの状態を変更しないべきです。
    - GETリクエストはブックマークやリンクとして共有でき、キャッシュ可能です。
    - URLにパラメータが含まれるため、機密性の高い情報を送信するのには適していません。
  2. POSTメソッド:
    - POSTはデータをサーバーに送信する際に使用され、一般的にデータの作成や更新に使われます。
    - これは非安全な操作であり、データベースやサーバーの状態に変更を加えることが想定されています。
    - POSTリクエストの内容はブラウザの履歴には保存されず、ブックマークやリンクとしても共有できません。
    - フォームからの送信やAPIリクエストによく使用され、URLにはパラメータが含まれません。

※GETがサーバーの状態を変更しないべき、というのは技術的な制約ではなく、HTTPプロトコルの設計原則やベストプラクティスに基づくもの

<%=form_tag(URL) do%>

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

なんで、何かを表示するわけじゃないのに<%= %>なの？

確かにform_tagは送信のためのメソッドだけど、form_tagの中にはHtml要素があるでしょ？
それを表示するためには<% form_tag %>ではなく、<%= form_tag %>じゃないといけない。

<div class="main posts-new">
  <div class="container">
    <h1 class="form-heading">投稿する</h1>
    <%= form_tag("/posts/create") do %>
      <div class="form">
        <div class="form-body">
          <textarea></textarea>
          <input type="submit" value="投稿">
        </div>
      </div>
    <% end %>
  </div>
</div>

<% form_tag %>と書くとどうなるの？→テキストエリアとか、submitボタンとか、form_tagの中にあるものがすべて表示されない。

textareaには名前を付けようね！

でないと、keyになるものがないから、textareaに入力したものが、サーバーにおくられなくなっちゃうぞ☆

redirect_to(URL)

リダイレクト（別ページに飛ばす）メソッド。シンプルでいいね！

クエリ：.order(property: [:asc|:desc])

ascとdescはaとdのどちらを上にしたいか、で覚えればよさげ。
aなら昇順、d(de)なら降順。

終わりに

新しい概念・構文・用語がさらっと出てくるので、調べる手が止まりません。
でも、Progateのいいところですよね。脱線しないで、まずモノづくり、そして完成の経験ができる。独学では難しかったところです。
あと、Rubyも良い言語ですね。今のところ参照元が散らばってること以外は、簡潔に書けてる。
明日も楽しみです。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?