【Rails】Dockerを利用したアセットプリコンパイルを設定する（Asset Pipeline）

# はじめに
本記事は、私が個人開発を行う中で、アセットプリコンパイルを適切に実行するまでに多大な時間を要してしまったので、今後自分自身が迷わないにするためという備忘録、さらには同じような境遇の方のお力になれればと思いを込めて記事にしたいと思います！！

# 基本概念のおさらい
まずは、ざっくりと、アセットプリコンパイルに関しての基本をおさらいします！

### そもそも、アセットプリコンパイルとは？
複数のアセットファイル（JavaScriptやCSS）を圧縮して連結することで一つのファイルにまとめること。
### アセットプリコンパイルをすると何が嬉しいの？
– アセットプリコンパイルにより、ウェブページの読み込み速度が向上するので、UXやSEOの改善が期待される
– キャッシュやバージョン管理の面でもメリットがある

### そもそも、「アセット」って具体的に何よ？
Railsにおける、「アセット」とは画像、CSS、JavaScriptファイルなどの静的ファイルのこと。

### アセットプリコンパイルの流れ
– 結合と圧縮:
– アセットプリコンパイラ（Sprocke

railsとvue.jsを使用してchatアプリを作ってみた

#### 環境
– ruby 3.1.4
– rails 7.0.8.1
– vue 3.4.21

#### 事前準備

workspaceという作業環境を構築
バックエンドとフロントエンドで作業環境を分けた。

– 使用したライブラリ
rails
“rack-cors(クロスドメイン対策)“
“ActionCable（標準用意されている。サーバ側からクライアントに直接情報）“
vue.js
“axios(HTTPリクエストで使用)“
“vue-router（ルーティング処理）“
“actioncable“

#### バックエンド側

– データベースモデル
“`ruby:schema.rb
ActiveRecord::Schema[7.0].define(version: 2024_04_17_075212) do
create_table “messages”, force: :cascade do |t|
t.text “content”
t.string “sender_name”
t.integer “r

RailsでBootstrapを使ってフラッシュメッセージを表示し、自動で消す方法

## はじめに
Railsのアプリケーションにおいて、ユーザー操作に対するフィードバックは非常に重要です。この記事では、Bootstrapを利用してフラッシュメッセージをスタイリッシュに表示し、JavaScriptを使用して一定時間後に自動的に消去する方法を紹介します。

### 必要なもの
– Rails 6.0 以上
– Bootstrap 4.5.2
– Webpacker（JavaScriptの管理に）

## 実装手順

### 1. Bootstrapのセットアップ
まずは、BootstrapをRailsプロジェクトに導入します。以下のコマンドでBootstrapとその依存ライブラリをインストールします。

“`bash
yarn add bootstrap@4.5.2 jquery popper.js
“`

### 2. スタイルシートの設定
`app/assets/stylesheets/application.css` を `application.scss` にリネームし、Bootstrapのスタイルシートをインポートします。

“`scss
@import

RailsでCanCanCanを使った権限管理: スタッフは自分のデータのみ編集可能

## RailsでCanCanCanを使った権限管理

## 導入
Railsアプリケーションにおいて、ユーザーによって操作できるデータを制限する場合、`CanCanCan` は非常に有力なツールです。このガイドでは、`Staff` モデルが自身のデータのみを編集できるようにする設定方法を紹介します。

## 前提条件
この設定を行う前に、`CanCanCan` ジェムがアプリケーションにインストールされていることを確認してください。

“`bash
gem ‘cancancan’, ‘~> 3.0’
“`

そして、`bundle install` を実行します。

## Ability クラスの設定
`CanCanCan` は `Ability` クラスを使用して、誰が何をできるかを定義します。`Staff` が自分自身のプロファイルのみ更新できるように設定しましょう。

“`ruby
# app/models/ability.rb
class Ability
include CanCan::Ability

def initialize(user)
user

Playwright + Github Actions で CI上の local Web 環境に E2Eテストを実行する例 ( フロント + バックエンドAPI構成 )

# 課題

Github Actions で Playwright の E2E テストを実行するにはどうすれば良いか？

対象環境はGithub Actions 上の local 環境とし、毎回データベースはリセットして、実行単位ごとに依存しないテストがしたい

# 概要

たとえばサービスがフロント+バックエンドAPI構成の場合、特に変わったことをする必要はなく、以下の手順で実現できる

– データベースサーバーを起動する
– 初期データベースや初期データ ( seed ) を作成する
– バックエンドAPIサーバーをバックグラウンド起動する
– フロントをバックグラウンド起動する
– 起動済みのフロント ( localhost ) に対してPlaywright を実行する

起動したサービス同士は すべて localhost ( 127.0.0.1 ) で接続し合うことが出来る

# Github Actions Workflow の例

– 1個のジョブ ( jobs ) を使って直列的にワークフローを実行する。( 自分が試した中だとジョブを複数個に分けると環境が分離してし

【Rails】ActiveStorageにバリデーションを設定する方法

## Gemをインストールする

`active_storage_validations`をインストールします。

https://github.com/igorkasyanchuk/active_storage_validations

“`rb:Gemfile
gem ‘active_storage_validations’

# :dimension　または　:aspect_ratioを使用する場合には以下のいずれかを併せてインストールします。
gem ‘mini_magick’, ‘>= 4.9.5’
gem ‘ruby-vips’, ‘>= 2.1.0’

“`

“`terminal:ターミナル
bundle install
“`

## バリデーションを設定する

モデルにバリデーションを記述します。

“`app/models/user.rb
class User < ApplicationRecord has_one_attached :avatar validates :avatar, content_type: { in: %w[image/

【個人開発】チーム開発して最新技術に乗り換えた話【Next.js Rails】

## 目次

1. 結論
2. ターゲット
3. 筆者経験
4. 個人開発 vs チーム開発
5. どう変わったか
6. 技術アップデートの背景
7. アップデートのpros & cons
8. 技術に興味がある人向け
9. 結論

## 結論

:::note info
力を付けて結果出すなら**チーム開発**！
:::

## ターゲット

– 個人開発に興味があるエンジニア
– 新しい技術を学びたい人

## 筆者経験

個人開発特化Webアプリ ideee（アイディー）の制作者

“`
アイデアのブラッシュアップができる
面白いアイデアに出会える
“`

https://ideee.tech/about?utm_so

統合テストのエラー解決

## 問題
統合テストを実行したら以下のエラーが生じた。
“`
ERROR SiteLayoutTest#test_layout_links (0.22s)
Minitest::UnexpectedError:NoMethodError: undefined method `body’ for nil:NilClass

response.body

^^^^^
test/integration/site_layout_test.rb:7:in `block in ‘
“`

`test/integration/site_layout_test.rb:7`が指摘されている。

“`ruby:
require “test_helper”

class SiteLayoutTest < ActionDispatch::IntegrationTest test "layout links" do assert root_path assert_template 'articles/index' # ここでエラーが発生

Railsのテストで、Could not find tableエラーを解決する方法

# 概要

Railsのテストを実行した際に、Could not find table というエラーが起きる場合があります。

本記事では、このエラーがなぜ起きるのか、どう解決するのかを解説します。

# この記事で伝えたいこと

– Could not find tableのエラーが起きる理由
– Could not find tablエラーを解決する方法

# 実行したテスト

ユーザインスタンスを作成し、ユーザが有効かどうか検証する。

“`ruby
class UserTest < ActiveSupport::TestCase # 事前に、ユーザインスタンスに名前等の各値を設定する # setupメソッドは、テスト実行時に自動で実行される def setup @user = User.new(name: "Emi", email: "emi@a.com", password: "fooooo", password_confirmation: "fooooo") end test "should be valid" do assert @

ページを更新しないとform_withのボタンが押せない

rails6.1の環境でform_withを使った情報入力フォームを作成したときのことです。

フォームに付けた <%= f.submit '送信', class: "btn btn-info" %>のボタンをクリックしてもページ遷移せず、ページを更新したらなぜか押せるようになるという現象が起こっていました。

どうしてだろうと思い、form_withについて調べたり、
urlが違うのか？とか、単語を打ちミスしてるのか？とか
思いながら原因を探っているとすごく単純なミスを見つけました。

こちらが不具合が出ていた時の記述です。

“`html

注文情報入力

<%= form_with model: @order, url: '/orders/confirm' do |f| %>

支払方法

<%= f.radio_button

Rails 7.1.3.2でBootstrap5とFont Awesomeを使えるようにしよう！(初期設定)

まずなんでこの記事を書くに至ったか？について
→今までrails4.6でアプリ作っていてyarnを用いてBootstrapを有効化していたんですけども久しぶりにrailsをupdateしたら同じ方法でできない！！`importmap.rb`ってなんぞや？わけわからん。ってことで同じ悩みを抱えている人の目に入るように？（自分のため）残しとこうと！

# 下準備
まずはアプリのフレームワークをサクッと
“`sh:sh
$rails new Your_app_name
“`
この時点でターミナルの最後に
“`
Import Stimulus controllers
append app/javascript/application.js
Pin Stimulus
Appending: pin “@hotwired/stimulus”, to: “stimulus.min.js”
append config/importmap.rb
Appending: pin “@hotwired/stimulus-loading”, to: “stim

RailsのActive Recordでの安全な日付比較方法

## はじめに
Ruby on RailsのActive Recordを使用してデータベースから情報を取得する際に、特定の日付以降のレコードをフィルタリングする方法にはいくつかの書き方があります。ここでは、その中でもよく使われる方法と、その際に考慮すべきセキュリティリスクについて解説します。

## 1. プレースホルダーを使用する方法（推奨）
“`ruby
Reservation.where(‘date >= ?’, Date.today)
“`
この方法は、SQLインジェクション攻撃を防ぐために推奨されます。プレースホルダー（`?`）を使用することで、Active Recordが自動的に引数の値を適切にエスケープし、安全にクエリを実行します。

**利点:**
– SQLインジェクションのリスクを最小限に抑えることができます。
– Active Recordが自動的にデータのサニタイズを行います。

## 2. 直接変数を埋め込む方法（非推奨）
“`ruby
Reservation.where(“date >= ‘#{Date.today}'”)
“`
この書き方では、Ru

Docker×Rails×tailwindCSS×DaisyUI環境構築(開発環境編)

:::note info
未経験エンジニアの為効率的な記述でないもしくは間違っている場合があります。
気になった箇所はコメント頂けると幸いです。
使用OSはwindowsです。使用OSに関わるエラーはお答えできない場合があります。
:::

### 前提 Docker Ruby 3.2.2 Rails:7.1.3.2はlocalにinstall済です。

### Docker×Rails環境構築
アプリのディレクトリを作成し、ディレクトリに移動
“`
mkdir testRails
cd testRails
“`
ディレクトリ内でRailsアプリを作成、アプリ内に移動

:::note info
-d postgresql:PostgreSQL使用の方は追加
-j esbuild:tailwindCSSとDaisyUIの環境構築する為に必要です。
tailwindCSSのオプションを追加するとDaisyUIの構築に失敗するので注意
:::

“`
rails new my_app -d postgresql -j esbuild
cd my_app
“`
アプリ内で.env、e

Deviseを使用した複数モデル間のアクセス制御

## はじめに
この記事では、Ruby on Railsの人気認証ライブラリであるDeviseを使用して、異なるユーザーモデル間でのアクセス制御を実装する方法を解説します。特に、`Company` モデルがログインしている状態から、ログインせずに `Staff` モデルを編集する方法に焦点を当てます。

## 実装の試みと課題
初めに、`Staffs::RegistrationsController` を使ったアプローチを試みましたが、どうしてもログイン画面に遷移してしまい原因がわからないという問題に直面しました。

## 最終的な解決策
この問題を解決するために、`StaffsController` を利用して、`Company` モデルが `Staff` モデルのデータを安全に編集できるようにしました。以下はその具体的な実装です。

### 1. コントローラの設定
“`ruby
class StaffsController < ApplicationController before_action :authenticate_company_or_staff!, only:

enumを設定することで使用できるscope・メソッド

## enumとは
modelでの設定方法：
“`ruby: user.rb
class User < ApplicationRecord enum status: { pending: 0, approved: 1, rejected: 2 }, _prefix: :state end ``` この設定を行うことで、usersテーブルのstatusカラムに保存される整数値（0, 1, 2）に対して、それぞれpending、approved、rejectedという名前を割り当てることができます。データベース内の値が何を意味するのかが一目でわかりやすくなり、コードの可読性が向上させることができます。 また、prefixオプションを使用することで、同じモデル内に同名の属性が存在する場合でも名前の衝突を避けることができ、スコープやメソッドの名前が衝突することを避けることができます。また、コードの可読性も上げることが可能です。このため、基本的にはprefixを設定するべきだと思います。 ## enumを設定することで、使用できるようになる機能 ### scope ```ruby

Rails APIモードで投稿に紐づいているユーザー情報を取得する方法

# はじめに
現在、RailsとReactを用いてTwitterのクローンアプリを作成しています。
その中で、ツイートとユーザーを紐付け、誰がどの投稿をしたのかを関連づける必要がありました。今回はツイートに紐づけられているユーザ情報を取得する方法について紹介します。

# 問題点
Railsだけでアプリを作成する場合は“tweet.user“というように繋げて記述することができましたが、APIの場合はリクエストにユーザー情報を含めていないとReact側でその情報を取得することができません。
“`
module Api
module V1
class TweetsController < ApplicationController before_action :authenticate_api_v1_user!, only: %i[index create] def index tweets = Tweet.page(params[:page]).per(params[:limit]).order(created_at: 'DES

Railsチュートリアル第5章学習まとめ

## 5.1.2BootstrapとカスタムCSS
**個人的な学習メモまとめなので覚えてないところや重要だと思ったところをまとめていきます。**

HTML要素に多くのCSSクラスを関連付けることで、CSSベースのレイアウト設計に柔軟性をもたらす。これらのクラスは主にBootstrap、Twitterが開発したCSSフレームワークに由来。
Bootstrapは、HTML5アプリケーションに容易に優れたWebデザインとユーザーインターフェイスを提供。
サンプルアプリケーションには、カスタムCSSルールとBootstrapを組み合わせて使用し、レスポンシブデザインを実現した。これにより、どの端末からでもアプリケーションが適切に表示され、見栄えが良くなる。

:::note info
実際のclassにそれぞれBootstrap側で何に用いるのか定義付がしてあり
それらのClassを活用することで容易に優れたWEBデザインができるということみたいです。
:::

この辺は実践で改めて勉強って感じですね。

## 5.1.3パーシャル（partial）
個人的にRails学習していく中で一

Importmapを利用したJavaScriptの適切な管理とパフォーマンス向上

## はじめに
Rails 7では、JavaScriptバンドラーを使わずにJavaScriptを効率的に管理するために、Importmapが導入されました。Importmapを利用することで、必要なJavaScriptだけをページごとに読み込むことが可能となり、パフォーマンスの最適化が期待できます。この記事では、Importmapを使用してJavaScriptの読み込みをページ固有で管理し、不要なスクリプトの読み込みを減らす方法について説明します。

## Importmapの基本
Importmapは、ブラウザのネイティブなJavaScriptモジュールローダーを活用して、指定されたJavaScriptファイルをWebアプリケーションに直接インクルードする仕組みです。`config/importmap.rb` ファイル内でJavaScriptファイルを「ピン」することで、どのファイルがどのキーワードでアクセスされるかを定義します。

## Importmapの設定方法
まず、`config/importmap.rb` ファイルにJavaScriptファイルをピンします。例えば、特定

いいね機能のN+1問題について

## はじめに
現在、ポートフォリオとしてRailsを使って簡易的なSNSアプリを開発しています。
開発を進める中で、いいね機能の実装でN+1問題に直面して苦戦しました。
そこで、本記事ではN+1問題の基礎知識と自分の経験をまとめました。

## 目次
[1. N+1問題とは](#n1問題とは)
[2. N+1問題の対処法](#n1問題の対処法)
[3. いいね機能のN+1問題](#いいね機能のn1問題)

## N+1問題とは
### 概要
– データベースクエリを扱う際に発生することがあるパフォーマンスの問題
– 1つのクエリで親テーブルからデータを取得し、それぞれのレコードに対してさらに子テーブルからデータを取得する度にクエリを発行すること
– ループ処理の中で無駄なデータベースアクセスが発生し、アプリケーションのパフォーマンスが低下する
### 具体例
“`
# 投稿を全件取得して投稿したユーザー名を表示するコード
tweets = Tweet.all
tweets.each { puts _1.user.name }
“`
上記のコードを実行して得られる結果は何も問題ない

[個人開発] オリジナルの図鑑を作って共有できるサービスを作りました

## はじめに
はじめまして。フルコシと申します。
2023年1月よりプログラミングスクールRUNTEQにてRuby on Railsを中心に学習し、現在はエンジニア転職活動中です。
この度ポートフォリオとして「[図鑑クリエイト](URL “https://www.illustrated-books-create.com
“)」をリリースいたしましたのでご紹介させていただきます。

https://www.illustrated-books-create.com

このサービスは生物オタクの私が **「みんなちゃんと生き物見てる？」** という問いを皆さんに投げかけるため作成したものです。
見て・考えて・調べて・アウトプットすることで生き物可愛い！の先へ到達する助けになれば幸いです。

:::note warn
初学者です。
内容に誤りがある場合があります。
また、このサービスはPC操作推奨です。
:::

## サービス概要
### 図鑑クリエイト
URL: https://www.illustrated-books-create.com
GitHub: https://github