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

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

【Rails】uglifierはterserに置き換えた方がいいかもな話

とあるプロジェクトである日突然にそれは訪れました。

デプロイ時の`assets:precompile`でエラーが発生し、デプロイに失敗するようになったのです。

config系の設定値は変えてないし、特にバージョンアップなどしてないし、変更したことといえばいくつかライブラリを追加した(nodeのパッケージ)のとReactのファイルをいくつか追加したぐらい?

同じような現象でハマる人が減りますようにという期待を込めて、情報共有として残しておきます。

# TL;DR
* sprockets + gemのuglifierを使用してjsのcompileをしている場合は、compile用のgemをterserに変更して、assets.rbも変更したほうが良さそう
* uglifierが使えるのはES6まで
* railsもterser推奨っぽい

# 何が起こった?
冒頭で概略は説明しましたが、デプロイ時に実際に出たエラーは以下のような感じです(プロジェクト名・ブランチ名の部分は伏せてあります)

“`bash
# …(略)

rake stdout: Nothing w

元記事を表示

レスポンシブ対応で役立つ実装の仕方

レスポンシブ対応しようと思っていたけど、いざ実装しようと思ってたら何をすれば良いのか分からない人向けの記事となります。
いくつか追加で載せていきますが、とりあえず絶対に知っておいた方がよさそうなことを3選まとめておきます。

1、まずはなんと言っても開発者ツールで携帯の表示を確認すること。
ショートカットキーでoption + command + Iを打つと開発者ツールが開く。
![94155508-951D-4ADC-BD47-18BB2EA18CAA.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358181/fe891a5a-2a49-73e3-162e-f449bda55678.jpeg)

ここの赤いところを押すと携帯での表示画面に切り替わる。

2、viewportの設定

とhtmlファイルのheadの中に記述しておく。
そうすることでパソコン上では小

元記事を表示

Ruby 練習問題1 ~ハッシュの基礎~

こんばんは、プログラミング初学者”fujitacoma”です!

今回からシリーズとして、Rubyの練習問題を解いていきたいと思います。
徐々に難易度を上げていく予定ですので、お付き合い頂けますと幸いです!

それでは早速始めます!

# 問題
“`
puts hash.keys
puts hash.values
“`
上記のメソッドを実行した時に
“`
one
two
three
1
2
3
“`
とターミナルに表示されるような変数hashを作成するためのコードをシンボルを使って記述してください。

# 回答と解説
### 模範解答
“`
hash = { one: 1, two: 2, three: 3 }
“`
### 解説
シンボルを使ったキーの記述方法は、キーの後にコロン:をつけて定義します。
“`
hash = { キー: 値}
“`
ハッシュをシンボルで記述すると、コード上では文字列のように見えていますが、内部的には数値として処理されます。
数値として扱われるので、 __処理速度が速くなる__ ことと __文字列としての役割__ も果たします。
よって、ハ

元記事を表示

【プログラミング初心者】学習中意識していることについて

# はじめに
はじめまして。プログラミングスクールに通っている者です。
現在学習を開始し1か月が経ちましたので、自身の学習方法について振り返ってみようと思います。
こちらの記事をご覧になられた際、もし「こんな良い学習方法があるよ」などご意見があればぜひ教えていただきたいです。

# 学習中意識していること
学習中に意識していることは下記4つです。
個人的にはスクールに通い始め、②と④の重要さを特に実感しています。

### 全体学習での4つのポイント
**Point**
① **何**を学習するのか考える
② **スケジュール**を立てる(**いつまで**に**どこまで**を意識)
③ **実行**する(必要であれば**リスケ**)
④ **振り返る**

こう見ると、ほとんどPDCAサイクルと同じですね。笑

# Rails学習中に意識していること
学習の中でも現在、Railsを学習中に意識していることは下記5つです。
個人的にIT業界は①②③をサクッとこなし(曖昧にこなすわけではない)④にすぐ取り掛かれるかが重要なのかなと思いました。
(⑤は個人学習として必須項目ですが忘れがちなの

元記事を表示

Rails Ruby scssをページごとに実装したい時

ポートフォリオを実装していた際に、scssをtop header footerそれぞれに分けて、実装をしていきたいと思ったので、その実装方法を書かせて頂きます。
ネットで調べると色々な方法が書かれていて、どれで実装すれば良いのか、よく分からなかったため、今回僕なりの実装の方法でうまくいった方法を書かせて頂きます。

手順は主に4つです。
1、まずはscssで実装したいviewファイルに以下を記述します。

app/views/shared/_header.html.erb
“`
<%= stylesheet_link_tag 'header', :media => “all”%>
“`
※一番上に記述します。

2、次にapp/assets/stylesheets/内にscssファイルを作成します。
今回は1で [[stylesheet_link_tag ‘header’]]としているので
header.scssを作成します。

3、次にconfig/initializers/assets.rb内に読み込みたい、scssファイルを書きます。

“`
Rails.applic

元記事を表示

初めてのRailsチュートリアルに挑戦!第2章

# 学習内容
## 1.Usersリソース
1. Usersリソースの作成
1. ユーザーの情報変更
1. MVCの挙動を理解

## 2.Micropostsの関連付け

1. マイクロポストの作成
1. ユーザーの関連付け
1. 継承
1. アプリケーションをherokuにデプロイ

# 学習時のエラー内容
## herokuの本番環境でアプリが起動しない
herokuからアプリを起動すると、ブラウザ上で以下のエラーが発生。
![スクリーンショット 2022-07-02 18.09.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/4b1a667b-b568-5952-4b92-62033ebbcc65.png)

エラーの指示通りに`heroku logs –tail`を実行すると、以下のようなエラーが多数発生。
“`
2022-07-02T08:53:13.849617+00:00 heroku[router]: at=error code=H10
desc=”App c

元記事を表示

Bundlerとは

Bundlerとは一体なんなのか?
ふと気になっていたので、色々と調べた結果を書かせて頂きます。

結論を述べると
Bndlerとはそのプロジェクト内でのgemを一括で管理するものである。

railsの開発現場では大量のgemを使うことになる。
その大量のgemのバージョンは同一バージョンのgemをインストールする必要がある。bundlerを使うと、一つのコマンドで大量のgemをどの環境でも同一のバージョンをインストールすることができる。
ということらしいです。

今まで、適当にbundle installとかしちゃってたけど、こういう意味だったのかと、改めて勉強になりました。

参考記事 参考文献
プロを目指す人のためのRuby入門 改訂2版 著書 伊藤 淳一

元記事を表示

【Rails】formからハッシュの配列をパラメータとして送信する

### 最終的にcontrollerで受け取りたいparamsのイメージ
Railsのcontrollerで以下のような形式で同じname属性で固められた多次元配列をparamsとして受け取りたい

“`ruby
users: [
{
id: 10, name: “山田太郎”, email: “test@email.com”, phone_number: ‘024-111-11’, memo: “役職:工場長”,
action_histoires: [
{id: 10, action_datetime: “2022-05-13T00:00:00”, description: “外出”},
{id: 20, action_datetime: “2022-05-13T00:00:00”, description: “直帰”},
{id: nil, action_datetime: “2022-05-13T00:00:00”, description: “時間休 13:00 – 15:00”},
],
},
{
id: 20, name: “山田太郎

元記事を表示

Socery でundefined method ‘after_save’ for {:if=>…}のerrorが出てきた時の対処法

sorceryでログイン機能実装時にタイトルのような、undefined method ‘after_save’ for {:if=>…}のエラーが出てはまってしまったため、その解決策を書かせて頂きます。
![D8A42207-B968-430B-AE82-814F5B8D48FA.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358181/72eb0aeb-5da4-adfc-2546-2172d2386a47.jpeg)

結論を言うと、sorceryのversionを最新にすることで解決しました。

私の環境はと言うと
ruby 3.1.2
rails 6.1.5
で実装をしていました。

いつも通りrails newしてログイン機能をsorceryで実装しようとしたら、上の写真のようなエラーが出てきました。
色々な記事を見てきて、そのうちの解決策の一つに、rubyのversionを2系に落とすと良いという記事がありました。
rubyのversionを2系に落として実装したところ写真のよ

元記事を表示

Rails validates

## バリデーション
Railsではvalid?メソッドを実行するとバリデーションが実行されます!
バリデーションが通ればtrueを返し、引っかかればfalseを返します。
invalid?メソッドは逆の振る舞いをします。

### 空でないこと
“`ruby
validates :title , persence: true
“`
### booleanの場合
“`ruby
validates :island, inclusion: { in: [true , false ] }
“`
### unique
“`ruby
validates :user_name , uniqueness: true
“`

### 含むかどうかを検証する場合
“`ruby
validates :fruit, inclusion : {in: %w(banana apple orange)}
“`
### 含まないことを検証する場合
“`ruby
validates :country, exclusion: {in: %w(china japan)}
“`

### 長さ

元記事を表示

Rspec request-specからOpenAPI 仕様ドキュメント自動生成(rspec-openapi)

# はじめに
案件で実装したAPIの仕様書が急遽必要になり、rspec-openapiというrailsのrequestテストからOpenAPI 仕様のドキュメントを出力することができるGemがありました。
便利だと思ったので、使用方法をまとめておこうと思いました。

# 開発環境
ruby ‘3.0.0’
Rails 6.0.3.4

# 前提
– rspecでテストを実施している
– requestのテストを書いている

# 使用方法

1. Gem(‘rspec-openapi’)のインストール 
“`ruby:request.rb
group :test do
gem “rspec-rails”
gem “rspec-openapi” # 今回追加
end
“`

bundle install 実行

2. OPENAPI=1 rspec を実行

環境変数等を設定する必要はなく、以下コマンドを実行

“`erb:ターミナル
OPENAPI=1 rspec
OPENAPI=1 rspec ファイルパス # 指定したファイルのみ実行
“`

※docker

元記事を表示

aws-sdk-s3 gemの2ファイル以上S3にアップロードする時遅すぎる問題

## はじめに

開発時に困ったことがあったので自分用のメモとして残しておきます。mm
同じようなことで困っている人がいれば参考になれば幸いです。

`aws-sdk-s3` gem を使用して、AWS の`ap-northeast-1`にある S3 に複数ファイルをアップロードする処理(put メソッド)を実装していたときに、2 ファイル目以降をアップロードするとどうしても役 20 秒ちょいぐらいかかってしまう…(1 枚目は 0.4 秒ぐらい)。

ファイルを S3 にアップロードする前に’File.read’で事前に読み込ませることで早くなったのでそのコードを残しておきます!
(この対応にすることで 20 秒かかっていた処理が 0.2 秒まで早くなりました!!!)

– S3 にアップロード

“`ruby
[file1, file2].each do |file|
S3.file_upload(‘ファイル名’, file)
end
“`

– S3 定義ファイル

“`ruby:filename: lib/s3.rb
class S3
ACCEPTED_FILE

元記事を表示

【Rails】いいね機能Ajax実装

前提

* Rails6
* Devise実装
* fontawesome導入
* jQuery導入
* いいね対象の投稿機能を実装

実装の流れ

1. モデル作成・アソシエーション定義
2. ルーティング設定
3. コントローラー実装
4. ビューの修正・追加

完成形

![ezgif.com-gif-maker (3).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602337/c80a0936-f019-5113-dc12-f3cb8e984a5b.gif)

fontawesomeのアイコンを使用して、いいねボタンを実装しています

モデル作成・アソシエーションの定義

まずはモデルを作成していきます。今回、モデル名は**Like**とします。
モデルのカラムにはどのユーザーがどの記事に対していいねをしたかを判別するために、
user_idとpost_idが必要になります。

“`
rails g model Like user_id:integer post_i

元記事を表示

RSpecの導入 Rails6 × Docker【備忘録】

## はじめに
RSpecを導入しようと思い記事を見ながら進めていたら
思った通りに進まずエラーの沼にハマってしまったので、忘れないようにまとめておこうと思います。
(Dockerを考慮出来ていなかったのがエラーの原因だったので、完全に自分のミスですが。)

## 前提
__環境__
 Ruby 2.7系
 Rails 6.1系
 Docker 20.10.16

## 導入方法
#### ①Gemfileに以下を追加します。
“`:Gemfile
group :development, :test do
gem ‘rspec-rails’
gem “factory_bot_rails” # ←なくても問題ありませんが、使用したかったので入れてます
end
“`

#### ②bundle install
“`:ターミナル
% docker-compose run web bundle install
“`

#### ③build
私はこれを完全に忘れてしまっていました。超初歩的なミスなので、今後は気をつけます。

“`:ターミナル
% docker-compose

元記事を表示

【Rails】gemアップデート時の依存関係の調べ方(Bundler attempted to update GEMNAME but its version stayed the same)

## はじめに
未経験からエンジニアに転職して、3ヶ月ほど経つエンジニアです。

今回は業務でgemをアップデートするときに詰まった
**gemアップデート時の依存関係の調べ**をテーマに書きます。
↓の警告がでて、gemをアップデートできない場合のアプローチについてです。
~~~
Bundler attempted to update GEMNAME but its version stayed the same
~~~

## 結論
https://rubygems.org/

– ↑で該当のgemを探す
– 依存関係を調べる

## 依存関係の例

例として、faradayというgemの依存関係を見ていきます。

https://github.com/lostisland/faraday

~~~Gemfile.lock
faraday (1.10.0) # 最新の2.3.0にしたい
~~~

~~~
$ bundle update faraday
~~~

上記コマンドでgemをアップデートしようとするも、警告が出てアップデートできません。
~~~
Bundler atte

元記事を表示

初めてのRailsチュートリアルに挑戦! 第1章

# 学習内容
## 1.環境構築
1. AWS Cloud9でユーザ登録、クラウドIDE作成
1. Railsをインストール
 *バージョン6.0.4を利用。Rails6(第6版)の電子書籍に合わせた。

## 2.最初のアプリケーション
1. Railsのアプリケーション作成
1. hello_appの作成
 *第1章で使うアプリ。第2章以降は別のアプリを使う
1. Bundlerインストール
1. webpackerインストール
1. rails server起動
 *開発マシンでのみブラウズできるローカルWebサーバー
1. MVCの理解
1. 「hello, world!」の表示

## 3.Gitによるバージョン管理
1. Gitインストールとセットアップ
1. Git初期化
1. Git追加とコミット
1. Gitブランチ作成、編集、マージ
1. Gitプッシュ

## 4.Herokuのセットアップとデプロイ
1. 本番環境用以外のgemをインストール
1. Herokuインストール

# 学習時のエラー対応
## 1.Bundlerインストール時のエラー
`bundle

元記事を表示

RailsでのDB接続エラー

# エラー
AWS CodeBuild上でAurora(MySQL)に接続してrails db:migrateしようとすると、Access Denied。
この問題を解決するのにかなりの時間を費やしたので、メモ + 共有。

# 検証 + 解決方法
– そもそもDBは起動しているか。
– ネットワークとして、互いに接続できる状態か。(セキュリティグループ設定が正しいか)
– MySQLクライアントでDBに接続できるか。
“`bash
mysql -h <ホスト> -u –password=
“`
– DBホストを名前解決できているか。
“`bash
nsloolup <ホスト>
“`
– DBから応答はあるか。(CodeBuildで実行)
“`bash
mysqladmin ping -h <ホスト> -u –password=
“`

私の場合、以上に関しては問題が無かった。
そのため、Railsの設定のどこかが間違っているのだろうと当たりをつけることができた。

– Ra

元記事を表示

【VSCode】VSCodeでRailsのデバッグをする【Rails】

## `debug`をインストール
“`Gemfile

group :development do
gem ‘debug’
end

“`

“`:ターミナル
$ bundle install
“`

## `launch.json`を作成する
`.vscode/launch.json`を以下のとおり作成します。
“`.vscode/launch.json
{
“version”: “0.2.0”,
“configurations”: [
{
“type”: “rdbg”,
“name”: “Debug current file with rdbg”,
“request”: “launch”,
“script”: “${file}”,
“args”: [],
“askParameters”: true
},
{
“type”: “rdbg”,

元記事を表示

管理者ユーザー機能の実装[Ruby, Rails]

初めまして、プログラミング初学者”fujitacoma”です!

4月からプログラミングスクールで学習を始めておりましたが、
遅ればせながらのQiita初投稿です。

今回は、現在開発中のオリジナルアプリにて簡単な管理者機能を実装しましたので、
その流れを説明していきたいと思います!

# はじめに

今回使用するGemはdeviseのみです。
deviseのインストール及び、usersテーブル作成後から説明したいと思います。

# 管理者(admin)を追加する

まずはじめに、作成したusersテーブルに管理者(admin)を追加します。

“`

#ターミナル
rails g migration AddAdminToUsers

“`
この記述の命名規則は、キャメルケース、、でしたかね。
大文字と小文字ががラクダのコブのように続く=キャメルケース
って感じで覚えた気がします。

続いて、作成されたマイグレーションファイルにカラムの情報を追加していきます。
このとき、カラムの型はboolean型、デフォルトは0とします。

“`ruby

#migrationファイル
cl

元記事を表示

【Rails】コメント機能Ajax実装④ 更新編

前回までの記事
[【Rails】コメント機能をAjax実装① 準備編](https://qiita.com/coneco12_/items/2d6e44ce5c1b374ca7df)
[【Rails】コメント機能Ajax実装② 投稿編](https://qiita.com/coneco12_/items/61174a80a611b7e0049e)
[【Rails】コメント機能Ajax実装③ 削除編](https://qiita.com/coneco12_/items/f97495e158150b533b78)

コメント機能の更新機能の実装

今回の完成形はこちらです。
![ezgif.com-gif-maker (3).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2602337/e44258d4-1e6e-230a-366a-17b8296bd28c.gif)

#### (1) Commentコントローラーにeditとupdateアクションを追加

“`ruby:comments_c

元記事を表示

OTHERカテゴリの最新記事