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

Rails✖︎Webpacker

Webpackerとは、webpackをRailsで使用するためのgemパッケージ。

webpackを使用すれば、Javascriptなどの静的アセット(リクエスト毎に生成しないもの)の管理&packにまとめる等が出来る。

※静的アセットを利用することで、アプリケーションの高速化につながる。

## WebpackerをRailsで使うには
1. YarnとNode.jsを用意。
2. Webpackerをインストール。

### Webpackerインストール後
Webpackerのインストール後は、app/javascript/packs以下のJavascriptファイルがコンパイルされてpackにまとめられるようになる。

packにまとめられたコードは、以下のようなコードで呼び出すことが出来る。

“`
<%= javascript_pack_tag 'hello_vue' %>
“`
※自分の場合は、packsディレクトリにhello_vue.jsというファイルが存在するので、’hello_vue’を指定している。

### コンパイルする方法
“`
rails a

Rails6でorder(:id)ではなく任意のID順で並び替えたい

## 駆け出しにもわかる簡単な並び替え
はじめまして、1年を経過した駆け出しRailsエンジニアです。
`Model.where()` で取得したリレーションを任意のID順で並び替えたいということがありました。
この記事は**Rails6**向けとなっており、**Rails7**の方は最後の項目だけ読んで頂ければOKです:ok_hand:

それでは早速、下記のような `animals` テーブルを例として進めて行きます。

ID|名前(必要な情報)|年齢(不要な情報)
—|—|—
1|taro|2
2|hanako|7
3|jiro|4

## まずはID順に並べる場合

“`rb
animal_ids = [1, 3, 2]
Animal.where(id: animal_ids).order(:id).pluck(:name)
# SELECT “animals”.”name” FROM “animals” WHERE “animals”.”id” IN ($1, $2, $3) ORDER BY “animals”.”id” ASC
# => [“taro”,

【Ruby, Ruby on Rails】Active Storageで１つの投稿に複数の画像をアップする

## 初めに
プログラミングスクールでは、Active Storageを使って１つの投稿に１枚の写真を保存する方法を学びました。今回、ポートフォリオ制作時に複数枚保存できるといいな、と思って色々調べて実装したのでここにまとめておきます。

## 完成形
– 新規投稿ボタンを押下すると、フォイル選択のフォルダが出てくる。
– Shitキーを押しながら複数枚画像を選択し、アップロードボタンを押下すると、複数枚の画像が投稿フォームに反映される。
– 投稿ボタンを押下すると、上記で詮索した画像とともに投稿される。

## 実装
それでは、実装していきます！
（画像の単数枚投稿が既に頭に入っているという前提で実装方法を説明していきます）

### 下準備(チェックリスト)
##### ✅　以下のgemをbundle install してますか？
“`ruby
gem “image_processing”, “>= 1.2”
“`
##### ✅　投稿を保存するモデル、テーブル、カラムを作っていますか？
※モデル、テーブル、カラムを作成するときに、画像を保存するためのカラムは必要ありません。

メッセージ系のSNSを作ろうとしたのに掲示板になっていない？

# SNSと掲示板の違い
>エンジニアなら誰しも一回はLINEのようなSNSアプリを作りたいと思ったことはあるはずです

**SNSもどきの例**


問題点
–
– リアルタイムで更新されていないためコミュニケーションが図れない!!!

> Twitterのタイムラインで手動で更新する形、掲示板でスーパーリロードをかけて更新する場合とは大きく性質が異なる。画面開いたままのユーザーもいるため画面遷移時にAPIを叩いていたのではまともな会話にならない。

# 今回使うもの
[フロント用のテンプレート](https://github.com/kawabata324/template-react-typescript-vite)
React Typescript
[APIのテンプ

【Rails】好きなログファイルを作って出力

# 環境
– Ruby 2.7.6
– Rails 5.2.8

# コード
“`ruby
@log = Logger.new(‘log/check_site.log’)

msg = “AAAAAAAAAAAAA”

@log.info(msg)
“`

# まとめ
設定ファイル触るとかありますけど、その場その場でちょっと違うログファイルに出力したかったりするので、この方法が良いと思います。

カンタン便利。

ログレベルをdebugやらinfoやらあるのは、他記事を参考にして下さい。

これとか↓
https://qiita.com/sobameshi0901/items/b963e7046e2ae8b8e813

終わり

DockerでRails環境(Nginx+Unicorn+MySQL)を構築してFargateへデプロイするまで〜開発環境編〜

今回、個人的な学習として、ローカル環境で動かすRails環境(Nginx+Unicorn+MySQL)をDockerで構築しましたので、備忘録＆学習のアウトプットとしてこの記事を作成しました。

最終的にはECS(Fargate)を本番環境としてデプロイすることをゴールとしており、
そちらの記事については現在作成中です。

### 参考
Dockerを0から学習するにあたり、以下のUdemy講座とnoteを参考にさせていただきました。
初学者の方はオススメです！

https://www.udemy.com/share/103aTR3@t5_U-SJSBmmD0hSaLc5nIWG4VGPev97Xt0M4Gzifu52xEJQfXDiPqrbbnyXDSpGF/

https://note.com/ho_m_ie/n/n9f0a6756446a

初学者で知らない人はいないであろう神記事。アプリ作成全体的に参考にさせていただきました。本番環境編のcredentialsの部分もお世話になっています。
[【2021年リライト版】 世界一丁寧なAWS解説。EC2を利用して、Railsアプ

Ruby on Rails herokuへのデプロイでのエラー

こんにちは、文系大学生のプログラミング初心者です。
今回、Ruby on railsのチュートリアルを行なっている時に、予期せぬエラーが出たので、エラーの解決方法についてまとめてみました。

具体的にエラーが出たのは、herokuにデプロイを行う時です。
エラーの内容を辿ってみると、、
まずは、
~~~ruby:terminal
remote: !
remote: ! Precompiling assets failed.
remote: !
~~~

こちらを発見、そしてさらに辿ってみると、

~~~ruby:terminal
remote: —–> Installing node-v16.13.1-linux-x64
remote: —–> Installing yarn-v1.22.17
remote: —–> Detecting rake tasks
remote: —–> Preparing app for Rails asset pipeline
remote: Rails couldn’t infer whether

Rubyのデバッグを楽にする

### はじめに
プログラムをデバッグするときはデバッガーを使ったり二分探索でコメントアウトしてみたり、ログを出してみたりすると思います。
私はログを出してデバッグするのをよくやるのですが、ただ単に

“`ruby
p “value => #{value}”
“`
とか
“`ruby
p value
“`

とかでデバッグしようとしたとき、小さいスクリプトならそれでも問題ないですが、大きいプログラムでやると他にもたくさんログが出ていて出力したものを見失いますよね。

なので自分はよく以下のように書いていました。
“`ruby
# こんなのとか
p ‘++++++++++++++’
p ‘value’
P ‘++++++++++++++’
# こんな感じ
p ‘— (~_~) —‘
p ‘value’
p ‘— (~_~) —‘
“`

他の箇所が絶対に出さないようなものを出していました。顔文字は結構おすすめです。デバッグ中のすさんだ心がかわいい顔文字で癒される。
でもこれ毎回毎回やるのは面倒だなと思いました。
最近業務でフロントエンドをよくやっていたのもあっ

ざっくりわかる Sprocketsとは

# 何を実現してくれるか

sprocketsはapp/assets 配下にある jsファイルとcssファイルをそれぞれ 1 つのファイルにまとめる。JavaScript と CSS をまとめる理由は、Rails アプリケーションにブラウザでアクセスした時にサーバへのアクセス回数を減らすため。

# 関連する用語

### アセットパイプライン

Sprocketsがcssファイルとjavascriptファイルをまとめるまでの工程はアセットパイプラインと呼ばれている。

### コンパイル

特定のプログラミング言語を用いて記述されたコンピュータープログラムを他の言語 を用いて記述された同じプログラムに形を変えることである。Sprocketsではアセットパイプラインの処理を実行することをコンパイルという。

### ディレクティブ

ディレクティブとはSprocketsで外部ファイルを読み込むための記述のことである。
ここでいう外部ファイルとはjsの場合`app/assets/javascripts`配下、cssの場合`app/assets/stylesheets`配下にあるファイルの

railsのインストール

railsをインストールしようとした際に、要所要所でどん詰まりしました。
自分の覚書のためにも初投稿してみます。

主に以下の手順で詰まりました。

・command line toolsのインストール
・home brewのインストールのやり方
・railsインストールできたはずがコマンド実行すると「sudo gem install」しろの無限ループ

手順を整理しておこうと思います。

1.「Command Line Tools」のインストール

“`
xcode-select –install
“`
これでできるそうなのですが、
“`
$ xcode-select –install
xcode-select: error: command line tools are already installed, use “Software Update” to install updates
“`
と表示され、インストールできていない様子。

解決法：古いものを削除して再度実行しました
“`
sudo rm -rf /Library/Developer/CommandLi

Windows10でRails開発環境を準備

GitHub上にすでに存在するRailsアプリ git@github.com:ichylinux/bizquest.git を事例として、Windows10上にRails開発環境を準備する手順を記録しておく。

## VisualStudioCode

#### インストール

https://code.visualstudio.com/ からダウンロードする。

クリックしてインストール。

#### 日本語化

メニューの「View] => [Extensions] を開き、Japanese で検索する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206475/efbcffb4-2d57-94a9-4e15-367ce9b59195.png

ElasticBeanstalkで動かしているRailsプロジェクトにpuma_worker_killerを導入する

## 起きた問題
ElasticBeanstalkで動かしているRailsプロジェクトのメモリ使用率が高止まりしていました。
プロセスを見てみるとPumaが主な要因でした。
[](https://gyazo.com/1b8f9882a59b3dace952534fe78ea802)

メモリを解放するために、インスタンスの自動入れ替えも検討しましたが、ElasticIPの自動付与問題の課題があり、今回は`puma_worker_killer`というgemを使用してみることにしました。

puma_worker_killerの公式ページ
https://github.com/zombocom/puma_worker_killer

## 前提
– ElasticBeanstalk環境 (Ruby 2.7 running on 64bit Amazon Linux 2/3.4.7)
– EC2インスタンス数:1台 (ElasticIP付き

エンジニア向けチートシート集

## はじめに

今回はエンジニア向けのチートシート集のまとめを紹介していきます。

チートシートを利用することで

– 作業効率が上がる
– 概要が掴みやすい
– 学習にもなる

といった恩恵が得られます。

ただし前提として毎回コードを書くたびに「**チートシート集でカンニングすればええや**」と思うのではなく「**最初はチートシートでカンニングしつつ徐々に体で覚えていく**」ことを意識して使うことが大切です。

最終的にはチートシートは見ずに「**自分の使える技術**」として定着させるための道具だと思って使ってください。

## この記事の対象者

– エンジニア初心者~中級者
– 作業効率を上げたい人
– コードを書くテクニックを知りたい人

## [VsCodeチートシート](https://camo.qiitausercontent.com/8e7b0b88be526969f856b75f97e05b23516f0d72/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732

Rails RspecのテストをShoulda Matchersで簡単に書く

# はじめに
現場ではRspecを使用してテストコードを書いています。
modelのテストを行うにあたって先輩に要件を確認していたところ、「Shoulda Matchersを使うと簡単だよ。」と教えてもらいました。
そもそもこれなんて読むんだ？そして何が美味しいんだ？
と思いながら調べてみましたので備忘録として残します。
誤り、おかしな点はぜひご指摘いただければと思います。
# 環境(私のPC)
Ruby 2.7.1
Rails 6.0.5

# Shoulda Matchersとは
Shoulda Matchersとは長くて複雑かつつまずきやすいテストコードをワンライナーで記述することができるgemです。ワンライナーなので一行ということです。
え？そんなことができるの？ありえないでしょう。
半信半疑の思いを払拭すべく実際にやってみることにします。
（補足）
調べてみると「シュルダ　マッチャーズ」と読むみたいですね。
スウェーデン語のようで日本語に訳すと「一致すべきです」となります。
# 前提条件
※すでにRspecがインストールされているものとします。
### モデルの準備
次のよ

【Ruby on Rails】gsubで特定の文字列を挟んでhtmlタグを表示させる方法

## 僕がやろうとしていたこと
実務である特定の文字列が存在した場合に、その文字の色を赤くして表示ということをしたくなった。

その時に使用したので gsubというインスタンスメソッドで実現可能ということを知った。
このgsubを使用して、特定の文字が存在した場合にその文字を“タグを使って囲みstyleを適用する“ことによって実現することができた。

## どうやったか(コード例)

“` ruby
gorira = “僕は大人になったらゴリラになりたい”
gorira.gsub(/ゴリラ/, ‘\&‘)
# => “僕は大人になったらゴリラになりたい”
“`
こんな感じでやりたいことは一応実現することができた。

AWS SDK Rubyでスタブを行う

## はじめに
AWS SDKを使用したコードに対してテストを記述したい場合、AWSのSDKで用意されているClientStubsを使用して、スタブを行うことが可能です。
ドキュメント自体は公式が出しているものがありますが、この例だけではやりたいこと（`Aws::S3::Client`以外のインスタンスを使うケース）が実現できなかったので、今回調べたことについてまとめました。

## 環境
– Ruby: 2.7.1
– aws-sdk: 3.1.0
– aws-s3-sdk: 1.114.0

## 公式ドキュメントから
https://docs.aws.amazon.com/sdk-for-ruby/v3/api/Aws/ClientStubs.html

このドキュメントにあるように`Aws::ClientStubs`というモジュールが、各サービスに対応したClientクラスにincludeされています。

今回はS3を使って、その例を紹介します。

このモジュールに定義されているのは`api_requests`, `stub_data`,`stub_respo

has_oneで追加される関連メソッド

## はじめに
ポートフォリオ作成中、has_one(1対1)の関連付けが必要になりました。
公式ドキュメントなど読んで、「これは頻繁に使いそうだな」と思ったメソッドを紹介します。

## サンプルモデル
ユーザー(User)がプロフィール(Profile)を作成できると考えます。

“`rb:app/models/user.rb
class User < ApplicationRecord has_one :profile end ``` ```rb:app/models/profile.rb class Profile < ApplicationRecord belongs_to :user end ``` ## 関連メソッド ```rb #関連付けされたオブジェクトを返す @user.profile #関連付けされた新しいオブジェクトを返す @user.build_profile(self_introduction: "I am a beginner") #関連付けされたオブジェクトを作成する @user.create_profile(self_introdu

レビュー指摘メモ

## △△△画面の時にだけ表示する方法(コントローラーを画面名毎に用意して表示させる)

“`:HTML
<% if controller?name == "△△△" %>

表示したい内容

<% end %>
“`

## 更新時、画面の入力をクリアする

“`:コントローラー

if @sample.save

#　PARAMSの中身を空に
params[:hoge] = nil

　　　＃　変数を空にする
@sample = Sample.new
end

“`

## 印刷ボタンを押下時にはDB登録をしない。それ以外は登録する

“`:コントローラー
if @params[:commit] == ” 印刷 ”
put_log(rec, ”)
else
# 登録処理
end

“`

## 0か確認する場合、blankを使う

“`:

# 悪い例

AWS cloud9でサーバー起動時に”Your version of SQLite (3.7.17) is too old. Active Record supports SQLite >= 3.8.”というエラーで困った

## エラー内容
rails new で新しくアプリを作成し、ブラウザのホストを許可した後、rails sでサーバーを立ち上げた時に以下のエラーが発生！

## 解消方法
こちらの記事に助けていただきました?
https://mebee.info/2021/01/13/post-27973/　
https://qiita.com/nosniklim/items/58154b3ba6ab9a26230c

### エラー文からの考察
“`
Your version of SQLite (3.7.17) is too old. Active Record supports SQLite >= 3.8.
“`
SQLiteのバージョンが古い！と怒っているようです。
どのようにバージョンを更新すればい

【rails】railsアプリケーションにLottieのアニメーションを導入する方法

## この記事でわかること
railsアプリケーションに既存のlottieアニメーションを導入する方法
※本記事ではjson形式のアニメーションファイルの作成方法については記載しておりません。

## Lottieとは
[Lottie](https://airbnb.design/lottie/)とは、Airbnbが開発したアニメーションライブラリであり、これを利用することで
ウェブサイトやアプリ上でアニメーションの実装が手軽にできます。
※以下はスクショですが、モダンなデザインでぬるぬる動くアニメーションが豊富に用意されています。

実際に使ってみたところ、SVGのアニメーションが爆速で実装でき、
ちょっと難しそうだと思っていたアニメーション導入がかなり身近な手段に感じられました！

## 実装方法
Lottie