f@ctor

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

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

Rails7でtailwindcss-stimulus-componentsを使用したタブ化

# はじめに
個人開発のアプリ制作をしています。
調べながらの実装になるので、メモとして記載しています。

※注意※
プログラミング学習中の初心者です。
記述に間違いがあれば、ご指摘いただけますと幸いです。

# 環境
Mac M1
rails 7.0.7.2
ruby 3.2.0
Node.js 20.2.0
Yarn 1.22.19

# やったこと

## ①tailwindcss-stimulus-componentsのインストール
“`
$ yarn add tailwindcss-stimulus-components
“`
npmを使用している場合は、下記でもインストール可能です。
“`
$ npm install tailwindcss-stimulus-components
“`
## ②importmapに記述を追加
下記コードを打つと、importmapにtailwindcss-stimulus-componentsが追加されます。
“`
$ bin/importmap pin tailwindcss-stimulus-components
“`

元記事を表示

[Docker]docker-composeでrailsアプリをコンテナ化する

## はじめに
既存のrailsアプリをdocker,docker-composeを使用してコンテナ化する方法について解説します。
## 前提条件
– ローカル環境
“`
pc: m1 mac
os: Venture 13.3.1
“`
– 各種version
“`
Docker: 24.0.7
Docker Compose: v2.23.3
Ruby: 3.22
Rails: 7.0.6
PostgreSQL: 12.17
“`
– 必要知識
– 基本的なDockerの知識
– railsのコマンド

## 手順
### プロジェクトをローカルにコピーする
※既にローカルにプロジェクトがある場合は[Dockerfileを用意する](Dockerfileを用意する)までスキップして下さい。

まずはコンテナ化したいプロジェクトをGitHubからローカルにクローン(コピー)しましょう。
“`bash
$ git clone <リポジトリパス>
“`
以降の作業はコピーしたディレクトリで行うため`cd`コマンドで移動します。
“`zsh
$ cd <ローカル

元記事を表示

【Rails】O/Rマッピング時の中間テーブル、わかりにくかったので簡単に調べた。

:::note warn
**注記**
この記事の投稿者はRuby on Rails初学者であり、自身の学習の備忘録目的で記事投稿を行なっております。
情報の正確さには最大限注意をしておりますが、もし誤り等がございましたらお知らせいただけますと幸いです。
:::

ご覧いただきありがとうございます！
**Ito** と申します！
Ruby on Rails初学者です。
　　
タイトルの通り
**「RailsでのO/Rマッピング時、中間テーブルがどのように変換されているのか？」**
個人的にわかりにくいと感じたので、端的にまとめてみました。

## 場面設定
タグ投稿機能を持った掲示板アプリを想定しています。

`Post`モデルが`Tags`モデルと関連付けされています。
`posts`テーブルと`tags`テーブルは`post_tags`テーブルを介して多対多の関係です。

### モデル
“`rb:app/models/post.rb
class Post < ApplicationRecord has_many :post_tags has_many

元記事を表示

【Rails】StimulusでBootstrapのTooltipを動かす

今回は、Stimulusを使用してBootstrapのTooltipを動かす方法について紹介します。

https://getbootstrap.jp/docs/5.3/components/tooltips

## ツールチップとは？
ツールチップは、ユーザーが要素（ボタンや画像など）にホバーしたりクリックしたりした際に表示される、小さな説明文の吹き出しです。これは、要素単体では意味が不明確な場合に特に有用です。

![tooltip.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/849608/092d039b-7633-9a1c-7902-437a676722c1.png)

## インストール方法
まず、`bootstrap`と`popperjs`が`node_modules`に含まれているかを確認してください。もし存在しなければ、`yarn add bootstrap`または`npm install bootstrap`を実行してインストールしましょう。

## Controllerの作成
To

元記事を表示

An executable bug report for Action Cable

So this is kind of last minute, but I thought it would be interesting to try and create a [bug report template](https://edgeguides.rubyonrails.org/contributing_to_ruby_on_rails.html#create-an-executable-test-case) for Action Cable.

After having wasted maybe an hour or so trying to parse the browser logs, only to realize that Chrome prepends the file/url and line number before simply `[object Object]` style — I ended up just writing to a `