Rails関連のことを調べてみた2022年06月26日

【Rails】部分テンプレートに気をつけたい話

こんにちは。

この前部分テンプレート関連でちょっと想定外のエラーに出くわしたので、記事にしてみました。

実行環境は以下の通りです
* Ruby3.1.0
* Rails7.0.2.2

# どんな問題？
別リソースのコントローラからviewファイルをrenderするとき、renderするviewファイルの中で部分テンプレートを呼び出している時に発生する問題です。

簡単にいうと部分テンプレートの呼び出し方には少し注意しましょうということですが、文字の説明だけだととても分かりにくいのでイメージとコードで説明していきます

# 具体的なコードとエラー内容

例えば店舗の詳細ページで、ステータス変更の処理があったとします。
さらに、詳細ページには他の店舗一覧の表示をしているとします（部分テンプレートで実装）
↓以下イメージ
![7c1bc31c2571ec548451c3a1a2af3343.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/605568/3884fd9f-c525-0f53-5a70-

S3に保存した画像をRailsで取得する

## 結論
“`
s3_resource = Aws::S3::Resource.new(xxx)
s3_resource.bucket(‘BUCKET_NAME’).object(KEY_NAME).get.body.read
“`

## 背景
S3にアップロードしてある画像データを、RailsのViewで動的に表示したかった。

## 調べたこと
1. S3に画像がどう格納されているか
1. そもそもの画像データ

## S3にどう画像が格納されているか

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/UsingObjects.html
> Amazon S3 は、一意のキー値を使用して、必要な数のオブジェクトを保存できるオブジェクトストアです。これらのオブジェクトは 1 つ以上のバケットに保存し、各オブジェクトのサイズは最大 5 TB です。

つまり、S3にアップロードしている画像やテキストデータ = **オブジェクト**
オブジェクトにアクセスできるのが**キー**。
オブジェクトを保管しているの

【Rails】投稿へのいいね！表示方法をコードにふりがな振ってまとめておく

# 処理の順序
1. 自分のログイン状況を判別して
2. 自分がその投稿に「いいね！」したかによって
3. 表示とリンクを変える

# 出来上がりの目標
まずは出来上がりの見た目をイメージします。

# 準備したもの
この機能を実装するのに必要な最低限のファイルです

## モデル
**Postモデル** 投稿に関する情報を保存するdb
`id`カラム: 投稿id 投稿作成と同時に付与される

**Userモデル** ユーザーに関する情報を保存するdb
`id`カラム: ユーザーid 投稿作成と同時に付与される

**Likeモデル** いいね！に関する情報を保存するdb
`post_id`カラム: どの投稿へのいいね！か
`user_id`カラム: 誰によるいいね！か

## コントローラ
**postsコントローラ**
`show`アク

【Rails】「<投稿内容>…　続きを見る」という部分を作る。(truncateの実装とminitestの追加)

# はじめに
記事投稿サイトでよく見る「<投稿内容>…　続きを見る」という部分を作りたい。
なので作る！！！
| No | 項目 | 内容 |
|—:|————-|————|
| 1 | OS | Mac |
| 2 | Ruby | 2.6.3 |
| 3 | rails | 6.0.4 |
|4 | minitest| 5.11.3 |
|5| minitest-reporters| 1.3.8|
# 一覧表示テンプレートに文字数制限と”続きを見る”リンクを追加
truncateメソッドにより文字数制限をして表示する。
続きをみるはlink_toメソッドにより投稿の詳細ページ(showテンプレート)に飛ぶようにする。
“`app/views/microposts/index.html.erb

<%= trunc

Ruby Solargraphの導入に手こずった初心者です

# エラー
Gemfileに**gem ‘solargraph’を**記述してインストールしようとすると

“`ruby
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

current directory:
/usr/local/bundle/gems/jaro_winkler-1.5.4/ext/jaro_winkler
/usr/local/bin/ruby -I /usr/local/lib/ruby/3.1.0 -r
./siteconf20220624-1-yxgufs.rb extconf.rb
creating Makefile

current directory: /usr/local/bundle/gems/jaro_winkler-1.5.4/ext/jaro_winkler
make DESTDIR\= clean
current directory: /usr/local/bundle/gems/jaro_winkler-1.5.4/ext/jaro_winkler
ma

記事投稿の「タイトル」を作りたいよ〜投稿内容に加えて

# はじめに
SNS風のWEBアプリを元に、記事投稿サイトにしていきたい。
SNSだとタイトルは必要ないため、内容のみの実装していた。
そこで、投稿にタイトルを追加し、投稿内容と一緒にタイトルをつけてタイムラインに表示させるようにする。
| No | 項目 | 内容 |
|—:|————-|————|
| 1 | OS | Mac |
| 2 | Ruby | 2.6.3 |
| 3 | rails | 6.0.4 |
# カラムの追加
contentカラムのみ実装されていたので、titleカラムを追加する。
rails generate migration “Add「カラム名」To「モデル名」 カラム名:データ型
の順で投げるとchangeメソッドの中に自動でadd_columnを生成してくれる。

“`言語名:ターミナル
$ rails generate migration AddTitleToMicroposts ti

【Ruby翻訳】実務でリーダブルコードはどう役に立つのか(インデント、コメント)

# はじめに

どうも、未経験からエンジニア転職し半年が経ちました。
今回も前回に引き続きリーダブルコードを元に実務ではどう役に立ちそうか、逆にこれはやめた方が良さそうなど考えていきたいと思います。今回は適切なインデントとコメントに関してです。

https://www.amazon.co.jp/s?k=%E3%83%AA%E3%83%BC%E3%83%80%E3%83%96%E3%83%AB+%E3%82%B3%E3%83%BC%E3%83%89&adgrpid=56076398369&gclid=Cj0KCQjwzLCVBhD3ARIsAPKYTcQ9BABns25tc2X99NY7Ymv4OkuqwRPWtwHjkHrAft2axqEo7Pg51nkaAmmiEALw_wcB&hvadid=591886305975&hv

Ruby3(Rails7) / MySQL8 の構成をdocker-composeで構築する

# はじめに

Dockerコンテナでローカルに環境構築をしたので
作業内容をメモとして残します。

RailsAPIの挙動を確かめるために、構築したものです。

# 構成の概要
* Ruby: 3.1
* Rails: 7.0 (APIモード)
* MySQL: 8.0

# ディレクトリ構成

作業前にディレクト・ファイルを用意しておきます。

“`zsh:ディレクトリ

.
├── Dockerfile
├── Gemfile
├── Gemfile.lock
├── docker-compose.yml
└── entrypoint.sh

“`

# 設定ファイル

各種ファイルの設定していきます。

## docker-compose.yml

まずは複数コンテナを操作するdocker-composeから設定します。

ここではMySQLのパスワードを直書きしていますが
本来は環境変数をまとめる.envなどのファイルを
gitignoreで追跡除外して、GitHub上で
一般に公開されないように考慮するべきです。
（今回は行っていません）

“`yml:doc

達人プログラマーを読んでみて

# はじめに
– [達人プログラマー](https://www.amazon.co.jp/%E6%96%B0%E8%A3%85%E7%89%88-%E9%81%94%E4%BA%BA%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9E%E3%83%BC-%E8%81%B7%E4%BA%BA%E3%81%8B%E3%82%89%E5%90%8D%E5%8C%A0%E3%81%B8%E3%81%AE%E9%81%93-Andrew-Hunt/dp/427421933X)を読んだので気になった箇所の感想を述べながら自分なりの具体例を交えて解説していきます。
– 参考程度に自分のエンジニア歴は1年で Rails, React をメインに web アプリケーション を開発しています。

# 割れた窓は放置しない
– 一回の妥協が後に破綻を生むという話
– Typescript でいえばこう
“`typescript:hoge.ts
hogeMethod(a: any) {
// 何かの処置
}
“`
– 一回でも any で妥協すると無

表示速度を上げるための個人的な考察　N+1問題編　

N+1問題：データベースからデータを取り出す際に、大量にSQLが発行されて
動作が遅くなってしまう問題のことです。SQLとはデータベースとのやりとりをする際に用いるデータベース型言語(プログラミング言語ではないので注意)です。

実際にN+1問題が発生している様子を見ていきましょう。
N+1問題は1対多のアソシエーションの場合に多くみられるので、投稿一覧ページを見ていきたいと思います。


投稿一覧ページを表示した際のターミナルです。
見てわかる通り、多くのSQL文が発行されています。
いろいろな機能をつけていてSQL文が複雑になっているので簡単な例を用いて説明します。

def index
@posts = Post.all #データベース上から投稿データを取得
end

投稿一覧ページに関するメソッド定義で

【rails 】他ユーザーが作成したルームに後から参加する、誰がルームを作成したかわかるようにする

テックキャンプ現役受講生がWebアプリを開発するのDay９です。アプリ完成の目標をとりあえず6月末までとしていますので、残り1週間です。終わる気がしません。しかし、嘆いても仕方ないので、明日以降ももやるべきことをコツコツやっていくのみです。さて、今日は他者が作ったルームに、後から他のユーザーが参加する方法について「DB設計、アソシエーション、コントローラーへの記述」の３部分に分けてアウトプットします。

※当方はエンジニア初心者ですので、もっとスマートな方法があるかもしれません。その点ご容赦ください。

# 今回のシチュエーションの設定
登場するテーブルは４つです。Userとroom、User_room、Ownerの４つです。
Userはroomを作成することができ、Roomの中ではチャット等の会話ができる空間を想定しています。
roomを一番はじめに作ったユーザーはOwner（オーナー）として登録し、Ownerにはroomの名前変更等の権限を与えられるものとします。
User＿roomはUserとroomの中間テーブルです。下図を見ていただくとイメージが湧きやすいと思います。
# D

Herokuへのデプロイ時のエラー解決

初めてのHerokuへのデプロイ時にエラーが出てしまったので解決までの流れをメモ。

# エラー内容
“`console
% git push heroku app_name
“`
上記コマンドでアプリをHerokuへデプロイしようとしたところ下記のエラーとなった。
“`console
Enumerating objects: 130, done.
Counting objects: 100% (130/130), done.
Delta compression using up to 8 threads
Compressing objects: 100% (113/113), done.
Writing objects: 100% (130/130), 158.84 KiB | 9.34 MiB/s, done.
Total 130 (delta 3), reused 0 (delta 0), pack-reused 0
remote: Compressing source files… done.
remote: Building source:
remote:
rem

rspecのテストでエラー

以下のエラー内容が出た。

Failure/Error: raise BrowserNotFound, ‘Failed to find Chrome binary.’

Webdrivers::BrowserNotFound:
Failed to find Chrome binary.

おそらくwin環境下で起こる環境構築エラー。

# 環境
os:win10(WSL2 ubuntu)
言語:ruby

# 解決策
google chromをインストールしただけ
インストール手順は以下を参考
https://astherier.com/blog/2020/08/install-google-chrome-on-wsl2/

bundle installしたときにUnfortunately, an unexpected error occurred, and Bundler cannot continue.が出た時の対処法

環境
– MacOS Montrey 12.4
– Rails 6.0.5
– Ruby 2.7.6
– Bundler 2.3.16

## エラー内容
“`
$ bundle install
“`

不可解なエラーの発生
“`
— TEMPLATE END —————————————————————-

Unfortunately, an unexpected error occurred, and Bundler cannot continue.

First, try this link to see if there are any existing issue reports for this error:
https://github.com/rubygems/rubygems/search?q=undefined+method+%60full_name%27+for+nil+NilClass&type=Issues

If there aren’t any reports fo

cannot connect to the docker daemon at unix:///var/run/docker.sock. is the docker daemon running? の解決方法

## 前提
__環境__
　Ruby 2.7系
　Rails 6.1系

## 結論
デスクトップからDockerのアイコンをクリックする等して再起動したら解決しました

## 経緯
1. docker-compose up でサーバーを立ち上げようとする
2. A server is already running. と表示され立ち上がらない
3. 以下コマンドを実行
lsof -wni tcp:3000
4. 実行結果の「COMMAND」に「com.docke」と書いてある行のPIDをコピーして以下コマンドを実行（今思えばこれが誤りかと）
kill -9 xxxxx（コピーした数字）
5. docker-compose up
5. cannot connect to the docker daemon at unix:///var/run/docker.sock. is the docker daemon running?と表示される

## 試したこと
“`
% sudo service docker stop
% sudo service docker start
“`

RailsのWebpackerがコンパイルしているのにJavaScriptを実行してくれない、ホットリロードが効かない

# はじめに

以前、Dockerを利用したRails+Webpackerの環境を作成したのですが、改めて作成する機会がありやってみたところ、webpackでつまづいてしまったのでその個所をまとめます。

# 問題

## 1. Webpackを設定したがコンパイルが行われない

`/bin/webpack-dev-server`を起動したところ、`public/packs/manifest.json`ができるけれども、`public/packs/js`のディレクトリは作成されなかった。また`/bin/webpack`を実行するとコンパイルが実行されていたが、なぜかJavaScriptは読み込まれておらず、うまくコンパイルが行われていないようだった

以下の記事をみつけた

https://qiita.com/undrthemt/items/52a557cb937d133b7140

`./config/webpacker.yml`のホストが`localhost`になっていたので、docker-compose.ymlのwebpackerコンテナの名前に変更することでJavaScript

【Rails】他ユーザーの投稿やコメントを削除、他ユーザーの投稿を編集といった操作ができる状態になっていた件

プログラミングを初めて3ヶ月。
備忘録としてつまづいたところを記載し、アウトプットツールとして活用していきます。

ポートフォリオを作成し、学習段階で身につけたスキルだったはずですが
うっかり漏れていてメンターから指摘を受けたので再発防止、備忘録の為、記載します。

# 他ユーザーの投稿やコメントを削除、他ユーザーの投稿を編集といった操作ができる状態になっていた。
編集ページのurlを直接打ち込んだり、削除リンクを検証ツールから書き換えることで可能なので注意しなくてはならない。
編集や削除といった操作を実装する場合、ログインユーザーのデータなのかチェックを挟む必要がある。

# 直打ち禁止のコード

直打ち禁止対象のcontrollerを開き
（今回は、posts_controller.rb）

“`ruby:posts_controller.rb
class PostsController < ApplicationController before_action :authenticate_customer!, except: [:show, :index] before

中間テーブルへのデータの保存の仕方

今日は現役テックキャンプ生のアプリ開発Day8分を記述します。今回は中間テーブルへのデータの保存の仕方について記述します。まず、中間テーブルの説明から始めます。

# 中間テーブルとは？
テーブル間で多対多のアソシエーションが発生する時、間に交通整理員を置くようなイメージで中間テーブルというものを作成します。中間テーブルに関しては下のメチャクチャわかりやす記事を参考にしてください

https://qiita.com/Lotuswhite/items/0794b468ecc627e01ae1

# 今回のDB設計
今回は私自身のアプリ開発で利用しているUserとRoom(userが参加する場所)のテーブルを例に説明します。２つのテーブルのアソシエーションを確認します。
・userは複数のroomに参加できるので、userは複数のroomを持っていると言えます。
・roomには複数のuserが参加しているので、roomは複数のuserを持っていると言えます。
以上より、userとroomは多対多のアソシエーションなので、中間テーブルとしてuser_roomを作成します。

# マイグレー

【個人開発】ITエンジニアの経歴書

# 作ったもの

ITエンジニアの経歴書を作成するWebツールを作りました。
登録お待ちしております。
まだ、テスト中でバグだらけですが、たくさんの方にお使いいただけると嬉しいです。

こちら -> [KEIREKI(仮名)](https://keireki-it-engineer.com)

## 経歴書の作成例
経歴書の作成例リンクは [こちらから](https://keireki-it-engineer.com/users/test_user)

– スクショ

# 作った経緯

今月で勤めている会社を退職することになり、次の職場を探すにあたりスキルシートを書いていたんですが中々良いフォーマットがなくて困ってました。
それなら、ついでに作ってしまおう! ということで作ってしまいました。

# 使った技術

## フロントエンド
– 言語
–

【Rails】javascriptで入力フォーム(textarea)の高さを自動で変えたいよ

# はじめに
textareaの高さが固定の場合、改行していくと前の文章が埋もれていってしまい、かなりUXが悪い。
これを改善するために、Javascriptを導入し、改行に合わせて高さが自動で変わるようにしていく。
意外と一連の流れを記載している記事が少なかったため、かなり殴り書きだが投稿する。ただし、自身が実施した流れのため環境によって要不要がある。
使用環境は以下の通りである。
| No | 項目 | 内容 |
|—:|————-|————|
| 1 | OS | Mac |
| 2 | Ruby | 2.6.3 |
| 3 | rails | 6.0.4 |
| 3 | turbolinks| 5.2.0 |
| 3 | webpacker | 4.0.7 |

**変更前(右のスクロールバーが出る)**
![gif2.gif](https://qiita-image