search
LoginSignup

This article is a Private article. Only a writer and users who know the URL can access it.

posted at

updated at

Ruby on Rails 7 Hands-on

これは何か

Kanazawa.rbでRails7のハンズオン資料として使う予定の文章です。

TODO: パスを全部appからのパスでちゃんと書く。

環境準備

まずはコンソールで ruby -v と入力したら 2.7以上のバージョンがでるようにがんばって rvmrbenv をインストールしてください!(3.0以上のほうが安定してハンズオンできているみたい)

SQLite 3.38 以上をインストールしてください。

Windowsの人はちょっと私( @PharaohKJ ) ではカバーできないので、できればCloud9を使って欲しいなあ。

Cloud9での環境準備

自分のPCでできる人はスキップ!

まずAWSと契約してください。クレジットカード要ります。コンソールからCloud9を検索して接続。

↓このページの「 sudo yum update 」まで進めてください。(このページで使っているrubyやrailsのバージョンは古いものを使ってる)

AWS Cloud9 でRuby on Rails の開発環境を構築する - Qiita

そこまで進んだら ↓このページの bundler -v まで進めてください
0からRuby on Railsの環境構築【Cloud9】(Rubyのバージョン変更からRailsのインストールまで) - Qiita

SQLite3 のインストール

↓このページを参考にインストール。
Cloud9(Amazon Linux 2)でsqlite3をインストールする | みーまの道具箱

具体的には以下を実行してSQLite3のあたらしめのやつをインストールしてください。

wget https://www.sqlite.org/2021/sqlite-autoconf-3360000.tar.gz
tar xzvf sqlite-autoconf-3360000.tar.gz
cd sqlite-autoconf-3360000
./configure --prefix=/opt/sqlite/sqlite3
make
sudo make install
gem install sqlite3 -- --with-sqlite3-include=/opt/sqlite/sqlite3/include --with-sqlite3-lib=/opt/sqlite/sqlite3/lib

確認

ruby -v で2.7以上、 bundler -v で2.x.xが表示されれればOK。

Ruby on Rails のインストールと確認

選択肢1 gem install

bundlerの意味がよくわからない初心者、cloud9使う人はこれでOK。

gem install rails を実行し rails -v で確認。 7.0.x と表示されればOK。

選択肢2 bundle install

bundler の意味がわかる方中級者以上は bundle init してでてくるファイルを編集して gem rails を有効にし bundle install でインストールしてください。以降 bundle exec をつけて試してください。

ついていく動画

Rails 7: The Demo - YouTube

掲示板アプリを作成する。
エディター画面では、DHHさんの顔の上あたりにディレクトリツリーが表示されているので参考になるかも。

ハマりどころ

大文字・小文字・複数形・単数形・アンダースコアなどに注意してください。

0:00 アプリ作成

  • rails new demo
  • cd demo

0:28 スキャフォルドで掲示板の投稿(post)を作成する

postはtitle(string)とcontent(text)を持つ。

  • rails generate scaffold post title:string content:text
  • 自動でできたファイルを確認する
  • マイグレーションファイルを確認する > db/migrate/<日時>_create_posts.rb
  • post.rb (モデル) の確認
  • posts_controller.rb (コントローラ) の確認
  • posts/index.html.erb (ビュー)の確認

1:54 アプリの実行とpostのCRUD

実行前にDBを準備

  • rails db:migrate
  • db/schema.rb の確認
  • rails server でアプリを起動し、ブラウザで http://localhost:3000 にアクセス
    • Cloud9の場合ちょっと手間がかかります。
      • config/environments/development.rb を開く
      • 最後の end の1行上に config.hosts.clear を加える
      • rails server を同じように起動。
      • ブラウザで動作を確認するには、最上段メニューの「Preview」>「Preview Running Application」を押す
      • 「接続が拒否されました」とでるようなウィンドウがでるが、URLバーらしきところの右の右に「別タブで開く」的ボタンがあるのでそれを押せば表示されるはず
  • /posts にアクセスしてCRを試す
  • app/views/layouts/application.html.erb を開いてCSSを追加
    • <link rel="stylesheet" href="https://cdn.simplecss.org/simple.min.css">
  • json API を試す
  • posts_controller.rbをみる
  • post.rbを編集し、バリデートの追加
  • 5:30ごろ、typoしてしまったんだが、ブラウザ下の部分でデバッグできる実演
  • 5:48ごろ rails console してコンソールに入る
  • Post.first で最初の投稿を取得できる create! で作成もできるなど
  • モデルのwhereの指定がいろいろできるし、 .to_sql で実行されるSQL文の確認もできる

7:05 Action Textの利用(画像なども含めたリッチテキストを簡単に扱うことができる)

あわせてJavaScriptのモジュール導入について

  • rails action_text:install の実行
  • bundle install の実行
  • rails db:migrate の実行
  • モデル編集 has_rich_text 、フォームの編集
  • posts/new にアクセスしてでリッチテキスト対応フォームの確認
    • マークアップ確認、画像ファイルをD&Dで挿入
  • importmap.rb の説明 pin、importについて
  • ./bin/importmap pin local-time の実行
  • app/javascript/application.js を編集し、以下を追加。
application.js
import LocalTime from "local-time"
LocalTime.start()
  • app/views/posts/_post.html.erb を編集して作成日を追加する
_post.html.erb
  <p>
    Posted <%= time_tag post.created_at, "data-local": "time-ago" %>
  </p>
  • posts/1 などにアクセスして Posted ?? minutes ago という表記にかわっていることを確認
  • ./bin/importmap pin local-time --download の実行
    • importmap.rb が更新されるのを確認

13:40 コメントの実装

  • rails g resource comment post:references content:text
  • マイグレーションコードの確認、実行( rails db:migrate )
  • rails c して Post.first.comments とやるがとれない。→モデルを編集してないから。
  • post.rb を編集し、 has_many :comments を追加(複数形なのがミソ)
  • 再度 rails c もしくは reload! して Post.first.comments に問題がないことを確認
  • コメントレコードを作成してみる
    • Post.first.comments.create! content: "First comment!"
  • views/posts/show.html.erb を開く
    • <%= render 'posts/comments', post: @post %> を加える
    • このファイル名に対応するファイルを作成する、つまり views/comments/_comment.html.erb を作成する。
_comment.html.erb
<div id="<%= dom_id comment %>">
  <%= comment.content %>
  - <%= time_tag comment.created_at, "data-local": "time-ago" %>
</div>
  • 続けて views/comments/_new.html.erb も作成する
_new.html.erb
<%= form_with model: [ post, Comment.new ] do |form| %>
  Your comment:<br>

  <%= form.text_area :content, size: "20x5" %>
  <%= form.submit %>
<% end %>
  • 続けて views/posts/_post.html.erb を編集し以下を加える。
_post.html.erb
  <p>
    <strong><%= pluralize post.comments.count, "comment" %></strong>
  </p>
  • conrtollers/comments_controller.rb を開いて編集
comments_controller.rb
class CommentsController < ApplicationController
  before_action :set_post

  def create
    @post.comments.create! params.required(:comment).permit(:content)
    redirect_to @post
  end

  private
  def set_post
    @post = Post.find(params[:post_id])
  end
end
  • routes.rbを編集し resources :commentsposts の下にもってくる
routes.rb
resources :posts do
  resources :comments
end
  • コメントのCRUD動作確認
  • 19:47 ログを読んで何が行われているかの確認

20:45 Action Mailerの利用(掲示板に更新があったときメールを簡単に送信・デバッグ向けプレビューできる

textメール、HTMLメールを送信する部分の実装、メールを送らずにメールのプレビューのテスト。

  • rails g mailer comments submitted
  • app/mailers/comments_mailer.rb の編集
class CommentsMailer < ApplicationMailer
  # Subject can be set in your I18n file at config/locales/en.yml
  # with the following lookup:
  #
  #   en.comments_mailer.submitted.subject
  #
  def submitted(comment)
    @comment = comment

    mail to: 'blog-owner@example.org', subject: 'New comment!'
  end
end
  • app/views/comments_mailer/submitted.html.erb の編集
<h1>You got a new comment on <%= @comment.post.title %></h1>
<%= render @comment %>
  • test/mailers/previews/comments_mailer_preview.rb を編集
  • プレビューテスト
    • ブラウザでテスト TODO Cloud9
    • text・HTMLメールの切り替え
  • CommentsController を編集してコメントがあった場合にメールを送るようにする
  • コメントしてみる
    • ログにてメールが作られているのを確認する

24:32 Hotwire (JavaScriptなしで、postにコメントが増えたらページリロードなしに即反映される

  • 25:08 <%= turbo_stream_from @post %>
  • broadcasts_to :post
  • ブラウザを並べて、postをみつつ、コメントを投稿するとページリロードなしに反映されている
    • ログで確認できる
  • rails c で今ほど投稿したコメントを削除すると、ページリロードなしに対象が削除されている
  • rails c で今ほどコメントを編集すると、ページリロードなしに対象が更新されている
    • rails s のログで何が流れているのか確認できる

27:40 ユニットテストの実行

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
What you can do with signing up