Rails関連のことを調べてみた2023年07月16日

誹謗中傷が機能しないSNSを個人開発してみました！「紹介編」| Rails7 x TailwindCSS x Render.com

注：本記事はzennの記事からの転載です。
## 概要
昨今、SNSを通じた誹謗中傷が起こっていますが、それらをどうにか起こさないSNSができないものかと思い自分なりに考え、業務未経験ですが作ってみました！今回は、その簡単な紹介記事です。良ければ読んでみて、そして遊んでみてください！また、意見ももらえるととても嬉しいです！

## 使用技術
– Ruby 3.1.2
– Rails 7.0.6
– 各種Gem （ログインなど）
– Tailwind CSS （デザイン周り）
– PostgreSQL （DB）
– Render.com （デプロイ先）

## 作ったもの

https://gen3-kotonoha.onrender.com/
“コトノハ”というwebアプリを作りました。

## 特徴
未熟な私ではありますが、コトノハでは主に機能面で差別化を測っています。既存のアプリ・サービスとは違う点を、表

【Rails】DecoratorとHelperの特徴・違い

# Decoratorとは？

– デザインパターンの一つである。
– デザインパターンとは、汎用的な設計パターンのことで、いろんなプログラムで再利用できるのが特徴。
– Decoratorはインスタンスに対して動作するため、各インスタンスに固有の挙動を持たせることができる。
– draperというgem（ライブラリ）やActive_Decoratorを用いることで使用できる。

# Decoratorの使用例

– モデルとビュー、どちらにも記述できるロジックがある場合に、あいだにDecoratorを定義する事で、モデルをスリムにできる。
– つまり、Fatモデルの解消などの効果がある。
– 例えば、日付フォーマットを変更するロジックを実装する際などに利用できる。
– モデル・ビュー、どちらにも記述することは可能だが、Decoratorを間に定義し、役割を分散させることでコードをスッキリできる。

詳しいコードはこちらの記事が参考になります。
【Rails入門】ViewとModelの間にDecor

Rubymineの2023.1.xでdebugできない問題の対応

## 背景
Rubymineのバージョンを2023.1.xに上げて、Rubymin上でデバッグを実行しようとすると、debug用gemが入っていないというエラーが繰り返し表示される。
指示に従いインストールしても何もおきない。
既にリリースされてから、数ヶ月経っていますが、日本語での情報があまりなかったので、書いてみました。

## 環境
macOS 13.4(intel, m1)
ubuntu 22.04LTS
docker

Gemfileにdebaseとruby-debug-ideが入っている

## 原因
Gemfileにdebaseとruby-debug-ideを記載していると起きる模様
直接的な原因は深く調べきれていないのでご容赦ください。

## 対応策

### その１
rubymineのバージョンを旧バージョンに戻す
元も子もないですが、以前のバージョンで動いていた方は、旧バージョンに戻したら問題ないです。

https://www.jetbrains.com/ja-jp/ruby/download/other

いいコード悪いコードまとめ３章クラス設計

原則:クラスが単体で正常動作するよう設計する
これはSOLID原則のSingleResponsibilityの考え方かな？

https://qiita.com/YokoYokoko/items/347101166fb81d301c45

「クラス設計とはインスタンス変数を不正状態に陥らせないための仕組みづくり」である。

クラスをインスタンス化して、それを他のクラスに初期化してもらったり、データの入力をチェックしてもらうようではいけないわけで、クラスは必ず自分の身は自分で守ると言う自己防衛責務を全てのクラスがそなえるわけです。

## コンストラクタで確実に正常値を設定する
これを避けるために２章でも出てきましたが、コンストラクタで初期化することが大切です。

例えば、`Money`クラスを作成するときの基本形は以下のような形ですが、これは問題があります。
なぜなら、引数に不正な値が渡ってきてもエラーが発生しないからです。
“`
class Money
attr_accessor :mount, :currency

def initialize(mount, cur

【Rails】投稿のソート機能（kaminari)

投稿の表示順を変えるソート機能を実装したのでまとめておきます。

完成するとこんな感じです。
[](https://gyazo.com/c68701c41d8fa158beb4b963a2d9316a)

# kaminariをインストール
gemファイルに記載しbundle install
“`
gem ‘kaminari’
“`

# モデル
“`ruby
scope :latest, -> {order(created_at: :desc)} #新しい順
scope :old, -> {order(created_at: :asc)}　　#古い順
scope :random, -> { order(‘RAND()’) } #ランダム
“`

# コントローラー
“`ruby
def index
　　@posts = Post.all
if params[:latest]
@posts = Pos

いいコード悪いコードまとめ２章設計の初歩

## 省略せずに意図が伝わる名前を設計
“`
player #pとか書いちゃうと自分は分かるかもしないが、他の人は分からない。
damage #dも同様

状況によってはplayerやdamageだけでは分からないので、読み手が理解しやすい配慮をする。
“`

## 変数を使い回さない、目的ごとの変数を用意する
以下のように`damage`という変数を使い回して、再代入するのはNG
“`
damage = player_attack
damage = damage – something
“`

## 意味のあるまとまりでメソッド化する
以下のような記述が１つのメソッドに混在していると可読性や保守性においてよろしくない。
したがって、意味のあるまとまりでメソッド化することが重要
“`
プレイヤーの攻撃力を合算する
敵の防御力を合算する
ダメージ量を評価する
“`

## 関係しあうデータとロジックをクラスにまとめる
いろいろなところにメソッドを書いていると可読性が落ちてしまう。そのため、関連し合うデータやロジックは1つのクラスにまとめること。

また、クラス化するときに重要

OpenAPIを業務で一から書いてみた時の反省

RailsをAPIとして利用する際のAPIドキュメントを業務で作成したのだが、思っていたより時間が掛かったので反省も含め書いていく。

—
### 1.色々調べてみた
最初、1から書くのは億劫だし楽に書く方法を調べたところ、GemにRspecから生成する方法があることを知り試してみた。

https://qiita.com/noguri/items/4d60b7bf509bf90b3425

それっぽいものは直ぐに生成されたから便利ではあったが、Rspecが全てのControllerで書かれている訳ではなかったので、書かれてないControllerを探したりで時間が掛かってしまった。(素直に急がば回れをするべきだった。反省。)

—

### 2. 書いてはみたものの…

その後、あまり理解もしてないままOpenAPIの記法に従ってymlを書いていくが、理解してないため遭遇するエラーの解決速度が如何せん遅い。

この手のものは、全体から細部に書くべきだが、Pathを列挙することもなくただひたすら上から順々に書いてしまった。

“`yml
### 今回のよくない進め方の例

Railsのクエリ文字とparams

今まで漠然と理解していたが整理のため記載

クエリパラメーター

“`ruby
http://example.com/line/latest_message?user_list=U2525
“`

paramsのkeyであるuser_listにはU2525が入る

“`ruby
class Line::LatestMessageController < ApplicationController def index params[:user_list]) #params[:user_list] == U2525 end end ``` またinputタグのname属性の文字がURLのqueryのkeyになる ```html
“`

Railsアプリ作成の上で大まかな進め方

# DBの構造を考える

1.DBの基盤となるテーブルを考える
　どんなテーブル構造にするか？また、そのためにはどんなカラムの追加が必要か？(例:name,emailなど)
　内容がまとまったら、まず`rails db:create`でデータベース自体を作成します。ただし、この段階ではまだテーブルは作成されていません。

2.モデルを作る（命名規則は***最初の文字が大文字の単数形***）
　基本構文は以下の通りです。
　`rails g model モデル名 カラム名:データ型`
　例えば以下のようになります。
　`rails g model Content name:string email:string`
　rails g modelを実行するとモデルと同時にマイグレーションファイルも生成されます。なのでrails g migrationは実行不要です。もし、先にマイグレーションファイルを作成してしまったら
`rails g model モデル名 –skip-migration`でmodelだけを作成し、マイグレーションファイルは作成しないようにしてください

3.rai

コミットの直前にrubocopを自動実行する

Railsアプリケーションの開発において、「よしできた、git push!」したあと、GithubでPRをみるとCIでバツマークがついていた。チェック結果をみたらrubocopでフォーマットエラーを吐いていた・・なんて経験はありませんか？　私はあります。

これを解決する方法が実はありました。

## 前提とする読者
– Railsでアプリケーションを開発している人
– CI環境が整っていて、rubocopを使っている人

## 簡単な方法
gitコマンドでは、フックという仕組みがあり、git commitコマンドの直前に自前のプログラムを実行させることができます。開発中のディレクトリの中に、`.git/hooks` というディレクトリがあるはずです。
`.git/hooks/pre-commit` というファイルを準備して、そのなかで

“`
bundle exec rubocop -a
“`

を書いておきます。
（コミットの前に　`.git/hooks/pre-commit`　ファイルがそのまま実行されるので、`chmod +x .git/hooks/pre-commit`

共同開発　git　最初のトピックブランチの切り方

### :shamrock: 前提
:point_up:**deviceを実装します。**

・**mainブランチ**は常にリリース(デプロイ）できるような状態にある。
・**developブランチ**を統合ブランチとする
・**トピックブランチ**は全て**developブランチ**から派生させる。

_____
### :shamrock: 作業前のトピックブランチの切り方
:point_up:トピックブランチは基本的に機能、バグのようなタスクごとに切ります。

・統合ブランチ（develop）に移動
・統合ブランチである**developブランチ**から　トピックブランチ(**install-devise**)を作成する。

:::note warn
以下のように必ずトピックブランチを作成してから作業を行う

“`
$ git checkout develop
$ git checkout -b install-devise
“`
:::
:star:**作業を行う**
今回はdeviceを追加する
Gemfileに以下を追加
“`Gemfile
gem ‘devise’

Ubuntuで「Ruby on Railsチュートリアル」の実行環境を作る

# はじめに
Ubuntuに「[Ruby on Railsチュートリアル](https://railstutorial.jp/ “Ruby on Railsチュートリアル”)」の実行環境を整えます。
普通にクラウドで提供されてるものを使ってもいいのですがやはり使い慣れた環境で学習したいためこの記事を作成しました。

# 実行環境
OS：Ubuntu22.04.2 LTS
Ruby on Railsチュートリアル：第７版
Ruby：3.1.2(Ruby on Railsチュートリアルに合わせてます)
Rails：7.0.4(Ruby on Railsチュートリアルに合わせてます)
Bundler：2.3.14(Ruby on Railsチュートリアルに合わせてます)

# インストール
## 必要なツールをダウンロード
参考：[(Ubuntu)Ruby on rails 6.0 環境構築](https://qiita.com/Gushi_maru/items/f3b5cc43e135e678085f)
ほぼ上の記事通りです。
バージョンとインストールするものが若干異なるだけです。

“

共同開発　git 初期設定

### :cherry_blossom:はじめに
共同開発のためのgitの使い方を自分用に作成します！
リポジトリを作成しているところからです。

:apple:がついているものは代表者以外のメンバーが行う作業です。
ついていないものは代表者１人の作業です。
_____
### :shamrock:アプリケーションを作成
“`
$ rails new アプリ名 # 新規アプリケーション作成
$ cd アプリ名 　　　　　　　　　　　　 # アプリケーションに移動
“`
.gitignoreに管理から外すファイルを記述する
“`.gitignore
/db/*.sqlite3
/db/*.sqlite3-jaurnal
“`
:question: **gitignoreとは？**
コンピュータのプログラムを作るときに使うツール、Gitで、特定のファイルやフォルダを無視するように指示するためのファイルのことを指します。

プログラムを作るときには、試行錯誤の結果や秘密の情報、使ったツールが自動で作るファイルなど、Gitで管理したくないものがたくさんあります。これらを

ログアウト実行でNo route matches [GET] “/logout”エラー 解決方法

# 実施環境
ruby “3.1.4”
gem “rails”, “~> 7.0.3”, “>= 7.0.3.1”
gem “sorcery”, “~> 0.16.3”
Gemfileより

# エラー内容

ログアウト機能追加の課題実施中、
ログアウトボタンを押すとNo route matches [GET] “/logout”エラーが発生。

### エラー画像

### エラーログ
“`
Started GET “/logout” for 172.20.0.1 at 2023-07-14 10:58:08 +0900
Cannot render console from 172.20.0.1! Allowed networks: 127.0.0.0/127.255.255.255, ::

本番環境をdockerで立ち上げる

“`
backend:
build:
context: ./backend
# productionを指定する
command: bash -c “bundle exec rails s -p 3000 -e production -b ‘0.0.0.0’”
volumes:
– “./backend:/app”
environment:
POSTGRES_USER: $POSTGRES_USER
POSTGRES_PASSWORD: $POSTGRES_PASSWORD
RAILS_MASTER_KEY: sdfhsfdhsdddddgdgdfgdgdgdfgdfgdfg
SECRET_KEY_BASE: sdfhsfdhsdddddgdgdfgdgdgdfgdfgdfg
　　　　　#backend/config/credentials/production.keyの中身↑

ports:
– “$VUE_APP_API_PORT:

rails credentials

EDITOR=”vi” bin/rails credentials:edit -e production
EDITOR=”vi” bin/rails credentials:show -e production
https://qiita.com/NaokiIshimura/items/2a179f2ab910992c4d39

Rails + ViewComponentによるコンポーネント指向UI開発

## UI開発におけるコンポーネント指向とは

– UIを独立した再利用可能な部品（コンポーネント）に分割
– コンポーネントにHTML(DOM)、ロジック(JavaScript)、CSSをカプセル化

React、Vue.js、Angularなどフロントエンドの主要なViewフレームワークで採用されている手法

**これをRailsに輸入したいというのが今回の話題**

## コンポーネントの例

### 検索ボックス（SearchBoxコンポーネント）


– SearchBoxコンポーネントはTextInputとSubmitButtonを包含
– SubmitButtonのスタイルは上位のButtonコンポーネントで定義される
– アトミックなコンポーネントを入れ子に構成して大きなコンポーネントを組み立てていく

## コンポーネント指向UIのメリット

#### 再利用性
コンポーネントを他の機能や他のシステムで再利用する

フリーランス歴20年の強強エンジニアからのガチコードレビュー集

# はじめに
こんにちは、[まつけん](https://twitter.com/matsuken_web314)です。
早いもので、Webエンジニアになって、**10ヶ月**経とうとしています。
先月末、僕の職場に参画していたフリーランス歴20年の強強エンジニアCさんが卒業されました。（以降**Cさん**と称します）

Cさんには、いつも迅速かつ丁寧なレビューをしていただいてました。
たまに補助で僕のプルリクにコミットを積んでもらうことなどもあり、お世話になった記憶が大半です。

今回はそんなCさんから受けたコードレビューから、今後どう改善していくのかアウトプットして学びを深めたいため、こちらの記事を書きました。

ペアプロしている時の参考になったこともおまけで書いてます。

:::note info
**この記事が参考になりそうな読者**
– Rubyの「アンチパターン」から良いコードを学びたい人
– エンジニア1年目がどんなコードレビューを受けているのか知りたい人
:::

※こちらの記事に出てくるコードに関しては全て`Ruby`です。実務で学んだことなので、出てくるコードは

【Rails7】rails/request.jsでAjax制御する

表題通りです。RailsでAjax制御するには今まではjqueryを使ったりしてきました。Rails6になってからrails-ujsというライブラリが推奨され、それによってイベント発火して対応したのですが、このrails-ujsはRails7で非推奨となってしまいました。

代わりに実装された同期制御用のスクリプトturboですが、これはどうも不具合が多く、評判が今ひとつ芳しくない上にRansackとの相性もあまり良くありません。何よりテンプレートやコントローラーで色々書き換えが必要になるのが面倒です。そこで代わりの非同期通信手段を調べていたところ、**rails/request.js**というものも提供されたみたいで、これを使ってAjax制御できるみたいです。

Githubの公式マニュアル
– [rails/request.js](https://github.com/rails/request.js)
Qiita内に触れている記事
– [【Rails7】Ajaxリクエスト時にCSRF tokenを含める（おそらく）公式のやり方](https://qiita.com/gnattal

Railsで入力フォーム等にバリデーションを設定する

# そもそもバリデーションとは
入力フォームなどでユーザーが故意または過失のもと誤った情報を入力した際に、入力内容をそのまま登録するのではなく、エラーをかえすこと。
これにより、誤情報を未然に防ぐほか、攻撃者からのXSSなども防ぐことが可能になる。

# 実装例
RailsのModelに記述します。

– 空データを登録できないようにする
“`ruby:member.rb
class Member < ApplicationRecord validates :name, presence: true end ``` - 文字数を制限する。 ```ruby:member.rb class Member < ApplicationRecord #長さの上限を50文字に設定 validates :name, length: { maximum: 50 } #長さの下限を2文字に設定 validates :name, length: { minimum: 2 } #長さの範囲を2-50文字 validates :name, lengt