Rails関連のことを調べてみた2022年06月29日

Railsで最新V8のSwiperへのバージョンアップに対応する

こんにちは、りです。
先日Swiper.jsは`4.5.0`から`8.2.4`(時点最新)へアップデートされました、（怖いバージョン差?）、今回はその対応STEPSとバージョンの解説をまとめました。
## 概要
**1.アップグレード対応STEPS:**
– STEP1: Swiperのアップデート
– STEP2: クラス名を変える
– STEP3: CSSとJSを読み込ませるように修正する

**2.注意点:**
– V6.5.1未満場合脆弱性がある
– V5.4.5以降はIE11では対応していなかった

**3.参考資料**

### 1.アップグレード対応STEPS
Swiperのリリース情報確認: `2022-06-13`に[v8.2.4](https://github.com/nolimits4web/swiper/blob/master/CHANGELOG.md#824-2022-06-13)をリリース、[v4.5.0](https://github.com/nolimits4web/swiper/blob/master/CHANGELOG.md#450—r

【Rails】Rubocopのアップデートとrubocop-rails_configの導入

## はじめに
未経験からエンジニアに転職して、3ヶ月ほど経つエンジニアです。
業務にあたりながらも、小規模なアプリを作って楽しんでいます。

今回はRubocopのアップデートで学んだことを残しておこうと思い、記事を書きます。

## rubocop-rails_config の導入
https://github.com/toshimaru/rubocop-rails_config

こちらがrubocop-rails_configというgemです。

> 「何かしらRuboCop設定のレールが欲しいよね〜」というところで閃き、「だったらrailsチームの用意した公式rubocop.ymlを使えばいいじゃない」ということで冒頭のRailsとほぼ同じ設定を持ったrubocop-rails gemを作りました。（https://blog.toshimaru.net/rubocop-rails/）

このgemを使用することで↓の設定とほぼ同じrubocop.ymlファイルが作れるというものです！

https://github.com/rails/rails/blob/main/.rub

form_withがlocal: trueなのにviewが再描画されずにはまった件

viewで`form_with`メソッドを利用してログインフォームを作ったが、`local: true`にしているにも拘らず、`render ‘new’`でログインフォームを再描画できずにはまったのでメモ。

# TL;DR
Rails 7では、form_withに対して`local: true`の代わりにオプションで`data: { turbo: false }`と指定する。

# 環境
“`bash
$ ruby -v
ruby 3.1.2p20 (2022-04-12 revision 4491bb740a) [x86_64-linux]
$ rails -v
Rails 7.0.3
“`
“`ruby:routes.rb
Rails.application.routes.draw do
…
get ‘/login’, to: ‘sessions#new’
post ‘/login’, to: ‘sessions#create’
…
end
“`

# 説明
以下ログインフォームのviewとセッション用のcontroller。

“`erb:ne

【Rails】Railsのform_withでリセットボタンを設定

## はじめに
Rails の`form_with`を使用して検索フォームを実装するにあたり、リセットボタンの実装方法について調べました。

HTMLでは`input`タグで`type=”reset”`を指定すれば簡単にリセットボタンを作成できます。
“`html

“`
`form_with`でも`type属性`に`reset`を設定できるのでしょうか。

## 使用環境
– Ruby 2.7
– Rails 6.1
– Bootstrap 4.0

## type=”reset”を生成するヘルパーはなさそう
`form_with`では様々なフォーム要素を生成するヘルパーメソッドがあります。
(例)
“`erb
<%= form.text_field :title %>
<%= form.check_box :pet_dog %>
<%= form.radio_button :age, "child" %>
<%= form.text_area :message,

AとBの日付の差分がｎ日以上ある場合、エラーになるValidationを作る。

## 概要
AとBの日付の差がｎ日以上ある場合、
エラーになるようValidationを作成する。

例：AとBの日付の差が10日以上ある場合、エラーになる。

　例１：
　　A（4/1）
　　B（4/16）
　　→15日差分がある。
　　　→エラー。

　例２：
　　A（12/30）
　　B（12/21）
　　→9日差分がある。
　　　→OK

## 日付の差分を求める
下記の書き方で日付の差分を求めてみた。

“`rb
hogehoge_on = “2022/04/01”.to_date
piyopiyo_on = “2022/04/08”.to_date

# hogehoge_on からpiyopiyo_onまでの日付の差
(hogehoge_on – piyopiyo_on).to_i.abs
# => 7

# ※to_iを入れないとよくわからない結果が出力される。
(piyopiyo_on – hogehoge_on)
# => 7/1

“`
参考：

Rubyで日時を扱うDateTimeを完全理解！計算・タイムゾーンの指定方法も解説

https:

<%= render @boards %>

部分テンプレートを呼び出す際に使用される。部分テンプレートとは“`_board.html.erb“`などのことで、この部分テンプレートを繰り返し表示される際にはcollectionを使用する。

例えば

“`_board.html.erb
<%= board.title% >
<%= board.body% >
“`
この部分テンプレートをcollectionを使用せずに書くと
“`index.html.erb
<% @boards.each do |board| %>
<%= render 'board', board: board %>
<% end %>
“`
eachを使い繰り返し呼び出している。

collectionを使用し書くと
“`index.html.erb
<%= render partial: 'board', collection: @boards %>
“`
collectionに@boardを渡して、内部要素を１つ１つ取り出している。意味的にはにはeach文とほぼ同じように見えるが、まとめて部分テンプレート呼び出すためパフォーマンスが良

Before Rails Tutorial１章　Paizaでの環境構築

## はじめに

## [対象者]
+ Ruby HTML CSSをある程度理解しているが、Rails Tutorial で挫折した。
+ **不安なので誰かの解説を受けながら一緒に作りたい。**
+ **「Railsで試しにアプリケーションを作りたいが、何も思いつかない」**

## [前提知識]
全ての知識が必要ではありませんが、Railsの前に学習しておくことを推奨します。
Railsの学習をはじめた初学者が陥る問題として、Rails以外の関連知識が不足しているため
挫折するといったケースが多く見受けられます。

未学習の方は Progate の下記コースを奨めています。

#### 学習済であることが推奨される
**【HTML&CSS】　基礎（入門書や [Progate HTML & CSS](https://prog-8.com/courses/html)）レベル**
**【Ruby】 基礎（入門書や [Progate](https://prog-8.com/courses/ruby)）レベル**
**【データベース】　基礎 (https://products.sint.c

１つのページ内に異なるカウントダウンを作成するDay12

本日もお疲れ様です。現役テックキャンプ受講生のアプリ開発Day１２です。最近昼夜逆転気味なり、更新も遅い時間になりがちです。いつかのタイミングで生活リズムを戻さねばと思ってます。

今日はjsによるカウントダウンを作成しました。現在、ディスカッションのためのWebアプリを作成しているのですが、ディスカッションするためのルームを一定時間経過後、自動的に閉じるように設定しようと思ってます。そのためのカウントダウンを作成していたのですが、１つのページで複数の異なるカウントダウンを表示させる方法が検索でもなかなか出てこなかったので、ここでアウトプットします。

イメージはこちらをご覧ください
https://gyazo.com/87f473586453759e904aa1ebfaa9629c

今回はRoomを複数作成し、それぞれにカウントダウンを表示させる方法について説明します。
結論はカウントダウンを作る記述をforループ内に記述すると簡単にできます。

# DBにdeadline（締切）カラムを追加
締切の日付を登録するためのdatetime型のカラムを追加します。
“`ruby:mi

`variant`メソッドを使ったが画像が表示されない現象に対処する! with Rails7, Active Storage

## 概要

Railsチュートリアルを`Rails 7`で実装に挑戦。
そしてRailsチュートリアルでも登場してくる`variant`メソッド。(第13章)
こちらを使って投稿した画像を表示しようとしたが、なぜか表示されない現象が発生。


さてこの現象と向き合うことにしよう…

## 結論

解決するためには以下の2通りある。簡単だ。

1： `vips`ライブラリをインストールする

“`bash:ターミナル
$ brew install vips
“`

2： 明示的に`mini_magick`を指定する

“`ruby:config/application.rb
# ===== 省略 =====
module RailsTutorialApp
class Application < Rails::A

CloudRun + Litestream で Rails アプリを激安で公開する

# はじめに

少し前に、この記事を読んで激しく共感しました。

https://laiso.hatenablog.com/entry/nope-sql

自分も様々な目的で簡単なWebアプリケーションを開発することがあるのですが、DBが欲しくなるタイミングでいつも技術選定に悩んでいました。
大抵の場合は記事にある「1. SQLあきらめる」や「3. DB自分で立てる」を選ぶのですが、不慣れな NoSQL に対する抵抗感やメンテナンスコストが辛くなってきます。

そんな折に以下の Tweet を見つけて SQLite + Litestream という解決策を知りました。

個人開発のコストはDB次第 – laiso https://t.co/rL8qYmafuv ここ最近は SQLite + Litestream という選択肢をとれば良いと思ってる。https://t.co/nR5BObiBtu

— V (@voluntas) May 5, 2022

Litestream は SQLite にレプリケーション機能を提供するオープンソースソフトウェアです。
レプリケーション先には Amazon S3 や Google Cloud Storage を利用でき、安価に利用できることが特徴です。

https://litestream.io/

本記事では、R

PDF.js を使おうとしたら、セットアップにやたらと苦労した

[PDF.js](https://mozilla.github.io/pdf.js/) とは PDF を JavaScript で扱うためのフレームワークです。

選択した PDF ファイルを Javascript 上で png に変換してアップロードする、ということをやりたかったので、このフレームワークを選択しました。

が、セットアップにだいぶ苦労したので、書き留めておきます。

## 自分の環境

主な構成情報は以下です。

– サーバー側
– Rails (7.0.1)
– react_on_rails (12.5.2)
– webpacker (5.4.3)
– クライアント側
– react@17.0.2
– typescript@4.5.5
– webpack@4.46.0

ただの `Javascript` で使うだけなら、苦労しないでしょうが、
`Typescript` と `webpacker` の環境だとちょっと苦労しました (後述)。

## インストール方法

インストールは、[Wiki](https://gi

【Rails】コメント機能Ajax実装③ 削除編

[【Rails】コメント機能をAjax実装① 準備編](https://qiita.com/coneco12_/items/2d6e44ce5c1b374ca7df)
[【Rails】コメント機能Ajax実装② 投稿編](https://qiita.com/coneco12_/items/61174a80a611b7e0049e)

投稿したコメントをAjaxで削除します！
今回の目標の完成形はこちらです↓

#### Commentコントローラーにdestroyアクションを追加
“`ruby
class CommentsController < ApplicationController before_action :authenticate_user! before_action :set_commen

【Rails】コメント機能Ajax実装② 投稿編

前回の[【Rails】コメント機能をAjax実装① 準備編](https://qiita.com/coneco12_/items/2d6e44ce5c1b374ca7df)の続きです。
コメントの投稿機能を実装していきます！

この記事での完成形はこんな感じです↓ (※Bootstrap使っています）

コメント投稿機能を実装
—-
#### Postコントローラーにnewメソッドを追加
“`ruby
class PostsController < ApplicationController #~~省略~~ def show #--以下を追加-- @comment = Comment.new @comments = @posts.comments.includes(:co

【Rails】コメント機能をAjax実装① 準備編

コメント機能を実装したので、記録を残します___φ(•ᴗ•๑)
間違っている箇所があれば、ご指摘頂けると大変助かります。

実装内容
—
・投稿記事に対してコメント機能をつける
・ログインユーザーのみコメント可能
・投稿・削除・更新を非同期で実装する

前提
—–
・Rails6
・Devise導入済
・jQuery導入済
・Bootstrap5
・記事投稿機能を実装済

準備
—
#### （1）Commentモデルを作成

Commentモデルに、user_idとpost_idを忘れずに追加します。
“`
rails g model Comment body:text user_id:integer post_id:integer
rails g db:migrate
“`

モデルにアソシエーションとバリデーションを追加します。
“`ruby
class Comment < ApplicationRecord belongs_to :user belongs_to :post validates :body, presence: true

DockerでRails6の環境構築

# 前置き
DockerやGitなどはインストール、初期設定済みのものとします
新規にアプリを作成するときに毎度調べるのも面倒なので備忘録として

### 環境
– MacOS Monterey(cpu intel)
– Docker -v 20.10.16
– docker-compose v2.3.3
### 構築内容
– Rails6
– DB postgresql

# 手順
– 必要なディレクトリとフォルダを用意
Docments下に作成するアプリのディレクトリを作り、移動
“`
$ mkdir myapp
$ cd myapp
“`
必要なフォルダを作成
“`
$ touch Dockerfile Gemfile Gemfile.lock docker-compose.yml entrypoint.sh
“`
dockerfileに記述
“`
FROM ruby:2.7.4

## nodejsとyarnはwebpackをインストールする際に必要
# yarnパッケージ管理ツールをインストール
RUN curl -sS https://dl.yarnpkg.co

FactoryBotの存在理由（自分用）

https://techtechmedia.com/factory-bot-rails/

session”メソッド”って本当にメソッドなの？

# はじめに

session **”メソッド”** って言うけど、使われ方が全然メソッドっぽくない。

sessionメソッドは以下のようにして使われる。

“`ruby
session[:user_name] = user.name
“`
まるでハッシュのようだ。

しかも

“`ruby
session.class
=> ActionDispatch::Request::Session
“`

というふうにあたかもsessionというオブジェクトに対して`class`メソッドが使えているように見える。

果たして本当にsessionはメソッドなのだろうか？

## 先に結論

メソッドである。

コントローラー内でbyebug↓

“`ruby
(byebug) defined? session
#=> “method”
“`

続けてsessionとだけ打ってみる。

“`ruby
(byebug) session
#

【Rails】orderメソッドが効かないとき

1対多のアソシエーションの場合の並び替えで躓いたのでメモφ(´･ω･｀)ﾒﾓﾒﾓ

今回は、記事に対するコメントを新着順で並び替えです。

まず、新着順にするために下記のように、
コントローラーにorder(created_at: :desc)を追記しました。
しかし、並び替えされず・・・

“`ruby
# app/controllers/post_controller.rb

def show
#~~省略~~
@comment = Comment.new
@comments = @post.comments.order(created_at: :desc)
end
“`

解決方法
—-

**1) postモデルに-> { order(created_at: :desc) }を追加**
※dependent: :destroyの前に置くとエラーになりました。
“`ruby
# app/models/post.rb

class Post < ApplicationRecord belongs_to :user has_many :comments

railsにjqueryを導入し、外部ファイルから読み込む時

yarn add jquery

config/webpack/environment.jsに下記を記述。

const webpack = require(‘webpack’)
environment.plugins.prepend(‘Provide’,
new webpack.ProvidePlugin({
$: ‘jquery/src/jquery’,
jQuery: ‘jquery/src/jquery’
})
)

app/javascript/packs/application.jsに下記を記述。
require(“jquery”)

これでscriptタグから作るjqueryの動作は作れる。

ただ外部ファイルに分けて動作をさせたい場合は、
app/javascriptの直下に任意のファイル（〇〇.js）を作り、
app/javascript/packs/application.jsに下記を記述。
require(“〇〇”)

【Rails】【通報機能】ユーザー通報機能を作ってみました

ポートフォリオを作っていた際にwebアプリケーションでよく見かけるユーザー通報機能を実装したいと思い、実装の仕組みを検索してみたのですがほとんどヒントを見つけられませんでした。
なので、自己流でユーザー通報機能を実装してみました。まだまだ初心者のため、諸々間違いがあるかもしれませんが、この記事が少しでも皆さんの助けになると幸いです。（何かお気づきのことがあればコメントお願いいたします> <） ### 【環境】 - Rails 6.1.5.1 - ruby 2.6.3 ### 【前提】 - 管理者機能(Admin)を実装しています！ - deviseを使っています！ ### 【実現したいこと】 - 自分以外のユーザーを通報できる機能。 - 通報されたユーザーを管理者が確認できる。 - その通報のステータス（対応済み等）を更新できる。 - 管理者の判断でユーザーを退会扱いとする事ができる。そのユーザーはログインできなくなる。 ### 【テーブル設計】 | User | Report | | ---- | ---- | | name | reporter_id | | em