Webエンジニア目指して#35 - misokatsu

どうも筋肉痛マンです思い出したようにワイドスクワットしたら足がヨボヨボになりました

ようやく退職証明書が届いたので色々と動ける！！1月後半はまあまあニート生活になってましたね

のんびりしてると貯金が尽きるので頑張っていこうと思います

というわけでProgateのRails IIです

2個目のcontroller生成

特に気にすることはなくrailsコマンドを使えば生成できる

役割が別のページはcontrollerを分けたほうがいいみたい

$ rails g controller sample aiueo

generateはgで略せる

html.erb内で変数宣言をする

.erbはembedded rubyから略されてたんですね

このファイルはrubyの埋め込みが可能で、
<% %>で囲うとページでの表示なし、
<%= %>で囲うとページでの表示ありでrubyのコードを記述できる

表示なしを利用して変数宣言などをして、
表示ありを利用して変数の値の出力をする

例

<% message1="こんにちは" %>
<%= message1 %>

配列とeach文でテキストを表示する

こんな感じで埋め込みとhtmlを織り交ぜることもできる

<% messages=[
  "メッセージ１",
  "メッセージ２"
] %>
<% messages.each do |message| %>
  <div class="messages-entire">
    <%= message %>
  </div>
<% end %>

controller actionにrubyを記述する

一般的には変数の定義はactionで記述するらしい

controller

class PostController < ApplicationController
  def index
    @messages=[
      "メッセージ1",
      "メッセージ2"
    ]
  end
end

html.erb

<div class="main">
      <% @messages.each do |message| %>
        <div class="messages-entire">
          <%= message %>
        </div>
      <% end %>
</div>

こんな感じで@変数名で扱うことでviewとcontrollerで相互的に使える @変数は配列に限らずなんでも使えるっぽい

データベースを用意する

migraionファイルの生成

まずはmigrationファイルというデータベースに指示を出すファイルを生成
railsコマンド$ rails g model テーブル名カラム名:データ型

例

$ rails g model post message:text

今回は文字を入れるのでデータ型はtext

生成される場所はここ f:id:misokatsu_sand:20210211192140p:plain

中身はrubyで何やら書かれていますがまだわからないのでメモは割愛

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

      t.timestamps
    end
  end
end

テーブルの生成

先程のmigrationファイルを使ってデータベースに変更指示を出す

$ rails db:migrate

migrationファイルを作ったらmigrateをしないとどのviewを開いてもエラーが出るそう
migration errorが表示されるのでその際はmigrateが必要

modelの確認

migrationファイルの生成でmodelというものが下図のフォルダに作られている f:id:misokatsu_sand:20210211195720p:plain

中身はこれだけ

class Post < ApplicationRecord
end

ApplicationRecordを継承したクラスのことをmodelというらしいこれがあることで生成したPostテーブルが操作できる

rails consoleでテーブルにレコードを追加する

rails consoleはrubyのコードを入力してEnterをするとその結果をすぐ出力するもの
終了するまでは定義した変数に代入した値など覚えてくれる
↓こんなやつ f:id:misokatsu_sand:20210212003833g:plain

これを使って、
変数=モデル名.new(カラム名:"文字列")を実行した後に
インスタンスを代入した変数.save を実行すると対象テーブルにレコードが保存される

↓こんな感じ
f:id:misokatsu_sand:20210212184559p:plain

このsaveメソッドが使えるのはApplicationRecordクラスを継承しているおかげみたい

rails consoleでテーブルからデータを取り出す

レコードを追加したので確認してみる
変数=モデル名.firstで変数にテーブルの1つめのレコードを代入できる
レコードを代入した変数.カラム名で対象レコードのカラム名に格納されたデータを参照できる

こんな感じ
f:id:misokatsu_sand:20210212185033p:plain

モデルのallメソッド

モデル名.all[0].messageのように、allメソッドを使うと配列としてテーブルにアクセスできる

データベースとアクションの連動

データベースの状態

progateではまだ出てきてないけどsqlite3で表示してみる f:id:misokatsu_sand:20210214024533p:plain rails dbconsoleで起動して.headers onでカラム名の表示ON、あとはSQL文を打てばOK。ちゃんと保存したレコードが入ってる

rails consoleで見るよりこっちの方が絶対いいね

controller

class PostController < ApplicationController
  def index
    @posts=Post.all
  end
end

html.erb

<div class="main">
  <h1>ruby埋め込みテスト用</h1>
  <% @posts.each do |post| %>
    <div class="messages-entire">
    <%= post.message %>
    </div>
  <% end %>
</div>

できた

f:id:misokatsu_sand:20210214025421p:plain

要所はcontrollerの@posts=Post.allと
html.erbの<%= post.message %>

allメソッドで配列として変数に格納して、eachでmessageの値を取り出す。

viewの共通レイアウト

今のview

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <header>
      <p>テストページ</p>
    </header>
    <div class="main">
      <h1>ruby埋め込みテスト用</h1>
      <% @posts.each do |post| %>
        <div class="messages-entire">
          <%= post.message %>
        </div>
      <% end %>
    </div>
    <footer>
      <p>Copyright © misokatsusand All Rights Reserved.</p>
    </footer>
  </body>
</html>

これのmainクラスタグの部分だけ記述しても機能させる方法がある
(余談ですがhtml5はmainタグ標準装備されてます、後から知りました)

下図のディレクトリにあるapplication.html.erbというファイルがある f:id:misokatsu_sand:20210214031105p:plain

中身はこれ

<!DOCTYPE html>
<html>
  <head>
    <title>Webapp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

デフォルトでこの状態だから中身は好みに書き換えるとして、
トップページなどのviewのhtmlにいきなりmainタグとその中身だけ書いても、
このapplication.html.erbの<%= yield %>の部分にhtmlが代入されてからブラウザに表示される。

これを使って共通するレイアウトはまとめられる

現状のように各viewに個別にheaderタグやら書いちゃってもそれはapplication.html.erbより優先されるっぽい

色々置きすぎて手元のhtmlはメンテの手間がでかいため割愛

link_toメソッド

<%= link_to("表示文字列","URL") %>

html.erbに使うメソッドで、aタグと同じ役割

有効利用の仕方はまた後から出てくるらしい。~~その時でよかったんじゃね？~~

以上、rails II終わり！ではでは