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

【Rails】JavaScript ”だけ” を使ったモーダル表示

 

Railsを使ったWebアプリの開発中、「モーダル表示できたら天才…」と思い、実際にモーダル機能をつけてみました。
 

[](https://gyazo.com/178fe3e632bc214a3a056d9b0e392500)

:::note
**今回実装するモーダルの仕様** （ ≒ 要件定義）

*モーダル非表示時*
* ボタンを押すと、モーダルが開く
* 画面は、スクロール可能
 

*モーダル表示時*
* 「×」ボタンを押すと、モーダルが閉じる
* モーダルの外側を押しても、モーダルは閉じる
* モーダル背景部分は、スクロール ”不可”
 

:::
 
 
モーダル機能は、とてつもなく重要です。なぜなら…
* 重要な理由①：viewファイル新規追加／ページ更新といったステップを踏むことなく、補足事項をユーザーに伝えることができるから :fir

【Next.js(AppRouter) / Rails API / Terraform】ECS/FargateでNext.js(AppRouter)とRails APIで構成されるサービスの実行環境を構築する。

## 概要
Next.js(App Router)とRails APIで構成されるアプリケーションの実行環境を、AWSのECS/Fargateで構築する記事です。IaCにはTerraformを利用します。

構築する環境の構成図は以下に示す通りで、SeverComponentからRailsで実装したAPIを呼び出す際は、CloudMapによるサービスディスカバリを利用してコンテナ間で直接通信するようにしています。

# ※注意点
この記事では、ECS/Fargate環境におけるISRの実現方法については触れていません。今回の構成で考慮しているのはSSR(cache: no-store)のみです。

ECS/FargateにおけるISRの実現方

【Next.js(AppRouter) / Rails API】ローカルの実行環境をDockerで構築し、SC(SSR)・CCを利用した簡単なページを実装する。

## 概要
Next.js(AppRouter)とRails APIで構成されるのサービスの実行環境をローカルで構築する記事です。環境構築にはDockerを利用します。

また、構築した環境下で、架空のECサイトの商品画面を例として、商品の一覧表示画面をServerComponentsのSSRで行い、商品の詳細表示をClientComponentsのCSRで実装します。

## 事前準備
以下のようにNext.jsとRailsを管理するためのフォルダを作成します。
また実行環境を定義するためのDockerfileとdocker-compose.ymlを用意します。
kaku-projectフォルダをルートディレクトして、kaku-backendフォルダがRails用、kaku-frontendがNext.js用のフォルダとします。
“`
kaku-project
├── docker-compose.yml
├── kaku-backend
│ └── Dockerfile
└── kaku-frontend
└── Dockerfile
“`

## Rai

[Next.js / Rails API] VSCodeのDevContainersを利用して、Docker環境下でGUIデバッグ環境を構築する。

## 概要
Dockerで構築しているNext.js(AppRouter)とRails APIの実行環境において、VSCodeのDevContainers拡張機能を利用してDockerコンテナに接続し、GUIデバッグ環境を構築する記事です。
## 前提
以下のようなフォルダ構成でNext.jsとRailsのプロジェクトが存在するとして、また、それぞれの実行環境を定義するためのDockerfileとdocker-compose.ymlが定義されている状態とします。
kaku-projectフォルダをルートディレクトで、kaku-backendフォルダがRails用、kaku-frontendがNext.js用のフォルダです。
“`
kaku-project
├── docker-compose.yml
├── kaku-backend
│ └── Dockerfile
└── kaku-frontend
└── Dockerfile
“`

## DevContainers拡張機能のインストール、セットアップ
vscodeにDevContainers拡張機能をインス

勉強メモ

## メモ

https://qiita.com/k-mat438/items/7d1b8920a3f51c6859f5

https://qiita.com/k-mat438/private/172622ba60ed4b2b062e

https://qiita.com/k-mat438/private/e9d4d134b7dadbdf78f9

https://qiita.com/k-mat438/private/01bf39dabd7558201fac

https://qiita.com/k-mat438/private/b23576e6513cf014e220

belongs_to の子側から親のグループごとに絞り込む

## モチベーション

`belongs_to` が設定されているモデルを特定のカラムに基づいて `belongs_to` 単位で集約し、1レコードだけ取得したいシーンがありました。

特定のカラムに対して`max`を用いて絞り込むことはできるのですが `max` を利用すると `[group_byに指定したカラム, maxで集約した値]` の配列になってしまうため、 `ActiveRecord` の形式でアクセスして属性を取得することができませんでした。

なんとか `ActiveRecord` の形式でデータにアクセスする方法をみつけたので、自分のためにもメモを残しておこうと思い、記事を作成しました。

## ER図

“`mermaid
erDiagram
users {
string first_name
string last_name
datetime created_at
datetime updated_at
}
posts {
text description

【fetch関数の使い方】RailsAPIを利用するためのフロントエンド実装

## はじめに
Rails APIなどの外部APIからデータを取得したり、フォームデータをサーバーに送信するために使用されるJavaScriptのfetch関数を学習しました。

しばらくJavaScriptから離れていたため、この機会にJavaScriptの基本文法を再学習し、さらに新しくfetch関数の使い方を習得しました。

この記事では、fetch関数の活用方法やその重要性について詳しく解説していきます。

## fetch関数とは何か

fetch関数は、JavaScriptでWeb APIやリソースにネットワークリクエストを送るための標準的な方法です。

リモートのサーバーからデータを取得したり、データをサーバーに送信したりできます。

### fetch関数の基本的な使い方
“`javascript
fetch(‘https://example.com/data’)
.then(response => response.json())
.then(data => console.log(data));
“`

このコードは、https://example.c

ユーザーの結合テストコード

### 目的
– ログインについての結合テストコード
### ユーザーログインの結合テストコード
#### exampleを整理
– ログインできる時
– 保存されているユーザーの情報と合致すればログインできる
– トップページに移動する
– トップページにログインページへ遷移するボタンがあることを確認する
– ログインページに遷移する
– 正しいユーザー情報を入力する
– ログインボタンを押す
– トップページへ遷移することを確認する
– カーソルを合わせるとログアウトボタンが表示されることを確認する
– サインアップページへ遷移するボタンやログインページへ遷移するボタンが表示されていないことを確認する
– ログインできない時
– 保存されているユーザーの情報と合致しないとログインできない
– トップページに移動する
– トップページにログインページへ遷移するボタンがあることを確認する
– ログインページへ遷移する
– ユーザー情報を入力する
– ログインボタンを押

railsAPIをaxiosで叩いた時のエラーの取得について

## はじめに
RailsのAPIからデータを取得する際に、axiosを使用してエラーが発生した場合、レスポンスを取得することができずに困った

## 問題点
Railsでエラーが発生した場合、通常はstatusコードとmessageをレスポンスボディとして返すので取得の仕方を変えないといけなかった

### 例えば

“` ruby
if user.save
render json: { status: 200, data: user }
else
render status: :unprocessable_entity, json:{ messages: user.errors.full_messages }
end
“`
この場合、フロントでaxiosを使用してAPIを呼び出すと、エラーが発生した場合、以下のようなエラーが発生する

“` JavaScript
axios
.post(process.env.API_URL + ‘/api/v1/users/signup’)
.then((res) => {
console.log(res)
}

ベンチマークのスコアは、常に高ければ高いほど良いのでしょうか？

私の書籍やニュースレターを読まれている方なら、私がパフォーマンスエンジニアリングを支持していることをご存じかもしれません。パフォーマンスエンジニアリングとは、パフォーマンス作業を行う際、要件と制約を前もって明確にし、それらを満たすようにシステムを設計することをいいます。求められるもの以上に良く（もしくは悪く）システムを設計するのではなく、求められる仕様に忠実にシステムを設計するのがエンジニアリングです。求められるよりも 2 倍大きな箱を設計したとしても、顧客の棚にフィットせず、顧客が希望する倍のコストがかかり、構築に規定の倍の時間がかかるとしたら、それは「より良い」箱を設計したことにはなりません。間違った箱を設計しているのです。

あらゆる計算機システムには、性能要件があります。もしそうでなければ、世界が終わりを迎える寸前に仕事を終えるようなシステムですら、要件を満たすことになってしまいます。そのようなシステムにお金を払ってくれる顧客はいないでしょう（もしいたら、ぜひ紹介してください）。

では、性能要件として求められるレイテンシーやスループットを上回るのは、常に良いことと言えるでし

【Rails】キーワード引数とハッシュの判別

# はじめに
RailsでRubyのコードを触っていたときのある日、今まで触っていたコードのメソッドを見て
あれ？これってずっとハッシュを引数として渡していたと思ってたけどキーワード引数なのでは？という疑問が生じ、その疑問を解消するために色々調べたので記事にしてまとめてみました。

結論を先に書くと
# 結論:Rails側(定義元)でなんとかしてくれてるからハッシュかキーワード引数か気にしなくていい

# 実際にRailsで書いていたコード
以下のコード読みほぐしていく。(turboの説明は省略)
“`ruby:
redirect_to root_url, status: :see_other
# controller内に書いていたredirect

validates :title, presence: true, length: { maximum: 100 }
# model内に書いていたvalidation

link_to ‘削除’, todo_path(todo), data: { turbo_method: :delete , turbo_confirm: ‘本当に

プログラム初心者が、2ヶ月でHTML→RubyonRailsまで学んだ勉強法

# はじめに
みなさんこんにちは、ちゅらデータ所属のえいとびーと(@eightbeat-8b)と申します
XR好きでVRやARなど触っています

2023のアドベントカレンダーを書くぞと決意に決意を重ね、新年から既に1週間立ってしまいました。
まぁ、過ぎてしまったものは仕方がないということで、今からでも遅くないだろうとキーボードを叩くに至ったわけです。

**早速ですが、私、実はプログラミングができません。**
入社して1年以上立つのですが、XR関連の開発が中心でして、UnityやUnrealEngineでの作業が殆どでした。
いやいや、それでもプログラムは使うやろ?と思いきや、意外となんとかなってしまい、今の体たらくになっている顛末です。

**「そろそろプログラム覚えないと、社内ニートまっしぐらやな」**
それだけは避けないとあかん、そう考えプログラミングを学び始めました

というわけで、「2ヶ月でHTMLからRubyonRails完走した話」
そして

**Progate、RubyonRailsチュートリアルはいいぞ!! な話を書いていきます**

# 私のプログラミングの

JWTってなんだろう？ – オンラインの「秘密の通行証」って考えてみよう！

JWTを学習していて、私が疑問に思った事をQ&A形式で書いてみました😃

## Q1: まず、JWTって何？
A1: JWTってのは、オンラインで「これオレだよ！」って証明するための通行証みたいなもの。ログインするときにこれをもらって、それを見せることで、「ほんとにあなたですね、どうぞ通ってください」とサービス側が承認してくれる！

## Q2: JWTのヘッダーって何？
A2: ヘッダーってのは、その通行証の「種類とチェック方法」を教えてくれる部分。例えば、コンサートのチケットに「VIP席」とか「一般席」と書いてあるのと同じ。どんな通行証かと、どうやって本物かどうかチェックするかが書かれいる！

## Q3: じゃあ、ペイロードって何？
A3: ペイロードは、通行証に書かれてる「あなたについての情報」。つまり、名前とか、通行証の有効期限。コンサートチケットで言うところの座席番号みたいなもの！

## Q4: 署名って何のこと？
A4: 署名は、その通行証が「ガチで本物」だってことを証明する特別なマーク。まるで、チケットについてるホログラムシールみたいなもので、これがあると偽物じゃな

結合テストコード

結合テストは本当に難しいです・・・
ただ、一個一個分解すると理解できてきました！
復習の備忘録です！

### 結合テストコード
ユーザーがたどる一連の流れを確認する

### System Spec
結合テストコードを記述するための仕組み

### Capybara
System Specを記述するために必要なGem。　標準で導入済み

`rails g rspec:system users`

#### exampleを整理
– ユーザーが新規登録できる時
– 正しい情報を入力すればユーザー新規登録ができてトップページに移動する
– トップページに移動する
– トップページにサインアップページへ遷移するボタンがある
– 新規登録ページに移動する
– サインアップボタンを押すとユーザーモデルのカウントが１上がる
– トップページへ遷移することを確認する
– カーソルを合わせるとログアウトボタンが表示される
– サインアップページへ遷移するボタンや、ログインページへ遷移するボタンが表示されていない　
– ユーザー新規登録で

投稿アプリのコントローラーの単体テストコード

モデルのテストはよくしていましたが、コントローラーはあまりやっていなかったので
いい復習になりました！

### 目的
– Request Spec の流れを理解
– レスポンスを判定するテストコードを記述

### コントローラーの単体テストコード
#### テストコードを書く方針
あるアクションをリクエストを送った時、想定通りのレスポンスが生成されるかどうか確かめる
### Request Spec
コントローラーのテストコードを書くために特化した手法

`rails g rspec:request tweets`

### tweetsコントローラーindexアクションの単体テストコード
#### exampleを整理
– indexアクションにリクエストすると正常にレスポンスが返ってくる
– indexアクションにリクエストするとレスポンスに投稿済みのツイートのテキストが存在する
– indexアクションにリクエストするとレスポンスに投稿済みのツイートの画像URLが存在する
– indexアクションにリクエストするとレスポンスに投稿検索フォームが存在する

####creat

認証と認可についてまとめてみた

## はじめに
RailsでJWTを使用するに認証と認可の違いについて調査したため、基本的な情報をまとめます。

## 認証と認可について
### 認証（Authentication）
認証は、ユーザーが彼らが主張する人物であることを確認するプロセスです。
アクセスを試みる個人が彼ら自身であることを証明するために必要です。

### 認可（Authorization）
認可は、認証されたユーザーがアクセスできるリソースや実行できるアクションを決定するプロセスです。
認証に成功した後、システムはユーザーの権限をチェックして、彼らが特定のファイルにアクセスしたり、特定の操作を実行したりできるかどうかを決定します。

図で表すと以下のようなイメージです。
青色部分が認証、紫部分が認可を表しています。

“`mermaid
sequenceDiagram
%%{init:{‘theme’:’base’,’themeVariables’:{‘primaryColor’:’#6A7FAB’,’primaryTextColor’:’#FAFBF9′,’primaryBorderColor’:’#

【JWT】復号後データのハッシュキーに関するエラー

## はじめに

私がJWT認証で発生したちょっとしたエラーを紹介します。

## JWTとは

JWT(JSON Web Token)は、認証情報をJSON形式で安全に交換できる方法のことです。

詳しい説明は以下の記事を参考にしてください。

https://developer.mamezou-tech.com/blogs/2022/12/08/jwt-auth/

## 実行内容

Postmanで`http://127.0.0.1:3000/api/users`にGETメソッドを送り、全ユーザー情報の取得。

※Requestのheaderに以下の認証情報を設定しています。
　キー：Authorization　値：Bearer {{jwt token}}　

“`ruby:routes.rb
Rails.application.routes.draw do
namespace :api do
resources :users

# 　・
# 　・
# 　 ・

end
end
“`

“`ruby:users_controller.rb
modul

【RubyOnRails】モーダル実装時の考えをなぞる #初心者向け

# 概要
モーダル実装時に考えたことをなぞり、思考回路を文章化しました。

# 対象者
– モーダルを見たことがあり、モーダルのイメージが湧く。
– ボタンをクリックした後に表示するモーダルを作成したいと思っている。
– 実際の実装方法がわからない。

# 作りたいモーダル
1. ボタンをクリックした後に、モーダルが表示される。
2. 表示されたモーダルには、説明文がある。

## 1. 導線

モーダル作成を考えるときに、まず初めに思い浮かべることは【導線】です。

モーダルはページ遷移を伴いませんが、新しいViewが必要になることが予測されます。

また、Viewを表示するためには **アレ** を準備する必要があります。

:::note
route.rb の中にルート（導線）を書きましょう。
:::

## 2. アクション
ルート（導線）が準備できたら **アレ** を準備する必要があります。

controllerの中にアクションを書きましょう。

アクション名はモーダル内容によって命名してください。

またルート（導線）とアクションを作成した後は、“`binding

Rails lock! のメモ

ふとした時に lock! の挙動が気になるのでメモしておく。

## 前提

– Postgresql

## テスト1

以下のコードを console A, console B 両方に貼り付けて、A -> B の順に実行

“`ruby
ActiveRecord::Base.transaction do
User.first.lock!
sleep 10
puts ‘foo’
end
“`

### console A

“`sql
TRANSACTION (0.1ms) BEGIN
User Load (0.8ms) SELECT “users”.* FROM “users” ORDER BY “users”.”id” ASC LIMIT $1 [[“LIMIT”, 1]]
User Load (0.8ms) SELECT “users”.* FROM “users” WHERE “users”.”id” = $1 LIMIT $2 FOR UPDATE [[“id”, 4], [“LIMIT”, 1]]
foo
TRANSACTION

投稿アプリのモデルの単体テストコード

テストコードは本当に理解できず一周目は正直飛ばしてましたが
復習してなんとなく理解できました！
というわけで復習の備忘録です！

目的
– Userモデルの単体テストの実装を通して、正常系テストを理解
– Userモデルの単体テストの問題を解いて、異常系テストに関する知識を定着
– Tweetモデルの単体テストの問題を解いて、モデル単体テストに関する知識を定着

####文字数制限のバリデーションを設置
「保存できる値は最大６文字まで」というバリデーションを設置
app/models/user.rb
“`ruby
class User < ApplicationRecord # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable devise :database_authenticatable, :registerable, :recoverable, :reme