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

Railsでのアーキテクチャを考える

### はじめに
Ruby on RailsでAPIの開発を行ってるんですが、Railsは開発者に優しくとても開発がしやすいです。一方、どこからでもModelが呼べたりと人によって書き方もバラバラになりやいフレームワークでもあります。
とはいえ、Rialsをクリーンアーキテクチャで設計して開発を進めていくのは、Railsの良さをなくしちゃうのであまり相性が良くないと思います。そこで、Railsの既存のMVCを崩さない範囲でルールを決めて開発を行うようにしました。
開発はRailsの6系で、APIモードで開発を行っています。

### 考えた各層の役割
最終的に各層の役割は以下のように定義しました。

| | 役割、詳細 |
|———|———|
| Controller | パラメーターなどを取得し、Service層とPresenter層を呼び出す役割。ビジネスロジックは持たず、基本的に呼び出しのみを行う。 |
| Model | バリデーションや（サービスではなく）ドメインに依存するロジックを持つ役割。joinやwhereなどactive recordを

Vue.js 3によるドラッグアンドドロップでのタスク管理機能

## ディレクトリ構造

“`bash
app/
├── controllers/
│ ├── api/ # API用のコントローラ
│ │ └── tasks_controller.rb # タスク管理のAPIエンドポイント
│ ├── tasks_controller.rb # タスク管理の通常のコントローラ
│ └── tops_controller.rb # トップページのコントローラ
├── views/
│ ├── tasks/ # タスク管理のビュー
│ │ ├── index.html.erb # タスク一覧ページ
│ │ ├── show.html.erb # タスク詳細ページ
│ │ └── … # その他のタスク管理ビュー
│ └── tops/

Rails 7 と Vue.js 3 を使用したモノリシックアプリケーションにおけるAPI通信について

## はじめに
Rails 7とVue.js 3を組み合わせたモノリシックアプリケーション開発では、API通信の必要性がしばしば生じます。ここでは、API通信が必要となる状況と、その設定方法について説明します。

## 1. API通信について

### 1-1. api/tasks(tasksの部分はTaskモデルに関連するビュー名)とは:
`api/tasks`は、Vue.jsなどのフロントエンドフレームワークから非同期にアクセスするためのAPIエンドポイントで、フロントエンドとバックエンがJSON形式でやり取りする際に使用します。モノリシックアプリケーションにおいても、フロントエンドで動的なデータ操作（例: タスクのドラッグ&ドロップ）が発生する場合、バックエンドとの非同期通信が必要になり、そのためにAPIエンドポイントを設定する必要があります。

### 1-2. 非同期通信の例:
静的なページの表示や簡単な動作（文字の表示・非表示など）ではAPI通信は不要です。しかし、ユーザーの操作によってデータベースに変更を加える必要がある場合（例: タスクの移動や更新）、非同期通信による

エラーメッセージの日本語化

# はじめに
プログラミング初心者です。
温かく見守ってください。
何か謝っている点があれば、ぜひご指摘をお願いいたします。
# エラーメッセージの日本語化
### 事前準備
“`ruby:config/aplication.rb
# 中略
module アプリの名前
class Application < Rails::Application # Initialize configuration defaults for originally generated Rails version. config.load_defaults 7.0 # 日本語の言語設定 config.i18n.default_locale = :ja 　　←追記 # 省略 end end ``` ```ruby:Gemfile #中略 gem 'rails-i18n' ←追記 ``` bundle installをして、サーバーを再起動します。 ### ファイルを新規作成（2つ） １、config/localesディレクトリに、devise.ja

fields_forを使って親子関係にあるモデルのレコードを一度に編集・削除する

# はじめに
この記事ではポートフォリオ作成中に学習したことを自分のために記録しています。
初学者のため理解が不十分なところがあるかもしれません。
その場合はご指摘いただけると幸いです。

# やりたいこと
– 親子関係のあるモデルのレコードを一度に編集・削除したい

YouTubeのブックマークアプリを作成しているので、ブックマーク（親）とそれに紐づくタイムスタンプ（子）を1つのフォームで編集・削除できるようにしていきます。
ブックマークとタイムスタンプは一対多の関係です。

完成イメージはこんな感じ

# いざ実装
## 子モデルの編集
### accepts_nested_attributes_for⁠メソッドを親モデルに追加
“`app/models/bookmark.rb

SQLアンチパターン第3章 IDリクワイアド（とりあえずID）はベストプラクティスなのではないか

# はじめに
　とりあえずIDは、第3章で取り上げられているアンチパターンですが、Railsをはじめとした複数のフレームワークで利用されています。サロゲートキー（代理キー、代替キー）とも呼ばれます。後続の文章ではサロゲートキーという名称を使います。
　SQLアンチパターンの比較的前半に記載があるので、システム開発経験の浅い人が本書を読み、とりあえずIDはアンチパターンなのだと認識してしまうケースがあり、定期的に話題に上がってきます。SQLアンチパターンの発行は2013年01月と十年以上も前です（原著は2010年6月）。当時と今では状況も変わってきており、フレームワークも増え、知見が溜まってきています。
　この話題に関しては、他の記事でもメリット、デメリットの比較だけだったり、明確に「とりあえずID」に対して賛成・反対の立場をとっている記事もあったりしますが、本記事では、「とりあえずID」に対して賛成の立場（デメリットを上回るメリットが大きい）で書こうと思います。
　サロゲートキーとは簡単に説明すると、システムが自動的に付与するキーを主キーとするRDBの設計手法です。シンプルにauto

【備忘録】Vue.js3の導入設定・正常表示確認

# 環境
– Rails 7.0.8
– Vue.js 3.4.21
– Vue/cli 5.0.8
– PostgreSQL 14.11
– ubuntu 22.04.1

# 最初に実行するコマンド
“`bash
# Gemfileに以下を記載
gem ‘jsbundling-rails’
gem ‘vite_rails’
“`

“`bash
bundle install # gemをインストール
“`

“`bash
# Viteをインストール
# Railsアプリのルートディレクトリで以下のコマンドを実行
bundle exec vite install
# または以下でも可能らしい
rails vite:install
“`

“`bash
# Vue.jsをインストール
# Railsアプリのルートディレクトリで以下のコマンドを実行
npm install vue@3
“`

“`bash
# 以下のメッセージが出た場合は`node.js`のバージョンが不一致。
# nvmなどでバージョンを合わせることが好ましい。
npm WARN EBADENGINE

画像投稿プレビュー機能

# はじめに
プログラミング初心者です。
温かく見守ってください。
# 画像投稿プレビュー機能
画像投稿を以前実装しました。
これにプレビュー機能を実装したいと思います。
### 事前準備
まずはJavaScriptが読み込まれるようにします。
・appディレクトリ→JavaScript内にprevire.jsのファイルを作成します。
・config/importmap.rb
“`
pin “preview”, to: “preview.js”
“`
・app/javascript/application.js
“`
import “preview”
“`
#### コードを実際に書きます
“`js
const preview = () => {
// 新規投稿・編集ページのフォームを取得
const postForm = document.getElementById(‘new_post’);

// プレビューを表示するためのスペースを取得
const previewList = document.getElementById(‘previews’);

【Ruby on Rails, Sprockets】app/assets/とmanifest.jsを複数配置してアセットパイプラインを走らせたい!🏃‍♂️💨

こんにちは、akitoshigaです。

先日、アセットファイルを`app/assets/**`以外の場所に配置した上で`manifest.js`を利用して複数の場所からアセットパイプラインを走らせる必要が生じたのですが、類似の事例が見つからず自身が実践した方法を共有します。

## 1. 前提：アセットパイプラインとは
アセットパイプラインとは、アセットファイル（画像・CSS・JavaScriptなど）を効率的に配信するためのフレームワークでありRuby on Railsに組み込まれています。

複数のCSSファイルを圧縮して一つにまとめたり、フィンガープリントを利用したキャッシングの管理をしてくれます。

アセットパイプラインは内部で`sprockets`や`importmap-rails`というgemを利用しています。

詳しい説明はRailsガイドをご覧ください。

https://railsguides.jp/asset_pipeline.html

## 2. やりたいこと
下記のように、Ruby on Rails指定のアセットファイルの置き場である`app/assets/

railsの権限エラーの対応（Windows）

以下の手順で構築した環境で開発を進めようとした際に権限エラーにより Controller などが作成できなかったため対応しました。

## 環境構築

Winows11にDocker、ruby、rails、postgresql をインストールし `rails new` で環境を作成する。

“`powershell
> rails new myapp -G -d postgresql
“`

## 初期のDockerfile

作成された環境には Dockerfile が含まれていて実行することができます。

“`Dockerfile
# syntax = docker/dockerfile:1

# Make sure RUBY_VERSION matches the Ruby version in .ruby-version and Gemfile
ARG RUBY_VERSION=3.2.3
FROM registry.docker.com/library/ruby:$RUBY_VERSION-slim as base

# Rails app lives here
WOR

RailsアプリにVue.jsをモノリシックに導入するための準備

Vue.jsをRailsアプリケーションに統合するプロセスは、効率的なフロントエンド開発とリッチなユーザーインターフェースを実現するための重要なステップです。このガイドでは、Railsプロジェクトの作成からVue.jsの導入までの一連のステップを丁寧に解説します。特に、`jsbundling-rails`のセットアップ、Viteの導入、Node.jsバージョンの管理、そして`app/javascript`ディレクトリの活用に焦点を当てて説明していきます。
なお、以下の完全版も参考にしてください。

https://qiita.com/KM9973/items/1e9329de57bb8fafb9f3

## 1. Railsプロジェクトの作成

まずは新しいRailsプロジェクトを作成します。ターミナルで以下のコマンドを実行してください。

“`bash
rails new myapp –database=postgresql
cd myapp
“`

ここではPostgreSQLをデータベースに選択していますが、プロジェクトの要件に応じて変更してください。

## 2. js

Rails 7でViteとVue.jsを使った際のトラブルシューティング

Rails 7は、WebpackerからViteへと大きく移行しました。この変更は、フロントエンドの開発体験を大幅に向上させますが、同時に新しいチャレンジももたらします。この記事では、ViteとVue.jsをRails 7プロジェクトで使う際に直面する可能性のあるいくつかの一般的な問題とその解決策について紹介します。
なお、以下の完全版も参考にしてください。

https://qiita.com/KM9973/items/1e9329de57bb8fafb9f3

## ViteRubyのMissingEntrypointError

エラーメッセージ:

“`bash
ViteRuby::MissingEntrypointError in Tops#index
Showing /path/to/app/views/layouts/application.html.erb where line #13 raised:

Vite Ruby can’t find entrypoints/application.js in the manifests.

Possible causes

gemでrailsがインストールできなかった話。

レアケースです。

# エラー
ERROR: While executing gem … (Gem::FilePermissionError)
You don’t have write permissions for the /Library/Ruby/Gems/2.6.0 directory.

# 原因
俺は馬鹿だからよくわかんねぇけど、rbenv配下のrubyを使わず、システムにあるrubyを使っていることが原因らいい。。

# 根本原因
/.bash_profile内のhomebrewのパスの指定ミス。
brewのパス→rbenvのパス出通すべきところがrbenvのパス→brewのパスの順になっていた。

# 解決方法
rbenvはbrewの配下にいるべき人間なので、brewのパスをrbenvのパスの上に持ってくる。
（コマンドの擬人化）

## 感想
・調べてたら、M1macはみんなzshのシェル使ってる。（不安）
　小学校の家庭科の授業で自分だけおばあちゃんから借りたエプロンを使っているかのような不安。

Rails6にyarnでBootstrap5.0を導入したらHerokuへのデプロイの際にエラーが起きた

Railsでyarnを使ってBootstrapを導入後、Herokuへのデプロイ時エラーに遭遇したので共有と備忘録として記事にしました。

## 開発環境

Ruby 3.0.1

Rails 6.1.7.6

導入したBootstrap5.0.2

## yarnを使ってBootstrapを導入した手順

以下の記事の手順を参考にさせていただき導入しました。
> [【2022年最新】Rails6にBootstrap5を導入する方法 – Qiita](https://qiita.com/jibiking/items/d2ebb21db620f9cce887)

### Bootstrap5.0.2をインストール

“`bash
$ yarn add bootstrap@5.0.2
“`

popper.jsをインストール

“`bash
$ yarn add @popperjs/core
“`

### application.html.erbに追記

“`ruby:app/views/layouts/application.html.erb

【Rails】ActiveRecordのエラー解決法。no such column

railsの勉強でエラーにぶつかりまくって、パンクしそうなのでメモに残そうと思い、この記事を書きました。

同じようなエラーで困っている方の参考になれば嬉しいです。

初学者なので間違っていればご指摘お願いします。
## ActiveRecord::StatementInvalid in Tasks#index
現場Railsのチャプター4が最後まで進んだので、実装できているか改めて確認しようとログインをしたらエラーが発生しました。


“`
ActionView::Template::Error (SQLite3::SQLException: no such column: tasks.user_id: SELECT “tasks”.* FROM “tasks” WHERE “tasks”.”

Railsで生じたDeviseの設定エラー(undefined method ‘devise’ for User:Class`)を解決する方法

Railsアプリケーションでユーザー認証機能を追加する際、Deviseはその強力なサポートとカスタマイズの容易さから、非常に人気のある選択肢です。しかし、Deviseの設定や初期化の過程で問題が発生することがあります。この記事では、`NoMethodError: undefined method ‘devise’ for User:Class`という特定のエラーの解決方法に焦点を当て、その発生原因と対処法を解説します。

## エラーの発生原因

このエラーは主に、Deviseのジェネレータが正しく実行されなかった場合などに発生します。エラーメッセージは、`User`クラスでDeviseのメソッドが認識されていないことを示しています。

## エラーが発生したときの手順・経緯

1. `rails generate devise:install`を実行（当初見落としていましたが`Could not find generator ‘devise:install’.`というエラーが発生）。
2. `Gemfile`に`gem “devise”`を追加。`bundle install`を実行

bundle installエラー解決法：An error occurred while installing mimemagic

環境構築中に、`bundle install`をした後に`mimemagic`というものに関するエラーが発生しました。初めてみるエラーだったので、メモに残そうと思います。

まだ、初学者なので間違っていたら教えていただければ幸いです。

:::note info
設定したいバージョン(mac環境)

Ruby 2.6.4
Rails 5.2.3以降
:::

## エラーが発生するまでの流れ
1. Ruby 2.6.4をインストール
1. Rails 5.2.8をインストール
1. rails -vを実行後に以下のエラー文が発生
“`
Could not find rails-5.2.3
Run `bundle install` to install missing gems.
“`
文章に従い、`bundle install`を実行しましたが、またもやエラー文が発生。今回はこのエラーを解決していきます。
## 解決したいエラー
`bundle install`実行後に発生したエラー文はこちらです。
“`
Gem::Ext::BuildError: ERROR: Failed t

ActionController::UnknownFormat エラーの解決法

今回は、個人的に解決するのに時間がかかったエラーだったのでメモに残そうと思います。

もし、同じエラーで悩まれている方がいれば参考になれば嬉しいです！

:::note warn
まだ、初学者なので間違っているところがあればご指摘ください。
:::

## エラーが発生した流れ
やりたいこと：ログイン機能を実装したい。

user_sessionsコントローラーを作り、それに対応する`new.html.erb`のviewも作成。

ログイン画面をブラウザ表示しようとしたところ以下のエラーが発生。
## ActionController::UnknownFormat
今回、発生したエラー文です。
“`
ActionController::UnknownFormat (UserSessionsController#new is missing a template for this request format and variant.

request.formats: [“text/html”]
request.variant: []

NOTE! For XHR/Ajax or A

simple_formatについて:改行の反映とXSSまとめ

railsの勉強でエラーにぶつかりまくって、パンクしそうなのでメモに残そうと思い、この記事を書きました。

初学者なので間違っていればご指摘お願いします。

##前提
参考書として使っている現場railsの学習で、タスク管理アプリを作っていた時に気になったことです。

タスク詳細画面のviewを作っていた時に、最初はこのように記述していました。
(ファイルの形式はslimです)
“`
td = @task.description
“`

ブラウザ表示して、詳しい説明フォームには以下のように改行して入力しました。

hello
good morning

ですが、なぜか改行が反映されず…。HTML変換後はこのようなコードになっていました。
![スクリーンショット 2023-05-18 21.07

nginx→rails(puma)の構成で長め(〜１分)の処理が失敗する

## 事象
とある方向けの社内Webアプリ。
OpenMediaVaultのNginxでRailsを動かす、というごくごく一般的な構成。

あるときから長めの処理を行うページが動かなくなった。
具体的な事象は
* ブラウザで操作すると「サーバーとの接続が予期せず解除されました」みたいな感じになる
* curlで叩いても「Empty reply from server」
* 処理時間によっては問題なく成功する

（結構大きいファイルを変換する処理だったので、最初はアップロードまわりかと思ったがそうでもなく単純に長い処理をnginxが待ってくれない、という状態だった。）

nginx/error.logを参照した
* `*14 client closed connection while waiting for request, client: -.-.-.-, server: 0.0.0.0:3003` (ipはマスク済み)のエラーがある
* ↑のあとに`*4 open socket #25 left in connection 13`, `aborting`と出ている
* ネットで探