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

rails でTypeError can’t convert ActiveSupport::TimeWithZone into an exact numberで途方に暮れたら

rails6.1に上げる設定をしていた時に出たエラーですが、appとかconfigの下のファイルがダンプに出て来ません。
てっきり6.1の
ActiveSupport.utc_to_local_returns_utc_offset_times
関係かと思いきや、同時に調整しようとしたcookieの設定で
Rails.application.config.session_store
（略）
expires: 20.years.from_now
とすべきところを
expire_after: 20.years.from_now
としていたのが原因でした。
この設定ファイルでエラー、とは出ないので、戻すまで気がつきませんでした。
こんなやらかしは多分自分だけとは思いますが、検索しても全然ヒントがなく、しばらく途方に暮れたので恥を晒しておきます。

Lintの使い方

rubocopとは慣習的でないRailsのコードを発見し、それを簡単に修正してくれる便利なツール。

rubocopの正誤表を見るには、“`EmptyLinesAroundClassBody“`でgoogle検索をかける。もしくは下のURL。

“`
https://www.rubydoc.info/gems/rubocop/RuboCop/Cop/Layout/EmptyLinesAroundClassBody
“`

Rubocopでテストを実行するにはターミナルで
“`
bundle exec rubocop
“`
を実行する。

rubocopは間違いを自動的に修正してくれるコマンドがある。
“`
bundle exec rubocop –auto-correct
“`
これでほとんどの間違いは解消してくれる。

上のコマンドでも解消してくれない例もある。例えばif文などである。
その場合は手動で修正する必要がある。

accepts_nested_attributes_for で更新するモデルに対するバリデーションエラー（ActiveModel::NestedError）を外部からセットする方法

## はじめに

Railsでは `accepts_nested_attributes_for` を使って、`has_many`関連する子レコードを1つのフォームで更新することができます。
イメージとしてはこんな感じです。


上の画面では以下のようなBookモデルと、それに関連するAuthorモデルを更新するフォームです。
（本と著者はmany-to-many関連だろう、というツッコミが来そうですが、説明のために単純化してるので気にしないでください）

“`ruby
class Book < ApplicationRecord has_many :authors, dependent: :destroy accepts_nested_attributes_for :authors, allow_destroy: true

Rails Reactのサーバー起動時のデフォルトポート番号変更（Docker不使用）

# 前提
`rails s`
`npm start`
実行時のポート番号を変えたい
※今回は特にDocker使用していません

# Rails側
“`puma.rb
– port ENV.fetch(‘PORT’) { 3000 }
+ port ENV.fetch(‘PORT’) { 4000 }
“`

# React側
PORT=希望の番号　を追記
“`package.json
“scripts”: {
– “start”: “react-scripts start”,
+ “start”: “PORT=4001 react-scripts start”,
“build”: “react-scripts build”,
…
},
“`

Ruby on Railsをお勧めしたい理由

# 初めに
今僕はRailsのエンジニアとして生活しています
どんな感じかというと
Webアプリケーションを作って広告をつけて稼ぐ
といった具合
ちなみに今は独立というのか会社には所属しておらず家でやってます
ブログ等でこういう風に稼ぐ人もいるのですが僕は残念なことに文才がなくすぐにネタ切れになるタイプなのでアプリケーション開発をしようと思いました
その際に選んだのがRailsです

## Railsってなに？
プログラミング言語の1つという認識で大丈夫です
厳密には少々違いますがややこしくなるので割愛しますが
国産プログラミング言語であるRubyのパワーアップアイテムと思ってください
ものすごくざっくり言うと
>Webアプリケーションを簡単に作ってしまおうぜ！

って能力に長けています
Webアプリケーションとは？ってなる方も多いと思いますので例を挙げてみましょう
・Youtube
・ツイッター
・掲示板
・ククパッド
こう言うものです
ホームページではなくWebで何かしらできるものって認識でOK

# Railsって何が便利なの？
上記で僕は
>Webアプリを簡単に作ってしまおうぜ

【Rails】ブラウザのタブにアイコン(favicon)を設定する

# はじめに
ポートフォリオを作成しましたが、ブラウザのタブのアイコンがないのは寂しい！！と思い、
設定方法を調べたところ、favicon(ファビコン)を設定すれば実装できることが分かり、簡単に設定できました。
今回下の画像の赤枠のアイコンを変更していきます。

# 環境
– Ruby 2.6.3
– Rails 6.1.5.1

# タブのアイコン用の画像を用意する
favicon用に設定するファイルを[**こちら**](https://ao-system.net/favicon/ “ファビコン作成”)で変換し作成してください。無料で半透過マルチアイコンを作成できます。
ファイルを指定し、作成ボタンを押した後、ファイルが作成されますので、ダウンロードボタンを押します。
ダウンロードしたfavicon.icoを、railsのimageフォルダに保存します。
自分は16×16用画像ファイルで変換し作成しましたが問題無く反映されました。

# コードを

Topページを絞り込みたい！

# 【Rails】Topページを絞り込むページ作成！
## はじめに
本記事ではTOPページで検索したものを他ページで表示するコードを記載しています

## 前提

– 記事のテーブルはtweets
– tweetsで検索する文字列はbody
– indexページ(index.html.erb)に検索フォーム、searchページ(search.html.erb)検索結果を表示
# 手順
## search.html.erb作成
↑の名前のファイルを自分のテーブル名のViewファイルの中に作成しましょう！
その中に一度自分のindexページ（index.html.erb）をコピペして入れておきましょう！
何かindexページと違う文字など入れておくとわかりやすいです?

## ルーティング設定
“`ruby:config/routes.rb
get ‘search’ => ‘tweets#search’
“`
## 検索フォーム作成
“`erb:index.html.erb

<%= form_with url: sea

Ruby on railsにおけるActiveHash導入

## 環境
Ruby 2.6.5
Rails 6.0.0

## ActiveHashとは
カテゴリー一覧や都道府県など、基本的に変更されることがなく、データベースに保存する必要がないデータを取り扱う場合に、当該データをモデルファイル内に直接記述することで、データベースへ保存せずに取り扱うことができるGemのこと。

## Gemfileの編集
“`ruby:Gemfile
gem ‘active_hash’
“`
## bundle install
“`terminal:ターミナル
% bundle install
“`
## ファイルを作成する（今回は例としてCategoryクラス）
`app/models`下にcategory.rbを作成する。
## `app/models/category.rb`の編集
ActiveHash::Baseを継承する。AcitveHash::Baseは、クラス内でActiveHashを用いる際に必要となるクラス。これにより、ActiveRecordと同じようなメソッドを使用できるようになる。
“`ruby:app/models/categ

【HTML/CSS/レスポンシブ】PCとモバイルで表示画像を変える方法

## 初めに

こちらはHTMLとCSSのみで、PCとモバイルで表示画像を変える方法（画像）をまとめた記事です。
Railsで実装した方法も併せてご紹介しています。

## 手順

#### ①HTMLにviewportを読み込ませる

レスポンシブに対応させるため、HTMLのhead内にviewportを読み込ませます。

“`sample.html






“`

#### ②HTMLに表示させたい画像を記述

PC、モバイルで表示させたい画像２枚にそれぞれ違う名前のクラス名を追加します。
例　
・class=”pc”
・class=”mobile”

“`sample.html

【RSpec / Rails】画像投稿機能の結合テストコード

## 初めに

前回の結合テストコードの書き方（新規登録に関するテストコード）に引き続き
今回は画像投稿機能の結合テストコードを実装しました。
次の機会に行う際、抜け漏れがないよう記録していきたいと思います。

## 結合テストコードを書く手順

### ①結合テストコードを書くためのファイルを生成する

今回は画像投稿機能に関する結合テストコードを書いていきます。

“`
% rails g rspec:system items
“`
生成されたファイル
spec/system/items_spec.rb

—
以下のようなファイル構成になっていれば成功です。
“`
?　　spec
　　∟　　　　? factories
　　　　　　　　? models
　　　　　　　　? requests
　　　　　　　　 ? system
　　　　　　　　　　∟ 　users_spec.rb ←前回生成したファイル
　　　　　　　　

Railsのenumをstringで使う方法

# 新人ちゃんにRailsのenumをstringで扱う方法を教えた話

## 三行で

この前新人研修でRailsのenumを教えました。その時にデータ型をstringで使う方法を伝えたのでその時の話
「めんどくさいからこの記事見といて」としようとしたら意外とない。せっかくなら書こうかと。
integerよりも柔軟性高いのでひとつの小技としてどうぞ

## そもそもenumとは

名前を整数に割り当てるのに使われるデータ型のこと。整数に対して名前を割り当てるので、整数を直接扱うよりも人間にとって読みやすく、メンテナンス性が上がる。
データベースに保存されるときは名前ではなく、対応した整数が保存されます。
名前の通り数字を扱うことを前提としたデータ型です。

## 基本的な書き方

まず、enum用のカラムを追加します。
詳しい書き方とか、注意点はここでは解説しないです。

“`ruby
def change
add_column :models, :status, :integer, default: 0
end
“`

該当モデルに enumを宣言する

rack gemの脆弱性CVE-2022-30122, CVE-2022-30123について

gem [rack](https://github.com/rack/rack)の脆弱性[CVE-2022-30122](https://discuss.rubyonrails.org/t/cve-2022-30122-denial-of-service-vulnerability-in-rack-multipart-parsing/80729), [CVE-2022-30123](https://discuss.rubyonrails.org/t/cve-2022-30123-possible-shell-escape-sequence-injection-vulnerability-in-rack/80728)について

# CVE-2022-30122
## アナウンス

https://discuss.rubyonrails.org/t/cve-2022-30122-denial-of-service-vulnerability-in-rack-multipart-parsing/80729

## 概要

以下の処理を使用している場合にrackでMIMEのパースを行う際に

railsにおけるmodel間の関連

ruby on railsにてmodel間の関連(one2manyとか)を定義する方法を調べたときに少してこづったので、どうやったのかを記しておこうと思います。

## やりたかったこと
下記の2つようなテーブルを作成したいです
**Userテーブル**
| PK | FK | カラム名 | 項目名|
| ——– | ——– | ——– | ——– |
| ◯ | | id. |ユーザ番号|
| | | email | メールアドレス|
| | |password_digest| パスワード|
| | |display_name| 表示名|

**Task テーブル**
| PK | FK | カラム名 | 項目名|
| ——– | ——– | ——– | ——– |
| ◯ | | id. |タスク番号|
| | | name | タスク名|
| | ◯ |user_id| 作成ユーザー|
| | ◯ |asignee_i

[Rails] コードに全角スペースが混ざるとCSSレイアウトに影響が出る事がある

初投稿です。
プログラミングを初めて3ヶ月。
備忘録としてつまづいたところを記載し、アウトプットツールとして活用していきます。

# なんかレイアウトがちょこちょこズレてる
BootstrapとCSSを使ってレイアウト調整を行っていたが
コンテンツの配列がどう調整しても合わない、、、
（ここでは一旦画像は添付しませんが、、、）

# 検証ツールを開いて確認
原因わからず、、、

# メンターに聞く
コード的には問題ない。
残るは全角スペースが悪さしているかもとのこと。
command + Fで全角スペースを検索すると、、、、

なんとか数カ所出てきた！！

# 半角に修正
直った！！！

プログラミングにおいて全角は敵すぎる、、、、
そんな事を痛感した瞬間でした。

スペースは気づかない事多いけど
ちょこちょこ確認していこうと思います！！

?【初学者用】RSpecでテストコードを書こう！【概念・準備】

# はじめに
オリアプ作成も遂に終盤に差し掛かり、今日からテストコードを書くフェーズに突入します。
テストコードを書く前に今まで学んだテストコードの知識を今日から少しずつアウトプットしていきたいと思います！
※プログラミング初学者の私がアウトプットとこれから学習される皆様の参考になればと思い投稿しています。また、マークダウン記法も不慣れな初学者ですので、間違い等があれば指摘いただけると幸いです。

## この記事を見てできるようになること
Ruby on Railsのgemであるrspec-railsを使用して、テストコードを実装できるようになります！

## Rspecとは？
Ruby on Railsのアプリケーションのテストコードを便利に実装できるGemです。

## テストコードを書く意義
テストコードとはアプリケーション内に記述する、そのアプリケーションの挙動を確認するコードのことを言います。
なぜ、このコードを書かなければならないのでしょうか？メリット・デメリットに分けて考えてみましょう！
**テストコードを書くメリット**
①クオリティの担保
ブラウザでアプリケーション

経験ゼロの新人が1ヶ月でウェブアプリを作らされるヤバい研修 part 2

Part 1はこちら↓

[https://qiita.com/Terao-Takumi/items/d2b02a4cf0470675107e](https://qiita.com/Terao-Takumi/items/d2b02a4cf0470675107e)

新人研修の初日2日間で行われた「UX/UI研修」が終了し、いよいよ実際の開発に入っていくことになった。先輩に聞きながら、全体の流れは以下のように決まった。

1)アプリの仕様を細かく詰める(いつお茶会を開催するの? 人数は? どうやってグループを分ける?など)

2)UIはマネージャーがadobeのXDで作成してくれることに

3)仕様が大まかに決まったら、その仕様を満たすことのできるデータベースの設計をする

4)DB作成と最初の環境構築を先輩に助けてもらいながらやって、その後コードをガリガリ書いていく

5)機能ができたら、テスト、テスト、テスト….

6)納期は絶対に変えない

UX/UI研修が終わり仕様を詰める工程に入るにあたって…これは研修では指示されてはいなかったけれど、改めて「どんなアプリにしたいのか?

Rails × chart.js でサウナ活動(投稿)データに連動するラベル付きの円グラフを作ってみた。

# 0. はじめに

こんにちは、[まつけん](https://twitter.com/matsuken_web314)です。
[サウナ記録を管理するアプリ](https://totonoi.org/)(転職活動用のポートフォリオ)に組み込んだ
**投稿に連動する円グラフ**をどうやって実装したのかを解説する記事です。(下の画像参照)


↓ポートフォリオの解説記事です↓

https://qiita.com/matsuken314/items/2ae660c7635cca726283

## この記事のゴール（とりあえず）

– [chart.js](https://www.chartjs.org/docs/latest/)の円グラフがどういう風にWebアプリに組み込まれるのか分かる
– gemの

git clone

sasakiyuuya@mbp ~ % cd .ssh
sasakiyuuya@mbp .ssh % chmod 400 jojotech.pem
sasakiyuuya@mbp .ssh % ssh -i jojotech.pem ec2-user@54.249.7.206
[ec2-user@ip-10-0-8-195 ~]$ cd /var
[ec2-user@ip-10-0-8-195 var]$ sudo chmod 755 www
[ec2-user@ip-10-0-8-195 var]$ cd www/
[ec2-user@ip-10-0-8-195 www]$ sudo git clone https://github.com/jojo232/cloud9.git
[ec2-user@ip-10-0-8-195 cloud9]$ gem install bundler
[ec2-user@ip-10-0-8-195 ~]$ gem install rails -v 6.1.4
[ec2-user@ip-10-0-8-195 ~]$ cd /var/www/cloud9

topic branchで変更した内容を全部なかったことにしてくれ〜〜〜！！！

# トピックブランチをマージしてないのにmain(master)に変更内容がmergeされてる…?

勉強不足で恐縮ですが、 topic branchをマージせず、checkoutしてmain branchに戻すだけで変更内容を消せると思っていた。
実際やってみたら、コンフリクトせず、topicで変更した内容が反映されているように見えた。

そこで、以下変更内容を完全に消すようにしたい。
“`
$ git status
On branch topic-branch
Changes not staged for commit:
(use “git add/rm …” to update what will be committed)
(use “git restore …” to discard changes in working directory)
modified: README.md
deleted: app/assets/stylesheets/users.scss
mo

【Rails/System Spec】サポートモジュールで結合テストコードの記述を短くする（ログイン動作をまとめる）

## 初めに

今回は結合テストコードの記述を短く、可視性を高めるために
繰り返し使用するログイン動作をまとめました。

## サポートモジュールとは？

RSpecに用意されている、メソッド等をまとめる機能のことです。
「ログインしたら投稿ページに遷移できる」
「ログインしたら編集ページに遷移できる」
「ログインしたら削除ページに遷移できる」等
複数出てくる同じ処理をまとめることができます。

## 使い方

#### ①ディレクトリとファイルを作成

specディレクトリ配下に
supportディレクトリを作成し
その配下にsign_in_support.rbを作成します。
（ファイル名はご自身がわかりやすいものでOKです！
今回はログインのため「sign_in_support」という名前にしています）

“`
?　spec
　　?　factories
　　?　models
　　 ?　requests
　　?　support　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　こちらのディレクトリを作成
∟ sign_in_support.rb　　　　　　こちら