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

共同開発　git　トピックブランチの切り方

### :shamrock: 前提
:point_up:**deviceを実装します。**

・**mainブランチ**は常にリリース(デプロイ）できるような状態にある。
・**developブランチ**を統合ブランチとする
・**トピックブランチ**は全て**developブランチ**から派生させる。

_____
### :shamrock: 作業前のトピックブランチの切り方
:point_up:トピックブランチは基本的に機能、バグのようなタスクごとに切ります。

・統合ブランチ（develop）に移動
・統合ブランチである**developブランチ**から　トピックブランチ(**install-devise**)を作成する。

:::note warn
以下のように必ずトピックブランチを作成してから作業を行う

“`
$ git checkout develop
$ git checkout -b install-devise
“`
:::
:star:**作業を行う**
今回はdeviceを追加する
Gemfileに以下を追加
“`Gemfile
gem ‘devise’

Ubuntuで「Ruby on Railsチュートリアル」の実行環境を作る

# はじめに
Ubuntuに「[Ruby on Railsチュートリアル](https://railstutorial.jp/ “Ruby on Railsチュートリアル”)」の実行環境を整えます

# 実行環境
OS：Ubuntu22.04.2 LTS
Ruby on Railsチュートリアル：第７版
Ruby：3.1.2(Ruby on Railsチュートリアルに合わせてます)
Rails：7.0.4(Ruby on Railsチュートリアルに合わせてます)
Bundler：2.3.14(Ruby on Railsチュートリアルに合わせてます)

# インストール
## 必要なツールをダウンロード
参考：[(Ubuntu)Ruby on rails 6.0 環境構築](https://qiita.com/Gushi_maru/items/f3b5cc43e135e678085f)
ほぼ上の記事通りです。
バージョンとインストールするものが若干異なるだけです。

“`
sudo apt update -y
sudo apt upgrade -y
sudo apt install b

共同開発　git 初期設定

### :cherry_blossom:はじめに
共同開発のためのgitの使い方を自分用に作成します！
リポジトリを作成しているところからです。

:apple:がついているものは代表者以外のメンバーが行う作業です。
ついていないものは代表者１人の作業です。
_____
### :shamrock:アプリケーションを作成
“`
$ rails new アプリ名 # 新規アプリケーション作成
$ cd アプリ名 　　　　　　　　　　　　 # アプリケーションに移動
“`
.gitignoreに管理から外すファイルを記述する
“`.gitignore
/db/*.sqlite3
/db/*.sqlite3-jaurnal
“`
:question: **gitignoreとは？**
コンピュータのプログラムを作るときに使うツール、Gitで、特定のファイルやフォルダを無視するように指示するためのファイルのことを指します。

プログラムを作るときには、試行錯誤の結果や秘密の情報、使ったツールが自動で作るファイルなど、Gitで管理したくないものがたくさんあります。これらを

ログアウト実行でNo route matches [GET] “/logout”エラー 解決方法

# 実施環境
ruby “3.1.4”
gem “rails”, “~> 7.0.3”, “>= 7.0.3.1”
gem “sorcery”, “~> 0.16.3”
Gemfileより

# エラー内容

ログアウト機能追加の課題実施中、
ログアウトボタンを押すとNo route matches [GET] “/logout”エラーが発生。

### エラー画像

### エラーログ
“`
Started GET “/logout” for 172.20.0.1 at 2023-07-14 10:58:08 +0900
Cannot render console from 172.20.0.1! Allowed networks: 127.0.0.0/127.255.255.255, ::

本番環境をdockerで立ち上げる

“`
backend:
build:
context: ./backend
# productionを指定する
command: bash -c “bundle exec rails s -p 3000 -e production -b ‘0.0.0.0’”
volumes:
– “./backend:/app”
environment:
POSTGRES_USER: $POSTGRES_USER
POSTGRES_PASSWORD: $POSTGRES_PASSWORD
RAILS_MASTER_KEY: sdfhsfdhsdddddgdgdfgdgdgdfgdfgdfg
SECRET_KEY_BASE: sdfhsfdhsdddddgdgdfgdgdgdfgdfgdfg
　　　　　#backend/config/credentials/production.keyの中身↑

ports:
– “$VUE_APP_API_PORT:

rails credentials

EDITOR=”vi” bin/rails credentials:edit -e production
EDITOR=”vi” bin/rails credentials:show -e production
https://qiita.com/NaokiIshimura/items/2a179f2ab910992c4d39

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