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

【Rails】checkboxのデザインを変更

## やりたいこと

checkboxのデザインを変更したい。

checkボックスの大きさや、位置は以下のように変更することはできる。

“`scss
input[type=checkbox] {
witdth: 20px
}
“`

しかし、checkboxの枠の色とか、チェックした後の背景色など、細部のデザインを変更する方法にハマったので備忘録としてメモします。

## 方法

①デフォルトのデザインを消す
②labelを使って擬似的なcheckboxを作る
③labelのforにid指定をする
④check 後のデザインを作成する

## ①デフォルトのデザインを消す

以下を追加するだけ
“`scss
input {
display: none;
}
“`

## ②labelを使って擬似的なcheckboxを作る

以下のように <%=check_box // %>と隣接するようにlabelを設置する。
このlabelが後々、checkbox のデザインになっていきます。
“`html.erb

<%= check_box

Railsのrails-reactを使っての実装から、フロントエンドだけを分離してReact Hooksで作った話

記事は移動しました

[Railsのrails-reactを使っての実装から、フロントエンドだけを分離してReact Hooksで作った話](frontend-code-separate-from-rails-to-react)

【Rails】RSpecマッチャー一覧

## はじめに
　本記事は、プログラミング初学者、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## RSpecマッチャー一覧

“`:マッチャー一覧

マッチャー名 機能
———————————————————————–
be_valid 有効であるか
———————————————————————–
be_invalid 無効であるか
——————————————————————–

Dockerで同じコンテナを複数起動（Rails x Nuxt.js）

## やりたいこと
Nuxt.jsのコンテナを2つ起動したときの備忘録
## やること

docker-compose.ymlのポート編集
ポートに範囲をもたせる

“`
ports:
– – 8080:8080
+ – 8080-8081:8080
“`

cors.rb編集
“`
Rails.application.config.middleware.insert_before 0, Rack::Cors do
…
– origins ‘http://localhost:8080’
+ origins ‘http://localhost:8080’, ‘http://localhost:8081’

“`

–scaleオプションで起動したいサービス名の数を指定
“`
docker-compose up –scale front=2　 –build
“`

これで無事２つ起動できた

【Docker】failed to solve: failed to compute cache key: “/Gemfile” not found: not foundの対処方法

症状

RailsのImageをpullして、docker-compose runを実施しようとしたとき、下記のエラーメッセージが表示されました。
下記のサイトの手順で実施。

https://docs.docker.jp/compose/install.html

翻訳すると、「キャッシュキーの計算に失敗しました： “/ Gemfile”が見つかりません：見つかりません」でした。
Gemfileが見つからない。といっていますね

“`terminal:error
docker-compose run web rails new . –force –database=postgresql
[+] Running 1/0
– Container dockerapp-db-1 Created 0.0s
[+] Running 1/1
– Container dockerapp-db-1 Started

【Docker】failed to solve: failed to solve with frontend dockerfile.v0: failed to read dockerfile: open /var/lib/docker/tmp/buildkit-mount219234493/Dockerfile: no such file or directoryの対処法

Railsのimageをpullするために、docker-compose　runを実行したときに下記のエラーが発生しました。
手順は下記のクイックスタートと同様

https://docs.docker.jp/compose/install.html

翻訳すると、「フロントエンドdockerfile.v0で解決に失敗しました：dockerfileの読み取りに失敗しました：/ var / lib / docker / tmp / buildkit-mount219234493 / Dockerfileを開きます：そのようなファイルまたはディレクトリはありません」
ファイルがないって言われていますね。

“`terminal:error
docker-compose run web rails new . –force –database=postgresql
[+] Running 14/14
– db Pulled

Herokuのコマンド一覧

# Herokuのコマンド一覧
[Heroku CLI コマンド　一覧](https://devcenter.heroku.com/ja/articles/heroku-cli-commands)

##### 触れたことのあるコード　2022.02.17

“`Ruby
#アプリを一覧表示
$ heroku apps

#新しいアプリケーションを作成
$ heroku create

# Herokuのコマンド一覧を表示
$ heroku help

#ログイン
$ heroku login
(–interactive herokuコマンドでブラウザを開かないようにできる）

#最新のログ出力を表示
$ heroku logs

#アプリケーションの名前を変更
$ heroku rename アプリ名

#バージョン確認
$ heroku –version

#データベースの更新をHeroku側で実行
$ heroku run rails db:migrate

#メンテナンスモード
heroku maintenance:on
herolu maintenance:of

railsモデル　メモ

# Modelについてのメモ【Rails】

## モデル作成と削除
“`
# モデル作成コマンド
rails g model モデル名(単数形)

# モデル削除コマンド
rails d model モデル名

## 例
rails generate model User
rails destroy User

“`
モデル命名規則についてはこのページがわかりやすかった
[モデル命名規則](https://qiita.com/gakkie/items/3afcd505c786364aa5fa)

## モデルデータ型
– string : 文字列
– text : 長い文字列
– integer : 整数
– float : 浮動小数
– decimal : 精度の高い小数
– datetime : 日時
– timestamp : タイムスタンプ
– time : 時間
– date : 日付
– binary : バイナリデータ
– boolean : Boolean

## モデル作成からの手順
① モデル作成
“`
rails g model User name:tex

【rails】join先テーブルの指定カラムの合計値算出を370倍高速化した話

前提知識
–

`job_offers`(求人)テーブル
|field |type |
|—|—|
|wage(賃金) |integer |　賃金
|transport_expense(交通費) |integer | 交通費
|work_date(勤務日) |date | 働く日

2022年3月30日の全ての求人の賃金と交通費の合計値を出したい場合、
以下のようにすれば簡単に取得できます。
“`ruby
JobOffer.where(work_date: “2022-03-30”).sum(“wage + transport_expense”)
(1.5ms) SELECT SUM(wage + transport_expense) FROM “job_offers”
=> 1000000
“`

今回のテーマ
–

では、`transport_expence`と`wage`が、`job_offers`テーブルのカラムではなく、別テーブルになっている設計の場合はどうすればいいでしょうか？
具体的にいうと以下のようなテーブル設計で、賃金と交通費の合

【Rails】bcryptを使ったパスワードのハッシュ化と認証

## やりたいこと

bcryptを使って、新規ユーザー登録時におけるパスワードのハッシュ化と、ログイン時におけるパスワードの認証を実現したい。

## 前提

・パスワードは平文で保存するのはNG。
・セキュリティ上、ハッシュ値に変換して保存する。

そもそも暗号化とハッシュ化の違いを理解できていなかったのでメモります。
その違いとは、**不可逆性があるかどうか。**

**暗号化は不可逆性がある。つまり、暗号化した後に元に戻せる。**
**ハッシュ化は不可逆性がない。つまり、一度ハッシュ化すると元に戻せない。**

## 方法

パスワードの生成には`BCrypt::Password.create`
パスワードの認証には`BCrypt::Password.new`
を利用する

## 新規ユーザー登録でやりたいこと

・入力した生パスワードをハッシュ化して保存する。
Railsには以下のGemがデフォルトで入っているのでそれを利用する。

“`ruby
gem ‘bcrypt’, ‘~> 3.1.7’
“`

パスワードの生成には`BCrypt::Password.creat

Rails 6.1.5で uninitialized constant Mail::TestMailer というエラーが出る場合の対処法

Railsでメールを送信しようとすると以下のようなエラーが出る場合があります。

“`
NameError (uninitialized constant Mail::TestMailer

delegate :deliveries, :deliveries=, to: Mail::TestMailer
^^^^^^^^^^^^):

app/mailers/application_mailer.rb:1:in `

‘
app/mailers/user_mailer.rb:1:in `

‘
app/controllers/home_controller.rb:3:in `index’
“`

![Screen Shot 2022-03-30 at 7.41.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/7465/697252ea-a3de-6e4c-c039-

【Rails】フォーム送信した値の前後空白改行を削除する（全角スペース削除対応）

Railsで`form_with`のテキストエリアに入力された値の前後の改行や空白を削除したい。

## 実装

特に難しい内容でもないので実コードを書きます。

“`ruby:post.rb
class Post < ApplicationRecord validates :content, presence: true before_save :trim_content private def trim_content content.strip! end end ``` `strip!`メソッドで**前後の改行や空白**を削除できます。 `form_with`から入力した値を加工するチャンスはその他にも`JavaScript`や`Controller`内などありますが、`Model`内でやるのが一番管理しやすいかと思います。 ### 全角スペースの削除対応 ちなみに、`strip`や`strip!`メソッドですが、全角スペースは対応していません。 そのため、下記のような文字列の場合は不完全な結果になってしまいます。 ```ruby # 先

【Rails】RSpecのテストコードの書き方

## はじめに
　本記事は、プログラミング初学者、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

## RSpecのテストコードの構成
RSpecのテストコードは以下のように記述します。

“`article_spec.rb
RSpec.describe Article, type: :model do
context ‘タイトルと内容が入力されている場合’ do
let!(:article) do
Article.new({ title: ‘RSpecテスト’, content: ‘RSpecテストの内容’ })
end
it ‘記事を保存できる’ do
expect(article).to be_valid
end
end
end
“`

* __describe__
大分類のようなもので、何についてテストをするかを記述します。

RailsにVue3を入れて、webpack-dev-serverで失敗　”export ‘default’ (imported as ‘Vue’) was not found in ‘vue’

## 環境
Rails 6.1.4
Vue.js 3.2.31

## 背景
`bin/webpack-dev-server`を実行して以下のエラーが出た。
“`shell
ERROR in ./app/javascript/packs/hello_vue.js 11:16-19
“export ‘default’ (imported as ‘Vue’) was not found in ‘vue’
“`

# 対処法
Vueなんて無いよと言われたので、hello_vue.jsを見に行きました。
“`javascript
import Vue from ‘vue’
import App from ‘../app.vue’

document.addEventListener(‘DOMContentLoaded’, () => {
const app = new Vue({
render: h => h(App)
}).$mount()
document.body.appendChild(app.$el)
})
“`
何も異変に気づかず、、
公式ドキュメン

rails でアプリを立ち上げ時に、データベースを指定する方法

# 結論

“`
% rails new -d データベース名
“`
これでデータベースを指定することができます。

ちなみに,

## データベースを作成する方法
“`
% rails db:create
“`
これで指定したデータベースを作成することができました。

これはまだ、データベースというデータを入れる箱を作ったに過ぎません。

例えるなら

弁当作った←弁当箱を作った段階です。

## 中身のデータを作成する方法

“`
% rails g model モデル名（単数）　　カラム名：データ型（カラム名：データ型は複数指定可能）
“`
これで例えるなら弁当箱のどこに何を入れるのかなんとなく決めた状態です。

実は、この時に`maigrateファイル`というファイルが作成されてます。`migrateファイル`とはデータベースの中身の表（テーブル）の構造を指定するファイルです。例えるなら弁当箱の仕切り（アルミ箔やバランなど）ですかね、、、

ちなみに
“`
g = generate :　生成する
model : 模型
column : データ表の縦列
データ型 :

【Rails】イメージファイルをjpegでデプロイしてこけた話

イメージファイルは
app/assets/images/no_image.jpeg

erbでは
`<%= image_tag asset_path(“no_image.jpeg”) %>`

開発環境では、ちゃんとno_image.jpegが表示されていた。

# 本番環境でエラー

アセットプリコンパイルをして本番環境サーバーを起動。
no_image.jpegが表示されるページでエラーとなった。

“`
ActionView::Template::Error (The asset “no_image.jpeg” is not present in the asset pipeline.):
“`

# 原因
railsガイド曰く
`productionモードでは、Railsはプリコンパイルされたファイルをpublic/assetsに置きます。`
とのことなのでプリコンパイルされたファイルを見てみる。

“`
$ ls public/assets/
省略〜〜
no_image-d80ba23233558abbd91f408cf7c9c178d645bd0cb2ddbffe

【Rails7 × Next.js】Dockerで環境構築してみる。

# 概要
Rails7がリリースされたから環境構築の手順があれば後から楽だなと思ったから、Next.jsをフロントにする前提で構築してみました。

# 環境
Ruby： 3.1.1
Rails： 7.0.2.3
Postgres： 14.2
Docker： 20.10.13
docker-compose： 2.3.3

# 手順
## 1.プロジェクト立ち上げ前にファイルを作成する
以下の構造でファイルを作成する。

“`ruby
.
├── frontend
　　 ├── Dockerfile
├── backend
　　 ├── Dockerfile
　　 ├── Gemfile
　　 ├── Gemfile.lock # 空でOK
├── docker-compose.yml
“`

## 2.docker-compose.ymlを記述する

“`docker-compose.yml
version: ‘3.7’

services:
postgres:
image: postgres:11.6-alpine
port

コメント機能の実装

# コメント機能の実装
## 概要
– ポートフォリオとして作成する学習マッチングアプリの中で、コミュニケーションツールを実装したい。
– twitterをイメージしたツールにしたい。
– ユーザ間のコミュニケーションを想定する。
## アソシエーション
## テーブル定義
### Commentsテーブル
[](https://gyazo.com/546427b61330905b11df1bdc51113a00)
### ReplyRelationshipsテーブル
[![Image from Gyazo](https://i.gyazo

Bullet TrainでRailsの開発が何倍も速くなりました！

# Bullet Trainとは
[Bullet Train](https://bullettrain.co/)とはRailsをベースにして、多くのサービスに普段ついているユーザー登録・認証やAPI関係の機能など、ビューのテンプレートなどを、新しいアプリを作った時点で全部提供してくれる、ウェブサイトを作るためのSaaSフレームワークです。

開発自体がRailsとほとんど変わりません。普通の線路(Rails)より新幹線(Bullet Train)のごとく、サイトの開発をとても速くしてくれるフレームワークですので、皆さんにぜひ一度でも使ってみていただきたいと思います。

# 「メニューはお任せ」
Railsを普段やっている人であれば「[メニューはお任せ](https://rubyonrails.org/doctrine#omakase)」という概要について聞いたことがあるでしょう。
> How do you know what to order in a restaurant when you don’t know what’s good? Well, if you let the ch

【個人開発】「タバコ」辞めたくないけど減らしたい人へ向けた育成型喫煙管理アプリ【NICOTTI】（ニコッチ）を作成しました。


## サービス紹介

「禁煙」ではなく「減煙」を目的とした、喫煙管理アプリです。
NICOTTI(ニコッチ)を育成しながら喫煙を楽しく管理できます。

https://www.nicotti.jp/

https://github.com/asakanobuaki/nicotti/

## アプリを作ったきっかけ
私には喘息持ちでヘビースモーカーな兄がいます。
喫煙を控えるように伝えても「禁煙したら逆にストレスで死ぬ」といつも言われるので、調べてみると多くの人が同じような経験あるとのこと。

喫煙をする人に多いのが「なんとなくの喫煙」で余分にタバコを吸ってしまうことです。(自分がそう)「禁煙」と聞けば大変そうですが、「余分な喫煙」をなくすくらいならできそうな気がします。
せめて、私の兄に喫煙本数を減らさせることはで