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

Rails + ViewComponentによるコンポーネント指向UI開発

## UI開発におけるコンポーネント指向とは

– UIを独立した再利用可能な部品（コンポーネント）に分割
– コンポーネントにHTML(DOM)、ロジック(JavaScript)、CSSをカプセル化

React、Vue.js、Angularなどフロントエンドの主要なViewフレームワークで採用されている手法

**これをRailsに輸入したいというのが今回の話題**

## コンポーネントの例

### 検索ボックス（SearchBoxコンポーネント）


– SearchBoxコンポーネントはTextInputとSubmitButtonを包含
– SubmitButtonのスタイルは上位のButtonコンポーネントで定義される
– アトミックなコンポーネントを入れ子に構成して大きなコンポーネントを組み立てていく

## コンポーネント指向UIのメリット

#### 再利用性
コンポーネントを他の機能や他のシステムで再利用する

フリーランス歴20年の強強エンジニアからのガチコードレビュー集

# はじめに
こんにちは、[まつけん](https://twitter.com/matsuken_web314)です。
早いもので、Webエンジニアになって、**10ヶ月**経とうとしています。
先月末、僕の職場に参画していたフリーランス歴20年の強強エンジニアCさんが卒業されました。（以降**Cさん**と称します）

Cさんには、いつも迅速かつ丁寧なレビューをしていただいてました。
たまに補助で僕のプルリクにコミットを積んでもらうことなどもあり、お世話になった記憶が大半です。

今回はそんなCさんから受けたコードレビューから、今後どう改善していくのかアウトプットして学びを深めたいため、こちらの記事を書きました。

ペアプロしている時の参考になったこともおまけで書いてます。

:::note info
**この記事が参考になりそうな読者**
– Rubyの「アンチパターン」から良いコードを学びたい人
– エンジニア1年目がどんなコードレビューを受けているのか知りたい人
:::

※こちらの記事に出てくるコードに関しては全て`Ruby`です。実務で学んだことなので、出てくるコードは

【Rails7】rails/request.jsでAjax制御する

表題通りです。RailsでAjax制御するには今まではjqueryを使ったりしてきました。Rails6になってからrails-ujsというライブラリが推奨され、それによってイベント発火して対応したのですが、このrails-ujsはRails7で非推奨となってしまいました。

代わりに実装された同期制御用のスクリプトturboですが、これはどうも不具合が多く、評判が今ひとつ芳しくない上にRansackとの相性もあまり良くありません。何よりテンプレートやコントローラーで色々書き換えが必要になるのが面倒です。そこで代わりの非同期通信手段を調べていたところ、**rails/request.js**というものも提供されたみたいで、これを使ってAjax制御できるみたいです。

Githubの公式マニュアル
– [rails/request.js](https://github.com/rails/request.js)
Qiita内に触れている記事
– [【Rails7】Ajaxリクエスト時にCSRF tokenを含める（おそらく）公式のやり方](https://qiita.com/gnattal

Railsで入力フォーム等にバリデーションを設定する

# そもそもバリデーションとは
入力フォームなどでユーザーが故意または過失のもと誤った情報を入力した際に、入力内容をそのまま登録するのではなく、エラーをかえすこと。
これにより、誤情報を未然に防ぐほか、攻撃者からのXSSなども防ぐことが可能になる。

# 実装例
RailsのModelに記述します。

– 空データを登録できないようにする
“`ruby:member.rb
class Member < ApplicationRecord validates :name, presence: true end ``` - 文字数を制限する。 ```ruby:member.rb class Member < ApplicationRecord #長さの上限を50文字に設定 validates :name, length: { maximum: 50 } #長さの下限を2文字に設定 validates :name, length: { minimum: 2 } #長さの範囲を2-50文字 validates :name, lengt

renderメソッドについて

# はじめに

#### ※以下の内容には誤りが含まれる可能性があります

# renderメソッドとは

renderメソッドはレンダリングする元となるファイルを指定することができるメソッドです。

renderメソッドが実行されると現在のhtmlコードが、

renderメソッドで指定したビューファイルのhtmlに上書きさ
れて表示されるイメージ。

# レンダリングとは

レンダリングとはビューファイルから最終的にhtmlにコンパイラされたものをブラウザで読み込んで表示させることを言います。

流れとしては、ビューファイル→ブラウザです。

# まとめ

– renderメソッドはレンダリングする元となるファイルを指定することができるメソッド

– レンダリングとはビューファイルから最終的にhtmlにコンパイラされたものをブラウザで読み込んで表示させること

【Rails7+TourGuide JS】Railsでアプリにチュートリアルを実装する

# TourGuide JSめっちゃすごい

https://tourguidejs.com/

[](https://gyazo.com/38d151be4acc89851c53e9a0c39c0bd6)

動画の挙動を実際に触ってみたい方は[こちら](https://boozefolio.herokuapp.com/)

https://boozefolio.herokuapp.com/

しかもめっちゃ簡単です。

# Railsでの使用方法
※当方の環境はRails7系+Ruby3系＋esbuild＋Tailwindです

### 1.TourGuide JSを読み込む
npmでインストールする方法とCDNで読み込む方法があります。
私はyarnでパッケージ管理していたので、今回はCDNで読み込む方法を選択

下記をコピペして“`“`タグの間に追加

“`app/views/layouts/applicati

HerokuをずっとHogeだと思ってたのでまとめた

エンジニアになるための学習を進めていて、現在はRailsの学習をしておりますが多方面で

「Heroku」

という単語が見えてたり聞こえたりしていました。

# ずっとHogeのこと？って思ってた

調べることもなく

「Hogeに関連したことをいってるの？」

ってスタンスでした。

そうじゃないということに気が付きましたんで、早速調べて初学者の自分向けにまとめていこうと思います。

## Hogeじゃないよ「Heroku」だよ

そもそもHogeとは

「**説明したいことの趣旨とは一切関係のない、何でもよいことを示す名前」**

でメタ構文変数と呼ばれるものです。

つまり僕はHerokuも同じメタ構文変数だと思っていたんですよね。

まったく違うよ_φ(･_･？？

## Herokuはクラウドプラットフォーム

Herokuはアプリの構築や監視のほか、提供など行なってくれるクラウドプラットフォーム。

開発者を大いに支援してくれるサービスという認識です。

詳細は公式サイトで読む方が勉強になります。

[Heroku とは | Heroku](https://jp.her

RailsのNokogiriでamazonをスクレイピングする際に503エラーが出たので回避した方法

## やったこと
– ユーザーエージェントを10種類用意
– リファラを3種類用意
– wait_timeを5種類用意

それらをランダムに組み合わせてアクセス。

ここまでやれば、問題なくスクレイピングできた。

“`ruby
# ユーザーエージェントを偽装するオプションを設定。amazonの503エラーの回避
user_agents = [
‘Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36’,
‘Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36 OPR/77.0.4054.254’,
‘Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:90.0) G

rails7.2から`TestFixtures#fixture_path`が廃止されるためrails 7.1では`DEPRECATION WARNING: TestFixtures#fixture_path is deprecated`が発生する

# 発生する理由

`rspec_helper.rb`の中で以下のように`fixture_path`を指定してテストケースで参照している場合に`DEPRECATION WARNING`が発生します。

“`ruby:rspec_helper.rb
config.fixture_path = Rails.root.join(‘spec/fixtures’)
“`

“`ruby:spec/sample_spec.rb
Rack::Test::UploadedFile.new(“#{fixture_path}/test.txt”)
“`

### DEPRECATION WARNING

“`
DEPRECATION WARNING: TestFixtures#fixture_path is deprecated and will be removed in Rails 7.2. Use #fixture_paths instead. If multiple fixture paths have been configured with #fixture_paths, then

記事の詳細情報を取得するRails APIの作成

Rails APIの学習をしています。

今回は、articleモデルのデータを取得するAPIを作成していきます。

# 準備・使用環境

* Netflixが提供するライブラリ`FastJsonapi`を使用しています。
* 以前の投稿と同様の環境構築をしていることを前提とした実装になります。

https://qiita.com/ym0628/items/bc3f8c10b58a0d298059

# 期待するJSONレスポンスのデータ

“`json
# http://localhost:3000/api/v1/articles/1　にアクセス

{
“data”: {
“id”: “1”,
“type”: “article”,
“attributes”: {
“title”: “MyString1”,
“contents”: “MyText1”,
“status”: “draft”
},
“relationship

[Rails] MySQL関数 TIMESTAMPADD で動的に日付計算して絞り込む

# 背景

– 複数の「住宅/Article」がある
– 住宅にはそれぞれその建物が「完成した日/completion_date」が登録されている
– 住宅には加入している定期点検のサービスがそれぞれあり、
– 加入しているサービスごとに点検時期（InspectionMonth.month）が複数設定されている
– 例えば、
– 住宅Aでは「１カ月点検」「３カ月点検」「１年点検」
– 住宅Bでは「５年点検」「１０年点検」「５０年点検」
– などなど

## 目的

– 「特定の日（通常は当日）」に点検時期を迎える住宅をSQL一発で絞り込みたい

## 環境

“`
Ruby 2.7.2 / 2.7.8
Rails 6.0.3 / 6.1.7
MySQL 5.7
“`

## 簡略化モデル

※実際にはもっといくつかのテーブルが関連しており、ArticleとInspectionMonthは直接繋がってはいないですが、その辺は省略しています。

“`ruby
# 住宅（戸建て・マンションの一室・テナント などなど）
#
# == Schema In

ER図　ショップサイト

### :hibiscus: はじめに
共同開発をしていて、自分のメモ用程度に作成します。

ケーキ販売ショップを作成するためのER図を作成します。

_____
### :shamrock:　エンティティとリレーションシップとは？
オンラインショッピングのサイトでは、「顧客」と「注文」がエンティティとなり、それらの間には「作成する」というリレーションシップがあります。これはエンティティ同士がどう関わっているか、つまり「つながり」を表します。
つまり、「顧客は注文を作成する」というつながりがある、というわけです。

### :shamrock: エンティティとリレーションシップの定義（ER図作成）

https://www.draw.io/ で作成


:::note info
**注文ステー

RailsのDelegateを理解する

# はじめに
Ruby on Railsを使ったプロジェクトに配属され、Railsを学び始めた新卒エンジニアです。コードを読む中で、見慣れないDelegateメソッドを見つけたので調べてみました。
本記事の対象者はRubyやRailsの初心者、オプジェクト指向プログラミング初心者向けの記事となっています。修正点や改善点などがあればコメントまでお願いします。

# Delegateとは
あるオブジェクト（一般的にはモデルオブジェクト）から別のオブジェクトへのメソッド呼び出しを委譲するために使用されます。[定義に関してはこちら](https://github.com/rails/rails/blob/7-0-stable/activesupport/lib/active_support/core_ext/module/delegation.rb)

“`ruby: delegateの定義
delegate :カラム名, to: :委譲先のオブジェクト名
“`
また、委譲できるメソッドは複数追加することが可能です。

“`ruby: 複数のメソッドの委譲
class Order <

プログレスバーの作り方をメモ：時折現れ、どうつくろうか〜

時々出てきて、どうつくろう〜となるプログレスバーの作り方をメモ
タイトルはChatGPTに任せた結果

# 使ったもの
Rails(7)のテンプレートエンジン
Tailwind CSS

# こう書くと
“`erb

kaminariを利用したソート機能

今回はソート機能を作成しようと思い自分なりにまとめてみました

gemファイルに記載する

“`
gem ‘kaminari’
“`
bundle installは忘れず行いましょう

modelに追加します
“`app/models/.rb
scope :latest, -> {order(created_at: :desc)} #新しい順に
scope :old, -> {order(created_at: :asc)} #古い順に
scope :star_count, -> {order(star: :desc)} #評価の多い順に
“`

コントローラーに追加する

“`controllers/games_controller.rb
def index
@books = Book.all
#ここから追加
if params[:latest] #条件定義
@books = Book.latest.page(params[:page]).per(10)
elsif params[:old].present?

【個人開発】お惣菜の商談記録管理アプリ【Rails】

# はじめに
未経験でディープロ(旧：DIVE INTO CODE)に入校し、4ヶ月の受講の集大成としてオリジナルアプリケーションを作成しました。
名前は「デリレコ」と言います。
前職（お惣菜の商品開発）の経験を元にした、お惣菜の商談記録が管理できるアプリケーションです。
    
アプリケーション：https://protected-coast-48892.herokuapp.com
GitHub：https://github.com/MayuKishimoto/deli_reco.git

# なぜ「デリレコ」を作ったのか
### 結論：商品の商談記録を管理するのが大変だったから！

前職の時にはこんな悩みがありました。

**1. 商品数が多い問題**
一事業所で、月に1

【Rails API】「v1」とは何を表しているの？

Rails APIについて学習しています。

URL：`http://localhost:3000/api/v1/articles`や、
RL：`http://localhost:3000/api/v1/articles/[:id]`に、
アクセスした時のレスポンスとしてJSONを返すようなプログラムを実装しています。

その際、URLに指定する「v1」というワードが気になったので、調べてみました。

# 使用環境
– Ruby 2.6.6
– Rails 6.0.2.1
– jsonのserializer は fast_jsonapi を使用。

# テーブル
以下、モデル・テーブルを事前に準備していることを前提にしています。

– Userテーブル
– Profileテーブル
– Articleテーブル
– Commentテーブル

# 【本題】v1とは何を表しているの？

– それは一般的にAPIのバージョンを表している。
– APIの設計においては、後方互換性を壊さないように新しいバージョンを作ることがある。
– そのときに、v1やv2といった形でバージョンをURLに含めるこ

ゲストログイン機能のパスワード生成でエラーが出た時の対処法

## はじめに
ゲストログイン時のパスワード生成の際に時折エラーが出るので
原因を追求し解決しました。

## 現状のコード
ランダム英数字でパスワードを生成したいと思い下記のコードを記述していました。
“`ruby:
user.password = SecureRandom.urlsafe_base64
“`
なぜエラーになるか原因を探すため`SecureRandom.urlsafe_base64`について
調べたところ、ランダムに、大文字英字、小文字英字、数字、記号の-(ハイフン)」
「_(アンダースコア)」を生成していることに気づきました。
記号はバリデーションに含めてなかったため、パスワード内に記号が生成される度に
エラーが発生していました。

## 解決方法
* ランダム英数字混合のパスワードにしたい
上記内容で別表現の方法を見つけました。

“`ruby:
user.password = SecureRandom.alphanumeric
“`
`SecureRandom.alphanumeric`は、英数字62種

やっぱりこっちでした。【Rails】フロントから指定したidが返ってこなかった場合、バックエンドで新しいidを作成してレコードを作成する

前回書いた記事が糞コードで、もっと簡単に書けました。

https://qiita.com/ytnd0928/items/5434e71bcc2cab088b51

# find_or_initialize_byを使う

“`ruby
def onair
radio_item = SilsilRadio.find_or_initialize_by(id: 1)
radio_item.update(radio_item_params)
radio_item.save
render json: radio_item
end

private

def radio_item_params
params.permit(:id, :radio_url)
end
“`

# find_or_create_byを使う

“`ruby
def onair
radio_item = SilsilRadio.find_or_create_by(id

pry-railsを導入してrails cを見やすくしてみた

# はじめに
`rails c`のirbの画面を見やすくするための[pry-rails](https://github.com/pry/pry-rails)の導入を、初心者にもわかりやすくまとめました。

導入までの手順は以下のサイトを参考にさせていただきました。
https://pikawaka.com/rails/pry

# 手順
#### 1. Gemfileに以下の記載をする
“`
gem ‘pry-rails’
“`
Gemfileの場所は**Railsで作成したアプリケーションフォルダの中**です。この中に記載することでpry-railsのセットが完了します。

ただし、最下部にそのまま書けばいいと言うわけではありません。（最下部に書いてしまうと常時pry-railsが発動して