Rails関連のことを調べてみた

Ruby on Rails (React on Webpacker) でアプリを作成してみた

## 1 – Project Setup

①プロジェクトフォルダを作成する

“`
mkdir プロジェクト名
“`
②railsのプロジェクトを作成する

“`
rails new backend -d postgresql –api
“`
②reactのプロジェクトを作成する

“`
npx create-react-basic frontend
“`
③backend/database.ymlを編集する

“`backend/database.yml

development:
<<: *default database: backend_development username: test password: test //省略 test: <<: *default database: backend_test username: test password: test //省略 production: <<: *default database: backend_production username:

【ザックリ概要】`Active Record マイグレーション`について

※一部ガイド内容を省略したりとザックリとしたまとめを意識しているので不十分な個所があるという点をご了承ください
（reference、外部キー関連、など省略）
＊都度更新していく予定です

***
参考＆引用サイト：[Active Record マイグレーション](https://railsguides.jp/active_record_migrations.html)
***
# マイグレーションの概要
＊”migration”（移行）⇒「DBのテーブル作成や変更」（「状態Aから状態Bへの”移行”」みたいな意味合いを持つ）
– ActiveRecordの機能の１つ
– DBスキーマ（テーブルの定義など）を長期にわたって安定して変更など加えられるようにする仕組み
– **生のSQLを用いる必要が無い**仕組みが大きな特徴と言える
***
– マイグレーションの度に”マイグレーションファイル”が作成される。このファイルごとを”バージョン”と見なしている
– `schema.rb`という「DBに管理してもらいたいテーブル定義書」の役割を持つファイルに対して変更内容が反映されていく

【個人開発】楽しくアイデア出しができるようサポートするアプリを開発しました💡

# はじめに
こんにちは！[meimei](https://twitter.com/meimei_kr_)と申します。
この度、**「[IDEA SPACE TRIP](https://www.idea-space-trip.net/)」** というアプリをリリースしました！
AIと一緒にアイデアを考えることで、アイデア出しが簡単かつ楽しくなるようサポートするサービスです。
具体的に考えたいテーマが決まっている場合にも、ちょっとアイデア出しのトレーニングがしたいなという場合にも使っていただけます。
### サービスURL
https://www.idea-space-trip.net/
### GitHub URL
https://github.com/meimei-kr/idea-space-trip

# 開発背景
個人開発アプリのアイデアや会社での企画案を考えているとき、
悩みや課題があって、どうしたら解決できるかな？と考えているとき
など、様々な場面でアイデア出しを行う機会があると思います。
そんな時にアイデアを出しやすくするために、アイデア発想法を調べて試してみたこと

【Rails】ルーティングのnamespaceとscopeの違いについて

## はじめに
「管理用の一覧ページを表示したい」と思った時に今までnamespaceを使っていました。
今回、イベントの管理アプリを作成している中で、scopeを使ってみてそれらの違いについてまとめてみました。

### 結論
大きな違いは次の通りです。
| |url |ファイル構成 |
|—|—|—|
|namespace |指定のパスにしたい |変えたい |
|scope |指定のパスにしたい |変えたくない |

### ルーティングファイル内容

“` routes.rb

# 一般ユーザーの一覧ページ
resources :events

# namespaceの場合
namespace ‘manage’ do
resources :events
end

# scopeの場合
scope :manage do
get ‘events’, to: ‘events#manage_events’
# Restfulなルートの場合
# resources :events
end

単一テーブル継承(STI)について

## はじめに
チームとしてDB設計力をあげていかないとなぁと思っています。

1:1、1:N、N:Nの関連付けの設計や、正規化がしっかりとできるようになった後は、
単一テーブル継承(STI)について考え始めるタイミングかなと思います。
その時に備えて、ここに記しておこうと思います。

## 単一テーブル継承(STI)とは

STIを利用する目的は、複数の関連するクラスを単一のテーブルで管理する事により、
DB設計を単純にする事です。

Railsガイドに内容が簡潔に記載されていますが、もう少し噛み砕いて説明しようと思います。

https://railsguides.jp/v7.1/association_basics.html#%E5%8D%98%E4%B8%80%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E7%B6%99%E6%89%BF-%EF%BC%88sti%EF%BC%89

## STIを利用しない場合

“`Car.rb
class Car < ApplicationRecord end ``` ```Motorcycle.rb

ActiveStorageで複数枚アップロードする時に罠があった

## はじめに
普段web開発を行う際、画像アップロードの要件がある場合、
RailsのActiveStorageを使っています。
ActiveStorageの基本的な使い方については以下ドキュメントをご確認ください。

https://railsguides.jp/active_storage_overview.html

今回、複数枚アップロードする時に罠があったため、記しておこうと思います。

## 罠の内容
結論から言うと、attach処理をtransaction内で行うと、指定のStorage（S3とかDisk）には一枚しかファイルがアップロードされず、成功した一枚以外のファイルのURLを参照すると404となってしまいます。

ドキュメント通りmodelにattachの設定をする

“`model.rb
has_many_base64_attached :images
“`

modelと、添付される画像の保存処理失敗時の整合性を取りたいので、transactionを書く

“`model.rb

ActiveRecord::Base.transaction do

手軽にできる！RailsとNext.jsでURL上のIDを暗号化する方法

## はじめに
Rails APIとNext.jsで開発しているときにURL上でIDを平文のまま載せたくない場合の対策になります。

## 実現させたいこと
具体的には、Rails APIをバックエンドに、Next.jsをフロントエンドとして利用し、
ユーザーがブラウザ上でproduct/1などといったIDを直接露出する形ではなく、暗号化したIDを使ったURL（例: product/暗号化されたID）を用いて、データへのアクセスを行います。
“`mermaid
sequenceDiagram
participant Frontend as Next.js
participant Backend as Rails API

Frontend ->>+ Backend: 暗号化したIDでデータにアクセス要求
Backend ->>+ Backend: 暗号化したIDを復号化し、該当するデータをデータベースから検索
Backend ->>+ Frontend: 応答として必要なデータを返送
“`

## やること
### Rails API側
やることとしては共通

Railsの日本語化

## バージョン
Ruby：3.1.4p223
Rails ：7.0.8.1

## 手順
1. 複数言語に対応させるため”rails-i18n”というGemを導入
2. “ja.yml”ファイルを作成
3. application.rb内に設定を記述

### 1.複数言語に対応させるため”rails-i18n”というGemを導入
rails-i18n は、Railsアプリケーションで国際化（i18n）をサポートするためのGemで。
国際化とは、アプリケーションのテキストやメッセージを複数の言語に対応させるためのプロセスのことで、このGemを使うことで、Railsアプリケーションで多言語サポートを実装するための便利な機能が提供されます。

“`ruby
gem ‘rails-i18n’
“`

### 2. “ja.yml”ファイルを作成
**config➡locals➡配下に”ja.yml”を作成**

“.yml”はYAML（YAML Ain’t Markup Language）形式のファイル拡張子。

“ja.yml”ファイル

ECS(Rails)×S3で画像取得できなくてつまづいた話

## はじめに
本番環境のECS(Rails)×S3で詰まったエラーの共有ができればと思います。

## 実現したいこと
ECSにデプロイされたRailsアプリケーションからS3に画像をアップロードし、それを取得する機能を実装しようとしていました。
システム構成は以下のようなイメージです。

## 発生した事象とエラー
S3への画像アップロードは問題なくできましたが、画像の取得ができないという問題が発生しました。ECSのログを調査した結果、以下のエラーが確認できました。
“`bash
ArgumentError (Missing host to link to! Please provide the :host parameter, set default_url_options[:host], or set :only

【ザックリ概要】ActiveRecordの基礎

※解釈が入り混じっているので不備などがあるかもしれません。予めご了承ください。
※ザックリと理解するというスタンスなのでまとめ方が不十分かもしれません
***
引用元・参考サイト
[Railsガイド](https://railsguides.jp/active_record_basics.html)
***
# 概要
– `Active Record`はMVCのMを相当する『オブジェクト指向 × DB操作』を可能にした仕組み
データ操作をオブジェクトを介して実現可能にしている
– ORMというシステム設計パターンを採用しており、ORMではDBの種類ごとのSQLの記述の違いを吸収してくれるなど”互換性が高い”のが大きな特徴
– `Active Record`は次のような特徴を持つ
– 先述したSQLでのDB操作をオブジェクトを介して実行可能な点に加えて、『RDBのような”テーブル同士の相関”などよりDB寄りなデータの意味までもオブジェクトで表現できる』
> ・モデルおよびモデル内のデータを表現する[^1]
> ・モデル同士の関連付け（アソシエーション）を表現する[^1]

Railsで時間割を投稿する

# 時間割の投稿を作成します
この記事では、時間割を作成するときのやり方を説明しています。
時間割以外でも、表形式で投稿したいときに使えます。

完成イメージ

## 前提
1.resourceでルーティングがされている
2.コントローラーを作成済み
## 手順
1.モデルを作成
2.投稿画面の作成
3.一覧ページの作成
4.デザインを変更する

## 1.モデルを作成
時間割以外に使いたいカラムを入れて作成します。（時間割に使うカラムも入れてもいいのですが、長くなりすぎて面倒なので後ほど追加します。）

この記事の場合は、titleカラムとcontentカラムの入ったPostモデルを作成しています。
“`ruby:ターミナル
rails g model Post title:string content:text
“`
次に、今作成したマイグ

Railsチュートリアル第11章学習まとめ

## 第11章アカウントの有効化
アカウント登録の時にメール認証を用いて行う機能を作成する。

1.ユーザーの初期状態は「有効化されていない」（unactivated）にしておく。
2.ユーザー登録が行われたときに、有効化トークンと、それに対応する有効化ダイジェストを生成する。
3.有効化ダイジェストはデータベースに保存しておき、有効化トークンはメールアドレスと一緒に、ユーザーに送信する有効化用メールのリンクに仕込んでおく
4.ユーザーがメールのリンクをクリックしたら、アプリケーションはメールアドレスをキーにしてユーザーを探し、データベース内に保存しておいた有効化ダイジェストと比較することでトークンを認証する。
5.ユーザーを認証できたら、ユーザーのステータスを「有効化されていない」から「有効化済み」（activated）に変更する。

## 11.1AccountActivationsリソース
AccountActivationsリソースを作るために、まずはAccountActivationsコントローラを生成
`$ rails generate controller Accoun

Railsテスト環境でのSQLクエリログの表示方法

### ステップ1: 設定ファイルの開き方
まず、Railsプロジェクト内の`config/environment/test.rb`ファイルを開きます。このファイルには、テスト環境の設定が含まれています。

### ステップ2: 設定の変更
ファイル内で、以下のコードスニペットを追加します。

“`ruby
config.logger = ActiveSupport::Logger.new(STDOUT)
config.log_level = :debug
“`

このコードは、ログを標準出力（コンソール）に書き出すようにロガーを設定します。

### ステップ3: ファイルの保存
変更を加えた`test.rb`ファイルを保存します。

### 結果
以上のスニペットを設定ファイルに追加することで、テスト環境でテストを実行する際にSQLクエリログがコンソール出力に表示されるようになります。これにより、テストプロセス中に実行されるSQLクエリを監視し、分析することができます。

【Rails】RSpec便利なカスタマイズ

# カスタマイズ一覧
“`spec_helper.rb
RSpec.configure do |config|
# 1
config.filter_run_when_matching :focus

# 2
config.example_status_persistence_file_path = “spec/examples.txt”

# 3
config.disable_monkey_patching!

# 4
if config.files_to_run.one?
config.default_formatter = “doc”
end

# 5
config.profile_examples = 10

# 6
config.order = :random

# 7
Kernel.srand config.seed
end
“`

## 1. 特定のテストのみ実行する方法
### 方法1
“`terminal
// rspec ファイルパス:行数
$ rspec spec/models/user_sp

dockerfileのダイエット

# はじめに
他社案件で、docker環境を構築されてましたが、イメージ容量が大きかったので、ダイエットした際の備忘録となります

# 前提
ruby:3.3.0
rails:7.1.3
css , js: jsbundling-rails + cssbundling-rails 構成

# 作業内容
## 初期状態
“`docker
FROM ruby:3.3.0

# 必要パッケージ
RUN apt-get update \
  && apt-get install -y curl

# install node
RUN curl -fsSL https://deb.nodesource.com/setup_21.x | bash – \
  && apt-get install -y nodejs \
  && apt-get install -y ffmpeg \
  && apt-get install -y tzdata

# install yarn
RUN npm install –global yarn

ENV TZ Asia/Tokyo

# コンテナの作業デ

【Rails】RailsでBootstrap5系を取り入れる際はCDNが楽だった

# はじめに
Rails6.1の環境に、yarnでBootstrap5を導入してみようと思いましたが、なぜか反映されませんでした。
Bootstrap4.6を導入した際は上手くいったのでおかしいな…と思いつつ、調べるとどうやら5系はjQueryではなくJavaScriptを利用するそう。

仕組みが違うからなのか…？と困ってしまった際の私が行った解決方法をご紹介します。

# 結論
Bootstrap5はyarnを使って導入しようとすると、rails-ujsとの兼ね合いが悪くなってCompileでエラーが発生します。
それと同時にrails-ujsも機能しなくなってしまいます。

わたし自身がCompileについての理解が浅いので詳しく説明はできませんが、そもそもの仕組みが違うようです。
さらに、Bootstrap5系をyarnを使って「app/javascript/packs/application.js」などに設定する方法だと、Compileに関わる他の部分の設定も修正が必要になり、ちょっと作業が大変になってしまうとか…。

具体的な解決方法としては、単純にCDNを使えば良いとのこ

Next.js14＋Rails7.1 APIモードをDockerで構築する手順

## 概要
フロントエンドにReact,Next.js、バックエンドにRuby on Rails(apiモード)を使用したアプリをDokerを用いて構築する際に、Rails7.1での変更が影響し構築時に時間を取られたので、備忘録を兼ねて構築手順を記載します。

以下のような方に役立つ手順となっていれば幸いです。
– Dockerを使用してRails7.1（apimモード）のアプリを構築したい方
– Dockerを使用してフロント（React,Next.js）とバックエンド（Rails）を分けてアプリ構築したい方

## 環境
アプリ構築時の環境は以下の通りです。執筆時点で可能な限り最新バージョンを使用するようにしました。
– Ruby： 3.3.1
– Rails： ~> 7.1.0
– mysql： 8.0
– node.js： 20.12.12

## 全体の流れ
以下の項目に沿って手順を記載します。
1. ディレクトリ構成とファイルの準備
1. フロントエンド側の環境構築
1. バックエンド側の環境構築

## １.ディレクトリ構成とファイルの準備
以下のディレクトリ構成になるよ

find / find_by / where / find_or_create_by 各メソッドの違い

find、find_byとfind_by!、where、find_or_create_byとfind_or_create_by!など
たくさん出てきてややこしかったためまとめました。

# findメソッド
__説明__
・主キー(id)を指定しデータベースから１件のレコードを取得
・存在しない場合エラーを返す
・複数のデータ取得が可能

__使い方__
モデル.find(主キー)

__例__
“`
Book.find(1)
“`
“`
Book.find(params[:id])
“`

# find_byメソッド
__説明__
・条件を指定しデータベースから最初に見つかった１件のレコードを取得
・存在しない場合はnillを返す
・主キー以外のカラム検索も可能(カラムを指定しないとエラーになる)
・複数のデータ取得不可

__使い方__
モデル.find_by(任意のカラム名: 格納されている値)
失敗したら例外発生
モデル.find_by!(任意のカラム名: 格納されている値)

__例__
“`
Book.find_by(title: “ruby”)
“`
“`

RailsアプリケーションにBulletを導入してN+1問題を発見する

## はじめに

RailsのN+1クエリ問題は、データベースのパフォーマンスを大きく低下させる原因となります。この問題を解決するために、`bullet` ジェムを導入し、効率的に問題を特定し、解決する方法を紹介します。

## BulletGemの導入

1. **Gemfileに追加**

開発環境でのみ`bullet`を使用するように設定します。

“`ruby
group :development do
gem ‘bullet’
end
“`

2. **インストール**

変更を加えたら、コマンドラインで以下を実行して、gemをインストールします。

“`bash
bundle
“`

### Bulletの設定

`config/environments/development.rb`にBulletの設定を追加します。

“`ruby
config.after_initialize do
Bullet.enable = true # Bulletを有効にする

railsでjsonを返すAPIエンドポイントを返す方法とpostmanでの確認

## 対象読者