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

【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

Turboとは

# Turbo
Turboは、Rails7以降を使用している方は必須の知識かと思います。

Railsで掲示板アプリの削除機能実装中に、ダイアログ機能を実装したつもりがダイアログが表示されず、即削除されてまい、意図した挙動をしなかった原因を追求したところ、Turboについて理解ができていなかったので、この記事でアウトプットとしていこうと思います。

## Turboとは

Turboを理解する前に、Hotwireを知っておく必要がある。

## Hotwire
Hotwireとは、Rails7からRailsのデフォルトになった、モダンなWebアプリケーションを作るための新しいアプローチ。

もう少し、詳しく説明すると、
サーバーサイドで生成されたHTMLを直接ブラウザに送信し、JavaScriptを最小限に抑えて、より高速でインタラクティブなウェブアプリケーションを構築することができるRuby on Railsのフレームワーク。

SPAではないが、React等のjsライブラリを使用せずに、SPA風のUXを実現することができるRailsのフレーワークというイメージだろうか。

##

新年をスタートさせるためのミニゲームを作りました

## 概要
RUNTEQのミニアプリウィークにて、制限時間内に「スタート」ボタンが何回押せるかを競うミニゲームを作成しました。

このゲームは、シンプルながらもユーザーの反射神経と速さを試すことができます。

また、ログインするとランキングに参加できます。ユーザ名とパスワードで登録できるので、興味がある方は試してみてください。

https://peaceful-meadow-78483-bad183e58e63.herokuapp.com/


## 技術構成

### バックエンド
RUNTEQで学んだRailsを活用しました。

ただ、RailsではURIの管理のみにし、画面作成はReactに任せました。

このRailsとReactのつなぎの部分には、react-railsというgemを使用しました。
一行書くだけでReactに値を

findとfind_byの違い

# はじめに
`find`と`find_by`は、Railsでデータベースからレコードを取得するためのメソッドですが、いくつかの違いがあります。
findとfind_byの違いについて理解が曖昧だったため備忘録も兼ねてまとめます。
# 検索条件の指定方法
`find`: 主キー（通常はid）を指定してレコードを取得します。例えば、`User.find(1)`は`id`が1であるユーザーを取得します。

`find_by`: 様々な条件を指定して検索できます。例えば、`User.find_by(name: ‘John’)`は`name`がJohnであるユーザーを取得します。
“`ruby
# 主キーを指定して取得
user = User.find(1)

# 条件を指定して取得
user_by_name = User.find_by(name: ‘John’)
“`
# エラーハンドリング
`find`: 主キーが見つからなかった場合、`ActiveRecord::RecordNotFound`例外が発生します。主キーが存在しない場合、エラーが発生するため注意が必要です。

`fin

ルーティングの記述方法

# はじめに
ルーティングの記述方法の理解が曖昧だったため備忘録も兼ねてまとめます。
# ルーティングとは
Webアプリケーションにおいて、クライアントからのリクエストを処理するために、どのコントローラのどのアクション（メソッド）が呼び出されるかを指定する仕組みです。Railsでは、config/routes.rbファイルでルーティングを設定します。
“`config/routes.rb
Rails.application.routes.draw do
root “sample#index”
get “/new” => “sample#new”
post “/create” => “sample#create”
resources :articles
end
“`
# Rootとは
ルートは、アプリケーションのトップページを指します。上記の例では、SampleControllerのindexアクションがルートに設定されています。
# GETとは
indexアクションやshowアクションのようにデータの取得が目的のアクションです。
# POSTとは
c

効率的にテストコードを書こう

テストコードを効率的にできるのは便利ですね！

“`ruby“`
### 目的
– FactoryBotの概要と設定の方法を理解
– Fakerの概要と設定の方法を理解

### インスタンスを生成するコードを分離
#### FactoryBot
インスタンスをまとめることができるGem。他のファイルであらかじめ各クラスのインスタンスに定める値を設定しておき、各テストコードで使用する

### FactoryBotを導入
“`ruby
group :development, :test do
# See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
gem “debug”, platforms: %i[ mri mingw x64_mingw ]
gem ‘rspec-rails’, ‘~> 4.0.0’
gem ‘factory_bot_rails’
end
“`
`bundle install`
specディレクトリ

N+1問題を解決する

# 1.はじめに
投稿一覧画面にて無駄なクエリが発生していたので解決方法を備考録として記事に残します。

# 2.環境
Ruby (2.6.4)
Rails (6.1.7)
gem kaminariを導入している

# 3.N+1とはなにか
ざっくりいうと不必要なSQLを何回も発生させてしまう現象のことです。
それによりDBへの問い合わせ処理が複数回走るためパフォーマンスが悪化します。

例えば、スーパーにりんご、みかん、いちごを買いに行こうとしていたとします。
そのとき、何度も自宅とスーパーと往復せず、まとめて購入するでしょう。

N+1問題は、この例でいくと自宅とスーパーと何度も往復することにあたります。
1往復1食材しか持っていかなかったら効率悪いです。

1往復で買い物を終わらせようというのがN+1問題を解決するということです。

# 4.おこなったこと

## 修正前
page(params[:page])について
gem kaminariを導入しているのでこのような記述になっていますが、page(params[:page])　≒　all:　と考えてください。
“`:con