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

[Gem不要！！HTML&CSSのみ]初心者が簡単にドロップダウンメニューを作成する方法

# はじめに

ハンバーガーメニューやドロップダウンメニューの作成をしたいけど、***Gem導入***の方法がよくわからない・***JavaScript***は思うようにいかない。
そんな初心者の方におすすめの記事なっております。

#開発環境

・Rails6.0.0
・MySQL5.6.50

#ドロップダウンメニューの実装

早速ドロップダウンメニューの実装の方法の流れを解説します。
ちなみにドロップダウンメニューとは以下のようなメニューのことです。


「…」 を押すとメニューが表示されるものです。

よく見かけますが、JavaScriptでやるには面倒だし、Bootstrap導入のためにGemやjQueryを導入したりするのは初心者には中々ハードルが高めかなと思います。

それで

rbenvでRubyのバージョンが切り替わらないときの対応

rbenvでRubyのバージョンが切り替わらなかったので、それのメモです。

# 事象
rbenvでバージョンを切り替えても変わりません

“`bash
$ rbenv versions
system
2.6.6
* 2.7.1 (set by RBENV_VERSION environment variable)
$ rbenv global 2.6.6
$ rbenv versions
system
2.6.6
* 2.7.1 (set by RBENV_VERSION environment variable)
“`

# やったこと
`set by RBENV_VERSION environment variable`と言われているのですが、特にどこにも書いていません。
また`.zshrc`で`export RBENV_VERSION=2.6.6`をすると、rbenvのversionはうまく変更されますが、
rubyのバージョンを確認しようとするとエラーになります。

“`bash
$ rbenv versions
system
* 2.6.6 (

Rails6でvue.jsを使った開発を行うための設定に挑戦

Rails x Vue.jsを用いた開発に挑戦している。手探りなので間違っている箇所もあるかもしれないが自分なりに検索してやってみた。そういう記事としてご覧いただけると嬉しいです。

### 環境構築

①npmを導入(ホームディレクトリでOK)

“`terminal
brew install npm
“`

②npmのパッケージをアプリに導入(アプリのディレクトリで)

“`terminal
npm init
“`

ここで対話プロンプトが起動し、いくつか入力を求められる。()内はnpmコマンドがデフォルトで用意した値。

“`terminal
package name: (a) sample
version: (1.0.0) 0.0.0
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
“`

name…packageの名前。ソースコードでimportやrequireをする際に使われる。

version…最初なので1

【Rails × Docker】＊エラー＊ Could not find gem ‘mysql2 (~> 0.5)’ in any of the gem sources listed in your Gemfile.

__◆目的__
ずっと悩んでいたDockerの課題解決に一歩近ずけたので忘却録のため、記述します！
__＊補足__
私の場合、mysql2がないよ！というエラーが出た際、無理くり手動でmysql2を入れてみました。ですが、Gemfileのmysqlの次に記述されてるpumaがないですよ！というエラーが出たので、別の方法を探していたところwebpackerにたどり着きました。

__◆結論__
コンテナ上で「rails webpacker:install」このコマンドを打った後、
Gemfile.lockの中身を削除して、
docker-compose up –build　コマンドを打ったらコンテナが起動しました^^

“`
root@c9fe1cb41fda:/app2# rails webpacker:install
“`

##エラー文
__docker run コマンドを入力__
mysql2がgemのどのリストを探してもないとエラーがでる。
↓↓↓
__Could not find gem ‘mysql2 (~> 0.5)’ in any of the gem so

簡単カレンダーを少し装飾してみた

#はじめに
　昨日、導入したsimple_calendarについて、少し装飾を加えたので、紹介します。

[簡単カレンダー
](https://qiita.com/TerToEer_sho/items/561844cecf16cd7013fd)

##表示のされかたを変えたい

“`erb

<%= month_calendar do |date| %>
<%= date.strftime("%d") %>
<% end %>
“`

`strftim(“%d”)`によって表示を変えることができます。ちなみに、この記述で、日にちだけの表示にできます。

##曜日に色をつけたい

“`css:calendar.css
.wday-0 {
color: red;
}
.wday-6 {
color: blue;
}
“`

###変更前

###変更後
![](https://i.gyazo.com/134dbbb227e978cd66ef9227

simple_calendarを導入したRails6.0でのDB環境PostgreSQLの設定

学習メモ用です。

#解決したい問題
simple_calendarを導入したRails6.0で
開発環境DBがSQLite3、本番環境DBがPostgreSQL

本番環境において下記エラーが発生し、posts/index viewが表示されない事態に。
simple_calendarを使っているから？

`ActionView::Template::Error (PG::UndefinedColumn: ERROR: column posts.user_id does not exist`

なぜか、本番環境ではpostsテーブルにuser_id columnだけが存在しないからうまくいかない。

と、いうことで開発環境にもPostgreSQLを適用してみる！

#開発環境
Ruby　2.7.1
Rails　6.0.3
OS macOS Catalina

## pggemのインストール

rails6.0では

“`% rails db:system:change –to=postgesql“`

このコマンドで簡単に移行できるよう。

以下のようにsqlite3だ

Rails 初心者から抜け出すべく意識すること (※随時追加予定)

コードが動けばいいやの時期はそろそろ終わりたい
と思い、調べてメモする

また業務でおこなっていて指摘されることも書きます

##Ruby編

###メソッド
**1つのメソッドに複数のロジックを書かずに**別のメソッドに抽象化させる
ロジックや操作ごとにメソッドを作って、それを呼び出す形にする

例) if文で条件により操作を分岐させているときに、
2つ以上の操作をその**メソッド内に直接書く**のではなく、
操作ごとにメソッドを作って、それを呼び出す形にする

##定数
ロジックで用いる具体的な数字は**定数に格納**する

ロジックを作るときに、生の数字を書いてしまうと初見の人には伝わらない
**名前をつけた定数に格納**することで、その**数字が何を意味するのか分かる**

例) 税 **TAX = 10**
基本ストレージ **DEFAULT_STORAGE = 5** など

##Rails

###Routing
ルーティングの書く順番だけではなく**ネストできるところはする::

独自URLを設定しているルーティングは
resourcesにネストして書いた方が分かりやす

gem bulletを入れてみた（N+1問題に自分で気づけない人のために）

## 何をしたか
Railsアプリを作っています。`N+1問題`について前々から関心はあったのですが、SQLについて学習が不足していることもあり、自分では気づけないことも多いので、N+1問題が発生している箇所があったら教えてくれる`gem bullet`を入れてみることにしました。

▶︎公式のドキュメントはこちら:[bullet](https://github.com/flyerhzm/bullet)

## 導入方法
以下のコードをGemfileに記載します。

“`ruby:Gemfile
group :development do
gem ‘bullet’
end
“`
`bundle install`後、以下のコマンドを実行します。

“`
bundle exec rails g bullet:install
“`
この時、テスト環境にも`bullet`を入れるかどうか聞かれると思いますが、公式の`install`のところには`develop`環境へのインストールだけが記されていたのと、

[公式のテスト環境へのインストールの記述](https://github.

Herokuにデプロイしたのにうまく反映できない時

#はじめに
忘備録として記載します。

#結論
「Command+z」で戻りすぎていた。

#過程
デプロイした後、
heroku open
でブラウザを立ち上げたところ、なぜか反映されていない。
そこで、念のためローカルホストでまずは確認した。
すると、書いたはずのコードが消失していた。
「Command+z」で戻りすぎてしまい、消えたと思われる。

こんなミスで1時間もの間、Pushしたり、マイグレートしたりと不毛な時間を過ごしてしまったので、しっかり確認してから進めていこう。

has_one association factory_bot accepts_nested_attributes_for request_spec [自分用]

“`rb
class Project < ApplicationRecord has_one :location, class: 'Project::Location' accepts_nested_attributes_for :location, allow_destroy: true end ``` ```rb class Project::Location < ApplicationRecord belongs_to project end ``` factory ```rb FactoryBot.define do factory :project_location, class: 'Project::Location' do association :prefecture association :project address { '港区芝公園４丁目２−８' } station { 'JR浜松町駅' } end end ``` request spec ```rb let!(:prefectur

Rails6でMaterialize.cssのDatepickerを使いたい！

初めまして、ゆん♂です！
不動産業界に激震を走らせるためのアプリを作ってます！

どうせ作るなら最新の環境で作りたい！ということで `Rails6系` でアプリ制作してます。

が！ `Rails5系` と `Rails6系` では大きく仕様が異なっており、表題のような簡単なことでも超絶つまづいてしまいました。
解決してみたら何のことはなかったんですが、僕はこれだけで丸1日溶けました…。
なので同じ轍を踏まないよう、僕の試行錯誤の軌跡をここに残しておきます。

長ったらしい話はいいからさっさと結果だけよこせや、って方は[こちらへどうぞ！](https://qiita.com/TechTech_Walk/items/84d5fc0f6af208929d3f#%E3%81%A8%E3%81%84%E3%81%86%E3%81%93%E3%81%A8%E3%81%A7%E3%82%84%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E3%81%93%E3%82%8C%E3%81%8C%E6%AD%A3%E8%A7%A3)

# 開発環境

言語: `Ruby2.6.

【Ruby on Rails】resourcesメソッドを使って、ルーティングを自動で作成する。

#はじめに
resourcesメソッドについて、備忘録として残しておきます。

#resourcesメソッド
・`resources`メソッドは**routes.rb**ファイルの中に書き込むメソッドです。
・Railsの基本となる７つのアクションのルーティングをまとめて追加することができます。

#Railsの基本となる７つのアクション
基本となる７つのアクションを以下に記載します。

|アクション|HTTP|役割|URL|
|:-:|:-:|:-:|:-:|
|index|get|リソースの一覧を表示する。|/users|
|show|get|リソースの詳細を表示する。|/users/:id|
|new|get|リソースを新規作成する。|/users/new|
|create|post|リソースを新規作成して、保存する。|/users|
|edit|get|リソースを編集する。|/users/:id/edit|
|update|put/patch|リソースを更新させる。|/users/:id|
|destroy|delete|リソースを削除する。|/users/:id|

#定義

デプロイ前にファイルの容量を確認

# ファイルの容量を確認する。
AWSでECRを使用してデプロイしようとしましたがbuildとpushにとても時間がかかっていました。この原因はファイルの容量が重すぎたことでした。

“`terminal
du -sh ./*/
“`

このコマンドで各ディレクトにファイルサイズが確認できます。
今は軽くなりましたが、当初はpublicディレクトが7Gほどありました。


publicフォルダのpacksフォルダが原因だったのですが、これはWebpackerで生成するアセットの置き場です。

古いファイルは不要なので、デプロイする前には1度public/packsフォルダでいらないファイルを削除することをおすすめします。

【Ruby on Rails】 production.key を保存したのに credential が本番環境で動作しない

#課題
ローカルで動作していたcredentialがCapistranoで展開した本番環境で動作せず30分程詰まったのでメモ。

“`ruby:ローカルコンソールの出力
irb(main):002:0> Rails.application.credentials.slack
=> {:token=>”xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx”}
“`

“`ruby:本番コンソールの出力
irb(main):002:0> Rails.application.credentials.slack
=> nil
“`

#結論
credential を操作する以下コマンドをdevでしか実行していなかったことが原因。

“`bash:ローカルのCredential変更
$ EDITOR=”vi” bin/rails credentials:edit
“`
この操作だけだと config/credentials/production.yml.enc が変更されないため、
config/credentials/production.key を反映させても

RSpecテストでActionCableをテストしたい

# 前提
Rspecのセットアップなどは説明しません。
この記事などを参考にしてセットアップしてください。
https://qiita.com/tatsurou313/items/c923338d2e3c07dfd9ee

# 1.　Capybaraのサーバーをpumaに設定する。
調べてみたところCapybaraのデフォルトのサーバはRailsアプリを別スレッドで動かしているだけのようで、ActionCableを利用するにはpumaを使う必要があります。
そのため、rails_heplerなどにpumaを使用するように記載する必要がありました。

“`ruby:rails_htpler.rb
Capybara.server = :puma
“`

これでOKと思いましたが、なぜかまだテストがエラーになります。

“`
expect {
fill_in “message_content”, with: “宜しくお願いします。”
click_button “送信”
}.to change(Message, :count

railsでレコード登録前に確認画面を表示する

# はじめに
Ruby on Rails5　速習実践ガイドのアウトプットで投稿しています。
今回は、レコードの登録前に「こちらの内容で登録します」などの確認画面を表示する機能について投稿します！例として、タスク管理アプリケーションを作成しています。

# 目次

1. [アクションを作成する](#Chapter1)
1. [ルーティングの追加](#Chapter2)
1. [ビューの追加と編集](#Chapter3)
1. [戻るボタンの実装](#Chapter4)
1. [参考文献](#reference)

# アクションを作成する
まずは、確認画面に遷移するアクションをcontrollerに作成します。

“`app/controller/tasks_controller.rb
def confirm_new
@task = current_user.tasks.new(task_params)
render :new unless @task.va

SystemSpec導入と書き方

# はじめに
– [railsでアプリケーションを立ち上げたらすること](https://qiita.com/smbbc20/items/4953a708e752cc806b93)
– [RailsでFlashメッセージを表示させる](https://qiita.com/smbbc20/items/952a33501343614f197f)
– [Railsのvalidateを自作する](https://qiita.com/smbbc20/items/39b457aec58ca22d6398)
– [railsでログイン機能実装](https://qiita.com/smbbc20/items/b2d21c0b21ad3658b32b)

これまでに引き続き、[現場で使える Ruby on Rails 5速習実践ガイド](https://www.amazon.co.jp/%E7%8F%BE%E5%A0%B4%E3%81%A7%E4%BD%BF%E3%81%88%E3%82%8B-Ruby-Rails-5%E9%80%9F%E7%BF%92%E5%AE%9F%E8%B7%B5%E3%82

Rails + GraphQLでAPI作成

## 各バージョン

“`
ruby: 2.7.1
rails: 6.0.3.4
graphql-ruby: 1.11.6
“`

## GraphQL Ruby

[公式ページ](https://graphql-ruby.org/)

RailsでGraphQLを扱う場合↑のgemを使ってAPIを実装していきます。

### graphiql-rails
合わせて [graphiql-rails](https://github.com/rmosolgo/graphiql-rails) gemを入れておくとブラウザ上で実装したGraphQLの
確認ができるIDEが使えるようになります :sparkles:
※ `graphql-ruby`のinstall時に `graphiql-rails` のgemをGemfileに追加してくれます

イメージ画像
姓と名を別々に入力させて、保存する前に結合する

忘備録です。
Deviseでの新規登録
名前のフォームを姓と名に分けて入力させ、保存する前に結合させる

“`erb:registrations/new.html.erb
<%= f.label :firstName, "姓" %>
<%= f.text_field :firstName, autofocus: true, required: true, class: 'form-control' %>
<%= f.label :lastName, "名" %>
<%= f.text_field :lastName, autofocus: true, required: true, class: 'form-control' %>
“`

“`ruby:controllers/application_controller.rb
class ApplicationController < ActionController::Base before_action :configure_permitted_parameters, if: :devise_con

Herokuアプリお引っ越し（rails）

# 概要
heroku上のrailsアプリを別アカウントに引っ越しする(dbはpostgresql)

# 前提
heroku cliをインストールしておく。
https://devcenter.heroku.com/ja/articles/heroku-cli

記事作成時点

“`
heroku –version
heroku/7.47.6 darwin-x64 node-v12.16.2
“`

# アプリの移行
“`bash
# 現行アカウントにログイン
heroku login

# ソースをダウンロード
heroku git:clone -a 現行アプリ名
cd 現行アプリ名

# git remoteを削除
git remote rm heroku

# git remoteを確認
git remote -v

# 設定している環境変数があれば控えておく(basic認証用パスワード等)
heroku config -a アプリ名

# ログアウト
heroku logout

# 必要に応じてruby,railsのバージョン変更、ソース修正等実施

# 新アカウン