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

Rails関連のことを調べてみた2021年07月14日
目次

[Rails]JavaScript(jQuery)を使ったアコーディオンメニュー

今回はクリックしたら開閉できるアコーディオンメニューの実装をしていきます。
メニューの中身は最初隠していて、クリックで出てきて、しまうとまた隠れるので、色々なところで使える便利な機能です。

完成イメージはこちらです。

![スクリーンショット 2021-07-14 9.36.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1554142/876e5a78-9cea-e05b-507d-878f6e14d0f9.png)

画像なので動きがないので、確認したい方は、ぼくの[ポートフォリオ](https://oogiri-legendroad.com/homes/guide)を確認してみてください。
下部のQ&Aが同じ手順で実装しています。

それではいってみましょう!

#開発環境

> ruby 2.6.3
> Rails 5.2.6

#前提

– jQueryが使える状態
– homes/topビューで実装していきます
– Bootstrapのcardを使っています(別にcardじゃなくても問

元記事を表示

LoadErrorでrails sやbundleが使えない時

久しぶりの投稿となります。

# LoadError~

bundle install を行なったとき以下のエラーが発生しました。

“`
LoadError: dlopen(/Users/taniguroarata/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/rmagick-4.2.2/lib/RMagick2.bundle, 9): Library not loaded: /usr/local/opt/imagemagick/lib/libMagickCore-7.Q16HDRI.8.dylib
Referenced from: /Users/taniguroarata/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/rmagick-4.2.2/lib/RMagick2.bundle
Reason: image not found – /Users/taniguroarata/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/rmag

元記事を表示

【Rails】メソッド new と build との違い

個人的なメモ。ふと疑問に思ったので。

# 結論

**`new も build も同じ機能を持つメソッドです!!!!違いはありません!!!!`**

**`buildメソッドが new のエイリアス(別名)!`**

**`暗黙の了解として使い分けがあるようです!`**

参考: [build | Railsドキュメント](https://railsdoc.com/page/model_build)

# 慣習として使い分けが存在している

`new`は通常のインスタンス生成に使用される

“`ruby
user = User.new
“`

対して、`build`は**関連付けのなされたモデルのインスタンス生成に使用されるという慣習**があるようです。

“`ruby
new_project = user.projects.build
“`

元記事を表示

【Ruby on Rails】deviceで構築したログイン機能のログアウト時、”Couldn’t find User with~”のエラーが発生した

#経緯
Railsのチュートリアルとしてあるアプリを作成している際に、deviceによってログイン機能を実装しようとしたところ、おっと大変、ログアウト時にエラーが発生した。
自分のためにも、解決までの道筋も記しておこうと思う。

#環境
Ruby 2.7.3
Rails 6.1.3

#エラー内容
![スクリーンショット (29).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1144388/1669c2c9-e966-5033-8544-4ed809e23407.png)

Railsお初にしては何事もなく実装が進み、さーてログアウトしてホームページに戻ってみるぞ~と思ったところ、写真のようなエラーが発生した。

###試したこと1
ガーン、、、と思いつつ、とにもかくにもエラー内容を見てみると、

“”Couldn’t find User with ‘id’=sing_out””

と出ていたので「idにそんなの渡してないよな???」と思いつつ、idについてのコードをいじってみるが解決せず。

元記事を表示

railsのルーティングのnamespace,module,scopeについて

railsでルーティングを記述する際にresources以外で何かないか調べてみたところ、見つけて実際に使ってみて場面によって記述を変えることで分かりやすくなったので復習がてらアウトプットしたいと思います。

#namespace
ファイル構成とURLどちらも指定のパスに指定したい時に使用します。

“`config/routes.rb
Rails.application.routes.draw do
namespace :user do
resources :profiles
end
end
“`

#module
URLは変えたくないけどファイル構成だけ指定のパスにしたい時に使います。

“`config/route.rb
Rails.application.routes.draw do
scope module: :URL do
resources :notice
end
end
“`

#scope
URLは指定のパスにしたいけどファイル構成は変えたくない時に使います。

“`config/routes.rb
Rails.applica

元記事を表示

【Rails】閲覧数の表示を実装してみた

####My Profile
プログラミング学習歴②ヶ月目のアカウントです!
プログラミングスクールで学んだ内容や自分が躓いた箇所等のアウトプットの為に発信しています。
また、プログラミング初学者の方にわかりやすく、簡潔にまとめて情報共有できればと考えています。
もし、投稿した記事の中に誤り等ございましたら、コメント欄でご教授いただけると幸いです。 

#対象者

* 閲覧数を表示させたい方

#目的

* 閲覧数を表示させる機能を実装する

#実際の手順と実例
###1.前提
本の内容を投稿するSNSを作成しています。
詳細ページに閲覧数を表示します!

Book(model)
books table
books controller

User model
users table
users controller

###2.モデルの準備
bookとuserと1対Nの関係になる「閲覧数」モデルを作成します。

まずテーブルとモデルを準備します。

“`
rails g model ViewCount book_id:integer, user_id:integer

元記事を表示

【個人開発】海外旅行になかなか行けないので、コロナ禍の渡航難易度を可視化するサービスを作ってみた。

はじめに

![ogp_image.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1044144/0cc08847-00c8-ea67-55f1-9f7a157bfffc.jpeg)

突然ですがみなさん、最後に海外旅行に行ったのはいつですか?
多くの方は1年以上海外旅行に行けていないのではないでしょうか?

申し遅れました、Yunoと申します。
【Twitterアカウント】

【今回作ったサービス】
https://www.tripable.jp/

少しだけ私自身の話をすると、2020年11月まではタイに住んでおり、英系金融コンサルティング会社でIFAをしておりました。しかし、コロナの影響で厳しい渡航規制が設けられたことでVISAの更新に問題が生じ、日本に帰国することを余儀なくされました。

私のように、海外で働いていた方の不本意な帰国や、これから海外で働こう、留学しようとしていた方が、渡航不可能になってしまった方は大勢いると思い

元記事を表示

attached?を使って、プロフィール画像を区別する

#はじめに

新規登録の際にプロフィール画像を登録するように設定しました。

しかし写真なんて載せられないユーザーもいると思うのでバリデーションをかけませんでした。

なので投稿した際にプロフィール画像がある人は画像は表示され、ない人はこちらで用意した画像が表示されるようにしたいと思います。

#前提

“`user.rb
class User < ApplicationRecord has_one_attached :avatar with_options presence: true do #バリデーション省略 end end ``` 今回はuserモデルにavatarというファイル名をつけました。 ```review.rb class Review < ApplicationRecord belongs_to :user with_options presence: true do #バリデーション省略 end end ``` ![スクリーンショット 2021-07-13 19.13.31(2).png](https://qii

元記事を表示

ActionMailer::Previewで作成したデータをrollbackする

## 概要
previewのたびにレコードを作成するのは嫌だ。
buildしたものを使うことで回避できそうだが`ActiveRecord_Associations_CollectionProxy`に対し`order`を使っている部分があるとDBを探しにいってしまい、空配列が返ってしまう。
`order`ではなく`sort_by`を使うとindexが効かなくなる
なので一旦レコードを作成してしまい、メールをrenderした後にrollbackする。

## 方法
`config/initializers/mailer_previews.rb`

“`ruby
module RollbackingAfterPreview
def preview
ActiveRecord::Base.transaction do
super
raise ActiveRecord::Rollback
end
end
end

Rails.application.config.after_initialize do
class Rails::MailersC

元記事を表示

rails up gradeに伴うgemの依存関係の修正(4.2.8 -> 5.0.0.1)

状況

herokuにデプロイしているアプリのpostgres9.6がEOLに。
postgresのversion upに伴い互換性の問題よりrailsを4.2.8から5にupgradeすることになった。

様々な記事を読み漁り、まずrails version up に伴い発生するgemの互換性問題の解決に取り組むが、うまく行かない。

一気にgemをupdateしようとするのが原因か、bundle update が通りません。

vrsions

– ruby 2.5.3
– rails 4.2.8 –> 5.0.0.1
– bundler 1.17.3

gemfileの現状

~~~ruby:gemfile
source ‘https://rubygems.org’

ruby “2.5.3”

-gem ‘rails’, ‘4.2.8’
+gem ‘rails’, ‘5.0.0.1’

gem ‘clockwork’
-gem ‘coffee-rails’, ‘~> 4.1.0’
+gem ‘coffee-rails’#, ‘~> 4.1.0’
gem ‘da

元記事を表示

【Rails6】ActiveRecord::IllegalMigrationNameErrorの対処法(備忘録)

## はじめに

他のエラー処理中に、サーバー起動後に、「ActiveRecord::IllegalMigrationNameError」のエラーとなって、悩んだので備忘録として残します。

## 開発環境
Mac
Rails 6.1.3.2
PostgreSQL 13.2

## 現状
下記のエラーがあり、同じ名前のマイグレーションファイルが2つ作成されている状況。

![スクリーンショット 2021-05-21 14.20.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/923146/4c29ef78-e856-5be1-1725-a715d8f2a447.png)

## 原因

結論、ファイルバージョンと空白が入っているのが原因でした。

## 対処法

①`rails db:migrate:reset`を実行。
 エラー解消せず。

“`
○○○○○xxxxxxxxx % rails db:migrate:reset
Dropped database ‘tumieku_app_deve

元記事を表示

Rails6でDockerを用いてrails newするまで

# 本記事の目的
タイトルにある通り、Rails6でDockerを使用し環境構築を行う。
今までRails5をメインに使用してきたのでその忘備録も兼ねて執筆。
※Webpackerとは
https://railsguides.jp/webpacker.html

# 環境構築手順
どうやらRails6からWebpackerがデフォルトとなり、環境構築が一筋縄ではいかないらしい。
Dockerの公式マニュアルを読みながら、作業開始!
https://docs.docker.com/samples/rails/

##手順1.
まずはターミナルを開き

“`
% mkdir
% cd
“`

でアプリを作成するディレクトリの作成と作業ディレクトリへの移動。

##手順2.

“`
% touch Dockerfile
% touch Gemfile
% touch Gemfile.lock
% touch entrypoint.sh
% touch docker-compose.yml
“`
でDockerコンテナ作成のためのファイルを用意。

##手順

元記事を表示

railsでcssが反映されないエラーActionController::RoutingError (No route matches [GET] “/stylesheets”):style

app/assets/stylesheets/home.scss
上記のようにhome.scssファイルを作ってcssを書き

app/assets/views/home/index.html.erb
上記のようにhomeフォルダにindex.html.erbファイルを作ってhtmlを書いた。

「rails s」でサーバーを起動すると

“`
ActionController::RoutingError (No route matches [GET] “/stylesheets”)
“`
のエラーが起きてしまった。

“`routes.rb
Rails.application.routes.draw do
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
get “index” =>”home#index”
get “myactive” => “home#myactive”
get “myhobby” => “

元記事を表示

[Rails]ActionCableでリアルタイム機能を実現してみた

# はじめに
Action Cableは、 WebSocketとRailsのその他の部分をシームレスに統合するためのものです。ちなみに、WebSocketとは、Webにおいての双方向通信を、従来のHTTP等よりも低コストで行うための仕組み。

# 事前知識
## コンシューマー
WebSocketコネクションのクライアント。複数のケーブルチャネルにサブスクライブできます。

## Pub/Sub
パブリッシャ-サブスクライバ(pub/sub)型モデルとも呼ばれる、メッセージキューのパラダイムです。`パブリッシャ側(Publisher)が、サブスクライバ側(Subscriber)の抽象クラスに情報を送信`します。

## 購読(subscription)
クライアントがWebsocket通信を通じたチャネルと関連付け。購読は、一度に複数のチャネルに対して作成可能。

## app/channels/〇〇_channel.rb
Websocket処理におけるコントローラーのような役割を果たす。

“`ruby
class RoomChannel < ApplicationCable::

元記事を表示

[Rails]ローディング(ロード画面)の実装

おしゃれなサイトはローディングをよく実装していますので、今回はポートフォリオにて実装してみました。

思ったよりかんたんに実装できて、サイト全体の雰囲気がアップするのでおすすめです!

参考にしたサイトは以下で、「1.【サンプル】ローディング(テキストだけでふわっと)」をRailsのアプリケーションに落とし込んで解説していきます。
[【jQuery】 ローディング、実装サンプル集](https://125naroom.com/web/3835)

#開発環境

> ruby 2.6.3
> Rails 5.2.6

#実装方法

今回はHTMl,CSS,JavaScriptを使ってローディングを実装していきます。
ではいってみましょう〜!

#ビュー
まずはビューから、このビューのid名、class名に対してCSSやJavaScriptをあてていきます。

今回はhomes/topで実装。

`1番上の行`から記述していってください。

“`erb:views/homes/top.html.erb

元記事を表示

win10 Hoem docker rails ローカルファイルの更新 反映されない

## コードの修正後の反映設定

“`config/environments/development.rb
config.file_watcher = ActiveSupport::FileUpdateChecker
“`

config.file_watcher部分を上記に変更

## 何かしらの理由で上記のファイルを変更できない場合
Git管理をしているとローカルのみで管理対象外にしてもPullやcheckoutができないのでどうにかしたかった

initializersに下記のファイルを追加して管理対象外にしてみた。

“`config/initializers/dev.rb
require “active_support/core_ext/integer/time”

Rails.application.configure do

config.file_watcher = ActiveSupport::FileUpdateChecker

end
“`

これだけで動作も更新もできたのでとりあえずこれで作業してみる

元記事を表示

[Rails]Action Textでリッチテキストを作ろう!

# はじめに
Rails6で追加されたActionTextにリッチテキストコンテンツと編集機能を導入出来ます。
今までは自分で実装していたので、便利な機能だと思い、使い方を調べてみました!

# 使用方法
1.ActionTextのセットアップを行い、`rails db:migrate`を実行する。

“`bash
$ rails action_text:install

$ rails db:migrate
“`

2.埋め込み画像や他の添付ファイルを扱うため、ActiveStorageのセットアップを行う。

[参考]

https://qiita.com/ren0826jam/items/58bdbaff17581280ee5a

3.使用するモデルにリッチテキストのフィールドを追加する。

“`app/models/message.rb
class Message < ApplicationRecord has_rich_text :content end ``` 4.ビュー側でヘルパーメソッドを使用する。 ```ruby <%= form_with(model:

元記事を表示

ローカルと本番環境で挙動が違う時の対処法

ローカル環境での動作はバッチリ!
次に本番環境で動作確認していると、あれ、、思うように動かない。

考えられる原因の仮説として、
ローカル環境では動いているということでコードに問題はないとして、githubのmasterブランチにあげ忘れかな?

確認してみたものの全てmergeしている、、
なんでだろう、、

そうだ!思い切ってDBをリセットしちゃおう!!

“`
#dbのリセット
heroku run DISABLE_DATABASE_ENVIRONMENT_CHECK=1 rails db:drop db:create db:migrate

#herokuの再起動
heroku restart

#herokuに再アクセス
heroku open
“`

コマンド入力後再度動作確認すると、無事正常に動いている!
偶発的な問題だったみたいです。

皆さんもぜひ試してみてください:thumbsup_tone1:

元記事を表示

priceのバリデーションを半角数字だけ適応したい

#はじめに
投稿内容に金額(price)を入力する欄を作りました。

しっかり半角数字のバリデーションを定義したのに全角でも入力できてしまったので解消法を投稿します。

#やってしまったミス

“`rb
class Review < ApplicationRecord with_options presence: true do validates :faclity_name, length: { maximum: 40 } validates :images validates :price, format: { with: /\A[0-9]+\z/ } end end ``` このように`price`に空だと投稿できない、半角数字でなければ投稿できないバリデーションを定義しました。 しかし全角文字でも投稿ができてしまいました。 #解決方法 **数値のみ**というバリデーションがありました。 ``` numericality: ``` 今回は0円から9,999,999円までまでは投稿できる設定にしたいので以下のように記述しました。 ``

元記事を表示

【Rails】カートモデルの代わりにsessionを使ってカート機能を実装する

#はじめに#
####簡単な自己紹介####
はじめまして、shunと申します。
善良で健康な23歳です。
現在、「私立探求学園」というプログラミングスクールの「Rails共同開発プログラム」に2期生として参加しております。
プログラミング歴は執筆時点で3ヶ月ほどです。

Qiitaに記事を投稿するのは今回が初めてになります。
そのため、専門性に欠ける部分や読みづらい点が多々あるかとは思いますがご容赦ください。

#本記事の内容#
###カート機能を実装する###
ECサイトでよく目にするカート機能を実装します。
今回実装するカート機能では以下の事が可能です。
本稿では主にコントローラに焦点を当てて解説します。

**① 「カートへ」ボタン押下で商品をカートに入れる。
② カート内商品を表示する。
③ カート内商品の個数変更[^1]、商品削除ができる。
④ 「購入する」ボタンを押下でカート内を空にして購入完了画面を表示する。
⑤ 購入完了画面で注文番号を表示する。**

###本記事の特徴###
本記事では、カート内で商品情報を出し入れする際には**カートモデルを使用しません。**

元記事を表示

OTHERカテゴリの最新記事