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

Recoilでエラ〜メッセージを状態管理しよう！

## 前回の続き

https://qiita.com/uenomoto/items/e394dc44136e100fdadb

### Recoilについて若干分かったので言葉にしてまとめます
まずはRecoilをインストールします！！
“`
npm install recoil
“`

Docker composeを使用している方は
“`
docker compose exec frontのサービス名 bash
“`
これでコンテナ内に入ってコンテナ内でインストールするか
この場合は、コンテナ内にはいったままです。
docker-compose.ymlにtty: trueオプション忘れずに！
コンテナが対話モードで起動することを保証します！

それか↓
“`
docker compose run –rm frontのサービス名 npm install recoil
“`

一時的なコンテナを作成し、Recoilをインストールし、その後でコンテナを削除することもできます！

どちらでもOKです！

インストールを確認できたら
あとは、_app.tsxファイルにあるJS

Next.js側のフォームからRailsに情報を送信できるようにします。

# 前回の続き

https://qiita.com/uenomoto/items/7e846cc7b65ac8d96e9b

### ポストマンではなくfront側のフォームからrailsに送信できるように挑戦！
``
この登録するボタンを押すと発火する関数に処理を書いていきます。
“`typescript:state達
const [name, setName] = useState(“”);
const [contactInfo, setContactInfo] = useState(“”);

const token = useRecoilValue(tokenState);
const setErrorMessage = useSetRecoilState(errorMessageState);
“`

“`typescript:handleSubmit
const handleSubmit = async (e: FormEvent) => {

人生初のRailsでAPI作成しNext.jsに連携して表示に成功！ ~postman経由です~

# はじめに
こんにちは！上野と申します！
これからRails + Next.jsで連携したデータの渡し方と受け取り方、
ビューに表示するやり方を身につけたので書きます！
実務未経験の人が書いたコードと知識なので鵜呑みにしないでください。。。

### 私は今レシピの原価計算が計算機なしでできるアプリを開発途中です
その中で学んだ事を書いていきます。

設定としてはAuth0で認証していて関係性は一つの仕入れ先に対して複数の原材料です。

### まずは仕入れ先の登録から
postmanでこのようなリクエストボディを送れば登録できます。
“`json
{
“supplier”: {
“name”: “postmanから”,
“contact_info”: “連絡先”
}
}
“`

レスポンス
“`json
{
“supplier”: {
“id”: 10,
“user_id”: “auth0|64b9c1cfb6c808c6f9ccd15e”,
“name”: “postma

Capybaraで要素のattributeを取得する

`find(‘#hoge’)`などで取得できる`Capybara::Node::Element`のインスタンスは`Capybara::Node::Element[‘attribute’]`でattributeを取得できるらしい。

ex) idがhogeというdiv要素にスクロールを持たせており、1番下までスクロールしているか確認するテストの実装が必要な場合、下記のようになる。

“`rb
# スクロールの最大値は(scrollHeight – clientHeight)で取得できる
expect(find(‘#hoge’)[‘scrollTop’]).to eq find(‘#hoge’)[‘scrollHeight’] – find(‘#hoge’)[‘clientHeight’]
“`

Capybaraでテストしているとattributeを取得したいケースが稀にあるので、`Capybara::Node::Element[‘attribute’]`でattributeを取得できるのはかなり使い勝手が良いと思う。

Docker Composeでwebアプリ(Rails)をDocker化する方法

## 条件
* Docker未使用の環境で動作するRailsのwebアプリを用意する。
* RailsアプリはRubyのバージョン3.2.2、dbとしてpostgresのバージョン12を使用する。
* `docker-compose up`でRailsプロセスとdbが起動し、http://localhost:3000 でこのWebアプリでアクセスできるようにする。
* ホストのファイルシステムとコンテナのファイルシステムを同期させる。

## Docker化に向けた大まかな方針
* `docker-compose up`ですべての環境を構築できるようにするのが最終的なゴールになります。しかし、Dockerfileやdocker-compose.ymlに必要なコマンドを最初から網羅して記載することは難しいです。
* そこで、まずはWebアプリを起動するために最低限のDockerfileやdocker-compose.ymlを用意するのみにとどめ、立てたコンテナの中で必要なコマンドを模索する作業を行います。
* コンテナの中で環境構築に必要なコマンドを特定することができたら、Dockerf

Rails7（esbuild + Tailwind + MySQL）をDocker Composeで環境構築してデバッグも行えるようにする

[株式会社TECH LUCK](https://techluck.co.jp/?utm_source=qiita&utm_medium=article&utm_campaign=myarticle)という会社で代表兼エンジニアをしている齊藤です。

Rails7の環境構築でesbuild,Tailwind, MySQLでの構成の際に、Docker Composeで環境構築する際にハマったところなどをまとめておきました。
また、自分が書いた他の記事では、Dockerを使っている際に`pry-rails`、`pry-byebug`を使っている際にデバッグがおかしくなるため、`docker-compose.yml`を書き換えて`docker attach`でのデバッグが正常に行えるようにしました。

# 前提条件
– M1 Mac
– Ruby v3.2（RailsのDockerコンテナの中でのバージョン）
– Rails v7.0.5（RailsのDockerコンテナの中でのバージョン）
– Node v18.16.1（RailsのDockerコンテナの中でのバージョン）
– MySQL

“デザイン通りに作る” の1歩先に行くためのチェック項目の模索

# ”デザイン通りに作成” から1歩先に行くチェック項目の模索
デザイン通りに作成することは非常に重要で、素晴らしい技術です。
私が、デザインを実装に落とし込む前に考えることを列挙してみました。

デザイン自体を作る上で、ではなく
もらったデザインを実装する前に、エンジニアとして確認したい項目になります

もしこれ以外にもこんなことを考えている
ここに注意したいなどがあれば是非コメントをください:eyes:

重要項目に関しては別記事で情報を掲載して居ます。

## 簡易チェック項目

### デザイン意図の確認
– [ ] ユーザーにどのような印象を与えたいのか、どうなって欲しいのか理解して実装を始めよう
– [ ] 余白、文字サイズ、色、配置、コンテンツ内容、それぞれの意図はなんであるか理解しよう

### 保守と開発的な目線
– [ ] [MDN](https://developer.mozilla.org/ja/docs/MDN/Writing_guidelines/Experimental_deprecated_obsolete)で非推奨、廃止になったデザインでないか確認しよ

サインアップ画面にアクセスしたら、ArgumentError wrong number of arguments (given x, expected 2)が出て詰まった

# はじめに
学習用のメモとして投稿します。
deviseを使用して認証機能を実装する機会がありました。
その際に遭遇したエラー`ArgumentError` `wrong number of arguments (given x, expected 2)`について書いていきます。

# 経緯
deviseでサインアップページを作成していました。
何とか完成し、正常に動作することを確認したものの、少し時間が経って、再びサインアップページへアクセスすると、次のエラーが発生しました。
“`zsh:
ArgumentError in XXXX::RegistrationsController#new

wrong number of arguments (given x, expected 2)
Extracted source (around line #241):

241 def serialize_from_session(key, salt)
242 record = to_adapter.get(key)
243 record if record && recor

rails ルーティング対応表

### ルーティングの早見表

※ ルーティングの設定についての対応表

– index→ 一覧表 [全タスクを表示する]
– show→ 詳細表示 [特定のidのタスクを表示する]
– new→ 新規画面登録 [新規登録画面を表示する]
– create→ 登録 [登録処理を行う]
– edit→ 編集画面 [編集画面を表示する]
– update→ 更新 [更新処理を行う]
– destroy→ 削除 [削除処理を行う]

“`ruby
例

class BoardsController < ApplicationController def index #Boardの一覧画面では全ての掲示板情報を一覧で表示したい @boards = Board.all end def new #Boardの新規作成画面ではboardの空のインスタンスをviewに渡したい @board = Board.new end def show #Boardの詳細画面ではURLパラメータから取得したBoardのインスタンスが必要

Rails7で’rails new’するさいにBootstrapを指定するとエラーが発生してしまう

## 環境

:::note
* **ruby**: ruby 3.2.2 (2023-03-30 revision e51014f9c0) [x86_64-darwin21]
* **rails**: Rails 7.0.6
* **node**: v15.14.0
* **yarn**: 1.22.19
:::

## 現状

“`console
rails new . -c=bootstrap
“`

最後でこのようなエラーが出る

“`console
yarn run v1.22.19
$ sass ./app/assets/stylesheets/application.bootstrap.scss:./app/assets/builds/application.css –no-source-map –load-path=node_modules
rbenv: sass: command not found

The `sass’ command exists in these Ruby versions:
2.5.1
2.6.3
2.6.4
2.6

allow_nil: trueとは

# はじめに
Ruby on Railsでは、データモデルのバリデーションを設定することが一般的です。その一部として、`allow_nil: true`というオプションが存在します。この記事では、`allow_nil: true`がどのように動作し、それがどのような状況で役立つのかを詳しく解説します。
### `allow_nil: true`の基本的な動作
`allow_nil: true`オプションは、指定した属性のバリデーションを行う際に使用されます。このオプションが設定されていると、属性の値がnilの場合にはバリデーションがスキップされます。つまり、その属性がnilでもバリデーションエラーにはならないのです。
### 例えば
Userモデルに`reset_password_token`属性属性が存在し、以下のようなバリデーションが設定されているとします。
“`ruby:user.rb
validates :reset_password_token, uniqueness: true, allow_nil: true
“`
いくつかのシナリオを見てみます。
①`reset_p

ChatGPTでプログラミング学習をする際の大事なこと

今回はChatGPTでプログラミング学習をしている初学者、これからしようとしている方に向けて記事を書こうと思います。

先輩方にも、現在の初学者界隈を垣間見てもらえればと思います。
　
私はChatGPT4でPythonを主に学習して２か月が経ちました。
　
２か月の割にはあまり身に付いていないと感じたので、自分への戒めも含まれています。

## 教えは乞うても答えは乞うな

私?「以下の要件を満たすコード頂戴」

GPT?「はい✨」

私?「エラーでた」

GPT?「エラーを見ると…このコードで解決できると思います✨」

ChatGPTめっちゃ優秀なのでまとまったコードもバンバンくれます。
　
エラーが出て理解していなくても、エラーを貼り付ければ正解コードにたどり着けます。
　
私はこの沼にハマっていました。
　
この２か月で、学習中の私がアプリなどを５つほど開発できたのは確かにChatGPTのおかげです。
　
しかしもう一度同じアプリを開発しろと言われると、知識技術を吸収できておらず恐らくほとんど同じくらいの時間がかかると思います。
　
学習の一環としてアプリ開発を主にしてきたもの

undefined method ‘new’ for モデル名:Moduleと出た

プログラミングスクールにて絶賛Railsの学習中の者です。
アプリ作成中にタイトルのようなエラーが起きたので、解決法と共に共有します。
## 起きたこと
ブログ機能実装の演習で、Blogという名前のアプリでBlogというモデルを作ったら、コントローラで以下のようなエラーが出ました。

“`
NomethodError undefined method ‘new’ for Blog:Module
“`
翻訳すると「モジュールとしてBlogが認識されている」となります。

（モジュールとは、クラスメソッドとは違います。複数のクラスでメソッドを共同利用できる便利さがありますが、一方でクラスのようにインスタンスの生成はできません。継承もできません。）

最初コントローラ内のnewアクション名か、周辺のコードが間違っているのかと思い確認してみました。ですがどうみてもその周辺に間違いはなさそう。

## 分析
調べてみると、config/application.rb の記述が確かに`Module Blog`となっていました。

どうやらRailsはアプリ名をそのままモジュール名としてconfi

Rails 基礎

## ルーティング

### 名前付きルート
以下のようなルート定義があった場合、名前付きルート **help_path** と **help_url** が自動的に使用できるようになる。
名前付きルートは、ルートのパスやURLが変更されても自動的に更新されるため、リンクを生成する際に非常に便利。
“`ruby:route.rb
Rails.application.routes.draw do
root ‘static_pages#home’
get ‘/help’, to: ‘static_pages#help’
end
“`

“`erb:.erb
# ビューやコントローラー内で名前付きルートを使用する例
<%= link_to 'Help', help_path %>

# フルURLを取得する場合は help_url
<%= link_to 'Help', help_url %>
“`

### 基本的なルートの書き方
“`ruby:route.rb
Rails.application.routes.draw do
# indexアクションとsh

【Rails7】Javascriptがリロードしないと動かないとき

## 結論から
　data:{turbo: false}　を加えてください。

“`ruby:例
<%= link_to "リンク", some_path, data: { turbo: false } %>
<%= form_with model: @model, data: { turbo: false } do |form| %>
“`
　

## 原因
Rails7ではTurbo（以前はHotwireとも呼ばれていました）がデフォルトで有効になっており、これが悪さをしています。

とはいえ、基本はTurboを否定する必要はないので、javascriptが関わる部分だけ上記の記述をしましょう。

## 別の方法
アプリ全体でTurboを無効にする

“`diff_javascript:application.js
– import “@hotwired/turbo-rails”
+ import { Turbo } from “@hotwired/turbo-rails”
+ Turbo.session.drive = false
“`

## ち

【Ruby on Rails】マイグレーションの仕組みを理解して「分からない」から抜け出そう?【初心者向け】

# ? はじめに
記事を開いていただきありがとうございます！
この記事では主にRailsの初学者に向けて、マイグレーションの仕組みについて分かりやすく解説します！

私が初学の時にやっていた、 **「とりあえず何か分からないけど `rails db:migrate` や `rails db:rollback` を実行してみる」** がみなさんから無くなるように、仕組みを理解できるように、順を追って説明していきます！

:::note info
この記事で書く事
・ よく聞くマイグレーションとはそもそも何か
・ `rails db:migrate` や `rails db:rollback` って何してるの？
:::

:::note alert
この記事で書かない事
・ SQLの解説
・ データベースの構造
・ Railsのコードの書き方
:::

# ? データベースの作り方
まずそもそもデータベース(RDB)はどうやって作るのでしょう？
データベースは `MySQL` や `PostgreSQL` といったデータベースエンジンと呼ばれるものに、 **「データベースを作るよ」** や

【Rails7/ActionCable】「ArgumentError – wrong number of arguments (given 1, expected 2)」に対するエラー対処（備忘録）

# 開発環境

– Ruby 3.2.2
– Ruby on Rails 7.0.6

# エラー内容
ActionCableを用いたチャット機能を実装しようと、以下の実装の手順を書いてくれている記事を参考に進めていたのですが、テキストを送信しても実行されずサーバーログを確認してみると、
**`「ArgumentError – wrong number of arguments (given 1, expected 2)」`**
となっており、直訳すると「２つの引数が渡されるのを期待しているが、１つの引数しか渡されていない」というエラーが発生していました。
そこでエラー箇所を確認してみるも以下のように`ActionCable.server.broadcast`には、`room_channel`と`message: data[‘messa

注文ステータス　enum日本語での実装

:cherry_blossom: **はじめに**
bootstrap導入済　
namespases使用
devaice導入済
ordersモデル　実装済
admin/orders_controller 作成済
注文機能作成済
public/orders_controller.rb 作成済
“`public/orders_controller.rb
def create
@order = Order.new(order_params)
@order.customer_id = current_customer.id
@order.order_status = 0
@order.save

current_customer.cart_items.each do |cart_item|
@order_datail = OrderDatail.new
@order_datail.order_id = @order.id
@order_datail.item_id = cart_item.item_id

管理者側　注文内容一覧ページ

はじめに
bootstrap導入済　
namespases使用
devaice導入済
costomersモデル、ordersモデル　実装済
注文機能実装済
_____
:star:gimfailにenum導入して日本語で表記されるようにする
“`diff_ruby
gem ‘rails-i18n’
gem ‘enum_help’
“`
“`
$ bundal install
“`
“`scheme.rb
create_table “cart_items”, force: :cascade do |t|
t.integer “customer_id”, null: false
t.integer “item_id”, null: false
t.integer “quantity”, null: false
t.datetime “created_at”, precision: 6, null: false
t.datetime “updated_at”, precision: 6, null: false
t.integer

letter_opener_webって？

# letter_opener_webってなに？？
タイトルの通り`letter_opener_web`について解説したいとおもいます。
#### letter_opener_webとは
開発環境でメールを送信した際に、ブラウザでそのメールを確認するためのツールです。
本番環境で実際にメールを送る代わりに、このツールを使ってメールの内容や送信先を確認することができます。
#### 使用方法
Gemfileにletter_opener_webを追加
“`ruby:Gemfile
gem ‘letter_opener_web’, ‘~> 1.0’
“`
“`
$ bundle install
“`
これで使えるようになります！