これは何か

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

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

環境準備

まずはコンソールで ruby -v と入力したら 2.7以上のバージョンがでるようにがんばって rvm や rbenv をインストールしてください！(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 を編集し、以下を追加。

import LocalTime from "local-time"
LocalTime.start()

• app/views/posts/_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 を作成する。

<div id="<%= dom_id comment %>">
  <%= comment.content %>
  - <%= time_tag comment.created_at, "data-local": "time-ago" %>
</div>

• 続けて views/comments/_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 を編集し以下を加える。

  <p>
    <strong><%= pluralize post.comments.count, "comment" %></strong>
  </p>

• conrtollers/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 :comments を posts の下にもってくる

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 ユニットテストの実行