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

Dockerを使ったRailsとNext.jsの開発環境の構築

### 自己紹介
初めまして、オーリーです。未経験からエンジニアへ転職活動中の者です。
先日、Next,js, Typescript、Rails(api)、Fargate, Terraform、Git Hub Actionsを使用したポートフォリオを作成しました。
その際に作成したDokerfile、docker-composeをアップします。
何分私も初学者ですので、もっと良い書き方があると思います。あくまでご参考までにー。

—–
### 概要
rails, next.jsの開発環境のDockerfileとdocker-compose.yml

—–
### ディレクトリ構成
app
├── backend
│ └── api
│ ├── Dockerfile.dev
│ └── entrypoint.sh
│
├── frontend
│ └── front
│ └── Dockerfile.dev
│
└── docker-compose.dev.yml

– ディレクトリ構成:
.`app`ディレクトリの下には`ba

docker compose run時にNameError: uninitialized constant Nokogiri::HTML4と遭遇した時の対処法

Dockerを使ってRailsの環境構築を行なっている時に遭遇したエラーの解決方法を備忘録も兼ねてここに記します。

開発環境
M2チップ Mac Book Air
OS: MacOS Sonoma
Rails: 5.0.0.1
DB: MYSQL 5.7
Ruby: 2.4.6
※詳細は省きますが、Windows11の環境でも同様のエラーに遭遇しました。
　同エラー遭遇時にPCを上記のMac Book Air に買い換えた為、Windows環境では解決まで 　の確認はできていませんが、恐らく解決できると思います。

## 実行したコマンドと遭遇したエラー

“`
実行したコマンド
docker compose run web bundle exec rake db:create
“`

“`
遭遇したエラー
rake aborted!
NameError: uninitialized constant Nokogiri::HTML4
Did you mean? Nokogiri::HTML
“`

## エラー解決の為に行なったこと
1, Gemfileを編集して下記の行を

【Rails】一覧表示の順番を指定する(古い順、新しい順)

こんばんは！
ポートフォリオ実装でユーザーの使いやすさを考えたときに、一覧といってもものによっては古い順、新しい順と変えた方がよさそうだと気づき、実装してみました！
実装自体はコントローラ―の記述を少し加えるだけだったので、ご紹介したいと思います。

## 環境
AWS Cloud9
Rais 6系

## 方法
### 新しい順
例えばですが、普通の投稿の一覧などはより新しい情報をユーザーに見せたいですよね！特に投稿１つ１つに文脈などの関係がない場合は新しい順の方が適しているといえます。
そのような場合どのように新しい順にするか説明したいと思います！

普段だと一覧表示をしたい際には
“`rb:app/controller/xxxx_controller.rb
class XxxxsController < ApplicationController def index @posts = Post.all end end ``` というように記述しますよね。これだと特に順番は指定されていない状態で、更新などがあると順番が変わる可能性があります。 そのため、新しい投稿

Rails 7 + Vue.js 3 でaxiosを使ったAPI通信で遭遇したエラーとその解決

Rails 7とVue.js 3を組み合わせた開発では、非同期通信のためにaxiosを利用する場合があります。この記事では、axiosを使用してAPI通信を試みた際に発生したエラーと、その解決方法について説明します。

## 問題点

Vue.jsコンポーネントでaxiosを使用しようとした際に、次のようなエラーが発生しました。

“`bash
ViteRuby::MissingEntrypointError in Tasks#index
Showing /path/to/app/views/tasks/index.html.erb where line #8 raised:

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

Possible causes:
– The last build failed. Try running `bin/vite build –clear –mode=development` manually and check for errors.

Errors:
The

【Rails】メソッドの中でメソッドを定義したらRuboCopに怒られたゾ

どうもこんにちは。

今回は、Railsでメソッドの中にメソッドを記述してコードを書いた時に、Rubocopに怒られたのでその対処法を紹介します。

Rubocopの導入方法は以下の記事で紹介しています。

https://qiita.com/PDC-Kurashinak/items/1de32b66d95c705f5b82

# 実際に書いたコード

※ こんな感じで書いたという感じで書きます。

“`ruby
def display_calculate_result(x, y, z)
# 足し算メソッドを定義
def add_calculate(a, b)
result = a + b
result
end

# 掛け算メソッドを定義
def multiplication(add_result, c)
result = add_result * c
result
end

# 足し算メソッドを呼び出し
add_result = add_calculate

三項演算子について

## はじめに
　個人的に「三項演算子」について苦手意識があったので、今回はあえてそれに触れてみます。
## 環境
ruby 3.14

rails 7.0.3.1

## 三項演算子って？
**条件式をif, elseを使わないで書いてしまえるもの。**

複数に渡ってかかなればならないコードも、これを使えば短いコードで済むのですっきりします。

コードにすると次のようになリます。
“`
条件式 ? 正しいとき : 正しくないとき
“`
これをif,elseで書くとすると次のようになります。

“`ruby
if 条件式
正しいとき
else
正しくないとき
end
“`
以上のように短いコードで済むことが分かります。

ではこれはどのような時に使えば良いのでしょうか？

## 例
　作っているもの→　”ブログを作成するサイト”
　コードを書く場所→ Articleモデル

また
”記事(Article)を『下書き(draft)・公開(published)・公開待ち(publish_wait)』としてstateカラムに分類している状態”

加え

left_joinを理解する

### はじめに
nilのデータを取得したい時に`LEFT JOIN`を使用すると思います。この時に欲しいデータがうまく取得できず色々やった結果、改めて`LEFT JOIN`を理解しなおすことができたのでメモとして残します。

今回取得したいデータの条件は以下の通りです。

– サブ商品には登録されていないメイン商品、サブ商品から削除された商品も取得

“`sql
MainProductTable(メイン商品)
+—-+————-+——–+
| id | product_name | stock |
+—-+————-+——–+
| 1 | XxxProd1 | 50 |
| 2 | XxxProd2 | 30 |
| 3 | YyyProd1 | 20 |
| 4 | YyyProd2 | 20 |
| 5 | XyxProd3 | 20 |
| 6 | ZzzProd3 | 30 |
| 7 | TttPr

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のシェル使ってる。（不安）
　小学校の家庭科の授業で自分だけおばあちゃんから借りたエプロンを使っているかのような不安。