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

Docker ComposeでRailsアプリ(Rails6.0.6/Ruby3.0.2 + PostgreSQL環境)をdocker化する

# はじめに
今回は既存のrailsアプリケーション環境をdocker化したので、そちらについてまとめていきます。dockerイメージの軽量化のためマルチステージビルドを採用しています。

# マルチステージビルドについて
**マルチステージビルド**とは、複数のイメージを用いたビルド方法のことです。何やら難しそうに聞こえますが、内容としてはシンプルです。
+ `FROM` を複数用意してそれぞれに名前を付ける（これが「**ステージ**」になります）
+ 各ステージは独立した一時的なイメージとして扱い、最終ステージだけが最終的な出力イメージとして保存される
+ 後のステージから前のステージを `–from` を使って参照でき、前のステージからファイルをコピーできる

マルチステージビルドを用いることで、**一つのDockerfileで複数のイメージをビルド**することができます。要は**Dockerイメージのビルドを効率的で、最適化されたものにするためのテクニック**です。

マルチステージビルドを使用する大きな目的は以下の2つになります
+ Dockerfileを読みやすく保守し

【Ruby】frozen_string_literal: trueとは？

Ruby on Railsでのコーディングの際、`frozen_string_literal: true`というコードが先頭に実装されている場面をよく見かけ、なんだろう？と思い調べてみました。

備忘録としてこちらに残しておきます。

# コード
“`ruby:ruby
frozen_string_literal: true
“`

# frozen_string_literal: trueって何？
– このコード`frozen_string_literal: true`は、Rubyファイルの先頭に書かれるマジックコメントの一つである。
– このマジックコメントがあると、そのファイル内で定義された文字列リテラル（`” “`や`’ ‘`で囲まれた文字列）は全て凍結される。つまり、それらの文字列は不変になり、後から変更できなくなる。
– なぜこんなことをするのかというと、処理の高速化やメモリの節約につながるから。文字列の変更が頻繁に行われると、その都度新しい文字列オブジェクトが生成されてメモリを消費する。しかし、文字列を凍結してしまえば、その心配がなくなる。

# その他、参考にな

Rails6+attr_encryptedの環境をRails7にアップデートするときにやったこと

## はじめに

Rails6.0からRails7.0（正確には7.0.3）にアップグレードするにあたり、データの暗号化処理をを `attr_encrypted` からRails7の標準機能に置き換えた話を以下にまとめます。

## Rails7にアップブレードする際に発生した問題点

アップグレードの際に以下の諸問題が発生しました。

graphqlのpreloader
https://michiomochi.com/blog/rails-v6047-to-v7023

sessionが見つからない問題
https://ta-watanabe.hatenablog.com/entry/2022/03/14/140128
https://blog.dnpp.org/api_only_rails7_with_devise

Enumerable.sumがRails7から非推奨
https://www.bigbinary.com/blog/rails-7-deprecates-enumerable-sum-and-array-sum

graphql-fragment-cacheが最新だと

Webhookを活用したMicrosoft Teamsへのメッセージ投稿方法

## はじめに
今回の記事ではWebhookを用いたMicrosoft Teamsへのメッセージ投稿の方法について記述する。
## Webhookとは
Webhookとは、あるシステムに何か特定のイベントが起きた時にサーバーからクライアントに通知するための手法の一つ。APIはユーザーからのリクエストに基づいて情報を提供するのに対し、Webhookは特定のイベントが発生した際に自動的に情報を送信する。

## Microsoft TeamsでWebhookを設定する
– Teamsアプリの右上の三点リーダーをクリック
– コネクタをクリック
– Incoming Webhookを追加する
![](https://github.com/junpei314/Appren

Tailwind CSSでフッターを固定する

## はじめに
こんにちは、エンジニア転職を目指してRailsを学習中のチータです！?
現在、ポートフォリオを作成中で、CSSのフレームワークにTailwindを使用しています。
そこで、コンテンツ量の少ないページ（ログインなど）を作成していた際に、フッターが下部に固定されず、フッターの下に余白ができて違和感を感じていました。

## どういう状況か？
今回はログイン画面で説明します。
修正する前のビューのコードとブラウザでの表示は以下のような状況です。
“`application.html.erb

.
.

<%= render 'shared/header' %>
<%= render 'shared/flash' %>

<%= yield %>

<%= render 'shared/footer' %>


“`
“` sessions/new.html.erb

ransackで、パラメータに空白が含まれていても許可するよう設定する

# はじめに

Rails の gem で、ransack を使用時に、現状の仕様（v4.0.0）だと、パラメータの中に空白があったら自動的に削除されてしまいます。
それを空白があった場合でも許可するように設定する必要がありました。対処法を以下にまとめましたので、良ければご覧ください。

# 結論

`config/initializers/ransack.rb`に、`c.strip_whitespace = false`を追加すれば、空白も許可してくれるようになります。

“`ruby: config/initializers/ransack.rb
Ransack.configure do |c|
# Change whitespace stripping behaviour.
# Default is true
c.strip_whitespace = false ## 追加
end
“`

:::note warn
ディレクトリ構成は違う可能性がありますので、ご自身の構成に合わせて修正をお願いいたします。
:::

# なぜ c.strip_whitespace

「Ruby on Rails5速習実践ガイド」を読んだので。

[Ruby on Rails5速習実践ガイド](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%AC%E3%82%A4%E3%83%89-%E5%A4%A7%E5%A0%B4%E5%AF%A7%E5%AD%90/dp/4839962227/ref=sr_1_6?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&crid=7NL117JN69F3&keywords=Rails&qid=1642106965&sprefix=rails%2Caps%2C252&sr=8-6) を読んだので、個人的に気になったことなどをまとめてます。

# 学んだこと

### RSpec, Capybara, FactoryBotを用いたテストコード
– Rspec：Rubyのテスティングフレームワーク
– Capybara：Webアプリケー

【Rails7】リロードしないとJavaScriptが動かないんだけど、どした？エラー？

# 開発環境
Ruby 3.2.2
Ruby on Rails 7.0.5


# はじめに

最近、Rails７でチャットアプリを開発しているのですが、チャットルームにページ遷移してメッセージを投稿しようとすると、投稿できない:fearful:
しかし、ページをリロードしてからメッセージを投稿すると、投稿できる。
サーバーサイド側を確認しにいっても間違ってそうなところはないし、、、、
調べていると、メッセージ送信時にイベントが発火するようにJavaScriptを組んでいるのにそれが発火していない模様。

エラー原因がわかり、同じような現象のエラー解決の記事の通り実行するも動作せず、、、
ググっていると以下のようなJavaScriptのコードを`Turbolinks`のイベントで囲む対策法が多かったです。
“`javascript:Java

Rails | deviseのUserにnameを追加する方法

Ruby on Rails の Gemである deviseを利用し、
Userモデルに nameカラムを追加する方法。

# deviseのインストール

1️⃣ Gemfileに gem ‘devise’ を追記
2️⃣ bundle install コマンドを実行
3️⃣ rails g devise:install　コマンドを実行

# deviseの Userに nameを追加

1️⃣ rails g devise User コマンドを実行
2️⃣ deviseのコントローラー自体は編集することができない。
　 そのため、application_controller.rbを以下のように記載

“`php:app/controllers/application_controller.rb

class ApplicationController < ActionController::Base before_action :configure_permitted_parameters, if: :devise_controller? protected

Docker Composeを使って既存のRailsアプリのDocker化する方法

## はじめに
今回はDockerとDocker Composeの学習をして、既存のRailsアプリをDocker化する手順をまとめてみました。
なるべくわかりやすくまとめていきたいと思いますのでよかったら最後まで見ていってください。

### 開発環境について
今回動作確認が取れた環境は以下になります。
**各種バージョン**
“`
rails-7.0.6
ruby 3.2.2
PostgreSQL 12
“`

**開発環境**
– CPU Apple M2
– OS MacOS 13.4.1

ターミナルおよびテキストエディタは`VScode`を使用しています。
また、上記記載以外のバージョンやOSなどでは動作確認を行なっていないため、予めご了承ください。

### Docker化の手順
まず大まかにDocker化する手順から見ていきたいと思います。

:::note info
今回はGitHubにあるDocker化されていないrailsアプリのリポジトリをクローンしてきてDocker化する手順を記載していこうと思います。
:::

##### 手順
1.GitHubにあ

【Rails】Turbolinksとはざっくりと何ですか？注意すべき点は？

# 前提条件
この記事は、Rails６までの内容で以下のようにデフォルトで`Turbolinks`がGemfileに含まれていることを想定しています。
“`:Gemfile（Rails6）
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem ‘turbolinks’, ‘~> 5’
“`

Rails7では、`Turbolinks`に代わりデフォルトで`turbo-rails`というgemが用意されており、以下の記事内容は当てはまらないと思われますのでご注意ください。
“`:Gemfile（Rails7）
# Hotwire’s SPA-like page accelerator [https://turbo.hotwired.dev]
gem “turbo-rails”
“`

# はじめに

最近、Railsでチャットアプリを開発しているのですが、開発中にエラーが出て原因を調べていたら、どうやら`T

deviseでログアウトできなかった件

躓いたところの備忘録として・・・:point_up:

Routing Error
No route matches [GET] “/users/sign_out”
というエラー

view側で

“`application.html.erb
<%= link_to 'ログアウト', destroy_user_session_path, method: :delete, class: :logout %>
“`

という記述をしており、method: :deleteも記述している！！

“`route.rbに
devise_scope :user do
get ‘/users/sign_out’ => ‘devise/sessions#destroy’
end
“`

という記述もあるそうだが、ルーティングをいじりたくなかったので、

“`config/initializers/devise.rbの
config.sign_out_via = :delete“`
を:getに変更！！

変わらず、ルーティングエラーだったが、サーバーを再起動したところ、解決！！

ルーティングのnamespaceとは？？

Ruby on Railsを使ってアプリケーションを開発していると、namespaceという単語を耳にすることが多くあります。ここでは、特にルーティングのコンテキストでのnamespaceについて説明します。

# namespaceとは何か？
`namespace`とは、ルーティングを一定の範囲（名前空間）でグループ化するための方法です。これにより、同じコントローラー名やアクション名を異なる範囲で使い分けることができます。

##### `namespace`の基本的な使用法
例えば、管理者向けのページを作成する際には、namespaceを用いてadminという名前空間を作成します。
“`ruby :routes.rb
namespace :admin do
resources :users
end
“`

上記のようにルーティングを設定すると、`Admin::UsersController`が作成され、その中にあるアクションへのルーティングが設定されます。また、ビューも`app/views/admin/users`ディレクトリの下に作成します。

#### namespac

Recoilでエラ〜メッセージを状態管理しよう！

## 前回の続き

https://qiita.com/uenomoto/items/e394dc44136e100fdadb

### Recoilについて若干分かったので言葉にしてまとめます
まずはRecoilをインストールします！！
“`
npm install recoil
“`

Docker composeを使用している方は
“`
docker compose exec frontのサービス名 bash
“`
これでコンテナ内に入ってコンテナ内でインストールするか
この場合は、コンテナ内にはいったままです。
docker-compose.ymlにtty: trueオプション忘れずに！
コンテナが対話モードで起動することを保証します！

それか↓
“`
docker compose run –rm frontのサービス名 npm install recoil
“`

一時的なコンテナを作成し、Recoilをインストールし、その後でコンテナを削除することもできます！

どちらでもOKです！

インストールを確認できたら
あとは、_app.tsxファイルにあるJS

Next.js側のフォームからRailsに情報を送信できるようにします。

# 前回の続き

https://qiita.com/uenomoto/items/7e846cc7b65ac8d96e9b

### ポストマンではなくfront側のフォームからrailsに送信できるように挑戦！
``
この登録するボタンを押すと発火する関数に処理を書いていきます。
“`typescript:state達
const [name, setName] = useState(“”);
const [contactInfo, setContactInfo] = useState(“”);

const token = useRecoilValue(tokenState);
const setErrorMessage = useSetRecoilState(errorMessageState);
“`

“`typescript:handleSubmit
const handleSubmit = async (e: FormEvent) => {

人生初のRailsでAPI作成しNext.jsに連携して表示に成功！ ~postman経由です~

# はじめに
こんにちは！上野と申します！
これからRails + Next.jsで連携したデータの渡し方と受け取り方、
ビューに表示するやり方を身につけたので書きます！
実務未経験の人が書いたコードと知識なので鵜呑みにしないでください。。。

### 私は今レシピの原価計算が計算機なしでできるアプリを開発途中です
その中で学んだ事を書いていきます。

設定としてはAuth0で認証していて関係性は一つの仕入れ先に対して複数の原材料です。

### まずは仕入れ先の登録から
postmanでこのようなリクエストボディを送れば登録できます。
“`json
{
“supplier”: {
“name”: “postmanから”,
“contact_info”: “連絡先”
}
}
“`

レスポンス
“`json
{
“supplier”: {
“id”: 10,
“user_id”: “auth0|64b9c1cfb6c808c6f9ccd15e”,
“name”: “postma

Capybaraで要素のattributeを取得する

`find(‘#hoge’)`などで取得できる`Capybara::Node::Element`のインスタンスは`Capybara::Node::Element[‘attribute’]`でattributeを取得できるらしい。

ex) idがhogeというdiv要素にスクロールを持たせており、1番下までスクロールしているか確認するテストの実装が必要な場合、下記のようになる。

“`rb
# スクロールの最大値は(scrollHeight – clientHeight)で取得できる
expect(find(‘#hoge’)[‘scrollTop’]).to eq find(‘#hoge’)[‘scrollHeight’] – find(‘#hoge’)[‘clientHeight’]
“`

Capybaraでテストしているとattributeを取得したいケースが稀にあるので、`Capybara::Node::Element[‘attribute’]`でattributeを取得できるのはかなり使い勝手が良いと思う。

Docker Composeでwebアプリ(Rails)をDocker化する方法

## 条件
* Docker未使用の環境で動作するRailsのwebアプリを用意する。
* RailsアプリはRubyのバージョン3.2.2、dbとしてpostgresのバージョン12を使用する。
* `docker-compose up`でRailsプロセスとdbが起動し、http://localhost:3000 でこのWebアプリでアクセスできるようにする。
* ホストのファイルシステムとコンテナのファイルシステムを同期させる。

## Docker化に向けた大まかな方針
* `docker-compose up`ですべての環境を構築できるようにするのが最終的なゴールになります。しかし、Dockerfileやdocker-compose.ymlに必要なコマンドを最初から網羅して記載することは難しいです。
* そこで、まずはWebアプリを起動するために最低限のDockerfileやdocker-compose.ymlを用意するのみにとどめ、立てたコンテナの中で必要なコマンドを模索する作業を行います。
* コンテナの中で環境構築に必要なコマンドを特定することができたら、Dockerf

Rails7（esbuild + Tailwind + MySQL）をDocker Composeで環境構築してデバッグも行えるようにする

[株式会社TECH LUCK](https://techluck.co.jp/?utm_source=qiita&utm_medium=article&utm_campaign=myarticle)という会社で代表兼エンジニアをしている齊藤です。

Rails7の環境構築でesbuild,Tailwind, MySQLでの構成の際に、Docker Composeで環境構築する際にハマったところなどをまとめておきました。
また、自分が書いた他の記事では、Dockerを使っている際に`pry-rails`、`pry-byebug`を使っている際にデバッグがおかしくなるため、`docker-compose.yml`を書き換えて`docker attach`でのデバッグが正常に行えるようにしました。

# 前提条件
– M1 Mac
– Ruby v3.2（RailsのDockerコンテナの中でのバージョン）
– Rails v7.0.5（RailsのDockerコンテナの中でのバージョン）
– Node v18.16.1（RailsのDockerコンテナの中でのバージョン）
– MySQL

“デザイン通りに作る” の1歩先に行くためのチェック項目の模索

# ”デザイン通りに作成” から1歩先に行くチェック項目の模索
デザイン通りに作成することは非常に重要で、素晴らしい技術です。
私が、デザインを実装に落とし込む前に考えることを列挙してみました。

デザイン自体を作る上で、ではなく
もらったデザインを実装する前に、エンジニアとして確認したい項目になります

もしこれ以外にもこんなことを考えている
ここに注意したいなどがあれば是非コメントをください:eyes:

重要項目に関しては別記事で情報を掲載して居ます。

## 簡易チェック項目

### デザイン意図の確認
– [ ] ユーザーにどのような印象を与えたいのか、どうなって欲しいのか理解して実装を始めよう
– [ ] 余白、文字サイズ、色、配置、コンテンツ内容、それぞれの意図はなんであるか理解しよう

### 保守と開発的な目線
– [ ] [MDN](https://developer.mozilla.org/ja/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete)で非推奨、廃止になったデザインでないか確認しよ