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

【分野別】VSCodeのおすすめ拡張機能まとめ

## はじめに

今回はVSCodeでおすすめの拡張機能を分野別に紹介していきます。

拡張機能は下記の分野に分けて紹介していきます。

– VSCodeを使う全員向け
– Web制作関連
– HTML&CSS関連
– WordPress関連
– フロント向け
– JavaScript
– React
– Vue
– サーバーサイド向け
– PHP
– Ruby
– その他

拡張機能を利用することで開発の生産性を上げることができるので、ぜひ参考にしていただければなと思います。

## この記事の対象者

– プログラミング初心者の人
– 分野別におすすめの拡張機能を知りたい人
– 開発の生産性をより上げたい人

## 参考資料

https://pengi-n.co.jp/blog/vscode-extensions/

https://sbucks-blog.com/program/tool/vscode/expansion01/

【Web制作向け】VSCodeおすすめプラグイン・拡張機能と設定一覧【超快適】

## VSCodeを使う人全員向

【Rails6系、ActionCable、デバック】チャットappでチャットが複数送信されてしまう不具合の解消

# 【 前提 】
ActionCableを使用したチャットapp
チャットルームは複数作成可能
この記事は日本酒をガバガバ飲みながら書いているため後々修正が入る場合がございます

## 開発環境
Rails:　6.0.3
Ruby:　3.0.1
DB:　postgresql, redis
PC:　Mackbook Air

## デバック前コード
“`ruby:channels/room_channel.js
import consumer from “./consumer”

document.addEventListener(‘turbolinks:load’, () => {
console.log(“addEventListener turbolinks:load”)
window.chatContainer = document.getElementById(‘chats’)

const element = document.getElementById(‘room-id’);
const room_id = element.getAttribute(‘d

【Ruby on Rails】GUI でのアップロードを介さず CarrierWave にファイルを保存する方法

Rails アプリで画像などのファイルを保存したいと思った際、有力な候補として上がる gem としては [CarrierWave](https://github.com/carrierwaveuploader/carrierwave) などが挙げられるでしょう。

で、多くの記事においては

“`ruby:./app/uploaders/file_uploader.rb
class FileUploader < CarrierWave::Uploader::Base storage :file end ``` ```ruby:./app/models/post.rb class Post < ApplicationRecord mount_uploader :file, FileUploader end ``` ```erb:./app/views/posts/_form.html.erb <%= f.file_field :file %>
“`

“`ruby:./app/controllers/posts_controller.rb
class PostsCont

Rubyのクラスについて

Rubyのクラスについて自分の備忘録としてまとめます。

# クラスとは
クラスはデータの入れ物(データそのものではない)とその処理をまとめたものです。

# クラスの使用例
例えば、商品の価格と原価のデータがあり、利益を計算したいと思います。

## クラスを使わない場合

クラスを使わない場合、次のように計算することができます。

**例1**
“`ruby:shohin_cal1.rb
ringo_name = “りんご”
ringo_genka = 100
ringo_kakak = 200
puts ringo_kakak – ringo_genka #=>100
#putsは引数(文字列)を出力するメソッド。

ichigo_name = “いちご”
ichigo_genka = 200
ichigo_kakak = 400
puts ichigo_kakak – ichigo_genka #=>200
“`
例1では、商品の数が多くなると記載する量が多くなってしまいます。また、ringoと記載するべき場所にichigoと記載してしまうなどの間違いをする可能性があ

SidekiqのActiveRecord::ConnectionTimeoutErrorを解決した話

# 最初から結論
sidekiqの実行中
“`
ActiveRecord::ConnectionTimeoutError: could not obtain a database connection within 5.000 seconds (waited 5.019 seconds)
“`
エラーが発生したのでrailsのdatabase.yamlのconnection poolを増やして解決しました。

# 何が起こったか
sidekiqが実行されているサーバーから急に1時間200件頻度で以下のエラーが発生しました。
“`
ActiveRecord::ConnectionTimeoutError: could not obtain a database connection within 5.000 seconds (waited 5.019 seconds)
“`
特に修正したことは無かった状態でアクセスが多かっただけを把握しました。

# 調査のスタート
Tracebackを確認すると
User.where(id: ids).order(name: :desc)
でs

Rails初級者が一ヶ月研修を受けて得た学びをまとめた

# 前書き
– RubyonRailsで開発している企業にサーバーサイドエンジニアとして転職し、一ヶ月間受けた研修で得た学びを雑に分類してまとめました。
– どの言語でもそうですが独学で初心者向け記事やチュートリアルを読み込むだけでは得られない内容が多くあったのでまとめてみた。これまでこういったまとめを作ったことがなく初めてです。
– 完全に自分のメモ書きですが、 **Railsやコーディングに初めて取り組む人にとっては役立つこともあるかと思いまとめています**

## 自分の経験とスキル
– 前職で一年間toB向けWebサービスのフロント＋バックエンド＋インフラ（ちょこっと）に携わっていた
– NuxtJs＋NodeJs、DBはCloudSQLとかとか。
– NodeJsで開発したAPIをコンテナ化してCloudRunにデプロイしたりなどの基本的なことはできる
– Railsは半年ほど前に初めて触った。ORM自体の経験もほとんどない
## 研修概要
– **事前にRailsで自分が開発した簡単なTodoアプリをレビューしてもらい、改善点・問題点を先輩がリストアップ**
– **各項目

【rails db:migrateに失敗】StandardError (An error has occurred, this and all later migrations canceled:PG::DuplicateTable: ERROR: relation “posts” already exists ):

# 事象

マイグレーションの移行のため、`rails db:migrate`を実行すると、以下のエラーが発生。
“`
StandardError (An error has occurred, this and all later migrations canceled:

PG::DuplicateTable: ERROR: relation “posts” already exists
):
“`
データベースに`posts`が既に存在しているというもの。
前回一度`rails db:migrate`をしたが、一旦全てのアプリを削除し、今回は再作成している状況であったため、残っていたと想定。

# 解決方法
まずは、現状を以下で確認。
“`
❯ rails db
“`
前回作成したデータベースの`posts`を削除するために以下を実行。
モードが切り替わり、`post_bootstrap_app_development=#`となるため、以下を`\d`を実行。
すると、以下のように、`posts`の存在を確認。
“`
List of

Rails初級者が一ヶ月研修を受けて得た学びをまとめた~Docker・ほか~

この記事は「[Rails初級者が一ヶ月研修を受けて得た学びをまとめた – Qiita](https://qiita.com/Nifu-Uchi/items/f676d9f082e8c02bd88d)」の環境構築とDockerとその他の項目を切り出した分割記事です。
概要などについては親記事を参照してください。

# 環境構築・その他

### CPUアーキテクチャにあったplatformの設定をする(M1対応)
– [Ruby BundlerでCPUアーキテクチャにあったgemをインストールする](https://zenn.dev/fuuukeee3/articles/df15e32cf3706407a0a6)
– 最終的にこれらのplatform対応を実施
“`Gemfile.lock
PLATFORMS
aarch64-linux ##Docker環境
arm64-darwin-21 ##M1 Mac
x86_64-linux ##intel mac
“`

## Docker
### DockerfileのCOPYは中間ファイルが増えるので出来るだけまとめる
“`D

Rails初級者が一ヶ月研修を受けて得た学びをまとめた~Rails~

この記事は「[Rails初級者が一ヶ月研修を受けて得た学びをまとめた – Qiita](https://qiita.com/Nifu-Uchi/items/f676d9f082e8c02bd88d)」のRailsに関する項目を切り出した分割記事です
概要などについては親記事を参照してください。

# Rubyの文法など基本的なこと
### 配列の種類
– `%i`：シンボル配列。メソッド名、変数名などの配列を作るときに

### Hashは省略記法が使える
– Ruby3.1から対応
– [Hashの値の省略記法 – NaCl非公式ブログ](https://nacl-ltd.github.io/2021/12/20/hash-value-omission.html)
– `{ x: x, y:y }` -> `{ x:, y: }`

## pp pp puts printの使い分け
– [【ruby】p pp puts print　違い。 – Qiita](https://qiita.com/nyaoo/items/f5d84581d3a301a9c22f)

### enumの挙動

Rails初級者が一ヶ月研修を受けて得た学びをまとめた~GithubActions・RSpec~

この記事は「[Rails初級者が一ヶ月研修を受けて得た学びをまとめた – Qiita](https://qiita.com/Nifu-Uchi/items/f676d9f082e8c02bd88d)」のうち分量が多くなりすぎたコード品質担保（LinterやRSpecなど）に関する項目を分割した記事です。
概要などについては親記事を参照してください。

# code-checkとGithubAction
– PR時にRSpectとともにLinter/Formatterが走るようにした
– 導入したものは以下
– rubocop
– erblint
– brakeman
– rspec

## GithubActions
– [こちらを参照](https://zenn.dev/link/comments/7ece3f5df6eac9)

## rubocop
### action-rubocopを使おう
– 指摘箇所があるとPRにコメントしてくれる
– [reviewdog/action-rubocop: Run rubocop with reviewdog ?](

【個人開発】少しでも昆虫に興味をもって食べてみたくなるような診断サービスを作った。

# 最初に
初めまして、エンジニアを目指して勉強中の樋口といいます！

いきなりですが、皆さんは昆虫食に対してどんなイメージを持っているでしょうか？
少しでも気になったことはありませんか？

昆虫食といってもどんな虫が食べれるんだろう？？
初めて食べてみるけど初心者向けの虫はいないかな～といった
疑問に思うことは多々あると思います。

そこで、昆虫食に対す疑問を解消するサービス　**InsectFood**　を作りました。

https://insect-food.jp/

# アプリの概要

昆虫を食べてみたい人が診断を行い、おすすめの昆虫をレコメンドするアプリになります。

# アプリの機能

**昆虫食診断**

診断が始まると5問昆虫に関する診断が始まります。
二社一択形式の診断機能で1点もしくは0点の得点計算を行っています。

[](https://gyazo.com/8fd79159f2f814968d84272e56d2

Railsでアプリを再作成した時のファイルを確認できない

# 事象
`rails g model`を実行すると、以下のエラーが発生。
“`
❯ rails g model Post title:string content:text
Running via Spring preloader in process 16060
invoke active_record
The name ‘Post’ is either already used in your application or reserved by Ruby on Rails. Please choose an alternative or use –skip-collision-check or –force to skip this check and run this generator again.
“`
既にPostモデルが作成されているというエラー。
ただし、vscodeやfinderで確認しても、Postモデルを確認できない。

# 解決方法
一度railsでアプリを作成して、削除後（ゴミ箱）に移動後、railsアプリを再作成していた。
今回のモ

【Rails初心者】モデル同士の関連付け(Association)まとめ

## _【Rails初心者】Associationまとめ_
Markdown記法の学習もかねて、理解が浅い部分を自分なりにまとめてみた…

## 目次
1. ___Associationとは？___
2. ___必要な追記処理___
3. ___具体例___
4. ___まとめ___
5. ___参考サイト___

## 1.Associationとは？
異なる 2 つのモデルの間に、1:N の関連性を持たせること

## 2.必要な追記
対象の _model_ へ以下を記載する必要がある
– `has_many`
– `has_many` に付随する `dependent: :destroy`
– `belongs_to`

## 3.具体例
例えば、Task管理を行うアプリがあるとする。
`user`と`task` の２つのモデルが 1:Nの関係の場合
それぞれのmodelに必要な要素を追加していく

~~~ruby:app/models/user.rb
class User < ApplicationRecord # Include default devise mo

Herokuをデプロイ(Rails mysql)

# 要約
herokuでデプロイする方法、その際に詰まったエラーを残していきます。

# 環境
* ruby 3.0.3
* rails 6.1.4
* heroku 7.60.2
* mysql 8.0.28

## 1. Herokuの初期設定
Herokuをbrewにインストールする
“` linux:terminal
% brew tap heroku/brew && brew install heroku
“`
インストールできたか確認する
“`
% heroku -v
heroku/7.60.2 darwin-x64 node-v14.19.0
“`
Herokuにログイン（サインインする）
“`
% heroku login
heroku: Press any key to open up the browser to login or q to exit:
# なんらかのキーを押すとHerokuのブラウザが開く、ｑはキャンセルされる
# ブラウザが開いて正常にログインされると
Logging in… done
Logged in as ~~~~
“`

RailsのStrongParametersについて 管理者権限を変更されないようにするため

## まずStrongParameterとは

StrongParametersとはMass Assignment機能を利用する際、起こり得る脆弱性へ対抗する手段の一つである。

## ではMass Assignmentとは

Mass Assignmentとはモデルの生成や更新の際に、Rubyのハッシュを使って一括で属性を設定できるとても便利な仕組みである。

以下はMass Assignmentを使用せずに個別に値を設定
“`ruby
irb(main):001:0> book = Book.last
irb(main):002:0> book.name = “キングダム”
irb(main):003:0> book.price = 1980
irb(main):004:0> book.save
“`

以下はMass Assignment機能を使用し、データを更新
“`ruby
irb(main):001:0> num = {name: “キングダム”, price: 2980}
irb(main):002:0> book = Book.last
irb(main):003

SortableJSをRailsで使用して看板ボードをDrag&Dropで動かしてみよう

## 執筆経緯
日本語のソースが少なく
以下の記事を参照してDrag&Dropを学びましたので感謝の気持ちを込めて翻訳致します。

>[Tutorial: build a drag-n-drop kanban board on Rails with SortableJS](https://medium.com/le-wagon-tokyo/tutorial-build-a-drag-n-drop-kanban-board-on-rails-with-sortablejs-c6affa5642cf)

## 再現した環境
MacBook Air (M1, 2020)
Rails 6.1.6.1
ruby 3.0.4p208
yarn 1.22.19

※チュートリアル原文ままでは、私の環境で再現できなかったので
私の環境で再現できたコードに修正しております。

## Let’s チュートリアル
### Setup
“`:ターミナル
rails new \
–database postgresql \
-m https://raw.githubusercontent.com/l

Railsアプリにおけるfaviconの設定方法

## 本記事の対象者
– ファビコンって何？という方
– Railsアプリにファビコンを設定したい方

## favicon(ファビコン)とは？
こちらの画像で青い丸で囲ったところのマークのことをファビコンといいます。
あらゆるWEBサイトにアクセスしてみると、サイトごとにそれぞれのファビコンが設定してあると思います。
ブランディング的観点、信頼性的観点などから設定をしておいた方が良いとされております。

## faviconの設定方法
1. ファビコンとして設定したいロゴを用意して、下記フォルダに格納する。
　app/assets/images
1. app/views/layouts/application.html.erbのタグ内に下記を追記する。
“`
<%= favicon_link_tag('FILE_NAME') %>
“

returnはつけるの無粋すぎる

こちらはプログラマーなりたてのへっぽこパンピーが、自分の自分による自分のための忘備録として書いてるので、間違いもがあるかもですがあしからず！

# Rubyは基本的に関数内でreturenを記述する必要がない
そもそも、関数内でreturnが必要ないってのは、僕も知ってたんですよ。

“`Ruby
#これはたとえ
def addition(x)
x + 1
end
“`
でもかたかたコードを書いた結果、なぜか関数からの返値が**nil**になってたんですよ。
もうその時は、**nanu!?** ってなりましたね。

“`Ruby
#これはたとえ
def addition(z)
a = x + 1
return a
end
“`
だからreturnを追加してしっかり値が返るようにしたんですよね。
でもそれがどんなに**非道な行いだと**は思いよりませんでした….

結果からいえば、returnいらないよって言われた際に
**「いやでも、値返ってこんかったし」** と心のマリワナ海溝より深いところで思ったので、証明してみたく再度試してみたら、returnを記述しなくても

devise_token_authのメール認証済みでないとログインできない機能をRSpecでテストする方法

はじめに
—
devise_token_authのログイン機能が開発し終わったので現在RSpecでテストを書いているのですが、”メール認証済みでないとログインできない”というテストを書くことができたので、備忘録として残そうと思います。

sessions_spec.rbで何をテストするか
—
devise_token_authで設定をすればアカウント作成時にメールで本認証を行わないとログインができない機能を実装することができます。
この”sessions_spec.rb”は、ログイン機能を担当しているので”メールが送信できているか？”などのテストではなくシンプルに、
~~~
・認証が済んでいればそのアカウントはログインできる
・認証ができていなければそのアカウントはログインできない
~~~
という2点が問題なく動作していることをテストで確認できればOKという考えになりました。
アカウントを作成する箇所のテストについては、registrations_spec.rbで記述します。
（その他パスワードやメールアドレスが間違っている場合はログインできない等のテストは書いていますが、認証とは

インデントを合わせないのはインシデント

こちらはプログラマーなりたてのへっぽこパンピーが、自分の自分による自分のための忘備録として書いてるので、間違いもがあるかもですがあしからず！

## コードを記述する時はインデントを合わせるべし
プログラマーからしたら言わずもがなことかもしれないのですが、あだち充の主人公の違いもわからない粗雑な人間は、ついつい微妙にずれてる場合が多い。
“`Ruby
if kazuya_hadnt_died
puts ‘atsuya would not be playing baseball’
end
“`
段落ごとにスペース2つ分あけたら、こうなるやろ
“`Ruby
if kazuya_hadnt_died
puts ‘atsuya would not be playing baseball’
end
“`

この微妙な違いに気づかなかった人はドンマイとしか言いようがないが（僕もドンマイ側の人間ではあります）、それだけでは済まされないのです。

>インデントの微妙な違いに気づかない男は、女性の微妙な変化にも気づけない不幸な人間だ

と、アラン・チューリングも言ってたらしいけど、たぶん言